@posiwise/admin-module 0.0.113 → 0.0.115

package/fesm2022/posiwise-admin-module.mjs

@@ -39,7 +39,7 @@ import { AppAdmin, AdminService, AdminDataService } from '@posiwise/admin-module
 import { AppBaseComponent } from '@posiwise/app-base-component';
 import * as i1$1 from '@posiwise/common-services';
 import { PermissionService, PrimeNgHelper, FormHelperService, SubscriptionService } from '@posiwise/common-services';
-import { QuillHelper, ValidateForm, appendQueryParam } from '@posiwise/utils';
+import { ValidateForm, appendQueryParam, QuillHelper } from '@posiwise/utils';
 import * as i10 from '@posiwise/directives';
 import { DirectivesModule } from '@posiwise/directives';
 import * as i12 from '@jsverse/transloco';
@@ -72,8 +72,6 @@ class TermsOfServiceDetailsComponent extends AppBaseComponent {
         this.adminService = adminService;
         this.submitted = false;
         this.form = AppAdmin.getTosForm();
-        QuillHelper.init();
-        this.editorConfig = QuillHelper.getEditorConfig();
     }
     ngOnInit() {
         this.route.params.subscribe(params => {
@@ -112,7 +110,7 @@ class TermsOfServiceDetailsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TermsOfServiceDetailsComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: TermsOfServiceDetailsComponent, selector: "pw-terms-of-service-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          routerLink=\"../../tos\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n          <span>Terms of Service: {{ data?.title ? data?.title : 'Add New' }}</span>\n        </h3>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label>{{ 'Label.Title' | transloco }}\n                  <span class=\"text-danger\">*</span></label>\n                <textarea type=\"text\"\n                  class=\"form-control\"\n                  rows=\"2\"\n                  formControlName=\"title\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\"></textarea>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label class=\"d-block\">{{ 'Label.Privacy' | transloco }}\n                  <span class=\"text-danger\">*</span></label>\n                <quill-editor [modules]=\"editorConfig\" class=\"d-block\" [styles]=\"{ height: '450px' }\"\n                  formControlName=\"privacy\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['privacy'].errors, 'w-100': true  }\">\n                </quill-editor>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label class=\"d-block\">{{ 'Label.Tos' | transloco }}\n                  <span class=\"text-danger\">*</span></label>\n                <quill-editor  [modules]=\"editorConfig\" class=\"d-block\" [styles]=\"{ height: '450px' }\"\n                  formControlName=\"tos\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['tos'].errors, 'w-100': true  }\">\n                </quill-editor>\n              </div>\n            </div>\n\n            <div class=\"col-12 text-end mt-3\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                class=\"btn btn-primary\"\n                *rbacAllow=\"'SubscriptionAdmin'\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: TermsOfServiceDetailsComponent, selector: "pw-terms-of-service-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          routerLink=\"../../tos\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n          <span>Terms of Service: {{ data?.title ? data?.title : 'Add New' }}</span>\n        </h3>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label>{{ 'Label.Title' | transloco }}\n                  <span class=\"text-danger\">*</span></label>\n                <textarea type=\"text\"\n                  class=\"form-control\"\n                  rows=\"2\"\n                  formControlName=\"title\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\"></textarea>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label class=\"d-block\">{{ 'Label.Privacy' | transloco }}\n                  <span class=\"text-danger\">*</span></label>\n                <quill-editor class=\"d-block\" [styles]=\"{ height: '450px' }\"\n                  formControlName=\"privacy\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['privacy'].errors, 'w-100': true  }\">\n                </quill-editor>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label class=\"d-block\">{{ 'Label.Tos' | transloco }}\n                  <span class=\"text-danger\">*</span></label>\n                <quill-editor  class=\"d-block\" [styles]=\"{ height: '450px' }\"\n                  formControlName=\"tos\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['tos'].errors, 'w-100': true  }\">\n                </quill-editor>\n              </div>\n            </div>\n\n            <div class=\"col-12 text-end mt-3\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                class=\"btn btn-primary\"\n                *rbacAllow=\"'SubscriptionAdmin'\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -122,7 +120,7 @@ __decorate([
 ], TermsOfServiceDetailsComponent.prototype, "onSave", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: TermsOfServiceDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-terms-of-service-details', template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          routerLink=\"../../tos\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n          <span>Terms of Service: {{ data?.title ? data?.title : 'Add New' }}</span>\n        </h3>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label>{{ 'Label.Title' | transloco }}\n                  <span class=\"text-danger\">*</span></label>\n                <textarea type=\"text\"\n                  class=\"form-control\"\n                  rows=\"2\"\n                  formControlName=\"title\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\"></textarea>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label class=\"d-block\">{{ 'Label.Privacy' | transloco }}\n                  <span class=\"text-danger\">*</span></label>\n                <quill-editor [modules]=\"editorConfig\" class=\"d-block\" [styles]=\"{ height: '450px' }\"\n                  formControlName=\"privacy\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['privacy'].errors, 'w-100': true  }\">\n                </quill-editor>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label class=\"d-block\">{{ 'Label.Tos' | transloco }}\n                  <span class=\"text-danger\">*</span></label>\n                <quill-editor  [modules]=\"editorConfig\" class=\"d-block\" [styles]=\"{ height: '450px' }\"\n                  formControlName=\"tos\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['tos'].errors, 'w-100': true  }\">\n                </quill-editor>\n              </div>\n            </div>\n\n            <div class=\"col-12 text-end mt-3\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                class=\"btn btn-primary\"\n                *rbacAllow=\"'SubscriptionAdmin'\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pw-terms-of-service-details', template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          routerLink=\"../../tos\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n          <span>Terms of Service: {{ data?.title ? data?.title : 'Add New' }}</span>\n        </h3>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label>{{ 'Label.Title' | transloco }}\n                  <span class=\"text-danger\">*</span></label>\n                <textarea type=\"text\"\n                  class=\"form-control\"\n                  rows=\"2\"\n                  formControlName=\"title\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\"></textarea>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label class=\"d-block\">{{ 'Label.Privacy' | transloco }}\n                  <span class=\"text-danger\">*</span></label>\n                <quill-editor class=\"d-block\" [styles]=\"{ height: '450px' }\"\n                  formControlName=\"privacy\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['privacy'].errors, 'w-100': true  }\">\n                </quill-editor>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <div class=\"mb-3\">\n                <label class=\"d-block\">{{ 'Label.Tos' | transloco }}\n                  <span class=\"text-danger\">*</span></label>\n                <quill-editor  class=\"d-block\" [styles]=\"{ height: '450px' }\"\n                  formControlName=\"tos\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['tos'].errors, 'w-100': true  }\">\n                </quill-editor>\n              </div>\n            </div>\n\n            <div class=\"col-12 text-end mt-3\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                class=\"btn btn-primary\"\n                *rbacAllow=\"'SubscriptionAdmin'\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i0.Injector }], propDecorators: { onSave: [] } });
 
 class TermsOfServiceTabsComponent {
@@ -1581,6 +1579,7 @@ class FaqListComponent extends AppBaseComponent {
         this.backUpFAQ = [];
         this.submitted = false;
         this.isLoaded = true;
+        this.currentFaq = null;
         this.isEdit = false;
         this.categories = [];
         this.isProductEnabled = true;
@@ -1597,6 +1596,7 @@ class FaqListComponent extends AppBaseComponent {
         this.selectedFeatureKeys = [];
         this.buttonBusy = false;
         this.categoryForBadges = [];
+        this.slug = null;
         this.faqHashMap = {};
         this.page = 1;
         this.form = AppAdmin.getFaqForm();
@@ -2344,8 +2344,6 @@ class NewsletterItemDetailsComponent extends AppBaseComponent {
         this.featureKeys = [];
         this.userNameSyntax = '{{ @user.share_name }}';
         this.form = AppAdmin.getNewsletterItemForm();
-        QuillHelper.init();
-        this.editorConfig = QuillHelper.getEditorConfig();
     }
     ngOnInit() {
         this.subscriptionId = PermissionService.selectedSubscription?.id;
@@ -2522,7 +2520,7 @@ class NewsletterItemDetailsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NewsletterItemDetailsComponent, deps: [{ token: i1.AdminService }, { token: i1$1.TagService }, { token: i1$1.ProductService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: NewsletterItemDetailsComponent, selector: "pw-newsletter-item-details", viewQueries: [{ propertyName: "placesRef", first: true, predicate: ["ngxPlaces"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          [routerLink]=\"[routers.newsletter]\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">Newsletter Item: {{ data?.title ? data?.title : 'Add New' }}</h3>\n      </div>\n      <div class=\"mt-4\">\n        <p class=\"my-3\">\n          You can insert the user name by adding the following syntax in the body or\n          title: {{ userNameSyntax }}\n        </p>\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <!-- Title -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Title' | transloco\"\n              class=\"col-md-6\"\n              name=\"title\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Title' | transloco\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n            <!-- Newsletter -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Newsletter' | transloco\"\n              class=\"col-md-6\"\n              name=\"newsletter_id\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Newsletter' | transloco\">\n              <p-dropdown [options]=\"newsletters\"\n                formControlName=\"newsletter_id\"\n                [style]=\"{ width: '100%' }\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['newsletter_id'].errors }\">\n              </p-dropdown>\n            </pw-input-container>\n            <!-- Rich Text Editor -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Body' | transloco\"\n              class=\"col-12\"\n              name=\"body\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Body' | transloco\">\n              <quill-editor [styles]=\"{ height: '450px' }\"\n                formControlName=\"body\"\n                [modules]=\"editorConfig\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors, 'w-100': true  }\">\n              </quill-editor>\n            </pw-input-container>\n            <!-- Location -->\n            <pw-input-container [showTooltip]=\"true\"\n              [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Location' | transloco\"\n              [label]=\"'Admin.NewsletterItem.Location' | transloco\"\n              class=\"col-md-6\"\n              name=\"location\">\n              <input ngx-gp-autocomplete\n                class=\"form-control\"\n                #places=\"ngx-places\"\n                formControlName=\"location\"\n                (onAddressChange)=\"handleAddressChange($event)\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n            </pw-input-container>\n            <div class=\"ui-fluid skills-modal col-12 col-md-6 mt-1 mb-3\">\n              <label for=\"\">{{ 'Admin.NewsletterItem.Tags' | transloco }}\n                <span class=\"ms-1 tooltip-wrap\"\n                  [pTooltip]=\"'Admin.NewsletterItem.Tooltip.Tags' | transloco\"\n                  [appendTo]=\"'body'\"\n                  [tooltipPosition]=\"'top'\">\n                  <i class=\"fas fa-info-circle\"></i>\n                </span>\n              </label>\n              <p-autoComplete [(ngModel)]=\"selectedTags\"\n                [suggestions]=\"tagsSuggestion\"\n                dataKey=\"id\"\n                field=\"name\"\n                (completeMethod)=\"search($event)\"\n                styleClass=\"w-100\"\n                [minLength]=\"1\"\n                [maxlength]=\"10\"\n                [dropdown]=\"true\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                placeholder=\"Tags\"\n                [multiple]=\"true\"></p-autoComplete>\n            </div>\n            <!-- Products -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Products' | transloco\"\n                [label]=\"'Admin.NewsletterItem.Products' | transloco\"\n                name=\"product_ids\">\n                <p-multiSelect [options]=\"products\"\n                  placeholder=\"Select Products\"\n                  [showHeader]=\"true\"\n                  [showToggleAll]=\"true\"\n                  formControlName=\"product_ids\"\n                  appendTo=\"body\"></p-multiSelect>\n              </pw-input-container>\n            </div>\n            <!-- Features -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Features' | transloco\"\n                [label]=\"'Admin.NewsletterItem.Features' | transloco\"\n                name=\"feature_keys\">\n                <p-multiSelect [options]=\"featureKeys\"\n                  placeholder=\"Select feature keys\"\n                  [showHeader]=\"true\"\n                  [showToggleAll]=\"true\"\n                  formControlName=\"feature_keys\"\n                  appendTo=\"body\"></p-multiSelect>\n              </pw-input-container>\n            </div>\n            <!-- Previous Newsletter Items -->\n            <div class=\"col-12\"\n              [ngClass]=\"f['main_tag_id'].value ? 'col-md-3' : 'col-md-6'\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.PreviousNewsletter' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.PreviousNewsletter'\n                                            | transloco\n                                    \"\n                  name=\"main_tag_id\">\n                  <p-dropdown [options]=\"newsletterItems\"\n                    formControlName=\"main_tag_id\"\n                    [style]=\"{ width: '100%' }\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['main_tag_id'].errors\n                                        }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- DAYS TO WAIT -->\n            <div class=\"col-md-3 col-xs-6\"\n              *ngIf=\"form.get('main_tag_id').value\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.DaysToWait' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.DaysToWaitFromPreviousNewsletter'\n                                            | transloco\n                                    \"\n                  name=\"days_to_wait_from_previous_newsletter\">\n                  <input type=\"number\"\n                    class=\"form-control\"\n                    formControlName=\"days_to_wait_from_previous_newsletter\"\n                    [ngClass]=\"{\n                                            'is-invalid':\n                                                submitted &&\n                                                f['days_to_wait_from_previous_newsletter'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- IS SENT -->\n            <div class=\"col-md-3 col-xs-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.SendDate' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.SendDate' | transloco\n                                    \"\n                  [errorMsg]=\"\n                                        'Admin.NewsletterItem.Validation.SendDate' | transloco\n                                    \"\n                  name=\"send_at\">\n                  <div>\n                    <p-calendar formControlName=\"send_at\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Send Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['send_at'].errors\n                                            }\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- Expiry Date for Newsletter -->\n            <div class=\"col-md-3 col-xs-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.SendUntil' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.SendUntil' | transloco\"\n                  name=\"send_until\"\n                  [errorMsg]=\"\n                                        'Admin.NewsletterItem.Validation.SendUntil' | transloco\n                                    \">\n                  <div>\n                    <p-calendar formControlName=\"send_until\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Send Until Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['send_until'].errors\n                                            }\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- Only new users -->\n            <div class=\"col-md-3\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.OnlyNewUsers' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.OnlyNewUsers' | transloco\"\n                  name=\"only_new_users\">\n                  <ui-switch formControlName=\"only_new_users\"\n                    name=\"only_new_users\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['only_new_users'].errors\n                                        }\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- IS PUSHED -->\n            <div class=\"col-md-3\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.ShouldDeliver' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.ShouldDeliver' | transloco\"\n                  name=\"is_pushed\">\n                  <ui-switch formControlName=\"is_pushed\"\n                    name=\"is_pushed\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['is_pushed'].errors\n                                        }\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n          </div>\n          <div class=\"row\"></div>\n          <div class=\"row text-end mt-3\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                class=\"btn btn-primary\"\n                *rbacAllow=\"'Pages.Admin.Newsletter.Edit'\">\n                {{ 'Button.Save' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i4$3.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: "component", type: i5$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i7$1.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "directive", type: i13$1.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: NewsletterItemDetailsComponent, selector: "pw-newsletter-item-details", viewQueries: [{ propertyName: "placesRef", first: true, predicate: ["ngxPlaces"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          [routerLink]=\"[routers.newsletter]\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">Newsletter Item: {{ data?.title ? data?.title : 'Add New' }}</h3>\n      </div>\n      <div class=\"mt-4\">\n        <p class=\"my-3\">\n          You can insert the user name by adding the following syntax in the body or\n          title: {{ userNameSyntax }}\n        </p>\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <!-- Title -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Title' | transloco\"\n              class=\"col-md-6\"\n              name=\"title\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Title' | transloco\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n            <!-- Newsletter -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Newsletter' | transloco\"\n              class=\"col-md-6\"\n              name=\"newsletter_id\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Newsletter' | transloco\">\n              <p-dropdown [options]=\"newsletters\"\n                formControlName=\"newsletter_id\"\n                [style]=\"{ width: '100%' }\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['newsletter_id'].errors }\">\n              </p-dropdown>\n            </pw-input-container>\n            <!-- Rich Text Editor -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Body' | transloco\"\n              class=\"col-12\"\n              name=\"body\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Body' | transloco\">\n              <quill-editor [styles]=\"{ height: '450px' }\"\n                formControlName=\"body\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors, 'w-100': true  }\">\n              </quill-editor>\n            </pw-input-container>\n            <!-- Location -->\n            <pw-input-container [showTooltip]=\"true\"\n              [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Location' | transloco\"\n              [label]=\"'Admin.NewsletterItem.Location' | transloco\"\n              class=\"col-md-6\"\n              name=\"location\">\n              <input ngx-gp-autocomplete\n                class=\"form-control\"\n                #places=\"ngx-places\"\n                formControlName=\"location\"\n                (onAddressChange)=\"handleAddressChange($event)\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n            </pw-input-container>\n            <div class=\"ui-fluid skills-modal col-12 col-md-6 mt-1 mb-3\">\n              <label for=\"\">{{ 'Admin.NewsletterItem.Tags' | transloco }}\n                <span class=\"ms-1 tooltip-wrap\"\n                  [pTooltip]=\"'Admin.NewsletterItem.Tooltip.Tags' | transloco\"\n                  [appendTo]=\"'body'\"\n                  [tooltipPosition]=\"'top'\">\n                  <i class=\"fas fa-info-circle\"></i>\n                </span>\n              </label>\n              <p-autoComplete [(ngModel)]=\"selectedTags\"\n                [suggestions]=\"tagsSuggestion\"\n                dataKey=\"id\"\n                field=\"name\"\n                (completeMethod)=\"search($event)\"\n                styleClass=\"w-100\"\n                [minLength]=\"1\"\n                [maxlength]=\"10\"\n                [dropdown]=\"true\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                placeholder=\"Tags\"\n                [multiple]=\"true\"></p-autoComplete>\n            </div>\n            <!-- Products -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Products' | transloco\"\n                [label]=\"'Admin.NewsletterItem.Products' | transloco\"\n                name=\"product_ids\">\n                <p-multiSelect [options]=\"products\"\n                  placeholder=\"Select Products\"\n                  [showHeader]=\"true\"\n                  [showToggleAll]=\"true\"\n                  formControlName=\"product_ids\"\n                  appendTo=\"body\"></p-multiSelect>\n              </pw-input-container>\n            </div>\n            <!-- Features -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Features' | transloco\"\n                [label]=\"'Admin.NewsletterItem.Features' | transloco\"\n                name=\"feature_keys\">\n                <p-multiSelect [options]=\"featureKeys\"\n                  placeholder=\"Select feature keys\"\n                  [showHeader]=\"true\"\n                  [showToggleAll]=\"true\"\n                  formControlName=\"feature_keys\"\n                  appendTo=\"body\"></p-multiSelect>\n              </pw-input-container>\n            </div>\n            <!-- Previous Newsletter Items -->\n            <div class=\"col-12\"\n              [ngClass]=\"f['main_tag_id'].value ? 'col-md-3' : 'col-md-6'\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.PreviousNewsletter' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.PreviousNewsletter'\n                                            | transloco\n                                    \"\n                  name=\"main_tag_id\">\n                  <p-dropdown [options]=\"newsletterItems\"\n                    formControlName=\"main_tag_id\"\n                    [style]=\"{ width: '100%' }\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['main_tag_id'].errors\n                                        }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- DAYS TO WAIT -->\n            <div class=\"col-md-3 col-xs-6\"\n              *ngIf=\"form.get('main_tag_id').value\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.DaysToWait' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.DaysToWaitFromPreviousNewsletter'\n                                            | transloco\n                                    \"\n                  name=\"days_to_wait_from_previous_newsletter\">\n                  <input type=\"number\"\n                    class=\"form-control\"\n                    formControlName=\"days_to_wait_from_previous_newsletter\"\n                    [ngClass]=\"{\n                                            'is-invalid':\n                                                submitted &&\n                                                f['days_to_wait_from_previous_newsletter'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- IS SENT -->\n            <div class=\"col-md-3 col-xs-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.SendDate' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.SendDate' | transloco\n                                    \"\n                  [errorMsg]=\"\n                                        'Admin.NewsletterItem.Validation.SendDate' | transloco\n                                    \"\n                  name=\"send_at\">\n                  <div>\n                    <p-calendar formControlName=\"send_at\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Send Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['send_at'].errors\n                                            }\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- Expiry Date for Newsletter -->\n            <div class=\"col-md-3 col-xs-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.SendUntil' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.SendUntil' | transloco\"\n                  name=\"send_until\"\n                  [errorMsg]=\"\n                                        'Admin.NewsletterItem.Validation.SendUntil' | transloco\n                                    \">\n                  <div>\n                    <p-calendar formControlName=\"send_until\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Send Until Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['send_until'].errors\n                                            }\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- Only new users -->\n            <div class=\"col-md-3\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.OnlyNewUsers' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.OnlyNewUsers' | transloco\"\n                  name=\"only_new_users\">\n                  <ui-switch formControlName=\"only_new_users\"\n                    name=\"only_new_users\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['only_new_users'].errors\n                                        }\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- IS PUSHED -->\n            <div class=\"col-md-3\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.ShouldDeliver' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.ShouldDeliver' | transloco\"\n                  name=\"is_pushed\">\n                  <ui-switch formControlName=\"is_pushed\"\n                    name=\"is_pushed\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['is_pushed'].errors\n                                        }\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n          </div>\n          <div class=\"row\"></div>\n          <div class=\"row text-end mt-3\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                class=\"btn btn-primary\"\n                *rbacAllow=\"'Pages.Admin.Newsletter.Edit'\">\n                {{ 'Button.Save' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "directive", type: i3$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i4$3.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: "component", type: i5$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i7$1.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "directive", type: i13$1.NgxGpAutocompleteDirective, selector: "[ngx-gp-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -2532,7 +2530,7 @@ __decorate([
 ], NewsletterItemDetailsComponent.prototype, "onSave", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: NewsletterItemDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-newsletter-item-details', template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          [routerLink]=\"[routers.newsletter]\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">Newsletter Item: {{ data?.title ? data?.title : 'Add New' }}</h3>\n      </div>\n      <div class=\"mt-4\">\n        <p class=\"my-3\">\n          You can insert the user name by adding the following syntax in the body or\n          title: {{ userNameSyntax }}\n        </p>\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <!-- Title -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Title' | transloco\"\n              class=\"col-md-6\"\n              name=\"title\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Title' | transloco\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n            <!-- Newsletter -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Newsletter' | transloco\"\n              class=\"col-md-6\"\n              name=\"newsletter_id\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Newsletter' | transloco\">\n              <p-dropdown [options]=\"newsletters\"\n                formControlName=\"newsletter_id\"\n                [style]=\"{ width: '100%' }\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['newsletter_id'].errors }\">\n              </p-dropdown>\n            </pw-input-container>\n            <!-- Rich Text Editor -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Body' | transloco\"\n              class=\"col-12\"\n              name=\"body\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Body' | transloco\">\n              <quill-editor [styles]=\"{ height: '450px' }\"\n                formControlName=\"body\"\n                [modules]=\"editorConfig\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors, 'w-100': true  }\">\n              </quill-editor>\n            </pw-input-container>\n            <!-- Location -->\n            <pw-input-container [showTooltip]=\"true\"\n              [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Location' | transloco\"\n              [label]=\"'Admin.NewsletterItem.Location' | transloco\"\n              class=\"col-md-6\"\n              name=\"location\">\n              <input ngx-gp-autocomplete\n                class=\"form-control\"\n                #places=\"ngx-places\"\n                formControlName=\"location\"\n                (onAddressChange)=\"handleAddressChange($event)\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n            </pw-input-container>\n            <div class=\"ui-fluid skills-modal col-12 col-md-6 mt-1 mb-3\">\n              <label for=\"\">{{ 'Admin.NewsletterItem.Tags' | transloco }}\n                <span class=\"ms-1 tooltip-wrap\"\n                  [pTooltip]=\"'Admin.NewsletterItem.Tooltip.Tags' | transloco\"\n                  [appendTo]=\"'body'\"\n                  [tooltipPosition]=\"'top'\">\n                  <i class=\"fas fa-info-circle\"></i>\n                </span>\n              </label>\n              <p-autoComplete [(ngModel)]=\"selectedTags\"\n                [suggestions]=\"tagsSuggestion\"\n                dataKey=\"id\"\n                field=\"name\"\n                (completeMethod)=\"search($event)\"\n                styleClass=\"w-100\"\n                [minLength]=\"1\"\n                [maxlength]=\"10\"\n                [dropdown]=\"true\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                placeholder=\"Tags\"\n                [multiple]=\"true\"></p-autoComplete>\n            </div>\n            <!-- Products -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Products' | transloco\"\n                [label]=\"'Admin.NewsletterItem.Products' | transloco\"\n                name=\"product_ids\">\n                <p-multiSelect [options]=\"products\"\n                  placeholder=\"Select Products\"\n                  [showHeader]=\"true\"\n                  [showToggleAll]=\"true\"\n                  formControlName=\"product_ids\"\n                  appendTo=\"body\"></p-multiSelect>\n              </pw-input-container>\n            </div>\n            <!-- Features -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Features' | transloco\"\n                [label]=\"'Admin.NewsletterItem.Features' | transloco\"\n                name=\"feature_keys\">\n                <p-multiSelect [options]=\"featureKeys\"\n                  placeholder=\"Select feature keys\"\n                  [showHeader]=\"true\"\n                  [showToggleAll]=\"true\"\n                  formControlName=\"feature_keys\"\n                  appendTo=\"body\"></p-multiSelect>\n              </pw-input-container>\n            </div>\n            <!-- Previous Newsletter Items -->\n            <div class=\"col-12\"\n              [ngClass]=\"f['main_tag_id'].value ? 'col-md-3' : 'col-md-6'\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.PreviousNewsletter' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.PreviousNewsletter'\n                                            | transloco\n                                    \"\n                  name=\"main_tag_id\">\n                  <p-dropdown [options]=\"newsletterItems\"\n                    formControlName=\"main_tag_id\"\n                    [style]=\"{ width: '100%' }\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['main_tag_id'].errors\n                                        }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- DAYS TO WAIT -->\n            <div class=\"col-md-3 col-xs-6\"\n              *ngIf=\"form.get('main_tag_id').value\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.DaysToWait' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.DaysToWaitFromPreviousNewsletter'\n                                            | transloco\n                                    \"\n                  name=\"days_to_wait_from_previous_newsletter\">\n                  <input type=\"number\"\n                    class=\"form-control\"\n                    formControlName=\"days_to_wait_from_previous_newsletter\"\n                    [ngClass]=\"{\n                                            'is-invalid':\n                                                submitted &&\n                                                f['days_to_wait_from_previous_newsletter'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- IS SENT -->\n            <div class=\"col-md-3 col-xs-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.SendDate' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.SendDate' | transloco\n                                    \"\n                  [errorMsg]=\"\n                                        'Admin.NewsletterItem.Validation.SendDate' | transloco\n                                    \"\n                  name=\"send_at\">\n                  <div>\n                    <p-calendar formControlName=\"send_at\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Send Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['send_at'].errors\n                                            }\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- Expiry Date for Newsletter -->\n            <div class=\"col-md-3 col-xs-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.SendUntil' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.SendUntil' | transloco\"\n                  name=\"send_until\"\n                  [errorMsg]=\"\n                                        'Admin.NewsletterItem.Validation.SendUntil' | transloco\n                                    \">\n                  <div>\n                    <p-calendar formControlName=\"send_until\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Send Until Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['send_until'].errors\n                                            }\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- Only new users -->\n            <div class=\"col-md-3\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.OnlyNewUsers' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.OnlyNewUsers' | transloco\"\n                  name=\"only_new_users\">\n                  <ui-switch formControlName=\"only_new_users\"\n                    name=\"only_new_users\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['only_new_users'].errors\n                                        }\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- IS PUSHED -->\n            <div class=\"col-md-3\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.ShouldDeliver' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.ShouldDeliver' | transloco\"\n                  name=\"is_pushed\">\n                  <ui-switch formControlName=\"is_pushed\"\n                    name=\"is_pushed\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['is_pushed'].errors\n                                        }\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n          </div>\n          <div class=\"row\"></div>\n          <div class=\"row text-end mt-3\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                class=\"btn btn-primary\"\n                *rbacAllow=\"'Pages.Admin.Newsletter.Edit'\">\n                {{ 'Button.Save' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'pw-newsletter-item-details', template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\"\n          [routerLink]=\"[routers.newsletter]\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">Newsletter Item: {{ data?.title ? data?.title : 'Add New' }}</h3>\n      </div>\n      <div class=\"mt-4\">\n        <p class=\"my-3\">\n          You can insert the user name by adding the following syntax in the body or\n          title: {{ userNameSyntax }}\n        </p>\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <!-- Title -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Title' | transloco\"\n              class=\"col-md-6\"\n              name=\"title\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Title' | transloco\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n            <!-- Newsletter -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Newsletter' | transloco\"\n              class=\"col-md-6\"\n              name=\"newsletter_id\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Newsletter' | transloco\">\n              <p-dropdown [options]=\"newsletters\"\n                formControlName=\"newsletter_id\"\n                [style]=\"{ width: '100%' }\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['newsletter_id'].errors }\">\n              </p-dropdown>\n            </pw-input-container>\n            <!-- Rich Text Editor -->\n            <pw-input-container [label]=\"'Admin.NewsletterItem.Body' | transloco\"\n              class=\"col-12\"\n              name=\"body\"\n              [errorMsg]=\"'Admin.NewsletterItem.Validation.Body' | transloco\">\n              <quill-editor [styles]=\"{ height: '450px' }\"\n                formControlName=\"body\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors, 'w-100': true  }\">\n              </quill-editor>\n            </pw-input-container>\n            <!-- Location -->\n            <pw-input-container [showTooltip]=\"true\"\n              [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Location' | transloco\"\n              [label]=\"'Admin.NewsletterItem.Location' | transloco\"\n              class=\"col-md-6\"\n              name=\"location\">\n              <input ngx-gp-autocomplete\n                class=\"form-control\"\n                #places=\"ngx-places\"\n                formControlName=\"location\"\n                (onAddressChange)=\"handleAddressChange($event)\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['location'].errors }\" />\n            </pw-input-container>\n            <div class=\"ui-fluid skills-modal col-12 col-md-6 mt-1 mb-3\">\n              <label for=\"\">{{ 'Admin.NewsletterItem.Tags' | transloco }}\n                <span class=\"ms-1 tooltip-wrap\"\n                  [pTooltip]=\"'Admin.NewsletterItem.Tooltip.Tags' | transloco\"\n                  [appendTo]=\"'body'\"\n                  [tooltipPosition]=\"'top'\">\n                  <i class=\"fas fa-info-circle\"></i>\n                </span>\n              </label>\n              <p-autoComplete [(ngModel)]=\"selectedTags\"\n                [suggestions]=\"tagsSuggestion\"\n                dataKey=\"id\"\n                field=\"name\"\n                (completeMethod)=\"search($event)\"\n                styleClass=\"w-100\"\n                [minLength]=\"1\"\n                [maxlength]=\"10\"\n                [dropdown]=\"true\"\n                [ngModelOptions]=\"{ standalone: true }\"\n                placeholder=\"Tags\"\n                [multiple]=\"true\"></p-autoComplete>\n            </div>\n            <!-- Products -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Products' | transloco\"\n                [label]=\"'Admin.NewsletterItem.Products' | transloco\"\n                name=\"product_ids\">\n                <p-multiSelect [options]=\"products\"\n                  placeholder=\"Select Products\"\n                  [showHeader]=\"true\"\n                  [showToggleAll]=\"true\"\n                  formControlName=\"product_ids\"\n                  appendTo=\"body\"></p-multiSelect>\n              </pw-input-container>\n            </div>\n            <!-- Features -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.NewsletterItem.Tooltip.Features' | transloco\"\n                [label]=\"'Admin.NewsletterItem.Features' | transloco\"\n                name=\"feature_keys\">\n                <p-multiSelect [options]=\"featureKeys\"\n                  placeholder=\"Select feature keys\"\n                  [showHeader]=\"true\"\n                  [showToggleAll]=\"true\"\n                  formControlName=\"feature_keys\"\n                  appendTo=\"body\"></p-multiSelect>\n              </pw-input-container>\n            </div>\n            <!-- Previous Newsletter Items -->\n            <div class=\"col-12\"\n              [ngClass]=\"f['main_tag_id'].value ? 'col-md-3' : 'col-md-6'\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.PreviousNewsletter' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.PreviousNewsletter'\n                                            | transloco\n                                    \"\n                  name=\"main_tag_id\">\n                  <p-dropdown [options]=\"newsletterItems\"\n                    formControlName=\"main_tag_id\"\n                    [style]=\"{ width: '100%' }\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['main_tag_id'].errors\n                                        }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- DAYS TO WAIT -->\n            <div class=\"col-md-3 col-xs-6\"\n              *ngIf=\"form.get('main_tag_id').value\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.DaysToWait' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.DaysToWaitFromPreviousNewsletter'\n                                            | transloco\n                                    \"\n                  name=\"days_to_wait_from_previous_newsletter\">\n                  <input type=\"number\"\n                    class=\"form-control\"\n                    formControlName=\"days_to_wait_from_previous_newsletter\"\n                    [ngClass]=\"{\n                                            'is-invalid':\n                                                submitted &&\n                                                f['days_to_wait_from_previous_newsletter'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- IS SENT -->\n            <div class=\"col-md-3 col-xs-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.NewsletterItem.SendDate' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.SendDate' | transloco\n                                    \"\n                  [errorMsg]=\"\n                                        'Admin.NewsletterItem.Validation.SendDate' | transloco\n                                    \"\n                  name=\"send_at\">\n                  <div>\n                    <p-calendar formControlName=\"send_at\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Send Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['send_at'].errors\n                                            }\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- Expiry Date for Newsletter -->\n            <div class=\"col-md-3 col-xs-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.SendUntil' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.SendUntil' | transloco\"\n                  name=\"send_until\"\n                  [errorMsg]=\"\n                                        'Admin.NewsletterItem.Validation.SendUntil' | transloco\n                                    \">\n                  <div>\n                    <p-calendar formControlName=\"send_until\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Send Until Date'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['send_until'].errors\n                                            }\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- Only new users -->\n            <div class=\"col-md-3\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.OnlyNewUsers' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.OnlyNewUsers' | transloco\"\n                  name=\"only_new_users\">\n                  <ui-switch formControlName=\"only_new_users\"\n                    name=\"only_new_users\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['only_new_users'].errors\n                                        }\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n            <!-- IS PUSHED -->\n            <div class=\"col-md-3\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"\n                                        'Admin.NewsletterItem.Tooltip.ShouldDeliver' | transloco\n                                    \"\n                  [label]=\"'Admin.NewsletterItem.ShouldDeliver' | transloco\"\n                  name=\"is_pushed\">\n                  <ui-switch formControlName=\"is_pushed\"\n                    name=\"is_pushed\"\n                    [ngClass]=\"{\n                                            'is-invalid': submitted && f['is_pushed'].errors\n                                        }\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n          </div>\n          <div class=\"row\"></div>\n          <div class=\"row text-end mt-3\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                class=\"btn btn-primary\"\n                *rbacAllow=\"'Pages.Admin.Newsletter.Edit'\">\n                {{ 'Button.Save' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i1$1.TagService }, { type: i1$1.ProductService }, { type: i0.Injector }], propDecorators: { placesRef: [{
                 type: ViewChild,
                 args: ['ngxPlaces']
@@ -2689,7 +2687,7 @@ class NewslettersItemsComponent extends AppBaseComponent {
             event.value.length > 0
                 ? this.allNewslettersItems.filter(x => event.value.includes(x.newsletter_id))
                 : this.allNewslettersItems;
-        this.selectedNewsletter = '';
+        this.selectedNewsletter = { label: '' };
         this.newslettersItemsTotal = this.newslettersItems?.length;
     }
     onDelete(item) {
@@ -3242,8 +3240,6 @@ class ProductDetailsComponent extends AppBaseComponent {
         this.categories = [];
         this.fullLogo = '';
         this.form = AppAdmin.getProductsForm();
-        QuillHelper.init();
-        this.editorConfig = QuillHelper.getEditorConfig();
     }
     ngOnInit() {
         this.supportedCurrency$ = this.productService.getSupportedCurrency();
@@ -3497,7 +3493,7 @@ class ProductDetailsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ProductDetailsComponent, deps: [{ token: i0.Injector }, { token: i1$1.ProductService }, { token: i3$2.NgbModal }, { token: i1.AdminService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ProductDetailsComponent, selector: "pw-product-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab product-form overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n          aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">Product: {{ data?.name ? data?.name : 'Add New' }}</h3>\n    </div>\n      <div class=\"my-4\">\n        <div class=\"mb-5\">\n          <p-accordion>\n            <p-accordionTab [header]=\"'How To'\">\n              <div class=\"row\">\n                <div class=\"col-12 col-md-6\">\n                  <h4>Product / Feature logic</h4>\n                  <p> Logic for back-end/front-end permissions binding:\n                    <br /> * product.category (these are features) =&gt; type of product, i.e., seat_pricing or item_pricing\n                    <br /> * product.feature_key =&gt; this describes the main feature\n                    <br /> * product.permission_key =&gt; users can be subscribed to only one product of same permission_key\n                    <br /> * product.product_key =&gt; this is unique to each product, it defines the permission for frontend binding\n                    <br /> * Example of permission =&gt; {{ 'Pages.Product.{permission_key}.{product_key}' }}\n                    <br /> * If it's a feature associated to an existing project, you can to set the \"dependency product\" accordingly. </p>\n                </div>\n                <div class=\"col-12 col-md-6\">\n                  <h4>If it's a Free Product</h4>\n                  <p> Stripe Plan needs to be nil. <br /> \"Price\" per Unit needs to be set as 0. <br /> \"Trial Days\" needs\n                    to be something like 99999. <br /> The product should be set as \"visible===false\". </p>\n                </div>\n              </div>\n            </p-accordionTab>\n          </p-accordion>\n        </div>\n        <div class=\"row\" *ngIf=\"id\">\n          <div class=\"col-md-6\">\n            <div class=\"text-center mt-5\">\n              <div class=\"image-container\">\n                <h4 class=\"mb-2\"> {{ 'User.Subscriptions.FullLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n                    [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\" [appendTo]=\"'body'\"\n                    [tooltipPosition]=\"'top'\">\n                    <i class=\"fas fa-info-circle\"></i>\n                  </span>\n                </h4>\n                <img [src]=\"fullLogo\" alt=\"\" class=\"image full-logo w-100 h-100\"\n                  onerror=\"this.onerror=null;this.src='assets/img/icons/demo_logo1.png';\" />\n                <div class=\"overlay mt-2\" (click)=\"openModal(content)\">\n                  <div class=\"overlay-text\">\n                    <a href=\"javascript:void(0)\">{{ 'User.Profile.Change' | transloco }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"text-center mt-5\">\n              <div class=\"image-container\">\n                <h4 class=\"mb-2\"> {{ 'User.Subscriptions.SquaredLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n                    [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\" [appendTo]=\"'body'\"\n                    [tooltipPosition]=\"'top'\">\n                    <i class=\"fas fa-info-circle\"></i>\n                  </span>\n                </h4>\n                <img [src]=\"squaredLogo\" alt=\"\" width=\"70\" class=\"squared_logo\" height=\"70\"\n                  onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n                <div class=\"overlay mt-2\" (click)=\"openModal(squaredLogoContent)\">\n                  <div class=\"overlay-text\">\n                    <a href=\"javascript:void(0)\">{{ 'User.Profile.Change' | transloco }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-md-6\">\n              <div class=\"row\">\n                <div class=\"col-md-6\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Name' | transloco\"\n                    [label]=\"'Label.Name' | transloco\" class=\"col-md-6 p-0\" name=\"name\"\n                    [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"name\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-md-6\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.NickName' | transloco\"\n                    [label]=\"'Admin.Products.NickName' | transloco\" class=\"col-md-6 p-0\" name=\"nickname\" [errorMsg]=\"\n                                            'Admin.Products.Validation.NickName' | transloco\n                                        \">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"nickname\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['nickname'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"row\">\n                <div class=\"mb-3 col-12 col-md-6\">\n                  <pw-input-container [label]=\"'Admin.Products.MinUnit' | transloco\" [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MinUnits' | transloco\" class=\"col-md-6 p-0\" name=\"min_units\"\n                    [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n                    <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"min_units\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['min_units'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"mb-3 col-12 col-md-6\">\n                  <pw-input-container [label]=\"'Admin.Products.MaxUnit' | transloco\" [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MaxUnits' | transloco\" class=\"col-md-6 p-0\" name=\"max_units\"\n                    [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n                    <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"max_units\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['max_units'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <label class=\"info-circle\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.DependencyProducts' |\n                  transloco }}</span>\n              </label>\n              <p-multiSelect [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n                [ngModelOptions]=\"{ standalone: true }\" (onChange)=\"onSearchCriteria($event)\" [showHeader]=\"false\"\n                maxSelectedLabels=\"1\" appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.StripePlan' | transloco\"\n                  [label]=\"'Admin.Products.StripePlan' | transloco\" class=\"col-md-6 p-0\" name=\"stripe_plan_id\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"stripe_plan_id\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Price' | transloco\"\n                  [label]=\"'Admin.Products.Price' | transloco\" class=\"col-md-6 p-0\" name=\"price_per_unit\"\n                  [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                  <input type=\"text\" numbersOnly class=\"form-control\" formControlName=\"price_per_unit\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['price_per_unit'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialDays' | transloco\"\n                  [label]=\"'Admin.Products.TrialDays' | transloco\" class=\"col-md-6 p-0\" name=\"trial_days\"\n                  [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n                  <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"trial_days\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['trial_days'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.MaxTrialHits' | transloco\"\n                  [label]=\"'Admin.Products.MaxTrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits_trial\">\n                  <input type=\"number\" min=\"0\" class=\"form-control\" formControlName=\"max_hits_trial\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['max_hits_trial'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialHits' | transloco\"\n                  [label]=\"'Admin.Products.TrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits\">\n                  <input type=\"number\" min=\"0\" class=\"form-control\" formControlName=\"max_hits\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['max_hits'].errors }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n                [label]=\"'Admin.Products.Description' | transloco\" name=\"description\"\n                [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n                <quill-editor [styles]=\"{ height: '220px' }\" formControlName=\"description\"\n                [modules]=\"editorConfig\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'w-100': true}\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n                [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\">\n                <quill-editor [modules]=\"editorConfig\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" [ngClass]=\"{\n                                        'is-invalid': submitted && f['signup_instructions'].errors, 'w-100': true\n                                    }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n                [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\">\n                <quill-editor [modules]=\"editorConfig\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" [ngClass]=\"{\n                                        'is-invalid':\n                                            submitted && f['signup_instruction_employees'].errors, 'w-100': true\n                                    }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n                  [label]=\"'Admin.Products.PermissionKey' | transloco\" name=\"permission_key\" [errorMsg]=\"\n                                        'Admin.Products.Validation.PermissionKey' | transloco\n                                    \">\n                  <input type=\"text\" class=\"form-control\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['permission_key'].errors\n                                        }\" formControlName=\"permission_key\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.FeatureKey' | transloco\"\n                  [label]=\"'Admin.Products.FeatureKey' | transloco\" name=\"feature_key\"\n                  [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n                  <input type=\"text\" class=\"form-control\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['feature_key'].errors\n                                        }\" formControlName=\"feature_key\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.Products.ProductKey' | transloco\" class=\"col-md-6 p-0\"\n                  [showTooltip]=\"true\" [tooltipText]=\"\n                                        'Admin.Products.Tooltip.PermissionKey' | transloco\n                                    \" name=\"product_key\"\n                  [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"product_key\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['product_key'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.Products.Category' | transloco\" class=\"col-md-6 p-0\"\n                  [showTooltip]=\"true\" [tooltipText]=\"\n                                        'Admin.Products.Tooltip.PermissionKey' | transloco\n                                    \" name=\"category\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n                  <p-dropdown [options]=\"categories\" class=\"dropdown-bg-transparent\" formControlName=\"category\"\n                    [style]=\"{ width: '100%' }\" [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.BillingFrequency' | transloco\"\n                  [label]=\"'Admin.Products.BillingFrequency' | transloco\" class=\"col-md-6 p-0\" name=\"billing_frequency\">\n                  <p-dropdown [options]=\"frequency\" class=\"dropdown-bg-transparent\" formControlName=\"billing_frequency\"\n                    [required]=\"true\" [style]=\"{ width: '100%' }\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['billing_frequency'].errors\n                                        }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n                  [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\">\n                  <select formControlName=\"product_privacy_service_id\" class=\"form-control form-select\">\n                    <option *ngFor=\"let option of allTos\" [value]=\"option.id\"> {{ option.title }} </option>\n                  </select>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.MasterProduct' | transloco\"\n                  [label]=\"'Admin.Products.MasterProduct' | transloco\" name=\"master_product_id\">\n                  <select formControlName=\"master_product_id\" class=\"form-control form-select\">\n                    <option *ngFor=\"let option of productsList\" [value]=\"option.value\"> {{ option.label }} </option>\n                  </select>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-4\">\n              <label class=\"info-circle\">{{ 'Admin.Products.AssignedRoles' | transloco }} <span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Subscriptions.Tooltip.AssignedRoles' |\n                  transloco }}</span>\n              </label>\n              <p-multiSelect [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"></p-multiSelect>\n            </div>\n            <div class=\"col-12 col-md-4\" *ngIf=\"supportedCurrency$ | async as currency\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n                [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\"\n                [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n                <select class=\"form-select\" formControlName=\"currency\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\">\n                  <option *ngFor=\"let option of currency['regions']\" [value]=\"option\"> {{ option }} </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\" *ngIf=\"supportedRegions$ | async as region\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n                [label]=\"'Admin.Products.Region' | transloco\" name=\"region\"\n                [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n                <select class=\"form-select\" formControlName=\"region\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\">\n                  <option *ngFor=\"let option of region['regions']\" [value]=\"option\"> {{ option }} </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.GitLabServiceDeskEmail' | transloco\"\n                [label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" name=\"gitlab_service_desk_email\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"gitlab_service_desk_email\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n              <label class=\"info-circle\"> {{ 'Admin.Products.PartnerProducts' | transloco }}<span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.PartnerProducts' | transloco\n                  }}</span>\n              </label>\n              <p-multiSelect [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n                [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n                [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <!--start toggles -->\n            <div class=\"col-12 row\">\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.IsActive' | transloco\"\n                    [label]=\"'Admin.Products.IsActive' | transloco\" name=\"active\">\n                    <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MultipleAllowed' | transloco\"\n                    [label]=\"'Admin.Products.MultipleAllowed' | transloco\" class=\"nowrap\" name=\"multiple_allowed\">\n                    <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['multiple_allowed'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsVisible' | transloco\"\n                    [label]=\"'Admin.Products.IsVisible' | transloco\" name=\"visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['visible'].errors }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MembersVisible' | transloco\"\n                    [label]=\"'Admin.Products.MembersVisible' | transloco\" name=\"members_visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['members_visible'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.ChatVisible' | transloco\"\n                    [label]=\"'Admin.Products.ChatVisible' | transloco\" name=\"chat_visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['chat_visible'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsMasterProduct' | transloco\"\n                    [label]=\"'Admin.Products.IsMasterProduct' | transloco\" name=\"is_master_product\">\n                    <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['is_master_product'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <!-- end toggles -->\n          </div>\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' |\n                transloco }} </button>\n              <button type=\"submit\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n                | transloco }} </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #content let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <pw-image-cropper #profile (imageSelectionEvent)=\"onImageSelection($event)\" aspectRatio=\"fullLogo\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n<ng-template #squaredLogoContent let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <pw-image-cropper #profile (imageSelectionEvent)=\"uploadSquaredLogo($event)\" aspectRatio=\"auto\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n", styles: [".nowrap{white-space:nowrap}textarea{height:180px}.full-logo{object-fit:cover;width:280px}\n"], dependencies: [{ kind: "directive", type: i3$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i4$2.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i4$2.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }, { kind: "component", type: i5$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i9.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "directive", type: i10.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i10.LazyImgDirective, selector: "img" }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ProductDetailsComponent, selector: "pw-product-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab product-form overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n          aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">Product: {{ data?.name ? data?.name : 'Add New' }}</h3>\n    </div>\n      <div class=\"my-4\">\n        <div class=\"mb-5\">\n          <p-accordion>\n            <p-accordionTab [header]=\"'How To'\">\n              <div class=\"row\">\n                <div class=\"col-12 col-md-6\">\n                  <h4>Product / Feature logic</h4>\n                  <p> Logic for back-end/front-end permissions binding:\n                    <br /> * product.category (these are features) =&gt; type of product, i.e., seat_pricing or item_pricing\n                    <br /> * product.feature_key =&gt; this describes the main feature\n                    <br /> * product.permission_key =&gt; users can be subscribed to only one product of same permission_key\n                    <br /> * product.product_key =&gt; this is unique to each product, it defines the permission for frontend binding\n                    <br /> * Example of permission =&gt; {{ 'Pages.Product.{permission_key}.{product_key}' }}\n                    <br /> * If it's a feature associated to an existing project, you can to set the \"dependency product\" accordingly. </p>\n                </div>\n                <div class=\"col-12 col-md-6\">\n                  <h4>If it's a Free Product</h4>\n                  <p> Stripe Plan needs to be nil. <br /> \"Price\" per Unit needs to be set as 0. <br /> \"Trial Days\" needs\n                    to be something like 99999. <br /> The product should be set as \"visible===false\". </p>\n                </div>\n              </div>\n            </p-accordionTab>\n          </p-accordion>\n        </div>\n        <div class=\"row\" *ngIf=\"id\">\n          <div class=\"col-md-6\">\n            <div class=\"text-center mt-5\">\n              <div class=\"image-container\">\n                <h4 class=\"mb-2\"> {{ 'User.Subscriptions.FullLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n                    [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\" [appendTo]=\"'body'\"\n                    [tooltipPosition]=\"'top'\">\n                    <i class=\"fas fa-info-circle\"></i>\n                  </span>\n                </h4>\n                <img [src]=\"fullLogo\" alt=\"\" class=\"image full-logo w-100 h-100\"\n                  onerror=\"this.onerror=null;this.src='assets/img/icons/demo_logo1.png';\" />\n                <div class=\"overlay mt-2\" (click)=\"openModal(content)\">\n                  <div class=\"overlay-text\">\n                    <a href=\"javascript:void(0)\">{{ 'User.Profile.Change' | transloco }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"text-center mt-5\">\n              <div class=\"image-container\">\n                <h4 class=\"mb-2\"> {{ 'User.Subscriptions.SquaredLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n                    [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\" [appendTo]=\"'body'\"\n                    [tooltipPosition]=\"'top'\">\n                    <i class=\"fas fa-info-circle\"></i>\n                  </span>\n                </h4>\n                <img [src]=\"squaredLogo\" alt=\"\" width=\"70\" class=\"squared_logo\" height=\"70\"\n                  onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n                <div class=\"overlay mt-2\" (click)=\"openModal(squaredLogoContent)\">\n                  <div class=\"overlay-text\">\n                    <a href=\"javascript:void(0)\">{{ 'User.Profile.Change' | transloco }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-md-6\">\n              <div class=\"row\">\n                <div class=\"col-md-6\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Name' | transloco\"\n                    [label]=\"'Label.Name' | transloco\" class=\"col-md-6 p-0\" name=\"name\"\n                    [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"name\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-md-6\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.NickName' | transloco\"\n                    [label]=\"'Admin.Products.NickName' | transloco\" class=\"col-md-6 p-0\" name=\"nickname\" [errorMsg]=\"\n                                            'Admin.Products.Validation.NickName' | transloco\n                                        \">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"nickname\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['nickname'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"row\">\n                <div class=\"mb-3 col-12 col-md-6\">\n                  <pw-input-container [label]=\"'Admin.Products.MinUnit' | transloco\" [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MinUnits' | transloco\" class=\"col-md-6 p-0\" name=\"min_units\"\n                    [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n                    <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"min_units\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['min_units'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"mb-3 col-12 col-md-6\">\n                  <pw-input-container [label]=\"'Admin.Products.MaxUnit' | transloco\" [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MaxUnits' | transloco\" class=\"col-md-6 p-0\" name=\"max_units\"\n                    [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n                    <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"max_units\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['max_units'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <label class=\"info-circle\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.DependencyProducts' |\n                  transloco }}</span>\n              </label>\n              <p-multiSelect [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n                [ngModelOptions]=\"{ standalone: true }\" (onChange)=\"onSearchCriteria($event)\" [showHeader]=\"false\"\n                maxSelectedLabels=\"1\" appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.StripePlan' | transloco\"\n                  [label]=\"'Admin.Products.StripePlan' | transloco\" class=\"col-md-6 p-0\" name=\"stripe_plan_id\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"stripe_plan_id\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Price' | transloco\"\n                  [label]=\"'Admin.Products.Price' | transloco\" class=\"col-md-6 p-0\" name=\"price_per_unit\"\n                  [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                  <input type=\"text\" numbersOnly class=\"form-control\" formControlName=\"price_per_unit\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['price_per_unit'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialDays' | transloco\"\n                  [label]=\"'Admin.Products.TrialDays' | transloco\" class=\"col-md-6 p-0\" name=\"trial_days\"\n                  [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n                  <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"trial_days\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['trial_days'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.MaxTrialHits' | transloco\"\n                  [label]=\"'Admin.Products.MaxTrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits_trial\">\n                  <input type=\"number\" min=\"0\" class=\"form-control\" formControlName=\"max_hits_trial\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['max_hits_trial'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialHits' | transloco\"\n                  [label]=\"'Admin.Products.TrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits\">\n                  <input type=\"number\" min=\"0\" class=\"form-control\" formControlName=\"max_hits\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['max_hits'].errors }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n                [label]=\"'Admin.Products.Description' | transloco\" name=\"description\"\n                [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n                <quill-editor [styles]=\"{ height: '220px' }\" formControlName=\"description\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'w-100': true}\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n                [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\">\n                <quill-editor [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" [ngClass]=\"{\n                                        'is-invalid': submitted && f['signup_instructions'].errors, 'w-100': true\n                                    }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n                [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\">\n                <quill-editor [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" [ngClass]=\"{\n                                        'is-invalid':\n                                            submitted && f['signup_instruction_employees'].errors, 'w-100': true\n                                    }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n                  [label]=\"'Admin.Products.PermissionKey' | transloco\" name=\"permission_key\" [errorMsg]=\"\n                                        'Admin.Products.Validation.PermissionKey' | transloco\n                                    \">\n                  <input type=\"text\" class=\"form-control\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['permission_key'].errors\n                                        }\" formControlName=\"permission_key\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.FeatureKey' | transloco\"\n                  [label]=\"'Admin.Products.FeatureKey' | transloco\" name=\"feature_key\"\n                  [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n                  <input type=\"text\" class=\"form-control\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['feature_key'].errors\n                                        }\" formControlName=\"feature_key\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.Products.ProductKey' | transloco\" class=\"col-md-6 p-0\"\n                  [showTooltip]=\"true\" [tooltipText]=\"\n                                        'Admin.Products.Tooltip.PermissionKey' | transloco\n                                    \" name=\"product_key\"\n                  [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"product_key\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['product_key'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.Products.Category' | transloco\" class=\"col-md-6 p-0\"\n                  [showTooltip]=\"true\" [tooltipText]=\"\n                                        'Admin.Products.Tooltip.PermissionKey' | transloco\n                                    \" name=\"category\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n                  <p-dropdown [options]=\"categories\" class=\"dropdown-bg-transparent\" formControlName=\"category\"\n                    [style]=\"{ width: '100%' }\" [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.BillingFrequency' | transloco\"\n                  [label]=\"'Admin.Products.BillingFrequency' | transloco\" class=\"col-md-6 p-0\" name=\"billing_frequency\">\n                  <p-dropdown [options]=\"frequency\" class=\"dropdown-bg-transparent\" formControlName=\"billing_frequency\"\n                    [required]=\"true\" [style]=\"{ width: '100%' }\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['billing_frequency'].errors\n                                        }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n                  [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\">\n                  <select formControlName=\"product_privacy_service_id\" class=\"form-control form-select\">\n                    <option *ngFor=\"let option of allTos\" [value]=\"option.id\"> {{ option.title }} </option>\n                  </select>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.MasterProduct' | transloco\"\n                  [label]=\"'Admin.Products.MasterProduct' | transloco\" name=\"master_product_id\">\n                  <select formControlName=\"master_product_id\" class=\"form-control form-select\">\n                    <option *ngFor=\"let option of productsList\" [value]=\"option.value\"> {{ option.label }} </option>\n                  </select>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-4\">\n              <label class=\"info-circle\">{{ 'Admin.Products.AssignedRoles' | transloco }} <span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Subscriptions.Tooltip.AssignedRoles' |\n                  transloco }}</span>\n              </label>\n              <p-multiSelect [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"></p-multiSelect>\n            </div>\n            <div class=\"col-12 col-md-4\" *ngIf=\"supportedCurrency$ | async as currency\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n                [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\"\n                [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n                <select class=\"form-select\" formControlName=\"currency\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\">\n                  <option *ngFor=\"let option of currency['regions']\" [value]=\"option\"> {{ option }} </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\" *ngIf=\"supportedRegions$ | async as region\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n                [label]=\"'Admin.Products.Region' | transloco\" name=\"region\"\n                [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n                <select class=\"form-select\" formControlName=\"region\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\">\n                  <option *ngFor=\"let option of region['regions']\" [value]=\"option\"> {{ option }} </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.GitLabServiceDeskEmail' | transloco\"\n                [label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" name=\"gitlab_service_desk_email\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"gitlab_service_desk_email\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n              <label class=\"info-circle\"> {{ 'Admin.Products.PartnerProducts' | transloco }}<span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.PartnerProducts' | transloco\n                  }}</span>\n              </label>\n              <p-multiSelect [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n                [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n                [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <!--start toggles -->\n            <div class=\"col-12 row\">\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.IsActive' | transloco\"\n                    [label]=\"'Admin.Products.IsActive' | transloco\" name=\"active\">\n                    <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MultipleAllowed' | transloco\"\n                    [label]=\"'Admin.Products.MultipleAllowed' | transloco\" class=\"nowrap\" name=\"multiple_allowed\">\n                    <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['multiple_allowed'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsVisible' | transloco\"\n                    [label]=\"'Admin.Products.IsVisible' | transloco\" name=\"visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['visible'].errors }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MembersVisible' | transloco\"\n                    [label]=\"'Admin.Products.MembersVisible' | transloco\" name=\"members_visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['members_visible'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.ChatVisible' | transloco\"\n                    [label]=\"'Admin.Products.ChatVisible' | transloco\" name=\"chat_visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['chat_visible'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsMasterProduct' | transloco\"\n                    [label]=\"'Admin.Products.IsMasterProduct' | transloco\" name=\"is_master_product\">\n                    <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['is_master_product'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <!-- end toggles -->\n          </div>\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' |\n                transloco }} </button>\n              <button type=\"submit\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n                | transloco }} </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #content let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <pw-image-cropper #profile (imageSelectionEvent)=\"onImageSelection($event)\" aspectRatio=\"fullLogo\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n<ng-template #squaredLogoContent let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <pw-image-cropper #profile (imageSelectionEvent)=\"uploadSquaredLogo($event)\" aspectRatio=\"auto\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n", styles: [".nowrap{white-space:nowrap}textarea{height:180px}.full-logo{object-fit:cover;width:280px}\n"], dependencies: [{ kind: "directive", type: i3$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i4$2.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i4$2.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }, { kind: "component", type: i5$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i9.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "directive", type: i10.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i10.LazyImgDirective, selector: "img" }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -3507,7 +3503,7 @@ __decorate([
 ], ProductDetailsComponent.prototype, "onSave", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ProductDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-product-details', template: "<div class=\"container-fluid pw-tab product-form overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n          aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">Product: {{ data?.name ? data?.name : 'Add New' }}</h3>\n    </div>\n      <div class=\"my-4\">\n        <div class=\"mb-5\">\n          <p-accordion>\n            <p-accordionTab [header]=\"'How To'\">\n              <div class=\"row\">\n                <div class=\"col-12 col-md-6\">\n                  <h4>Product / Feature logic</h4>\n                  <p> Logic for back-end/front-end permissions binding:\n                    <br /> * product.category (these are features) =&gt; type of product, i.e., seat_pricing or item_pricing\n                    <br /> * product.feature_key =&gt; this describes the main feature\n                    <br /> * product.permission_key =&gt; users can be subscribed to only one product of same permission_key\n                    <br /> * product.product_key =&gt; this is unique to each product, it defines the permission for frontend binding\n                    <br /> * Example of permission =&gt; {{ 'Pages.Product.{permission_key}.{product_key}' }}\n                    <br /> * If it's a feature associated to an existing project, you can to set the \"dependency product\" accordingly. </p>\n                </div>\n                <div class=\"col-12 col-md-6\">\n                  <h4>If it's a Free Product</h4>\n                  <p> Stripe Plan needs to be nil. <br /> \"Price\" per Unit needs to be set as 0. <br /> \"Trial Days\" needs\n                    to be something like 99999. <br /> The product should be set as \"visible===false\". </p>\n                </div>\n              </div>\n            </p-accordionTab>\n          </p-accordion>\n        </div>\n        <div class=\"row\" *ngIf=\"id\">\n          <div class=\"col-md-6\">\n            <div class=\"text-center mt-5\">\n              <div class=\"image-container\">\n                <h4 class=\"mb-2\"> {{ 'User.Subscriptions.FullLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n                    [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\" [appendTo]=\"'body'\"\n                    [tooltipPosition]=\"'top'\">\n                    <i class=\"fas fa-info-circle\"></i>\n                  </span>\n                </h4>\n                <img [src]=\"fullLogo\" alt=\"\" class=\"image full-logo w-100 h-100\"\n                  onerror=\"this.onerror=null;this.src='assets/img/icons/demo_logo1.png';\" />\n                <div class=\"overlay mt-2\" (click)=\"openModal(content)\">\n                  <div class=\"overlay-text\">\n                    <a href=\"javascript:void(0)\">{{ 'User.Profile.Change' | transloco }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"text-center mt-5\">\n              <div class=\"image-container\">\n                <h4 class=\"mb-2\"> {{ 'User.Subscriptions.SquaredLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n                    [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\" [appendTo]=\"'body'\"\n                    [tooltipPosition]=\"'top'\">\n                    <i class=\"fas fa-info-circle\"></i>\n                  </span>\n                </h4>\n                <img [src]=\"squaredLogo\" alt=\"\" width=\"70\" class=\"squared_logo\" height=\"70\"\n                  onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n                <div class=\"overlay mt-2\" (click)=\"openModal(squaredLogoContent)\">\n                  <div class=\"overlay-text\">\n                    <a href=\"javascript:void(0)\">{{ 'User.Profile.Change' | transloco }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-md-6\">\n              <div class=\"row\">\n                <div class=\"col-md-6\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Name' | transloco\"\n                    [label]=\"'Label.Name' | transloco\" class=\"col-md-6 p-0\" name=\"name\"\n                    [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"name\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-md-6\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.NickName' | transloco\"\n                    [label]=\"'Admin.Products.NickName' | transloco\" class=\"col-md-6 p-0\" name=\"nickname\" [errorMsg]=\"\n                                            'Admin.Products.Validation.NickName' | transloco\n                                        \">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"nickname\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['nickname'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"row\">\n                <div class=\"mb-3 col-12 col-md-6\">\n                  <pw-input-container [label]=\"'Admin.Products.MinUnit' | transloco\" [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MinUnits' | transloco\" class=\"col-md-6 p-0\" name=\"min_units\"\n                    [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n                    <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"min_units\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['min_units'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"mb-3 col-12 col-md-6\">\n                  <pw-input-container [label]=\"'Admin.Products.MaxUnit' | transloco\" [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MaxUnits' | transloco\" class=\"col-md-6 p-0\" name=\"max_units\"\n                    [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n                    <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"max_units\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['max_units'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <label class=\"info-circle\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.DependencyProducts' |\n                  transloco }}</span>\n              </label>\n              <p-multiSelect [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n                [ngModelOptions]=\"{ standalone: true }\" (onChange)=\"onSearchCriteria($event)\" [showHeader]=\"false\"\n                maxSelectedLabels=\"1\" appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.StripePlan' | transloco\"\n                  [label]=\"'Admin.Products.StripePlan' | transloco\" class=\"col-md-6 p-0\" name=\"stripe_plan_id\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"stripe_plan_id\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Price' | transloco\"\n                  [label]=\"'Admin.Products.Price' | transloco\" class=\"col-md-6 p-0\" name=\"price_per_unit\"\n                  [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                  <input type=\"text\" numbersOnly class=\"form-control\" formControlName=\"price_per_unit\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['price_per_unit'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialDays' | transloco\"\n                  [label]=\"'Admin.Products.TrialDays' | transloco\" class=\"col-md-6 p-0\" name=\"trial_days\"\n                  [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n                  <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"trial_days\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['trial_days'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.MaxTrialHits' | transloco\"\n                  [label]=\"'Admin.Products.MaxTrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits_trial\">\n                  <input type=\"number\" min=\"0\" class=\"form-control\" formControlName=\"max_hits_trial\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['max_hits_trial'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialHits' | transloco\"\n                  [label]=\"'Admin.Products.TrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits\">\n                  <input type=\"number\" min=\"0\" class=\"form-control\" formControlName=\"max_hits\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['max_hits'].errors }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n                [label]=\"'Admin.Products.Description' | transloco\" name=\"description\"\n                [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n                <quill-editor [styles]=\"{ height: '220px' }\" formControlName=\"description\"\n                [modules]=\"editorConfig\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'w-100': true}\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n                [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\">\n                <quill-editor [modules]=\"editorConfig\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" [ngClass]=\"{\n                                        'is-invalid': submitted && f['signup_instructions'].errors, 'w-100': true\n                                    }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n                [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\">\n                <quill-editor [modules]=\"editorConfig\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" [ngClass]=\"{\n                                        'is-invalid':\n                                            submitted && f['signup_instruction_employees'].errors, 'w-100': true\n                                    }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n                  [label]=\"'Admin.Products.PermissionKey' | transloco\" name=\"permission_key\" [errorMsg]=\"\n                                        'Admin.Products.Validation.PermissionKey' | transloco\n                                    \">\n                  <input type=\"text\" class=\"form-control\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['permission_key'].errors\n                                        }\" formControlName=\"permission_key\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.FeatureKey' | transloco\"\n                  [label]=\"'Admin.Products.FeatureKey' | transloco\" name=\"feature_key\"\n                  [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n                  <input type=\"text\" class=\"form-control\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['feature_key'].errors\n                                        }\" formControlName=\"feature_key\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.Products.ProductKey' | transloco\" class=\"col-md-6 p-0\"\n                  [showTooltip]=\"true\" [tooltipText]=\"\n                                        'Admin.Products.Tooltip.PermissionKey' | transloco\n                                    \" name=\"product_key\"\n                  [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"product_key\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['product_key'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.Products.Category' | transloco\" class=\"col-md-6 p-0\"\n                  [showTooltip]=\"true\" [tooltipText]=\"\n                                        'Admin.Products.Tooltip.PermissionKey' | transloco\n                                    \" name=\"category\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n                  <p-dropdown [options]=\"categories\" class=\"dropdown-bg-transparent\" formControlName=\"category\"\n                    [style]=\"{ width: '100%' }\" [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.BillingFrequency' | transloco\"\n                  [label]=\"'Admin.Products.BillingFrequency' | transloco\" class=\"col-md-6 p-0\" name=\"billing_frequency\">\n                  <p-dropdown [options]=\"frequency\" class=\"dropdown-bg-transparent\" formControlName=\"billing_frequency\"\n                    [required]=\"true\" [style]=\"{ width: '100%' }\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['billing_frequency'].errors\n                                        }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n                  [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\">\n                  <select formControlName=\"product_privacy_service_id\" class=\"form-control form-select\">\n                    <option *ngFor=\"let option of allTos\" [value]=\"option.id\"> {{ option.title }} </option>\n                  </select>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.MasterProduct' | transloco\"\n                  [label]=\"'Admin.Products.MasterProduct' | transloco\" name=\"master_product_id\">\n                  <select formControlName=\"master_product_id\" class=\"form-control form-select\">\n                    <option *ngFor=\"let option of productsList\" [value]=\"option.value\"> {{ option.label }} </option>\n                  </select>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-4\">\n              <label class=\"info-circle\">{{ 'Admin.Products.AssignedRoles' | transloco }} <span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Subscriptions.Tooltip.AssignedRoles' |\n                  transloco }}</span>\n              </label>\n              <p-multiSelect [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"></p-multiSelect>\n            </div>\n            <div class=\"col-12 col-md-4\" *ngIf=\"supportedCurrency$ | async as currency\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n                [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\"\n                [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n                <select class=\"form-select\" formControlName=\"currency\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\">\n                  <option *ngFor=\"let option of currency['regions']\" [value]=\"option\"> {{ option }} </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\" *ngIf=\"supportedRegions$ | async as region\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n                [label]=\"'Admin.Products.Region' | transloco\" name=\"region\"\n                [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n                <select class=\"form-select\" formControlName=\"region\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\">\n                  <option *ngFor=\"let option of region['regions']\" [value]=\"option\"> {{ option }} </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.GitLabServiceDeskEmail' | transloco\"\n                [label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" name=\"gitlab_service_desk_email\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"gitlab_service_desk_email\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n              <label class=\"info-circle\"> {{ 'Admin.Products.PartnerProducts' | transloco }}<span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.PartnerProducts' | transloco\n                  }}</span>\n              </label>\n              <p-multiSelect [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n                [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n                [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <!--start toggles -->\n            <div class=\"col-12 row\">\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.IsActive' | transloco\"\n                    [label]=\"'Admin.Products.IsActive' | transloco\" name=\"active\">\n                    <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MultipleAllowed' | transloco\"\n                    [label]=\"'Admin.Products.MultipleAllowed' | transloco\" class=\"nowrap\" name=\"multiple_allowed\">\n                    <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['multiple_allowed'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsVisible' | transloco\"\n                    [label]=\"'Admin.Products.IsVisible' | transloco\" name=\"visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['visible'].errors }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MembersVisible' | transloco\"\n                    [label]=\"'Admin.Products.MembersVisible' | transloco\" name=\"members_visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['members_visible'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.ChatVisible' | transloco\"\n                    [label]=\"'Admin.Products.ChatVisible' | transloco\" name=\"chat_visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['chat_visible'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsMasterProduct' | transloco\"\n                    [label]=\"'Admin.Products.IsMasterProduct' | transloco\" name=\"is_master_product\">\n                    <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['is_master_product'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <!-- end toggles -->\n          </div>\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' |\n                transloco }} </button>\n              <button type=\"submit\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n                | transloco }} </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #content let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <pw-image-cropper #profile (imageSelectionEvent)=\"onImageSelection($event)\" aspectRatio=\"fullLogo\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n<ng-template #squaredLogoContent let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <pw-image-cropper #profile (imageSelectionEvent)=\"uploadSquaredLogo($event)\" aspectRatio=\"auto\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n", styles: [".nowrap{white-space:nowrap}textarea{height:180px}.full-logo{object-fit:cover;width:280px}\n"] }]
+            args: [{ selector: 'pw-product-details', template: "<div class=\"container-fluid pw-tab product-form overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n          aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">Product: {{ data?.name ? data?.name : 'Add New' }}</h3>\n    </div>\n      <div class=\"my-4\">\n        <div class=\"mb-5\">\n          <p-accordion>\n            <p-accordionTab [header]=\"'How To'\">\n              <div class=\"row\">\n                <div class=\"col-12 col-md-6\">\n                  <h4>Product / Feature logic</h4>\n                  <p> Logic for back-end/front-end permissions binding:\n                    <br /> * product.category (these are features) =&gt; type of product, i.e., seat_pricing or item_pricing\n                    <br /> * product.feature_key =&gt; this describes the main feature\n                    <br /> * product.permission_key =&gt; users can be subscribed to only one product of same permission_key\n                    <br /> * product.product_key =&gt; this is unique to each product, it defines the permission for frontend binding\n                    <br /> * Example of permission =&gt; {{ 'Pages.Product.{permission_key}.{product_key}' }}\n                    <br /> * If it's a feature associated to an existing project, you can to set the \"dependency product\" accordingly. </p>\n                </div>\n                <div class=\"col-12 col-md-6\">\n                  <h4>If it's a Free Product</h4>\n                  <p> Stripe Plan needs to be nil. <br /> \"Price\" per Unit needs to be set as 0. <br /> \"Trial Days\" needs\n                    to be something like 99999. <br /> The product should be set as \"visible===false\". </p>\n                </div>\n              </div>\n            </p-accordionTab>\n          </p-accordion>\n        </div>\n        <div class=\"row\" *ngIf=\"id\">\n          <div class=\"col-md-6\">\n            <div class=\"text-center mt-5\">\n              <div class=\"image-container\">\n                <h4 class=\"mb-2\"> {{ 'User.Subscriptions.FullLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n                    [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\" [appendTo]=\"'body'\"\n                    [tooltipPosition]=\"'top'\">\n                    <i class=\"fas fa-info-circle\"></i>\n                  </span>\n                </h4>\n                <img [src]=\"fullLogo\" alt=\"\" class=\"image full-logo w-100 h-100\"\n                  onerror=\"this.onerror=null;this.src='assets/img/icons/demo_logo1.png';\" />\n                <div class=\"overlay mt-2\" (click)=\"openModal(content)\">\n                  <div class=\"overlay-text\">\n                    <a href=\"javascript:void(0)\">{{ 'User.Profile.Change' | transloco }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-md-6\">\n            <div class=\"text-center mt-5\">\n              <div class=\"image-container\">\n                <h4 class=\"mb-2\"> {{ 'User.Subscriptions.SquaredLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n                    [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\" [appendTo]=\"'body'\"\n                    [tooltipPosition]=\"'top'\">\n                    <i class=\"fas fa-info-circle\"></i>\n                  </span>\n                </h4>\n                <img [src]=\"squaredLogo\" alt=\"\" width=\"70\" class=\"squared_logo\" height=\"70\"\n                  onerror=\"this.onerror=null;this.src='assets/img/icons/company.png';\" />\n                <div class=\"overlay mt-2\" (click)=\"openModal(squaredLogoContent)\">\n                  <div class=\"overlay-text\">\n                    <a href=\"javascript:void(0)\">{{ 'User.Profile.Change' | transloco }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"col-12 col-md-6\">\n              <div class=\"row\">\n                <div class=\"col-md-6\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Name' | transloco\"\n                    [label]=\"'Label.Name' | transloco\" class=\"col-md-6 p-0\" name=\"name\"\n                    [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"name\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-md-6\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.NickName' | transloco\"\n                    [label]=\"'Admin.Products.NickName' | transloco\" class=\"col-md-6 p-0\" name=\"nickname\" [errorMsg]=\"\n                                            'Admin.Products.Validation.NickName' | transloco\n                                        \">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"nickname\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['nickname'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"row\">\n                <div class=\"mb-3 col-12 col-md-6\">\n                  <pw-input-container [label]=\"'Admin.Products.MinUnit' | transloco\" [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MinUnits' | transloco\" class=\"col-md-6 p-0\" name=\"min_units\"\n                    [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n                    <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"min_units\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['min_units'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"mb-3 col-12 col-md-6\">\n                  <pw-input-container [label]=\"'Admin.Products.MaxUnit' | transloco\" [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MaxUnits' | transloco\" class=\"col-md-6 p-0\" name=\"max_units\"\n                    [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n                    <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"max_units\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['max_units'].errors\n                                            }\" />\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <label class=\"info-circle\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.DependencyProducts' |\n                  transloco }}</span>\n              </label>\n              <p-multiSelect [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n                [ngModelOptions]=\"{ standalone: true }\" (onChange)=\"onSearchCriteria($event)\" [showHeader]=\"false\"\n                maxSelectedLabels=\"1\" appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.StripePlan' | transloco\"\n                  [label]=\"'Admin.Products.StripePlan' | transloco\" class=\"col-md-6 p-0\" name=\"stripe_plan_id\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"stripe_plan_id\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Price' | transloco\"\n                  [label]=\"'Admin.Products.Price' | transloco\" class=\"col-md-6 p-0\" name=\"price_per_unit\"\n                  [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                  <input type=\"text\" numbersOnly class=\"form-control\" formControlName=\"price_per_unit\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['price_per_unit'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialDays' | transloco\"\n                  [label]=\"'Admin.Products.TrialDays' | transloco\" class=\"col-md-6 p-0\" name=\"trial_days\"\n                  [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n                  <input type=\"number\" min=\"1\" class=\"form-control\" formControlName=\"trial_days\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['trial_days'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.MaxTrialHits' | transloco\"\n                  [label]=\"'Admin.Products.MaxTrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits_trial\">\n                  <input type=\"number\" min=\"0\" class=\"form-control\" formControlName=\"max_hits_trial\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['max_hits_trial'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialHits' | transloco\"\n                  [label]=\"'Admin.Products.TrialHits' | transloco\" class=\"col-md-6 p-0\" name=\"max_hits\">\n                  <input type=\"number\" min=\"0\" class=\"form-control\" formControlName=\"max_hits\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['max_hits'].errors }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n                [label]=\"'Admin.Products.Description' | transloco\" name=\"description\"\n                [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n                <quill-editor [styles]=\"{ height: '220px' }\" formControlName=\"description\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'w-100': true}\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n                [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\">\n                <quill-editor [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" [ngClass]=\"{\n                                        'is-invalid': submitted && f['signup_instructions'].errors, 'w-100': true\n                                    }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n                [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\">\n                <quill-editor [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" [ngClass]=\"{\n                                        'is-invalid':\n                                            submitted && f['signup_instruction_employees'].errors, 'w-100': true\n                                    }\">\n                </quill-editor>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n                  [label]=\"'Admin.Products.PermissionKey' | transloco\" name=\"permission_key\" [errorMsg]=\"\n                                        'Admin.Products.Validation.PermissionKey' | transloco\n                                    \">\n                  <input type=\"text\" class=\"form-control\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['permission_key'].errors\n                                        }\" formControlName=\"permission_key\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.FeatureKey' | transloco\"\n                  [label]=\"'Admin.Products.FeatureKey' | transloco\" name=\"feature_key\"\n                  [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n                  <input type=\"text\" class=\"form-control\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['feature_key'].errors\n                                        }\" formControlName=\"feature_key\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.Products.ProductKey' | transloco\" class=\"col-md-6 p-0\"\n                  [showTooltip]=\"true\" [tooltipText]=\"\n                                        'Admin.Products.Tooltip.PermissionKey' | transloco\n                                    \" name=\"product_key\"\n                  [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"product_key\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['product_key'].errors\n                                        }\" />\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Admin.Products.Category' | transloco\" class=\"col-md-6 p-0\"\n                  [showTooltip]=\"true\" [tooltipText]=\"\n                                        'Admin.Products.Tooltip.PermissionKey' | transloco\n                                    \" name=\"category\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n                  <p-dropdown [options]=\"categories\" class=\"dropdown-bg-transparent\" formControlName=\"category\"\n                    [style]=\"{ width: '100%' }\" [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.BillingFrequency' | transloco\"\n                  [label]=\"'Admin.Products.BillingFrequency' | transloco\" class=\"col-md-6 p-0\" name=\"billing_frequency\">\n                  <p-dropdown [options]=\"frequency\" class=\"dropdown-bg-transparent\" formControlName=\"billing_frequency\"\n                    [required]=\"true\" [style]=\"{ width: '100%' }\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['billing_frequency'].errors\n                                        }\">\n                  </p-dropdown>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n                  [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\">\n                  <select formControlName=\"product_privacy_service_id\" class=\"form-control form-select\">\n                    <option *ngFor=\"let option of allTos\" [value]=\"option.id\"> {{ option.title }} </option>\n                  </select>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Products.Tooltip.MasterProduct' | transloco\"\n                  [label]=\"'Admin.Products.MasterProduct' | transloco\" name=\"master_product_id\">\n                  <select formControlName=\"master_product_id\" class=\"form-control form-select\">\n                    <option *ngFor=\"let option of productsList\" [value]=\"option.value\"> {{ option.label }} </option>\n                  </select>\n                </pw-input-container>\n              </div>\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-4\">\n              <label class=\"info-circle\">{{ 'Admin.Products.AssignedRoles' | transloco }} <span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Subscriptions.Tooltip.AssignedRoles' |\n                  transloco }}</span>\n              </label>\n              <p-multiSelect [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"></p-multiSelect>\n            </div>\n            <div class=\"col-12 col-md-4\" *ngIf=\"supportedCurrency$ | async as currency\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n                [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\"\n                [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n                <select class=\"form-select\" formControlName=\"currency\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\">\n                  <option *ngFor=\"let option of currency['regions']\" [value]=\"option\"> {{ option }} </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\" *ngIf=\"supportedRegions$ | async as region\">\n              <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n                [label]=\"'Admin.Products.Region' | transloco\" name=\"region\"\n                [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n                <select class=\"form-select\" formControlName=\"region\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\">\n                  <option *ngFor=\"let option of region['regions']\" [value]=\"option\"> {{ option }} </option>\n                </select>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\">\n              <pw-input-container [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Products.Tooltip.GitLabServiceDeskEmail' | transloco\"\n                [label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" name=\"gitlab_service_desk_email\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"gitlab_service_desk_email\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n              <label class=\"info-circle\"> {{ 'Admin.Products.PartnerProducts' | transloco }}<span\n                  class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.PartnerProducts' | transloco\n                  }}</span>\n              </label>\n              <p-multiSelect [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n                [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n                [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n              </p-multiSelect>\n            </div>\n            <!--start toggles -->\n            <div class=\"col-12 row\">\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.IsActive' | transloco\"\n                    [label]=\"'Admin.Products.IsActive' | transloco\" name=\"active\">\n                    <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MultipleAllowed' | transloco\"\n                    [label]=\"'Admin.Products.MultipleAllowed' | transloco\" class=\"nowrap\" name=\"multiple_allowed\">\n                    <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['multiple_allowed'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsVisible' | transloco\"\n                    [label]=\"'Admin.Products.IsVisible' | transloco\" name=\"visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['visible'].errors }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.MembersVisible' | transloco\"\n                    [label]=\"'Admin.Products.MembersVisible' | transloco\" name=\"members_visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['members_visible'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.ChatVisible' | transloco\"\n                    [label]=\"'Admin.Products.ChatVisible' | transloco\" name=\"chat_visible\">\n                    <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['chat_visible'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n              <div class=\"col\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"mb-3\">\n                  <pw-input-container [showTooltip]=\"true\"\n                    [tooltipText]=\"'Admin.Products.Tooltip.IsMasterProduct' | transloco\"\n                    [label]=\"'Admin.Products.IsMasterProduct' | transloco\" name=\"is_master_product\">\n                    <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['is_master_product'].errors\n                                            }\">\n                    </ui-switch>\n                  </pw-input-container>\n                </div>\n              </div>\n            </div>\n            <!-- end toggles -->\n          </div>\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' |\n                transloco }} </button>\n              <button type=\"submit\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n                | transloco }} </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n<ng-template #content let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <pw-image-cropper #profile (imageSelectionEvent)=\"onImageSelection($event)\" aspectRatio=\"fullLogo\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n<ng-template #squaredLogoContent let-modal>\n  <div class=\"modal-header\">\n    <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n    <pw-image-cropper #profile (imageSelectionEvent)=\"uploadSquaredLogo($event)\" aspectRatio=\"auto\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n", styles: [".nowrap{white-space:nowrap}textarea{height:180px}.full-logo{object-fit:cover;width:280px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$1.ProductService }, { type: i3$2.NgbModal }, { type: i1.AdminService }], propDecorators: { onSave: [] } });
 
 class ProductInsightComponent extends AppBaseComponent {
@@ -3740,7 +3736,6 @@ class AgentDetailsComponent extends AppBaseComponent {
         this.groupService = groupService;
         this.config = config;
         this.submitted = false;
-        this.allAgents = [];
         this.allUsers = [];
         this.filteredUsers = [];
         this.form = AppAdmin.getSubscriptionAgentsForm();
@@ -4052,8 +4047,8 @@ class SubscriptionAgentsListComponent extends AppBaseComponent {
     search(event) {
         let values = [];
         if (event.query) {
-            values = this.allUsers.filter((x) => {
-                return x.displayName.toLowerCase().includes(event.query.toLowerCase());
+            values = this.allUsers.filter((element) => {
+                return element.displayName.toLowerCase().includes(event.query.toLowerCase());
             });
         }
         else {
@@ -4215,7 +4210,8 @@ class SubscriptionDetailsComponent extends AppBaseComponent {
             });
         }
         this.subscriptionsRolesData = {
-            subscription_id: this.id
+            subscription_id: this.id,
+            subscription_roles: []
         };
         if (this.form.get('roles').value && this.form.get('roles').value?.length) {
             this.subscriptionsRolesData['subscription_roles'] = this.form
@@ -6563,8 +6559,6 @@ class AddEditIncidentComponent extends AppBaseComponent {
         this.buttonBusy = false;
         this.subscriptionId = PermissionService.selectedSubscription?.id;
         this.form = AppAdmin.getIncidentForm();
-        QuillHelper.init();
-        this.editorConfig = QuillHelper.getEditorConfig();
     }
     ngOnInit() {
         this.logo = this.appConfig?.company?.logos?.main?.url;
@@ -6652,11 +6646,11 @@ class AddEditIncidentComponent extends AppBaseComponent {
         this.router.navigate([`${this.routers.incidentConfig}`]);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AddEditIncidentComponent, deps: [{ token: i0.Injector }, { token: i1$1.CommonService }, { token: i2$2.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: AddEditIncidentComponent, selector: "pw-admin-add-edit-incident", viewQueries: [{ propertyName: "editForm", first: true, predicate: ["editForm"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n    <div class=\"dashboard\">\n        <div class=\"dashboard-body\">\n            <div class=\"me-auto col-xs-6 mt-4\">\n                <a href=\"javascript:void(0)\" routerLink=\"/admin/incident/list\" class=\"previous\"><i\n                        class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n                <h3 class=\"mt-3\">{{ id ? 'Edit' : 'Add New' }} Incident</h3>\n            </div>\n            <div class=\"p-2 mt-3\">\n                <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\n                    <div class=\"row\">\n                        <pw-input-container class=\"col-lg-6\" [label]=\"'Admin.Incident.UrlImpacted' | transloco\"\n                            name=\"url_impacted\" [errorMsg]=\"'Admin.Incident.Validation.UrlImpacted' | transloco\">\n                            <input type=\"text\" formControlName=\"url_impacted\" class=\"form-control\"\n                                [ngClass]=\"{ 'is-invalid': submitted && f['url_impacted'].errors }\" />\n                        </pw-input-container>\n                        <pw-input-container class=\"col-lg-6\" [label]=\"'Admin.Incident.ServiceImpacted' | transloco\"\n                            name=\"service_impacted\"\n                            [errorMsg]=\"'Admin.Incident.Validation.ServiceImpacted' | transloco\">\n                            <input type=\"text\" formControlName=\"service_impacted\" class=\"form-control\"\n                                [ngClass]=\"{ 'is-invalid': submitted && f['service_impacted'].errors }\" />\n                        </pw-input-container>\n                        <div class=\"col-lg-12\">\n                            <pw-input-container class=\"col-12 quill-editor\"\n                                [label]=\"'Admin.Incident.Description' | transloco\" name=\"description\"\n                                [errorMsg]=\"'Admin.Incident.Validation.Description' | transloco\">\n                                <quill-editor [styles]=\"{ height: '200px'}\" formControlName=\"description\"\n                                    class=\"quillEditor d-block\"\n                                    [modules]=\"editorConfig\"\n                                    [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'w-100': true  }\">\n                                </quill-editor>\n                            </pw-input-container>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.StartedAt' | transloco\" name=\"started_at\"\n                                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"started_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd/M/yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.ResolvedAt' | transloco\" name=\"resolved_at\"\n                                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"resolved_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd/M/yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.LastCheckedAt' | transloco\"\n                                    name=\"last_check_at\" [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"last_check_at\"[placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showIcon]=\"true\" [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd/M/yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-12 mt-4\">\n                            <div class=\"mb-3 text-end\">\n                                <button type=\"button\" class=\"btn btn-outline-default me-2\" data-bs-toggle=\"collapse\"\n                                    (click)=\"onCancel()\" role=\"button\" aria-expanded=\"false\"\n                                    aria-controls=\"incidentCollapse\"> {{ 'Button.Cancel' | transloco }} </button>\n                                <button class=\"btn btn-primary\" [disabled]=\"!isSuperAdmin\" [buttonBusy]=\"buttonBusy\">{{\n                                    'Button.Save' | transloco }}</button>\n                            </div>\n                        </div>\n                    </div>\n                </form>\n            </div>\n        </div>\n    </div>\n</div>", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"], dependencies: [{ kind: "component", type: i7$1.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: AddEditIncidentComponent, selector: "pw-admin-add-edit-incident", viewQueries: [{ propertyName: "editForm", first: true, predicate: ["editForm"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n    <div class=\"dashboard\">\n        <div class=\"dashboard-body\">\n            <div class=\"me-auto col-xs-6 mt-4\">\n                <a href=\"javascript:void(0)\" routerLink=\"/admin/incident/list\" class=\"previous\"><i\n                        class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n                <h3 class=\"mt-3\">{{ id ? 'Edit' : 'Add New' }} Incident</h3>\n            </div>\n            <div class=\"p-2 mt-3\">\n                <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\n                    <div class=\"row\">\n                        <pw-input-container class=\"col-lg-6\" [label]=\"'Admin.Incident.UrlImpacted' | transloco\"\n                            name=\"url_impacted\" [errorMsg]=\"'Admin.Incident.Validation.UrlImpacted' | transloco\">\n                            <input type=\"text\" formControlName=\"url_impacted\" class=\"form-control\"\n                                [ngClass]=\"{ 'is-invalid': submitted && f['url_impacted'].errors }\" />\n                        </pw-input-container>\n                        <pw-input-container class=\"col-lg-6\" [label]=\"'Admin.Incident.ServiceImpacted' | transloco\"\n                            name=\"service_impacted\"\n                            [errorMsg]=\"'Admin.Incident.Validation.ServiceImpacted' | transloco\">\n                            <input type=\"text\" formControlName=\"service_impacted\" class=\"form-control\"\n                                [ngClass]=\"{ 'is-invalid': submitted && f['service_impacted'].errors }\" />\n                        </pw-input-container>\n                        <div class=\"col-lg-12\">\n                            <pw-input-container class=\"col-12 quill-editor\"\n                                [label]=\"'Admin.Incident.Description' | transloco\" name=\"description\"\n                                [errorMsg]=\"'Admin.Incident.Validation.Description' | transloco\">\n                                <quill-editor [styles]=\"{ height: '200px'}\" formControlName=\"description\"\n                                    class=\"quillEditor d-block\"\n                                    [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'w-100': true  }\">\n                                </quill-editor>\n                            </pw-input-container>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.StartedAt' | transloco\" name=\"started_at\"\n                                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"started_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd/M/yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.ResolvedAt' | transloco\" name=\"resolved_at\"\n                                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"resolved_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd/M/yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.LastCheckedAt' | transloco\"\n                                    name=\"last_check_at\" [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"last_check_at\"[placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showIcon]=\"true\" [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd/M/yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-12 mt-4\">\n                            <div class=\"mb-3 text-end\">\n                                <button type=\"button\" class=\"btn btn-outline-default me-2\" data-bs-toggle=\"collapse\"\n                                    (click)=\"onCancel()\" role=\"button\" aria-expanded=\"false\"\n                                    aria-controls=\"incidentCollapse\"> {{ 'Button.Cancel' | transloco }} </button>\n                                <button class=\"btn btn-primary\" [disabled]=\"!isSuperAdmin\" [buttonBusy]=\"buttonBusy\">{{\n                                    'Button.Save' | transloco }}</button>\n                            </div>\n                        </div>\n                    </div>\n                </form>\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)}\n"], dependencies: [{ kind: "component", type: i7$1.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AddEditIncidentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-admin-add-edit-incident', template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n    <div class=\"dashboard\">\n        <div class=\"dashboard-body\">\n            <div class=\"me-auto col-xs-6 mt-4\">\n                <a href=\"javascript:void(0)\" routerLink=\"/admin/incident/list\" class=\"previous\"><i\n                        class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n                <h3 class=\"mt-3\">{{ id ? 'Edit' : 'Add New' }} Incident</h3>\n            </div>\n            <div class=\"p-2 mt-3\">\n                <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\n                    <div class=\"row\">\n                        <pw-input-container class=\"col-lg-6\" [label]=\"'Admin.Incident.UrlImpacted' | transloco\"\n                            name=\"url_impacted\" [errorMsg]=\"'Admin.Incident.Validation.UrlImpacted' | transloco\">\n                            <input type=\"text\" formControlName=\"url_impacted\" class=\"form-control\"\n                                [ngClass]=\"{ 'is-invalid': submitted && f['url_impacted'].errors }\" />\n                        </pw-input-container>\n                        <pw-input-container class=\"col-lg-6\" [label]=\"'Admin.Incident.ServiceImpacted' | transloco\"\n                            name=\"service_impacted\"\n                            [errorMsg]=\"'Admin.Incident.Validation.ServiceImpacted' | transloco\">\n                            <input type=\"text\" formControlName=\"service_impacted\" class=\"form-control\"\n                                [ngClass]=\"{ 'is-invalid': submitted && f['service_impacted'].errors }\" />\n                        </pw-input-container>\n                        <div class=\"col-lg-12\">\n                            <pw-input-container class=\"col-12 quill-editor\"\n                                [label]=\"'Admin.Incident.Description' | transloco\" name=\"description\"\n                                [errorMsg]=\"'Admin.Incident.Validation.Description' | transloco\">\n                                <quill-editor [styles]=\"{ height: '200px'}\" formControlName=\"description\"\n                                    class=\"quillEditor d-block\"\n                                    [modules]=\"editorConfig\"\n                                    [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'w-100': true  }\">\n                                </quill-editor>\n                            </pw-input-container>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.StartedAt' | transloco\" name=\"started_at\"\n                                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"started_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd/M/yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.ResolvedAt' | transloco\" name=\"resolved_at\"\n                                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"resolved_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd/M/yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.LastCheckedAt' | transloco\"\n                                    name=\"last_check_at\" [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"last_check_at\"[placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showIcon]=\"true\" [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd/M/yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-12 mt-4\">\n                            <div class=\"mb-3 text-end\">\n                                <button type=\"button\" class=\"btn btn-outline-default me-2\" data-bs-toggle=\"collapse\"\n                                    (click)=\"onCancel()\" role=\"button\" aria-expanded=\"false\"\n                                    aria-controls=\"incidentCollapse\"> {{ 'Button.Cancel' | transloco }} </button>\n                                <button class=\"btn btn-primary\" [disabled]=\"!isSuperAdmin\" [buttonBusy]=\"buttonBusy\">{{\n                                    'Button.Save' | transloco }}</button>\n                            </div>\n                        </div>\n                    </div>\n                </form>\n            </div>\n        </div>\n    </div>\n</div>", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"] }]
+            args: [{ selector: 'pw-admin-add-edit-incident', template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n    <div class=\"dashboard\">\n        <div class=\"dashboard-body\">\n            <div class=\"me-auto col-xs-6 mt-4\">\n                <a href=\"javascript:void(0)\" routerLink=\"/admin/incident/list\" class=\"previous\"><i\n                        class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n                <h3 class=\"mt-3\">{{ id ? 'Edit' : 'Add New' }} Incident</h3>\n            </div>\n            <div class=\"p-2 mt-3\">\n                <form (ngSubmit)=\"onSubmit()\" [formGroup]=\"form\">\n                    <div class=\"row\">\n                        <pw-input-container class=\"col-lg-6\" [label]=\"'Admin.Incident.UrlImpacted' | transloco\"\n                            name=\"url_impacted\" [errorMsg]=\"'Admin.Incident.Validation.UrlImpacted' | transloco\">\n                            <input type=\"text\" formControlName=\"url_impacted\" class=\"form-control\"\n                                [ngClass]=\"{ 'is-invalid': submitted && f['url_impacted'].errors }\" />\n                        </pw-input-container>\n                        <pw-input-container class=\"col-lg-6\" [label]=\"'Admin.Incident.ServiceImpacted' | transloco\"\n                            name=\"service_impacted\"\n                            [errorMsg]=\"'Admin.Incident.Validation.ServiceImpacted' | transloco\">\n                            <input type=\"text\" formControlName=\"service_impacted\" class=\"form-control\"\n                                [ngClass]=\"{ 'is-invalid': submitted && f['service_impacted'].errors }\" />\n                        </pw-input-container>\n                        <div class=\"col-lg-12\">\n                            <pw-input-container class=\"col-12 quill-editor\"\n                                [label]=\"'Admin.Incident.Description' | transloco\" name=\"description\"\n                                [errorMsg]=\"'Admin.Incident.Validation.Description' | transloco\">\n                                <quill-editor [styles]=\"{ height: '200px'}\" formControlName=\"description\"\n                                    class=\"quillEditor d-block\"\n                                    [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'w-100': true  }\">\n                                </quill-editor>\n                            </pw-input-container>\n                        </div>\n                        <div class=\"row\">\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.StartedAt' | transloco\" name=\"started_at\"\n                                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"started_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd/M/yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.ResolvedAt' | transloco\" name=\"resolved_at\"\n                                    [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"resolved_at\" [showIcon]=\"true\" [placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd/M/yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                            <div class=\"col-xs-12 col-sm-4 col-md-4 col-lg-4\">\n                                <pw-input-container [label]=\"'Admin.Incident.LastCheckedAt' | transloco\"\n                                    name=\"last_check_at\" [errorMsg]=\"'Admin.Incident.Validation.Date' | transloco\">\n                                    <p-calendar class=\"addEditincident\" formControlName=\"last_check_at\"[placeholder]=\"'Admin.Incident.calender.placeholder' | transloco\"\n                                        [showIcon]=\"true\" [showTime]=\"true\" [appendTo]=\"'body'\" dateFormat=\"dd/M/yy\">\n                                    </p-calendar>\n                                </pw-input-container>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"row\">\n                        <div class=\"col-12 mt-4\">\n                            <div class=\"mb-3 text-end\">\n                                <button type=\"button\" class=\"btn btn-outline-default me-2\" data-bs-toggle=\"collapse\"\n                                    (click)=\"onCancel()\" role=\"button\" aria-expanded=\"false\"\n                                    aria-controls=\"incidentCollapse\"> {{ 'Button.Cancel' | transloco }} </button>\n                                <button class=\"btn btn-primary\" [disabled]=\"!isSuperAdmin\" [buttonBusy]=\"buttonBusy\">{{\n                                    'Button.Save' | transloco }}</button>\n                            </div>\n                        </div>\n                    </div>\n                </form>\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)}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$1.CommonService }, { type: i2$2.DomSanitizer }], propDecorators: { editForm: [{
                 type: ViewChild,
                 args: ['editForm', { static: false }]
@@ -6693,8 +6687,6 @@ class AddFaqComponent extends AppBaseComponent {
         this.faqHashMap = {};
         this.page = 1;
         this.form = AppAdmin.getFaqForm();
-        QuillHelper.init();
-        this.editorConfig = QuillHelper.getEditorConfig();
     }
     ngOnInit() {
         this.slug = PermissionService.selectedSubscription?.slug;
@@ -7075,6 +7067,7 @@ class EditFaqComponent extends AppBaseComponent {
         this.routers = ROUTERS;
         this.submitted = false;
         this.isLoaded = true;
+        this.currentFaq = null;
         this.isEdit = false;
         this.categories = [];
         this.isProductEnabled = true;
@@ -7091,12 +7084,11 @@ class EditFaqComponent extends AppBaseComponent {
         this.selectedFeatureKeys = [];
         this.buttonBusy = false;
         this.categoryForBadges = [];
+        this.slug = null;
         this.faqHashMap = {};
         this.page = 1;
-        console.log('helloooo');
-        QuillHelper.init();
+        this.activeItem = null;
         this.form = AppAdmin.getFaqForm();
-        this.editorConfig = QuillHelper.getEditorConfig();
     }
     ngOnInit() {
         this.slug = PermissionService.selectedSubscription?.slug;
@@ -7222,11 +7214,11 @@ class EditFaqComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: EditFaqComponent, deps: [{ token: i1$1.CommonService }, { token: i1.AdminService }, { token: i1$1.ProductService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: EditFaqComponent, selector: "pw-admin-edit-incident", viewQueries: [{ propertyName: "editForm", first: true, predicate: ["editForm"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n      <div class=\"dashboard-body\">\n          <div class=\"me-auto col-xs-6 mt-4\">\n              <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i\n                      class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n              <h3 class=\"mt-3\">Edit FAQ</h3>\n          </div>\n          <div class=\"p-2 mt-3\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"row\">\n                <pw-input-container class=\"col-12\" [label]=\"'Admin.Faq.Question' | transloco\" name=\"question\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <input type=\"text\" formControlName=\"question\" class=\"form-control\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['question'].errors }\" />\n                </pw-input-container>\n              </div>\n              <div class=\"row\">\n                <pw-input-container class=\"col-12 quill-editor\"\n                  [label]=\"'Admin.Faq.Answer' | transloco\"\n                  name=\"answer\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <quill-editor [styles]=\"{ height: '200px'}\" formControlName=\"answer\" class=\"quillEditor\" [modules]=\"editorConfig\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['answer'].errors, 'w-100': true  }\">\n                  </quill-editor>\n                </pw-input-container>\n              </div>\n              <div class=\"row justify-content-between\">\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Category' | transloco\"\n                    [label]=\"'Admin.Faq.Category' | transloco\" name=\"category\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"categories\" class=\"dropdown-bg-transparent\" (onChange)=\"onChange($event)\"\n                      placeholder=\"Select\" formControlName=\"category\" id=\"category-dropdown\" [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\" *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Product' | transloco\"\n                    [label]=\"'Admin.Faq.Product' | transloco\" name=\"product_id\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"productList\" class=\"dropdown-bg-transparent\" formControlName=\"product_id\"\n                      [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <!-- Features keys-->\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Features' | transloco\"\n                    [label]=\"'Admin.Faq.Features' | transloco\" name=\"feature_keys\">\n                    <p-multiSelect [options]=\"featureKeysList\" placeholder=\"Select feature keys\" [showHeader]=\"true\"\n                      [showToggleAll]=\"true\" formControlName=\"feature_keys\" appendTo=\"body\"></p-multiSelect>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\">\n                  <div class=\"mb-3\">\n                    <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Position' | transloco\"\n                      [label]=\"'Admin.Faq.Position' | transloco\" name=\"position\"\n                      [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                      <div class=\"position\">\n                        <input type=\"number\" min=\"0\" formControlName=\"position\" class=\"form-control\" />\n                      </div>\n                    </pw-input-container>\n                  </div>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Visible' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Visible' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"visible\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Public' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Public' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"public\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.SharedFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.SharedFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch name=\"is_shared_faq\" formControlName=\"is_shared_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.AdminFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.AdminFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_admin_faq\" name=\"is_admin_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.BuildFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.BuildFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_build_faq\" name=\"is_build_faq\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-12 mt-4\">\n                  <div class=\"mb-3 text-end\">\n                    <button type=\"button\" class=\"btn btn-outline-default me-2\" data-bs-toggle=\"collapse\" href=\"#faqCollapse\"\n                      role=\"button\" aria-expanded=\"false\" aria-controls=\"faqCollapse\" (click)=\"onCancel()\"> {{ 'Button.Cancel' | transloco }} </button>\n                    <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\">{{ 'Button.Save' | transloco }}</button>\n                  </div>\n                </div>\n              </div>\n            </form>\n\n          </div>\n      </div>\n  </div>\n</div>\n\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"], dependencies: [{ kind: "directive", type: i3$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i5$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: EditFaqComponent, selector: "pw-admin-edit-incident", viewQueries: [{ propertyName: "editForm", first: true, predicate: ["editForm"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n      <div class=\"dashboard-body\">\n          <div class=\"me-auto col-xs-6 mt-4\">\n              <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i\n                      class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n              <h3 class=\"mt-3\">Edit FAQ</h3>\n          </div>\n          <div class=\"p-2 mt-3\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"row\">\n                <pw-input-container class=\"col-12\" [label]=\"'Admin.Faq.Question' | transloco\" name=\"question\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <input type=\"text\" formControlName=\"question\" class=\"form-control\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['question'].errors }\" />\n                </pw-input-container>\n              </div>\n              <div class=\"row\">\n                <pw-input-container class=\"col-12 quill-editor\"\n                  [label]=\"'Admin.Faq.Answer' | transloco\"\n                  name=\"answer\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <quill-editor [styles]=\"{ height: '200px'}\" formControlName=\"answer\" class=\"quillEditor\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['answer'].errors, 'w-100': true  }\">\n                  </quill-editor>\n                </pw-input-container>\n              </div>\n              <div class=\"row justify-content-between\">\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Category' | transloco\"\n                    [label]=\"'Admin.Faq.Category' | transloco\" name=\"category\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"categories\" class=\"dropdown-bg-transparent\" (onChange)=\"onChange($event)\"\n                      placeholder=\"Select\" formControlName=\"category\" id=\"category-dropdown\" [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\" *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Product' | transloco\"\n                    [label]=\"'Admin.Faq.Product' | transloco\" name=\"product_id\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"productList\" class=\"dropdown-bg-transparent\" formControlName=\"product_id\"\n                      [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <!-- Features keys-->\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Features' | transloco\"\n                    [label]=\"'Admin.Faq.Features' | transloco\" name=\"feature_keys\">\n                    <p-multiSelect [options]=\"featureKeysList\" placeholder=\"Select feature keys\" [showHeader]=\"true\"\n                      [showToggleAll]=\"true\" formControlName=\"feature_keys\" appendTo=\"body\"></p-multiSelect>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\">\n                  <div class=\"mb-3\">\n                    <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Position' | transloco\"\n                      [label]=\"'Admin.Faq.Position' | transloco\" name=\"position\"\n                      [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                      <div class=\"position\">\n                        <input type=\"number\" min=\"0\" formControlName=\"position\" class=\"form-control\" />\n                      </div>\n                    </pw-input-container>\n                  </div>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Visible' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Visible' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"visible\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Public' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Public' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"public\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.SharedFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.SharedFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch name=\"is_shared_faq\" formControlName=\"is_shared_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.AdminFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.AdminFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_admin_faq\" name=\"is_admin_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.BuildFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.BuildFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_build_faq\" name=\"is_build_faq\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-12 mt-4\">\n                  <div class=\"mb-3 text-end\">\n                    <button type=\"button\" class=\"btn btn-outline-default me-2\" data-bs-toggle=\"collapse\" href=\"#faqCollapse\"\n                      role=\"button\" aria-expanded=\"false\" aria-controls=\"faqCollapse\" (click)=\"onCancel()\"> {{ 'Button.Cancel' | transloco }} </button>\n                    <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\">{{ 'Button.Save' | transloco }}</button>\n                  </div>\n                </div>\n              </div>\n            </form>\n\n          </div>\n      </div>\n  </div>\n</div>\n\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"], dependencies: [{ kind: "directive", type: i3$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i5$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "component", type: i4$1.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: EditFaqComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-admin-edit-incident', template: "\n<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n      <div class=\"dashboard-body\">\n          <div class=\"me-auto col-xs-6 mt-4\">\n              <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i\n                      class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n              <h3 class=\"mt-3\">Edit FAQ</h3>\n          </div>\n          <div class=\"p-2 mt-3\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"row\">\n                <pw-input-container class=\"col-12\" [label]=\"'Admin.Faq.Question' | transloco\" name=\"question\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <input type=\"text\" formControlName=\"question\" class=\"form-control\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['question'].errors }\" />\n                </pw-input-container>\n              </div>\n              <div class=\"row\">\n                <pw-input-container class=\"col-12 quill-editor\"\n                  [label]=\"'Admin.Faq.Answer' | transloco\"\n                  name=\"answer\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <quill-editor [styles]=\"{ height: '200px'}\" formControlName=\"answer\" class=\"quillEditor\" [modules]=\"editorConfig\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['answer'].errors, 'w-100': true  }\">\n                  </quill-editor>\n                </pw-input-container>\n              </div>\n              <div class=\"row justify-content-between\">\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Category' | transloco\"\n                    [label]=\"'Admin.Faq.Category' | transloco\" name=\"category\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"categories\" class=\"dropdown-bg-transparent\" (onChange)=\"onChange($event)\"\n                      placeholder=\"Select\" formControlName=\"category\" id=\"category-dropdown\" [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\" *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Product' | transloco\"\n                    [label]=\"'Admin.Faq.Product' | transloco\" name=\"product_id\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"productList\" class=\"dropdown-bg-transparent\" formControlName=\"product_id\"\n                      [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <!-- Features keys-->\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Features' | transloco\"\n                    [label]=\"'Admin.Faq.Features' | transloco\" name=\"feature_keys\">\n                    <p-multiSelect [options]=\"featureKeysList\" placeholder=\"Select feature keys\" [showHeader]=\"true\"\n                      [showToggleAll]=\"true\" formControlName=\"feature_keys\" appendTo=\"body\"></p-multiSelect>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\">\n                  <div class=\"mb-3\">\n                    <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Position' | transloco\"\n                      [label]=\"'Admin.Faq.Position' | transloco\" name=\"position\"\n                      [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                      <div class=\"position\">\n                        <input type=\"number\" min=\"0\" formControlName=\"position\" class=\"form-control\" />\n                      </div>\n                    </pw-input-container>\n                  </div>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Visible' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Visible' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"visible\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Public' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Public' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"public\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.SharedFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.SharedFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch name=\"is_shared_faq\" formControlName=\"is_shared_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.AdminFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.AdminFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_admin_faq\" name=\"is_admin_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.BuildFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.BuildFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_build_faq\" name=\"is_build_faq\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-12 mt-4\">\n                  <div class=\"mb-3 text-end\">\n                    <button type=\"button\" class=\"btn btn-outline-default me-2\" data-bs-toggle=\"collapse\" href=\"#faqCollapse\"\n                      role=\"button\" aria-expanded=\"false\" aria-controls=\"faqCollapse\" (click)=\"onCancel()\"> {{ 'Button.Cancel' | transloco }} </button>\n                    <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\">{{ 'Button.Save' | transloco }}</button>\n                  </div>\n                </div>\n              </div>\n            </form>\n\n          </div>\n      </div>\n  </div>\n</div>\n\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"] }]
+            args: [{ selector: 'pw-admin-edit-incident', template: "\n<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n      <div class=\"dashboard-body\">\n          <div class=\"me-auto col-xs-6 mt-4\">\n              <a href=\"javascript:void(0)\" (click)=\"back()\" class=\"previous\"><i\n                      class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n              <h3 class=\"mt-3\">Edit FAQ</h3>\n          </div>\n          <div class=\"p-2 mt-3\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"row\">\n                <pw-input-container class=\"col-12\" [label]=\"'Admin.Faq.Question' | transloco\" name=\"question\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <input type=\"text\" formControlName=\"question\" class=\"form-control\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['question'].errors }\" />\n                </pw-input-container>\n              </div>\n              <div class=\"row\">\n                <pw-input-container class=\"col-12 quill-editor\"\n                  [label]=\"'Admin.Faq.Answer' | transloco\"\n                  name=\"answer\"\n                  [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                  <quill-editor [styles]=\"{ height: '200px'}\" formControlName=\"answer\" class=\"quillEditor\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['answer'].errors, 'w-100': true  }\">\n                  </quill-editor>\n                </pw-input-container>\n              </div>\n              <div class=\"row justify-content-between\">\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Category' | transloco\"\n                    [label]=\"'Admin.Faq.Category' | transloco\" name=\"category\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"categories\" class=\"dropdown-bg-transparent\" (onChange)=\"onChange($event)\"\n                      placeholder=\"Select\" formControlName=\"category\" id=\"category-dropdown\" [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\" *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Product' | transloco\"\n                    [label]=\"'Admin.Faq.Product' | transloco\" name=\"product_id\"\n                    [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                    <p-dropdown [options]=\"productList\" class=\"dropdown-bg-transparent\" formControlName=\"product_id\"\n                      [style]=\"{ width: '100%' }\">\n                    </p-dropdown>\n                  </pw-input-container>\n                </div>\n                <!-- Features keys-->\n                <div class=\"col-lg-2\">\n                  <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Features' | transloco\"\n                    [label]=\"'Admin.Faq.Features' | transloco\" name=\"feature_keys\">\n                    <p-multiSelect [options]=\"featureKeysList\" placeholder=\"Select feature keys\" [showHeader]=\"true\"\n                      [showToggleAll]=\"true\" formControlName=\"feature_keys\" appendTo=\"body\"></p-multiSelect>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-lg-2\">\n                  <div class=\"mb-3\">\n                    <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Faq.Tooltip.Position' | transloco\"\n                      [label]=\"'Admin.Faq.Position' | transloco\" name=\"position\"\n                      [errorMsg]=\"'Admin.Faq.Validation.FieldRequired' | transloco\">\n                      <div class=\"position\">\n                        <input type=\"number\" min=\"0\" formControlName=\"position\" class=\"form-control\" />\n                      </div>\n                    </pw-input-container>\n                  </div>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Visible' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Visible' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"visible\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label>{{ 'Admin.Faq.Public' | transloco}} <span class=\"tooltip-wrap\" [appendTo]=\"'body'\"\n                      [pTooltip]=\"'Admin.Faq.Tooltip.Public' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"public\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\" *rbacAllow=\"'SuperAdmin'\">\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.SharedFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.SharedFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch name=\"is_shared_faq\" formControlName=\"is_shared_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.AdminFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.AdminFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_admin_faq\" name=\"is_admin_faq\"></ui-switch>\n                </div>\n                <div class=\"col-4 col-lg-2\">\n                  <label class=\"text-warning\">{{ 'Admin.Faq.BuildFaq' | transloco}} <span class=\"tooltip-wrap\"\n                      [appendTo]=\"'body'\" [pTooltip]=\"'Admin.Faq.Tooltip.BuildFaq' | transloco\" tooltipPosition=\"top\">\n                      <i class=\"fas fa-info-circle\"></i>\n                    </span>\n                  </label><br />\n                  <ui-switch formControlName=\"is_build_faq\" name=\"is_build_faq\"></ui-switch>\n                </div>\n              </div>\n              <div class=\"row\">\n                <div class=\"col-12 mt-4\">\n                  <div class=\"mb-3 text-end\">\n                    <button type=\"button\" class=\"btn btn-outline-default me-2\" data-bs-toggle=\"collapse\" href=\"#faqCollapse\"\n                      role=\"button\" aria-expanded=\"false\" aria-controls=\"faqCollapse\" (click)=\"onCancel()\"> {{ 'Button.Cancel' | transloco }} </button>\n                    <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\">{{ 'Button.Save' | transloco }}</button>\n                  </div>\n                </div>\n              </div>\n            </form>\n\n          </div>\n      </div>\n  </div>\n</div>\n\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.CommonService }, { type: i1.AdminService }, { type: i1$1.ProductService }, { type: i0.Injector }], propDecorators: { editForm: [{
                 type: ViewChild,
                 args: ['editForm', { static: false }]
@@ -7979,6 +7971,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 }]
         }] });
 
+QuillHelper.init();
 PlotlyViaCDNModule.setPlotlyVersion('1.55.2');
 const primeNgModules = [
     TableModule,