@posiwise/admin-module 0.0.207 → 0.0.209

package/fesm2022/posiwise-admin-module.mjs

@@ -5438,21 +5438,12 @@ class ProductDetailsComponent extends AppBaseComponent {
     }
     getCategories() {
         this.productService.getProductCategories().subscribe(response => {
-            if (response?.categories) {
-                response.categories.forEach(element => {
-                    const item = {
-                        label: element ?? '',
-                        value: element
-                    };
-                    this.categories.push(item);
-                });
-            }
+            this.categories = [
+                { label: 'Select', value: null },
+                ...(response?.categories ?? []).map(element => ({ label: element ?? '', value: element }))
+            ];
             this.cdr.markForCheck();
         });
-        this.categories.unshift({
-            label: 'Select',
-            value: null
-        });
     }
     /** Function to call all tos */
     getAllTos(page, page_size) {
@@ -5657,7 +5648,7 @@ class ProductDetailsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ProductDetailsComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1$2.ProductService }, { token: i2$1.NgbModal }, { token: i1.AdminService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: ProductDetailsComponent, isStandalone: false, 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 aria-label=\"Navigate to Target\" (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      @if (isLoading) {\n        <div class=\"w-100 text-center mt-3\"\n          >\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </div>\n      }\n      @if (!isLoading) {\n        <div class=\"my-4\">\n          <div class=\"mb-5\">\n            <p-accordion>\n              <p-accordion-panel value=\"0\">\n                <p-accordion-header>How To</p-accordion-header>\n                <p-accordion-content>\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-accordion-content>\n              </p-accordion-panel>\n            </p-accordion>\n          </div>\n          @if (id) {\n            <div class=\"row\">\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=\"Demo Logo\" class=\"image full-logo w-100 h-100\"\n                    (error)=\"handleImageError($event, 'assets/img/icons/demo_logo1.png')\" />\n                  <div class=\"overlay mt-2\" (click)=\"openModal(content)\" (keydown.enter)=\"openModal(content)\">\n                    <div class=\"overlay-text\">\n                      <a aria-label=\"Navigate to Target\">{{ '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=\"Company Logo\" width=\"70\" class=\"squared_logo\" height=\"70\"\n                  (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n                <div class=\"overlay mt-2\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n                  <div class=\"overlay-text\">\n                    <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\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\" controlId=\"product-name\"\n                  [isLeftTooltip]=\"true\"\n                  [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                  <input type=\"text\" id=\"product-name\" 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\" controlId=\"product-nickname\" [errorMsg]=\"\n                                            'Admin.Products.Validation.NickName' | transloco\n                                        \">\n                    <input type=\"text\" id=\"product-nickname\" 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\" controlId=\"product-min_units\"\n                  [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n                    <input type=\"number\" id=\"product-min_units\" 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\" controlId=\"product-max_units\"\n                  [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n                    <input type=\"number\" id=\"product-max_units\" 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            <span class=\"pw-label-style info-circle\" id=\"product-dependency_products-label\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<span\n              class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.DependencyProducts' |\n            transloco }}</span>\n          </span>\n          <p-multiSelect inputId=\"product-dependency_products\"\n            [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n            [attr.aria-labelledby]=\"'product-dependency_products-label'\"\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\" controlId=\"product-stripe_plan_id\">\n              <input type=\"text\" id=\"product-stripe_plan_id\" 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              [isLeftTooltip]=\"true\"\n              [label]=\"'Admin.Products.Price' | transloco\" class=\"col-md-6 p-0\" name=\"price_per_unit\" controlId=\"product-price_per_unit\"\n              [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                  <input type=\"text\" id=\"product-price_per_unit\" 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\" controlId=\"product-trial_days\"\n              [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n                  <input type=\"number\" id=\"product-trial_days\" min=\"0\" 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\" controlId=\"product-max_hits_trial\">\n                  <input type=\"number\" id=\"product-max_hits_trial\" 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\" controlId=\"product-max_hits\">\n              <input type=\"number\" id=\"product-max_hits\" 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\" id=\"descriptionEditor\">\n          <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n            [label]=\"'Admin.Products.Description' | transloco\" name=\"description\" controlId=\"product-description\" [useAriaLabelledbyOnly]=\"true\"\n            [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n            <quill-editor [attr.aria-labelledby]=\"'product-description-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"description\" class=\"quillEditor\" [modules]=\"editorConfig\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'quill-container': true}\">\n            </quill-editor>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-md-12\" id=\"signupInstructionsEditor\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n            [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\" controlId=\"product-signup_instructions\" [useAriaLabelledbyOnly]=\"true\">\n                <quill-editor [attr.aria-labelledby]=\"'product-signup_instructions-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" class=\"quillEditor\" [modules]=\"editorConfig\" [ngClass]=\"{\n                                        'is-invalid': submitted && f['signup_instructions'].errors, 'quill-container': true\n                                    }\">\n            </quill-editor>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-md-12\" id=\"signupEmployeesEditor\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n            [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\" controlId=\"product-signup_instruction_employees\" [useAriaLabelledbyOnly]=\"true\">\n                <quill-editor [attr.aria-labelledby]=\"'product-signup_instruction_employees-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" class=\"quillEditor\" [modules]=\"editorConfig\" [ngClass]=\"{\n                                        'is-invalid':\n                                            submitted && f['signup_instruction_employees'].errors, 'quill-container': 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\" controlId=\"product-permission_key\" [errorMsg]=\"\n                                        'Admin.Products.Validation.PermissionKey' | transloco\n                                    \">\n                  <input type=\"text\" id=\"product-permission_key\" 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\" controlId=\"product-feature_key\"\n              [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n                  <input type=\"text\" id=\"product-feature_key\" 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\" controlId=\"product-product_key\"\n              [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n                  <input type=\"text\" id=\"product-product_key\" 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\" controlId=\"product-category\" [useAriaLabelledbyOnly]=\"true\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n              <p-select inputId=\"product-category\"\n                [options]=\"categories\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-category-label'\" formControlName=\"category\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n              </p-select>\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\" controlId=\"product-billing_frequency\" [useAriaLabelledbyOnly]=\"true\"\n              [errorMsg]=\"'Admin.Products.Validation.BillingFrequency' | transloco\">\n              <p-select inputId=\"product-billing_frequency\"\n                [options]=\"frequency\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-billing_frequency-label'\" formControlName=\"billing_frequency\"\n                    [required]=\"true\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['billing_frequency'].errors\n                                        }\">\n              </p-select>\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.DocumentationUrl' | transloco\"\n              [label]=\"'Admin.Products.DocumentationUrl' | transloco\" class=\"col-md-6 p-0\" name=\"documentation_url\" controlId=\"product-documentation_url\">\n                  <input type=\"text\" id=\"product-documentation_url\" class=\"form-control\" formControlName=\"documentation_url\" [ngClass]=\"{\n                    'is-invalid': submitted && f['documentation_url'].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 [showTooltip]=\"true\"\n              [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n              [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\" controlId=\"product-product_privacy_service_id\" [useAriaLabelledbyOnly]=\"true\">\n              <p-select\n                [attr.aria-labelledby]=\"'product-product_privacy_service_id-label'\"\n                [options]=\"allTos\"\n                formControlName=\"product_privacy_service_id\"\n                [placeholder]=\"'Select Privacy Service'\"\n                optionValue=\"id\"\n                optionLabel=\"title\">\n              </p-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\" controlId=\"product-master_product_id\" [useAriaLabelledbyOnly]=\"true\">\n              <p-select\n                [attr.aria-labelledby]=\"'product-master_product_id-label'\"\n                [options]=\"productsList\"\n                formControlName=\"master_product_id\"\n                [placeholder]=\"'Select Master Product'\"\n                optionValue=\"value\"\n                optionLabel=\"label\">\n              </p-select>\n            </pw-input-container>\n          </div>\n        </div>\n        <div class=\"mb-3 col-xs-12 col-sm-6 col-md-4\">\n          <span class=\"pw-label-style info-circle\" id=\"product-roles-label\">{{ 'Admin.Products.AssignedRoles' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Subscriptions.Tooltip.AssignedRoles' |\n          transloco }}</span>\n        </span>\n        <p-multiSelect inputId=\"product-roles\" [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"\n        [attr.aria-labelledby]=\"'product-roles-label'\"></p-multiSelect>\n      </div>\n      @if (supportedCurrency$ | async; as currency) {\n        <div class=\"col-12 col-md-4\">\n          <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n            [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\" controlId=\"product-currency\" [useAriaLabelledbyOnly]=\"true\"\n            [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n            <p-select\n              [attr.aria-labelledby]=\"'product-currency-label'\"\n              [options]=\"currency['regions']\"\n              formControlName=\"currency\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\"\n              [placeholder]=\"'Select Currency'\"\n              [showClear]=\"false\">\n            </p-select>\n          </pw-input-container>\n        </div>\n      }\n      @if (supportedRegions$ | async; as region) {\n        <div class=\"col-12 col-md-4\">\n          <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n            [isLeftTooltip]=\"true\"\n            [label]=\"'Admin.Products.Region' | transloco\" name=\"region\" controlId=\"product-region\" [useAriaLabelledbyOnly]=\"true\"\n            [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n            <p-select\n              [attr.aria-labelledby]=\"'product-region-label'\"\n              [options]=\"region['regions']\"\n              formControlName=\"region\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\"\n              [placeholder]=\"'Select Region'\"\n              [showClear]=\"false\">\n            </p-select>\n          </pw-input-container>\n        </div>\n      }\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\" controlId=\"product-gitlab_service_desk_email\">\n          <input type=\"text\" id=\"product-gitlab_service_desk_email\" 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        <div class=\"mb-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Admin.Products.Tooltip.PartnerProducts' | transloco\"\n            [label]=\"'Admin.Products.PartnerProducts' | transloco\" name=\"partner_products\" controlId=\"product-partner_products\" [useAriaLabelledbyOnly]=\"true\">\n            <p-multiSelect inputId=\"product-partner_products\"\n              [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n              [attr.aria-labelledby]=\"'product-partner_products-label'\"\n              [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n              [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n            </p-multiSelect>\n          </pw-input-container>\n        </div>\n      </div>\n      <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n        <div class=\"mb-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Admin.Products.Tooltip.ProrationBehavior' | transloco\"\n            [label]=\"'Admin.Products.ProrationBehavior' | transloco\" name=\"proration_behavior\" controlId=\"product-proration_behavior\" [useAriaLabelledbyOnly]=\"true\">\n            <p-select\n              [attr.aria-labelledby]=\"'product-proration_behavior-label'\"\n              [options]=\"prorationBehaviors\"\n              formControlName=\"proration_behavior\"\n              [placeholder]=\"'Select Proration Behavior'\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n              [showClear]=\"true\">\n            </p-select>\n          </pw-input-container>\n        </div>\n      </div>\n      <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n        <div class=\"mb-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Admin.Products.Tooltip.UnsubscribeStripeBehavior' | transloco\"\n            [label]=\"'Admin.Products.UnsubscribeStripeBehavior' | transloco\" name=\"unsubscribe_stripe_behavior\" controlId=\"product-unsubscribe_stripe_behavior\" [useAriaLabelledbyOnly]=\"true\">\n            <p-select\n              [attr.aria-labelledby]=\"'product-unsubscribe_stripe_behavior-label'\"\n              [options]=\"unsubscribeBehaviors\"\n              formControlName=\"unsubscribe_stripe_behavior\"\n              [placeholder]=\"'Select Unsubscribe Stripe Behavior'\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n              [showClear]=\"true\">\n            </p-select>\n          </pw-input-container>\n        </div>\n      </div>\n      <!--start toggles -->\n      <div class=\"col-12 row mt-4\">\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\" controlId=\"product-active\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n                [attr.aria-labelledby]=\"'product-active-label'\"\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\" controlId=\"product-multiple_allowed\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\"\n                [attr.aria-labelledby]=\"'product-multiple_allowed-label'\"\n                      [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\" controlId=\"product-visible\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n                [attr.aria-labelledby]=\"'product-visible-label'\"\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\" controlId=\"product-members_visible\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\"\n                [attr.aria-labelledby]=\"'product-members_visible-label'\"\n                      [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\" controlId=\"product-chat_visible\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\"\n                [attr.aria-labelledby]=\"'product-chat_visible-label'\"\n                      [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\" controlId=\"product-is_master_product\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\"\n                [attr.aria-labelledby]=\"'product-is_master_product-label'\"\n                      [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\" [buttonBusy]=\"submitted\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n        | transloco }} </button>\n      </div>\n    </div>\n  </form>\n</div>\n}\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: [".pw-label-style.info-circle{display:inline-block;line-height:1.5}.pw-label-style.info-circle:after{top:-7px}.nowrap{white-space:nowrap}textarea{height:180px}.full-logo{object-fit:cover;width:280px}\n"], dependencies: [{ kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7$1.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "motionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i7$1.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i7$1.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i7$1.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i7$2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i13.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i1$1.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i9.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i9.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i9.LazyImgDirective, selector: "img" }, { kind: "directive", type: i9.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$1.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: ProductDetailsComponent, isStandalone: false, 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 aria-label=\"Navigate to Target\" (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      @if (isLoading) {\n        <div class=\"w-100 text-center mt-3\"\n          >\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </div>\n      }\n      @if (!isLoading) {\n        <div class=\"my-4\">\n          <div class=\"mb-5\">\n            <p-accordion>\n              <p-accordion-panel value=\"0\">\n                <p-accordion-header>How To</p-accordion-header>\n                <p-accordion-content>\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-accordion-content>\n              </p-accordion-panel>\n            </p-accordion>\n          </div>\n          @if (id) {\n            <div class=\"row\">\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=\"Demo Logo\" class=\"image full-logo w-100 h-100\"\n                    (error)=\"handleImageError($event, 'assets/img/icons/demo_logo1.png')\" />\n                  <div class=\"overlay mt-2\" (click)=\"openModal(content)\" (keydown.enter)=\"openModal(content)\">\n                    <div class=\"overlay-text\">\n                      <a aria-label=\"Navigate to Target\">{{ '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=\"Company Logo\" width=\"70\" class=\"squared_logo\" height=\"70\"\n                  (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n                <div class=\"overlay mt-2\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n                  <div class=\"overlay-text\">\n                    <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\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\" controlId=\"product-name\"\n                  [isLeftTooltip]=\"true\"\n                  [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                  <input type=\"text\" id=\"product-name\" 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\" controlId=\"product-nickname\" [errorMsg]=\"\n                                            'Admin.Products.Validation.NickName' | transloco\n                                        \">\n                    <input type=\"text\" id=\"product-nickname\" 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\" controlId=\"product-min_units\"\n                  [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n                    <input type=\"number\" id=\"product-min_units\" 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\" controlId=\"product-max_units\"\n                  [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n                    <input type=\"number\" id=\"product-max_units\" 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            <span class=\"pw-label-style info-circle\" id=\"product-dependency_products-label\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<span\n              class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.DependencyProducts' |\n            transloco }}</span>\n          </span>\n          <p-multiSelect inputId=\"product-dependency_products\"\n            [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n            [attr.aria-labelledby]=\"'product-dependency_products-label'\"\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\" controlId=\"product-stripe_plan_id\">\n              <input type=\"text\" id=\"product-stripe_plan_id\" 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              [isLeftTooltip]=\"true\"\n              [label]=\"'Admin.Products.Price' | transloco\" class=\"col-md-6 p-0\" name=\"price_per_unit\" controlId=\"product-price_per_unit\"\n              [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                  <input type=\"text\" id=\"product-price_per_unit\" 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\" controlId=\"product-trial_days\"\n              [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n                  <input type=\"number\" id=\"product-trial_days\" min=\"0\" 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\" controlId=\"product-max_hits_trial\">\n                  <input type=\"number\" id=\"product-max_hits_trial\" 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\" controlId=\"product-max_hits\">\n              <input type=\"number\" id=\"product-max_hits\" 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\" id=\"descriptionEditor\">\n          <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n            [label]=\"'Admin.Products.Description' | transloco\" name=\"description\" controlId=\"product-description\" [useAriaLabelledbyOnly]=\"true\"\n            [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n            <quill-editor [attr.aria-labelledby]=\"'product-description-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"description\" class=\"quillEditor\" [modules]=\"editorConfig\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'quill-container': true}\">\n            </quill-editor>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-md-12\" id=\"signupInstructionsEditor\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n            [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\" controlId=\"product-signup_instructions\" [useAriaLabelledbyOnly]=\"true\">\n                <quill-editor [attr.aria-labelledby]=\"'product-signup_instructions-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" class=\"quillEditor\" [modules]=\"editorConfig\" [ngClass]=\"{\n                                        'is-invalid': submitted && f['signup_instructions'].errors, 'quill-container': true\n                                    }\">\n            </quill-editor>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-md-12\" id=\"signupEmployeesEditor\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n            [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\" controlId=\"product-signup_instruction_employees\" [useAriaLabelledbyOnly]=\"true\">\n                <quill-editor [attr.aria-labelledby]=\"'product-signup_instruction_employees-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" class=\"quillEditor\" [modules]=\"editorConfig\" [ngClass]=\"{\n                                        'is-invalid':\n                                            submitted && f['signup_instruction_employees'].errors, 'quill-container': 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\" controlId=\"product-permission_key\" [errorMsg]=\"\n                                        'Admin.Products.Validation.PermissionKey' | transloco\n                                    \">\n                  <input type=\"text\" id=\"product-permission_key\" 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\" controlId=\"product-feature_key\"\n              [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n                  <input type=\"text\" id=\"product-feature_key\" 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\" controlId=\"product-product_key\"\n              [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n                  <input type=\"text\" id=\"product-product_key\" 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\" controlId=\"product-category\" [useAriaLabelledbyOnly]=\"true\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n              <p-select inputId=\"product-category\"\n                [options]=\"categories\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-category-label'\" formControlName=\"category\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n              </p-select>\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\" controlId=\"product-billing_frequency\" [useAriaLabelledbyOnly]=\"true\"\n              [errorMsg]=\"'Admin.Products.Validation.BillingFrequency' | transloco\">\n              <p-select inputId=\"product-billing_frequency\"\n                [options]=\"frequency\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-billing_frequency-label'\" formControlName=\"billing_frequency\"\n                    [required]=\"true\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['billing_frequency'].errors\n                                        }\">\n              </p-select>\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.DocumentationUrl' | transloco\"\n              [label]=\"'Admin.Products.DocumentationUrl' | transloco\" class=\"col-md-6 p-0\" name=\"documentation_url\" controlId=\"product-documentation_url\">\n                  <input type=\"text\" id=\"product-documentation_url\" class=\"form-control\" formControlName=\"documentation_url\" [ngClass]=\"{\n                    'is-invalid': submitted && f['documentation_url'].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 [showTooltip]=\"true\"\n              [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n              [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\" controlId=\"product-product_privacy_service_id\" [useAriaLabelledbyOnly]=\"true\">\n              <p-select\n                [attr.aria-labelledby]=\"'product-product_privacy_service_id-label'\"\n                [options]=\"allTos\"\n                formControlName=\"product_privacy_service_id\"\n                [placeholder]=\"'Select Privacy Service'\"\n                optionValue=\"id\"\n                optionLabel=\"title\">\n              </p-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\" controlId=\"product-master_product_id\" [useAriaLabelledbyOnly]=\"true\">\n              <p-select\n                [attr.aria-labelledby]=\"'product-master_product_id-label'\"\n                [options]=\"productsList\"\n                formControlName=\"master_product_id\"\n                [placeholder]=\"'Select Master Product'\"\n                optionValue=\"value\"\n                optionLabel=\"label\">\n              </p-select>\n            </pw-input-container>\n          </div>\n        </div>\n        <div class=\"mb-3 col-xs-12 col-sm-6 col-md-4\">\n          <span class=\"pw-label-style info-circle\" id=\"product-roles-label\">{{ 'Admin.Products.AssignedRoles' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Subscriptions.Tooltip.AssignedRoles' |\n          transloco }}</span>\n        </span>\n        <p-multiSelect inputId=\"product-roles\" [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"\n        [attr.aria-labelledby]=\"'product-roles-label'\"></p-multiSelect>\n      </div>\n      @if (supportedCurrency$ | async; as currency) {\n        <div class=\"col-12 col-md-4\">\n          <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n            [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\" controlId=\"product-currency\" [useAriaLabelledbyOnly]=\"true\"\n            [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n            <p-select\n              [attr.aria-labelledby]=\"'product-currency-label'\"\n              [options]=\"currency['regions']\"\n              formControlName=\"currency\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\"\n              [placeholder]=\"'Select Currency'\"\n              [showClear]=\"false\">\n            </p-select>\n          </pw-input-container>\n        </div>\n      }\n      @if (supportedRegions$ | async; as region) {\n        <div class=\"col-12 col-md-4\">\n          <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n            [isLeftTooltip]=\"true\"\n            [label]=\"'Admin.Products.Region' | transloco\" name=\"region\" controlId=\"product-region\" [useAriaLabelledbyOnly]=\"true\"\n            [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n            <p-select\n              [attr.aria-labelledby]=\"'product-region-label'\"\n              [options]=\"region['regions']\"\n              formControlName=\"region\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\"\n              [placeholder]=\"'Select Region'\"\n              [showClear]=\"false\">\n            </p-select>\n          </pw-input-container>\n        </div>\n      }\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\" controlId=\"product-gitlab_service_desk_email\">\n          <input type=\"text\" id=\"product-gitlab_service_desk_email\" 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        <div class=\"mb-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Admin.Products.Tooltip.PartnerProducts' | transloco\"\n            [label]=\"'Admin.Products.PartnerProducts' | transloco\" name=\"partner_products\" controlId=\"product-partner_products\" [useAriaLabelledbyOnly]=\"true\">\n            <p-multiSelect inputId=\"product-partner_products\"\n              [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n              [attr.aria-labelledby]=\"'product-partner_products-label'\"\n              [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n              [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n            </p-multiSelect>\n          </pw-input-container>\n        </div>\n      </div>\n      <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n        <div class=\"mb-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Admin.Products.Tooltip.ProrationBehavior' | transloco\"\n            [label]=\"'Admin.Products.ProrationBehavior' | transloco\" name=\"proration_behavior\" controlId=\"product-proration_behavior\" [useAriaLabelledbyOnly]=\"true\">\n            <p-select\n              [attr.aria-labelledby]=\"'product-proration_behavior-label'\"\n              [options]=\"prorationBehaviors\"\n              formControlName=\"proration_behavior\"\n              [placeholder]=\"'Select Proration Behavior'\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n              [showClear]=\"true\">\n            </p-select>\n          </pw-input-container>\n        </div>\n      </div>\n      <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n        <div class=\"mb-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Admin.Products.Tooltip.UnsubscribeStripeBehavior' | transloco\"\n            [label]=\"'Admin.Products.UnsubscribeStripeBehavior' | transloco\" name=\"unsubscribe_stripe_behavior\" controlId=\"product-unsubscribe_stripe_behavior\" [useAriaLabelledbyOnly]=\"true\">\n            <p-select\n              [attr.aria-labelledby]=\"'product-unsubscribe_stripe_behavior-label'\"\n              [options]=\"unsubscribeBehaviors\"\n              formControlName=\"unsubscribe_stripe_behavior\"\n              [placeholder]=\"'Select Unsubscribe Stripe Behavior'\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n              [showClear]=\"true\">\n            </p-select>\n          </pw-input-container>\n        </div>\n      </div>\n      <!--start toggles -->\n      <div class=\"col-12 row mt-4\">\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\" controlId=\"product-active\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n                [attr.aria-labelledby]=\"'product-active-label'\"\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\" controlId=\"product-multiple_allowed\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\"\n                [attr.aria-labelledby]=\"'product-multiple_allowed-label'\"\n                      [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\" controlId=\"product-visible\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n                [attr.aria-labelledby]=\"'product-visible-label'\"\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\" controlId=\"product-members_visible\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\"\n                [attr.aria-labelledby]=\"'product-members_visible-label'\"\n                      [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\" controlId=\"product-chat_visible\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\"\n                [attr.aria-labelledby]=\"'product-chat_visible-label'\"\n                      [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\" controlId=\"product-is_master_product\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\"\n                [attr.aria-labelledby]=\"'product-is_master_product-label'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['is_master_product'].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.SecondPaymentRequired' | transloco\"\n              [label]=\"'Admin.Products.SecondPaymentRequired' | transloco\" name=\"second_payment_required\" controlId=\"product-second_payment_required\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"second_payment_required\" name=\"second_payment_required\"\n                [attr.aria-labelledby]=\"'product-second_payment_required-label'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['second_payment_required'].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\" [buttonBusy]=\"submitted\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n        | transloco }} </button>\n      </div>\n    </div>\n  </form>\n</div>\n}\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: [".pw-label-style.info-circle{display:inline-block;line-height:1.5}.pw-label-style.info-circle:after{top:-7px}.nowrap{white-space:nowrap}textarea{height:180px}.full-logo{object-fit:cover;width:280px}\n"], dependencies: [{ kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i7$1.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "motionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i7$1.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i7$1.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i7$1.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type: i3.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i7$2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "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", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i6.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i6.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: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i6.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i6.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i13.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i1$1.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i9.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i9.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i9.LazyImgDirective, selector: "img" }, { kind: "directive", type: i9.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i6.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$1.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i11.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -5667,7 +5658,7 @@ __decorate([
 ], ProductDetailsComponent.prototype, "onSave", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ProductDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-product-details', standalone: false, 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 aria-label=\"Navigate to Target\" (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      @if (isLoading) {\n        <div class=\"w-100 text-center mt-3\"\n          >\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </div>\n      }\n      @if (!isLoading) {\n        <div class=\"my-4\">\n          <div class=\"mb-5\">\n            <p-accordion>\n              <p-accordion-panel value=\"0\">\n                <p-accordion-header>How To</p-accordion-header>\n                <p-accordion-content>\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-accordion-content>\n              </p-accordion-panel>\n            </p-accordion>\n          </div>\n          @if (id) {\n            <div class=\"row\">\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=\"Demo Logo\" class=\"image full-logo w-100 h-100\"\n                    (error)=\"handleImageError($event, 'assets/img/icons/demo_logo1.png')\" />\n                  <div class=\"overlay mt-2\" (click)=\"openModal(content)\" (keydown.enter)=\"openModal(content)\">\n                    <div class=\"overlay-text\">\n                      <a aria-label=\"Navigate to Target\">{{ '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=\"Company Logo\" width=\"70\" class=\"squared_logo\" height=\"70\"\n                  (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n                <div class=\"overlay mt-2\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n                  <div class=\"overlay-text\">\n                    <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\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\" controlId=\"product-name\"\n                  [isLeftTooltip]=\"true\"\n                  [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                  <input type=\"text\" id=\"product-name\" 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\" controlId=\"product-nickname\" [errorMsg]=\"\n                                            'Admin.Products.Validation.NickName' | transloco\n                                        \">\n                    <input type=\"text\" id=\"product-nickname\" 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\" controlId=\"product-min_units\"\n                  [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n                    <input type=\"number\" id=\"product-min_units\" 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\" controlId=\"product-max_units\"\n                  [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n                    <input type=\"number\" id=\"product-max_units\" 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            <span class=\"pw-label-style info-circle\" id=\"product-dependency_products-label\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<span\n              class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.DependencyProducts' |\n            transloco }}</span>\n          </span>\n          <p-multiSelect inputId=\"product-dependency_products\"\n            [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n            [attr.aria-labelledby]=\"'product-dependency_products-label'\"\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\" controlId=\"product-stripe_plan_id\">\n              <input type=\"text\" id=\"product-stripe_plan_id\" 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              [isLeftTooltip]=\"true\"\n              [label]=\"'Admin.Products.Price' | transloco\" class=\"col-md-6 p-0\" name=\"price_per_unit\" controlId=\"product-price_per_unit\"\n              [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                  <input type=\"text\" id=\"product-price_per_unit\" 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\" controlId=\"product-trial_days\"\n              [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n                  <input type=\"number\" id=\"product-trial_days\" min=\"0\" 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\" controlId=\"product-max_hits_trial\">\n                  <input type=\"number\" id=\"product-max_hits_trial\" 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\" controlId=\"product-max_hits\">\n              <input type=\"number\" id=\"product-max_hits\" 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\" id=\"descriptionEditor\">\n          <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n            [label]=\"'Admin.Products.Description' | transloco\" name=\"description\" controlId=\"product-description\" [useAriaLabelledbyOnly]=\"true\"\n            [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n            <quill-editor [attr.aria-labelledby]=\"'product-description-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"description\" class=\"quillEditor\" [modules]=\"editorConfig\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'quill-container': true}\">\n            </quill-editor>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-md-12\" id=\"signupInstructionsEditor\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n            [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\" controlId=\"product-signup_instructions\" [useAriaLabelledbyOnly]=\"true\">\n                <quill-editor [attr.aria-labelledby]=\"'product-signup_instructions-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" class=\"quillEditor\" [modules]=\"editorConfig\" [ngClass]=\"{\n                                        'is-invalid': submitted && f['signup_instructions'].errors, 'quill-container': true\n                                    }\">\n            </quill-editor>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-md-12\" id=\"signupEmployeesEditor\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n            [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\" controlId=\"product-signup_instruction_employees\" [useAriaLabelledbyOnly]=\"true\">\n                <quill-editor [attr.aria-labelledby]=\"'product-signup_instruction_employees-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" class=\"quillEditor\" [modules]=\"editorConfig\" [ngClass]=\"{\n                                        'is-invalid':\n                                            submitted && f['signup_instruction_employees'].errors, 'quill-container': 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\" controlId=\"product-permission_key\" [errorMsg]=\"\n                                        'Admin.Products.Validation.PermissionKey' | transloco\n                                    \">\n                  <input type=\"text\" id=\"product-permission_key\" 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\" controlId=\"product-feature_key\"\n              [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n                  <input type=\"text\" id=\"product-feature_key\" 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\" controlId=\"product-product_key\"\n              [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n                  <input type=\"text\" id=\"product-product_key\" 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\" controlId=\"product-category\" [useAriaLabelledbyOnly]=\"true\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n              <p-select inputId=\"product-category\"\n                [options]=\"categories\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-category-label'\" formControlName=\"category\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n              </p-select>\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\" controlId=\"product-billing_frequency\" [useAriaLabelledbyOnly]=\"true\"\n              [errorMsg]=\"'Admin.Products.Validation.BillingFrequency' | transloco\">\n              <p-select inputId=\"product-billing_frequency\"\n                [options]=\"frequency\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-billing_frequency-label'\" formControlName=\"billing_frequency\"\n                    [required]=\"true\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['billing_frequency'].errors\n                                        }\">\n              </p-select>\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.DocumentationUrl' | transloco\"\n              [label]=\"'Admin.Products.DocumentationUrl' | transloco\" class=\"col-md-6 p-0\" name=\"documentation_url\" controlId=\"product-documentation_url\">\n                  <input type=\"text\" id=\"product-documentation_url\" class=\"form-control\" formControlName=\"documentation_url\" [ngClass]=\"{\n                    'is-invalid': submitted && f['documentation_url'].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 [showTooltip]=\"true\"\n              [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n              [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\" controlId=\"product-product_privacy_service_id\" [useAriaLabelledbyOnly]=\"true\">\n              <p-select\n                [attr.aria-labelledby]=\"'product-product_privacy_service_id-label'\"\n                [options]=\"allTos\"\n                formControlName=\"product_privacy_service_id\"\n                [placeholder]=\"'Select Privacy Service'\"\n                optionValue=\"id\"\n                optionLabel=\"title\">\n              </p-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\" controlId=\"product-master_product_id\" [useAriaLabelledbyOnly]=\"true\">\n              <p-select\n                [attr.aria-labelledby]=\"'product-master_product_id-label'\"\n                [options]=\"productsList\"\n                formControlName=\"master_product_id\"\n                [placeholder]=\"'Select Master Product'\"\n                optionValue=\"value\"\n                optionLabel=\"label\">\n              </p-select>\n            </pw-input-container>\n          </div>\n        </div>\n        <div class=\"mb-3 col-xs-12 col-sm-6 col-md-4\">\n          <span class=\"pw-label-style info-circle\" id=\"product-roles-label\">{{ 'Admin.Products.AssignedRoles' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Subscriptions.Tooltip.AssignedRoles' |\n          transloco }}</span>\n        </span>\n        <p-multiSelect inputId=\"product-roles\" [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"\n        [attr.aria-labelledby]=\"'product-roles-label'\"></p-multiSelect>\n      </div>\n      @if (supportedCurrency$ | async; as currency) {\n        <div class=\"col-12 col-md-4\">\n          <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n            [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\" controlId=\"product-currency\" [useAriaLabelledbyOnly]=\"true\"\n            [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n            <p-select\n              [attr.aria-labelledby]=\"'product-currency-label'\"\n              [options]=\"currency['regions']\"\n              formControlName=\"currency\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\"\n              [placeholder]=\"'Select Currency'\"\n              [showClear]=\"false\">\n            </p-select>\n          </pw-input-container>\n        </div>\n      }\n      @if (supportedRegions$ | async; as region) {\n        <div class=\"col-12 col-md-4\">\n          <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n            [isLeftTooltip]=\"true\"\n            [label]=\"'Admin.Products.Region' | transloco\" name=\"region\" controlId=\"product-region\" [useAriaLabelledbyOnly]=\"true\"\n            [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n            <p-select\n              [attr.aria-labelledby]=\"'product-region-label'\"\n              [options]=\"region['regions']\"\n              formControlName=\"region\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\"\n              [placeholder]=\"'Select Region'\"\n              [showClear]=\"false\">\n            </p-select>\n          </pw-input-container>\n        </div>\n      }\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\" controlId=\"product-gitlab_service_desk_email\">\n          <input type=\"text\" id=\"product-gitlab_service_desk_email\" 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        <div class=\"mb-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Admin.Products.Tooltip.PartnerProducts' | transloco\"\n            [label]=\"'Admin.Products.PartnerProducts' | transloco\" name=\"partner_products\" controlId=\"product-partner_products\" [useAriaLabelledbyOnly]=\"true\">\n            <p-multiSelect inputId=\"product-partner_products\"\n              [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n              [attr.aria-labelledby]=\"'product-partner_products-label'\"\n              [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n              [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n            </p-multiSelect>\n          </pw-input-container>\n        </div>\n      </div>\n      <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n        <div class=\"mb-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Admin.Products.Tooltip.ProrationBehavior' | transloco\"\n            [label]=\"'Admin.Products.ProrationBehavior' | transloco\" name=\"proration_behavior\" controlId=\"product-proration_behavior\" [useAriaLabelledbyOnly]=\"true\">\n            <p-select\n              [attr.aria-labelledby]=\"'product-proration_behavior-label'\"\n              [options]=\"prorationBehaviors\"\n              formControlName=\"proration_behavior\"\n              [placeholder]=\"'Select Proration Behavior'\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n              [showClear]=\"true\">\n            </p-select>\n          </pw-input-container>\n        </div>\n      </div>\n      <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n        <div class=\"mb-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Admin.Products.Tooltip.UnsubscribeStripeBehavior' | transloco\"\n            [label]=\"'Admin.Products.UnsubscribeStripeBehavior' | transloco\" name=\"unsubscribe_stripe_behavior\" controlId=\"product-unsubscribe_stripe_behavior\" [useAriaLabelledbyOnly]=\"true\">\n            <p-select\n              [attr.aria-labelledby]=\"'product-unsubscribe_stripe_behavior-label'\"\n              [options]=\"unsubscribeBehaviors\"\n              formControlName=\"unsubscribe_stripe_behavior\"\n              [placeholder]=\"'Select Unsubscribe Stripe Behavior'\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n              [showClear]=\"true\">\n            </p-select>\n          </pw-input-container>\n        </div>\n      </div>\n      <!--start toggles -->\n      <div class=\"col-12 row mt-4\">\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\" controlId=\"product-active\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n                [attr.aria-labelledby]=\"'product-active-label'\"\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\" controlId=\"product-multiple_allowed\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\"\n                [attr.aria-labelledby]=\"'product-multiple_allowed-label'\"\n                      [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\" controlId=\"product-visible\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n                [attr.aria-labelledby]=\"'product-visible-label'\"\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\" controlId=\"product-members_visible\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\"\n                [attr.aria-labelledby]=\"'product-members_visible-label'\"\n                      [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\" controlId=\"product-chat_visible\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\"\n                [attr.aria-labelledby]=\"'product-chat_visible-label'\"\n                      [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\" controlId=\"product-is_master_product\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\"\n                [attr.aria-labelledby]=\"'product-is_master_product-label'\"\n                      [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\" [buttonBusy]=\"submitted\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n        | transloco }} </button>\n      </div>\n    </div>\n  </form>\n</div>\n}\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: [".pw-label-style.info-circle{display:inline-block;line-height:1.5}.pw-label-style.info-circle:after{top:-7px}.nowrap{white-space:nowrap}textarea{height:180px}.full-logo{object-fit:cover;width:280px}\n"] }]
+            args: [{ selector: 'pw-product-details', standalone: false, 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 aria-label=\"Navigate to Target\" (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      @if (isLoading) {\n        <div class=\"w-100 text-center mt-3\"\n          >\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </div>\n      }\n      @if (!isLoading) {\n        <div class=\"my-4\">\n          <div class=\"mb-5\">\n            <p-accordion>\n              <p-accordion-panel value=\"0\">\n                <p-accordion-header>How To</p-accordion-header>\n                <p-accordion-content>\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-accordion-content>\n              </p-accordion-panel>\n            </p-accordion>\n          </div>\n          @if (id) {\n            <div class=\"row\">\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=\"Demo Logo\" class=\"image full-logo w-100 h-100\"\n                    (error)=\"handleImageError($event, 'assets/img/icons/demo_logo1.png')\" />\n                  <div class=\"overlay mt-2\" (click)=\"openModal(content)\" (keydown.enter)=\"openModal(content)\">\n                    <div class=\"overlay-text\">\n                      <a aria-label=\"Navigate to Target\">{{ '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=\"Company Logo\" width=\"70\" class=\"squared_logo\" height=\"70\"\n                  (error)=\"handleImageError($event, 'assets/img/icons/company.png')\" />\n                <div class=\"overlay mt-2\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n                  <div class=\"overlay-text\">\n                    <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\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\" controlId=\"product-name\"\n                  [isLeftTooltip]=\"true\"\n                  [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                  <input type=\"text\" id=\"product-name\" 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\" controlId=\"product-nickname\" [errorMsg]=\"\n                                            'Admin.Products.Validation.NickName' | transloco\n                                        \">\n                    <input type=\"text\" id=\"product-nickname\" 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\" controlId=\"product-min_units\"\n                  [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n                    <input type=\"number\" id=\"product-min_units\" 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\" controlId=\"product-max_units\"\n                  [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n                    <input type=\"number\" id=\"product-max_units\" 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            <span class=\"pw-label-style info-circle\" id=\"product-dependency_products-label\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<span\n              class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.DependencyProducts' |\n            transloco }}</span>\n          </span>\n          <p-multiSelect inputId=\"product-dependency_products\"\n            [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n            [attr.aria-labelledby]=\"'product-dependency_products-label'\"\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\" controlId=\"product-stripe_plan_id\">\n              <input type=\"text\" id=\"product-stripe_plan_id\" 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              [isLeftTooltip]=\"true\"\n              [label]=\"'Admin.Products.Price' | transloco\" class=\"col-md-6 p-0\" name=\"price_per_unit\" controlId=\"product-price_per_unit\"\n              [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n                  <input type=\"text\" id=\"product-price_per_unit\" 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\" controlId=\"product-trial_days\"\n              [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n                  <input type=\"number\" id=\"product-trial_days\" min=\"0\" 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\" controlId=\"product-max_hits_trial\">\n                  <input type=\"number\" id=\"product-max_hits_trial\" 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\" controlId=\"product-max_hits\">\n              <input type=\"number\" id=\"product-max_hits\" 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\" id=\"descriptionEditor\">\n          <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n            [label]=\"'Admin.Products.Description' | transloco\" name=\"description\" controlId=\"product-description\" [useAriaLabelledbyOnly]=\"true\"\n            [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n            <quill-editor [attr.aria-labelledby]=\"'product-description-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"description\" class=\"quillEditor\" [modules]=\"editorConfig\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'quill-container': true}\">\n            </quill-editor>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-md-12\" id=\"signupInstructionsEditor\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n            [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\" controlId=\"product-signup_instructions\" [useAriaLabelledbyOnly]=\"true\">\n                <quill-editor [attr.aria-labelledby]=\"'product-signup_instructions-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" class=\"quillEditor\" [modules]=\"editorConfig\" [ngClass]=\"{\n                                        'is-invalid': submitted && f['signup_instructions'].errors, 'quill-container': true\n                                    }\">\n            </quill-editor>\n          </pw-input-container>\n        </div>\n        <div class=\"col-12 col-md-12\" id=\"signupEmployeesEditor\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n            [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\" controlId=\"product-signup_instruction_employees\" [useAriaLabelledbyOnly]=\"true\">\n                <quill-editor [attr.aria-labelledby]=\"'product-signup_instruction_employees-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" class=\"quillEditor\" [modules]=\"editorConfig\" [ngClass]=\"{\n                                        'is-invalid':\n                                            submitted && f['signup_instruction_employees'].errors, 'quill-container': 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\" controlId=\"product-permission_key\" [errorMsg]=\"\n                                        'Admin.Products.Validation.PermissionKey' | transloco\n                                    \">\n                  <input type=\"text\" id=\"product-permission_key\" 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\" controlId=\"product-feature_key\"\n              [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n                  <input type=\"text\" id=\"product-feature_key\" 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\" controlId=\"product-product_key\"\n              [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n                  <input type=\"text\" id=\"product-product_key\" 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\" controlId=\"product-category\" [useAriaLabelledbyOnly]=\"true\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n              <p-select inputId=\"product-category\"\n                [options]=\"categories\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-category-label'\" formControlName=\"category\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n              </p-select>\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\" controlId=\"product-billing_frequency\" [useAriaLabelledbyOnly]=\"true\"\n              [errorMsg]=\"'Admin.Products.Validation.BillingFrequency' | transloco\">\n              <p-select inputId=\"product-billing_frequency\"\n                [options]=\"frequency\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-billing_frequency-label'\" formControlName=\"billing_frequency\"\n                    [required]=\"true\" [ngClass]=\"{\n                                            'is-invalid': submitted && f['billing_frequency'].errors\n                                        }\">\n              </p-select>\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.DocumentationUrl' | transloco\"\n              [label]=\"'Admin.Products.DocumentationUrl' | transloco\" class=\"col-md-6 p-0\" name=\"documentation_url\" controlId=\"product-documentation_url\">\n                  <input type=\"text\" id=\"product-documentation_url\" class=\"form-control\" formControlName=\"documentation_url\" [ngClass]=\"{\n                    'is-invalid': submitted && f['documentation_url'].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 [showTooltip]=\"true\"\n              [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n              [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\" controlId=\"product-product_privacy_service_id\" [useAriaLabelledbyOnly]=\"true\">\n              <p-select\n                [attr.aria-labelledby]=\"'product-product_privacy_service_id-label'\"\n                [options]=\"allTos\"\n                formControlName=\"product_privacy_service_id\"\n                [placeholder]=\"'Select Privacy Service'\"\n                optionValue=\"id\"\n                optionLabel=\"title\">\n              </p-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\" controlId=\"product-master_product_id\" [useAriaLabelledbyOnly]=\"true\">\n              <p-select\n                [attr.aria-labelledby]=\"'product-master_product_id-label'\"\n                [options]=\"productsList\"\n                formControlName=\"master_product_id\"\n                [placeholder]=\"'Select Master Product'\"\n                optionValue=\"value\"\n                optionLabel=\"label\">\n              </p-select>\n            </pw-input-container>\n          </div>\n        </div>\n        <div class=\"mb-3 col-xs-12 col-sm-6 col-md-4\">\n          <span class=\"pw-label-style info-circle\" id=\"product-roles-label\">{{ 'Admin.Products.AssignedRoles' | transloco }} <span\n            class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Subscriptions.Tooltip.AssignedRoles' |\n          transloco }}</span>\n        </span>\n        <p-multiSelect inputId=\"product-roles\" [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"\n        [attr.aria-labelledby]=\"'product-roles-label'\"></p-multiSelect>\n      </div>\n      @if (supportedCurrency$ | async; as currency) {\n        <div class=\"col-12 col-md-4\">\n          <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n            [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\" controlId=\"product-currency\" [useAriaLabelledbyOnly]=\"true\"\n            [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n            <p-select\n              [attr.aria-labelledby]=\"'product-currency-label'\"\n              [options]=\"currency['regions']\"\n              formControlName=\"currency\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\"\n              [placeholder]=\"'Select Currency'\"\n              [showClear]=\"false\">\n            </p-select>\n          </pw-input-container>\n        </div>\n      }\n      @if (supportedRegions$ | async; as region) {\n        <div class=\"col-12 col-md-4\">\n          <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n            [isLeftTooltip]=\"true\"\n            [label]=\"'Admin.Products.Region' | transloco\" name=\"region\" controlId=\"product-region\" [useAriaLabelledbyOnly]=\"true\"\n            [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n            <p-select\n              [attr.aria-labelledby]=\"'product-region-label'\"\n              [options]=\"region['regions']\"\n              formControlName=\"region\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\"\n              [placeholder]=\"'Select Region'\"\n              [showClear]=\"false\">\n            </p-select>\n          </pw-input-container>\n        </div>\n      }\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\" controlId=\"product-gitlab_service_desk_email\">\n          <input type=\"text\" id=\"product-gitlab_service_desk_email\" 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        <div class=\"mb-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Admin.Products.Tooltip.PartnerProducts' | transloco\"\n            [label]=\"'Admin.Products.PartnerProducts' | transloco\" name=\"partner_products\" controlId=\"product-partner_products\" [useAriaLabelledbyOnly]=\"true\">\n            <p-multiSelect inputId=\"product-partner_products\"\n              [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n              [attr.aria-labelledby]=\"'product-partner_products-label'\"\n              [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n              [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n            </p-multiSelect>\n          </pw-input-container>\n        </div>\n      </div>\n      <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n        <div class=\"mb-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Admin.Products.Tooltip.ProrationBehavior' | transloco\"\n            [label]=\"'Admin.Products.ProrationBehavior' | transloco\" name=\"proration_behavior\" controlId=\"product-proration_behavior\" [useAriaLabelledbyOnly]=\"true\">\n            <p-select\n              [attr.aria-labelledby]=\"'product-proration_behavior-label'\"\n              [options]=\"prorationBehaviors\"\n              formControlName=\"proration_behavior\"\n              [placeholder]=\"'Select Proration Behavior'\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n              [showClear]=\"true\">\n            </p-select>\n          </pw-input-container>\n        </div>\n      </div>\n      <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n        <div class=\"mb-3\">\n          <pw-input-container [showTooltip]=\"true\"\n            [tooltipText]=\"'Admin.Products.Tooltip.UnsubscribeStripeBehavior' | transloco\"\n            [label]=\"'Admin.Products.UnsubscribeStripeBehavior' | transloco\" name=\"unsubscribe_stripe_behavior\" controlId=\"product-unsubscribe_stripe_behavior\" [useAriaLabelledbyOnly]=\"true\">\n            <p-select\n              [attr.aria-labelledby]=\"'product-unsubscribe_stripe_behavior-label'\"\n              [options]=\"unsubscribeBehaviors\"\n              formControlName=\"unsubscribe_stripe_behavior\"\n              [placeholder]=\"'Select Unsubscribe Stripe Behavior'\"\n              optionValue=\"value\"\n              optionLabel=\"label\"\n              [showClear]=\"true\">\n            </p-select>\n          </pw-input-container>\n        </div>\n      </div>\n      <!--start toggles -->\n      <div class=\"col-12 row mt-4\">\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\" controlId=\"product-active\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n                [attr.aria-labelledby]=\"'product-active-label'\"\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\" controlId=\"product-multiple_allowed\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\"\n                [attr.aria-labelledby]=\"'product-multiple_allowed-label'\"\n                      [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\" controlId=\"product-visible\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n                [attr.aria-labelledby]=\"'product-visible-label'\"\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\" controlId=\"product-members_visible\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\"\n                [attr.aria-labelledby]=\"'product-members_visible-label'\"\n                      [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\" controlId=\"product-chat_visible\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\"\n                [attr.aria-labelledby]=\"'product-chat_visible-label'\"\n                      [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\" controlId=\"product-is_master_product\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\"\n                [attr.aria-labelledby]=\"'product-is_master_product-label'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['is_master_product'].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.SecondPaymentRequired' | transloco\"\n              [label]=\"'Admin.Products.SecondPaymentRequired' | transloco\" name=\"second_payment_required\" controlId=\"product-second_payment_required\" [useAriaLabelledbyOnly]=\"true\">\n              <ui-switch class=\"d-block\" formControlName=\"second_payment_required\" name=\"second_payment_required\"\n                [attr.aria-labelledby]=\"'product-second_payment_required-label'\"\n                      [ngClass]=\"{\n                                                'is-invalid': submitted && f['second_payment_required'].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\" [buttonBusy]=\"submitted\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n        | transloco }} </button>\n      </div>\n    </div>\n  </form>\n</div>\n}\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: [".pw-label-style.info-circle{display:inline-block;line-height:1.5}.pw-label-style.info-circle:after{top:-7px}.nowrap{white-space:nowrap}textarea{height:180px}.full-logo{object-fit:cover;width:280px}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$2.ProductService }, { type: i2$1.NgbModal }, { type: i1.AdminService }], propDecorators: { onSave: [] } });
 
 class ProductInsightComponent extends AppBaseComponent {