@posiwise/admin-module 0.0.237 → 0.0.239

package/fesm2022/posiwise-admin-module.mjs

@@ -3,11 +3,11 @@ import { CommonModule, DatePipe } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Component, ViewChild, ViewChildren, SecurityContext, ViewEncapsulation, EventEmitter, Output, Pipe, ChangeDetectionStrategy, NgModule, CUSTOM_ELEMENTS_SCHEMA, Injectable } from '@angular/core';
 import * as i3$1 from '@angular/forms';
-import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { Validators, UntypedFormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i13$2 from '@angular-magic/ngx-gp-autocomplete';
 import { NgxGpAutocompleteModule } from '@angular-magic/ngx-gp-autocomplete';
 import * as i1 from '@posiwise/admin-module-utils';
-import { AppAdmin, PAYOUT_PROVIDERS, DEFAULT_PAYOUT_PROVIDER, isKnownPayoutProvider, clearPayoutValidators, patchPayoutDetails, applyPayoutValidators, visiblePayoutFields, buildPayoutDetails, AdminService, AdminDataService } from '@posiwise/admin-module-utils';
+import { AppAdmin, PAYOUT_PROVIDERS, DEFAULT_PAYOUT_PROVIDER, isKnownPayoutProvider, clearPayoutValidators, patchPayoutDetails, applyPayoutValidators, payoutProviderDefinition, buildPayoutDetails, AdminService, AdminDataService } from '@posiwise/admin-module-utils';
 import { AppConfigService } from '@posiwise/app-config-service';
 import * as i5$2 from '@posiwise/app-loader';
 import { AppLoaderModule } from '@posiwise/app-loader';
@@ -6901,16 +6901,8 @@ class AgentDetailsComponent extends AppBaseComponent {
         applyPayoutValidators(this.form, provider);
         this.cdr.markForCheck();
     }
-    /** Only the selected rail's fields — a SWIFT code and a domestic routing
-     *  code are alternatives, never both. */
     get payoutFields() {
-        return visiblePayoutFields(this.form, this.form.get('payout_provider').value);
-    }
-    /** The rail dropdown changes which fields are required, so validators are
-     *  re-pointed exactly as on a provider change. */
-    onTransferMethodChange() {
-        applyPayoutValidators(this.form, this.form.get('payout_provider').value);
-        this.cdr.markForCheck();
+        return payoutProviderDefinition(this.form.get('payout_provider').value).fields;
     }
     updateDetails() {
         this.submitted = true;
@@ -6970,7 +6962,7 @@ class AgentDetailsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AgentDetailsComponent, deps: [{ token: i1.AdminService }, { token: i1$1.GroupService }, { token: i2.NgbDatepickerConfig }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: AgentDetailsComponent, isStandalone: false, selector: "pw-agent-details", usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex align-items-center ms-3\">\n  <div class=\"me-auto col-xs-6 mt-4 d-flex\">\n    <a aria-label=\"Navigate to Target\"\n      routerLink=\"../../\"\n      class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n    <h3 class=\"mt-3\">Update Ambassador Details</h3>\n  </div>\n</div>\n<div class=\"p-2 mt-3 ms-3\">\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"updateDetails()\">\n    <!-- Agent Details -->\n    <div class=\"row\">\n      <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n        <div class=\"ui-fluid skills-modal\">\n          <span id=\"subscription-agents-ambassador-label\" class=\"pw-label-style\">Ambassador</span>\n          <p-autoComplete appendTo=\"body\" [suggestions]=\"filteredUsers\"\n            [attr.aria-labelledby]=\"'subscription-agents-ambassador-label'\"\n            formControlName=\"email\"\n            dataKey=\"id\"\n            optionLabel=\"displayName\"\n            [dropdown]=\"true\"\n            (completeMethod)=\"search($event)\"\n            styleClass=\"w-100\"\n            placeholder=\"Search ambassadors...\"\n            [multiple]=\"false\"\n            autocomplete=\"off\">\n          </p-autoComplete>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"row\">\n      <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n        <label for=\"subscription-agents-percentage\">Percentage</label>\n        <input type=\"text\"\n          id=\"subscription-agents-percentage\"\n          class=\"form-control\"\n          formControlName=\"percentage\" name=\"input_percentage_1\"/>\n      </div>\n\n      <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n        <label for=\"subscription-agents-end_date\">End Date</label>\n        <div class=\"input-group\">\n          <input class=\"form-control\"\n            id=\"subscription-agents-end_date\"\n            name=\"end_date\"\n            formControlName=\"end_date\"\n            ngbDatepicker\n            #d=\"ngbDatepicker\" />\n            <button class=\"btn btn-primary\"\n              type=\"button\"\n              aria-label=\"Open date picker\"\n              (click)=\"d.toggle()\">\n              <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n            </button>\n        </div>\n      </div>\n    </div>\n    <!-- Payout destination (#951): the provider drives which fields render.\n         Gated on the API response (AI54) \u2014 the control defaults to PayPal, so\n         rendering it early would assert the wrong payout method as fact. -->\n    @if (!payoutLoaded) {\n      <div class=\"row\">\n        <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n          <p-progressSpinner></p-progressSpinner>\n        </div>\n      </div>\n    }\n\n    <div class=\"row\" [hidden]=\"!payoutLoaded\">\n      <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n        <label for=\"subscription-agents-payout_provider\" class=\"pw-label-style\">\n          {{ 'Admin.Subscriptions.Payout.Provider' | transloco }}\n        </label>\n        <p-select\n          inputId=\"subscription-agents-payout_provider\"\n          appendTo=\"body\"\n          styleClass=\"w-100\"\n          [options]=\"payoutProviders\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          formControlName=\"payout_provider\"\n          (onChange)=\"onPayoutProviderChange($event.value)\">\n        </p-select>\n      </div>\n    </div>\n\n    @if (!payoutProviderSupported) {\n      <div class=\"row\">\n        <div class=\"mb-3 col-xs-12 col-sm-9 col-md-6\">\n          <div class=\"alert alert-warning mb-0\">\n            {{ 'Admin.Subscriptions.Payout.UnsupportedProvider' | transloco }}\n          </div>\n        </div>\n      </div>\n    }\n\n    <div class=\"row\" [hidden]=\"!payoutLoaded\">\n      @for (field of (payoutProviderSupported ? payoutFields : []); track field.control) {\n        <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n          <label [attr.for]=\"'subscription-agents-' + field.control\">\n            {{ field.labelKey | transloco }}\n          </label>\n          <!-- Gated on `touched`, not `submitted`: @ValidateForm returns before\n               the method body runs when the form is invalid, so `submitted`\n               never becomes true on a failed submit. The decorator does call\n               markAllAsTouched(). -->\n          @if (field.options) {\n            <!-- The rail drives which fields below are required, so a change\n                 has to re-point the validators, not just repaint. -->\n            <p-select\n              [inputId]=\"'subscription-agents-' + field.control\"\n              appendTo=\"body\"\n              styleClass=\"w-100\"\n              [options]=\"field.options\"\n              optionLabel=\"labelKey\"\n              optionValue=\"value\"\n              [formControlName]=\"field.control\"\n              (onChange)=\"onTransferMethodChange()\">\n              <ng-template let-option pTemplate=\"item\">{{ option.labelKey | transloco }}</ng-template>\n              <ng-template let-option pTemplate=\"selectedItem\">{{ option.labelKey | transloco }}</ng-template>\n            </p-select>\n          } @else {\n            <input type=\"text\"\n              class=\"form-control\"\n              [id]=\"'subscription-agents-' + field.control\"\n              [formControlName]=\"field.control\"\n              [attr.aria-invalid]=\"form.get(field.control).touched && form.get(field.control).invalid\"\n              [ngClass]=\"{'is-invalid': form.get(field.control).touched && form.get(field.control).errors}\"\n              autocomplete=\"off\"/>\n          }\n          @if (form.get(field.control).touched && form.get(field.control).errors?.required) {\n            <div class=\"invalid-feedback d-block\">\n              {{ 'Admin.Subscriptions.Payout.FieldRequired' | transloco }}\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    <div class=\"row text-end mt-4\">\n      <div class=\"col-12\">\n        <button type=\"button\"\n          class=\"btn btn-outline-default me-2\"\n          (click)=\"back()\">\n          Cancel\n        </button>\n        <button type=\"submit\"\n          [buttonBusy]=\"submitted\"\n          class=\"btn btn-primary\"\n          *rbacAllow=\"'Pages.Admin.Subscription.Edit'\">\n          {{ 'Button.Update' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i6.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: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i14.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i14.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: AgentDetailsComponent, isStandalone: false, selector: "pw-agent-details", usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex align-items-center ms-3\">\n  <div class=\"me-auto col-xs-6 mt-4 d-flex\">\n    <a aria-label=\"Navigate to Target\"\n      routerLink=\"../../\"\n      class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n    <h3 class=\"mt-3\">Update Ambassador Details</h3>\n  </div>\n</div>\n<div class=\"p-2 mt-3 ms-3\">\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"updateDetails()\">\n    <!-- Agent Details -->\n    <div class=\"row\">\n      <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n        <div class=\"ui-fluid skills-modal\">\n          <span id=\"subscription-agents-ambassador-label\" class=\"pw-label-style\">Ambassador</span>\n          <p-autoComplete appendTo=\"body\" [suggestions]=\"filteredUsers\"\n            [attr.aria-labelledby]=\"'subscription-agents-ambassador-label'\"\n            formControlName=\"email\"\n            dataKey=\"id\"\n            optionLabel=\"displayName\"\n            [dropdown]=\"true\"\n            (completeMethod)=\"search($event)\"\n            styleClass=\"w-100\"\n            placeholder=\"Search ambassadors...\"\n            [multiple]=\"false\"\n            autocomplete=\"off\">\n          </p-autoComplete>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"row\">\n      <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n        <label for=\"subscription-agents-percentage\">Percentage</label>\n        <input type=\"text\"\n          id=\"subscription-agents-percentage\"\n          class=\"form-control\"\n          formControlName=\"percentage\" name=\"input_percentage_1\"/>\n      </div>\n\n      <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n        <label for=\"subscription-agents-end_date\">End Date</label>\n        <div class=\"input-group\">\n          <input class=\"form-control\"\n            id=\"subscription-agents-end_date\"\n            name=\"end_date\"\n            formControlName=\"end_date\"\n            ngbDatepicker\n            #d=\"ngbDatepicker\" />\n            <button class=\"btn btn-primary\"\n              type=\"button\"\n              aria-label=\"Open date picker\"\n              (click)=\"d.toggle()\">\n              <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n            </button>\n        </div>\n      </div>\n    </div>\n    <!-- Payout destination (#951): the provider drives which fields render.\n         Gated on the API response (AI54) \u2014 the control defaults to PayPal, so\n         rendering it early would assert the wrong payout method as fact. -->\n    @if (!payoutLoaded) {\n      <div class=\"row\">\n        <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n          <p-progressSpinner></p-progressSpinner>\n        </div>\n      </div>\n    }\n\n    <div class=\"row\" [hidden]=\"!payoutLoaded\">\n      <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n        <label for=\"subscription-agents-payout_provider\" class=\"pw-label-style\">\n          {{ 'Admin.Subscriptions.Payout.Provider' | transloco }}\n        </label>\n        <p-select\n          inputId=\"subscription-agents-payout_provider\"\n          appendTo=\"body\"\n          styleClass=\"w-100\"\n          [options]=\"payoutProviders\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          formControlName=\"payout_provider\"\n          (onChange)=\"onPayoutProviderChange($event.value)\">\n        </p-select>\n      </div>\n    </div>\n\n    @if (!payoutProviderSupported) {\n      <div class=\"row\">\n        <div class=\"mb-3 col-xs-12 col-sm-9 col-md-6\">\n          <div class=\"alert alert-warning mb-0\">\n            {{ 'Admin.Subscriptions.Payout.UnsupportedProvider' | transloco }}\n          </div>\n        </div>\n      </div>\n    }\n\n    <div class=\"row\" [hidden]=\"!payoutLoaded\">\n      @for (field of (payoutProviderSupported ? payoutFields : []); track field.control) {\n        <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n          <label [attr.for]=\"'subscription-agents-' + field.control\">\n            {{ field.labelKey | transloco }}\n          </label>\n          <!-- Gated on `touched`, not `submitted`: @ValidateForm returns before\n               the method body runs when the form is invalid, so `submitted`\n               never becomes true on a failed submit. The decorator does call\n               markAllAsTouched(). -->\n          <input type=\"text\"\n              class=\"form-control\"\n              [id]=\"'subscription-agents-' + field.control\"\n              [formControlName]=\"field.control\"\n              [attr.aria-invalid]=\"form.get(field.control).touched && form.get(field.control).invalid\"\n              [ngClass]=\"{'is-invalid': form.get(field.control).touched && form.get(field.control).errors}\"\n              autocomplete=\"off\"/>\n          @if (form.get(field.control).touched && form.get(field.control).errors?.required) {\n            <div class=\"invalid-feedback d-block\">\n              {{ 'Admin.Subscriptions.Payout.FieldRequired' | transloco }}\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    <div class=\"row text-end mt-4\">\n      <div class=\"col-12\">\n        <button type=\"button\"\n          class=\"btn btn-outline-default me-2\"\n          (click)=\"back()\">\n          Cancel\n        </button>\n        <button type=\"submit\"\n          [buttonBusy]=\"submitted\"\n          class=\"btn btn-primary\"\n          *rbacAllow=\"'Pages.Admin.Subscription.Edit'\">\n          {{ 'Button.Update' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n", dependencies: [{ kind: "component", type: i4$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i6.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: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i14.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i14.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -6980,7 +6972,7 @@ __decorate([
 ], AgentDetailsComponent.prototype, "updateDetails", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: AgentDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-agent-details', standalone: false, template: "<div class=\"d-flex align-items-center ms-3\">\n  <div class=\"me-auto col-xs-6 mt-4 d-flex\">\n    <a aria-label=\"Navigate to Target\"\n      routerLink=\"../../\"\n      class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n    <h3 class=\"mt-3\">Update Ambassador Details</h3>\n  </div>\n</div>\n<div class=\"p-2 mt-3 ms-3\">\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"updateDetails()\">\n    <!-- Agent Details -->\n    <div class=\"row\">\n      <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n        <div class=\"ui-fluid skills-modal\">\n          <span id=\"subscription-agents-ambassador-label\" class=\"pw-label-style\">Ambassador</span>\n          <p-autoComplete appendTo=\"body\" [suggestions]=\"filteredUsers\"\n            [attr.aria-labelledby]=\"'subscription-agents-ambassador-label'\"\n            formControlName=\"email\"\n            dataKey=\"id\"\n            optionLabel=\"displayName\"\n            [dropdown]=\"true\"\n            (completeMethod)=\"search($event)\"\n            styleClass=\"w-100\"\n            placeholder=\"Search ambassadors...\"\n            [multiple]=\"false\"\n            autocomplete=\"off\">\n          </p-autoComplete>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"row\">\n      <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n        <label for=\"subscription-agents-percentage\">Percentage</label>\n        <input type=\"text\"\n          id=\"subscription-agents-percentage\"\n          class=\"form-control\"\n          formControlName=\"percentage\" name=\"input_percentage_1\"/>\n      </div>\n\n      <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n        <label for=\"subscription-agents-end_date\">End Date</label>\n        <div class=\"input-group\">\n          <input class=\"form-control\"\n            id=\"subscription-agents-end_date\"\n            name=\"end_date\"\n            formControlName=\"end_date\"\n            ngbDatepicker\n            #d=\"ngbDatepicker\" />\n            <button class=\"btn btn-primary\"\n              type=\"button\"\n              aria-label=\"Open date picker\"\n              (click)=\"d.toggle()\">\n              <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n            </button>\n        </div>\n      </div>\n    </div>\n    <!-- Payout destination (#951): the provider drives which fields render.\n         Gated on the API response (AI54) \u2014 the control defaults to PayPal, so\n         rendering it early would assert the wrong payout method as fact. -->\n    @if (!payoutLoaded) {\n      <div class=\"row\">\n        <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n          <p-progressSpinner></p-progressSpinner>\n        </div>\n      </div>\n    }\n\n    <div class=\"row\" [hidden]=\"!payoutLoaded\">\n      <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n        <label for=\"subscription-agents-payout_provider\" class=\"pw-label-style\">\n          {{ 'Admin.Subscriptions.Payout.Provider' | transloco }}\n        </label>\n        <p-select\n          inputId=\"subscription-agents-payout_provider\"\n          appendTo=\"body\"\n          styleClass=\"w-100\"\n          [options]=\"payoutProviders\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          formControlName=\"payout_provider\"\n          (onChange)=\"onPayoutProviderChange($event.value)\">\n        </p-select>\n      </div>\n    </div>\n\n    @if (!payoutProviderSupported) {\n      <div class=\"row\">\n        <div class=\"mb-3 col-xs-12 col-sm-9 col-md-6\">\n          <div class=\"alert alert-warning mb-0\">\n            {{ 'Admin.Subscriptions.Payout.UnsupportedProvider' | transloco }}\n          </div>\n        </div>\n      </div>\n    }\n\n    <div class=\"row\" [hidden]=\"!payoutLoaded\">\n      @for (field of (payoutProviderSupported ? payoutFields : []); track field.control) {\n        <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n          <label [attr.for]=\"'subscription-agents-' + field.control\">\n            {{ field.labelKey | transloco }}\n          </label>\n          <!-- Gated on `touched`, not `submitted`: @ValidateForm returns before\n               the method body runs when the form is invalid, so `submitted`\n               never becomes true on a failed submit. The decorator does call\n               markAllAsTouched(). -->\n          @if (field.options) {\n            <!-- The rail drives which fields below are required, so a change\n                 has to re-point the validators, not just repaint. -->\n            <p-select\n              [inputId]=\"'subscription-agents-' + field.control\"\n              appendTo=\"body\"\n              styleClass=\"w-100\"\n              [options]=\"field.options\"\n              optionLabel=\"labelKey\"\n              optionValue=\"value\"\n              [formControlName]=\"field.control\"\n              (onChange)=\"onTransferMethodChange()\">\n              <ng-template let-option pTemplate=\"item\">{{ option.labelKey | transloco }}</ng-template>\n              <ng-template let-option pTemplate=\"selectedItem\">{{ option.labelKey | transloco }}</ng-template>\n            </p-select>\n          } @else {\n            <input type=\"text\"\n              class=\"form-control\"\n              [id]=\"'subscription-agents-' + field.control\"\n              [formControlName]=\"field.control\"\n              [attr.aria-invalid]=\"form.get(field.control).touched && form.get(field.control).invalid\"\n              [ngClass]=\"{'is-invalid': form.get(field.control).touched && form.get(field.control).errors}\"\n              autocomplete=\"off\"/>\n          }\n          @if (form.get(field.control).touched && form.get(field.control).errors?.required) {\n            <div class=\"invalid-feedback d-block\">\n              {{ 'Admin.Subscriptions.Payout.FieldRequired' | transloco }}\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    <div class=\"row text-end mt-4\">\n      <div class=\"col-12\">\n        <button type=\"button\"\n          class=\"btn btn-outline-default me-2\"\n          (click)=\"back()\">\n          Cancel\n        </button>\n        <button type=\"submit\"\n          [buttonBusy]=\"submitted\"\n          class=\"btn btn-primary\"\n          *rbacAllow=\"'Pages.Admin.Subscription.Edit'\">\n          {{ 'Button.Update' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n" }]
+            args: [{ selector: 'pw-agent-details', standalone: false, template: "<div class=\"d-flex align-items-center ms-3\">\n  <div class=\"me-auto col-xs-6 mt-4 d-flex\">\n    <a aria-label=\"Navigate to Target\"\n      routerLink=\"../../\"\n      class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n    <h3 class=\"mt-3\">Update Ambassador Details</h3>\n  </div>\n</div>\n<div class=\"p-2 mt-3 ms-3\">\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"updateDetails()\">\n    <!-- Agent Details -->\n    <div class=\"row\">\n      <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n        <div class=\"ui-fluid skills-modal\">\n          <span id=\"subscription-agents-ambassador-label\" class=\"pw-label-style\">Ambassador</span>\n          <p-autoComplete appendTo=\"body\" [suggestions]=\"filteredUsers\"\n            [attr.aria-labelledby]=\"'subscription-agents-ambassador-label'\"\n            formControlName=\"email\"\n            dataKey=\"id\"\n            optionLabel=\"displayName\"\n            [dropdown]=\"true\"\n            (completeMethod)=\"search($event)\"\n            styleClass=\"w-100\"\n            placeholder=\"Search ambassadors...\"\n            [multiple]=\"false\"\n            autocomplete=\"off\">\n          </p-autoComplete>\n        </div>\n      </div>\n    </div>\n\n    <div class=\"row\">\n      <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n        <label for=\"subscription-agents-percentage\">Percentage</label>\n        <input type=\"text\"\n          id=\"subscription-agents-percentage\"\n          class=\"form-control\"\n          formControlName=\"percentage\" name=\"input_percentage_1\"/>\n      </div>\n\n      <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n        <label for=\"subscription-agents-end_date\">End Date</label>\n        <div class=\"input-group\">\n          <input class=\"form-control\"\n            id=\"subscription-agents-end_date\"\n            name=\"end_date\"\n            formControlName=\"end_date\"\n            ngbDatepicker\n            #d=\"ngbDatepicker\" />\n            <button class=\"btn btn-primary\"\n              type=\"button\"\n              aria-label=\"Open date picker\"\n              (click)=\"d.toggle()\">\n              <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n            </button>\n        </div>\n      </div>\n    </div>\n    <!-- Payout destination (#951): the provider drives which fields render.\n         Gated on the API response (AI54) \u2014 the control defaults to PayPal, so\n         rendering it early would assert the wrong payout method as fact. -->\n    @if (!payoutLoaded) {\n      <div class=\"row\">\n        <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n          <p-progressSpinner></p-progressSpinner>\n        </div>\n      </div>\n    }\n\n    <div class=\"row\" [hidden]=\"!payoutLoaded\">\n      <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n        <label for=\"subscription-agents-payout_provider\" class=\"pw-label-style\">\n          {{ 'Admin.Subscriptions.Payout.Provider' | transloco }}\n        </label>\n        <p-select\n          inputId=\"subscription-agents-payout_provider\"\n          appendTo=\"body\"\n          styleClass=\"w-100\"\n          [options]=\"payoutProviders\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          formControlName=\"payout_provider\"\n          (onChange)=\"onPayoutProviderChange($event.value)\">\n        </p-select>\n      </div>\n    </div>\n\n    @if (!payoutProviderSupported) {\n      <div class=\"row\">\n        <div class=\"mb-3 col-xs-12 col-sm-9 col-md-6\">\n          <div class=\"alert alert-warning mb-0\">\n            {{ 'Admin.Subscriptions.Payout.UnsupportedProvider' | transloco }}\n          </div>\n        </div>\n      </div>\n    }\n\n    <div class=\"row\" [hidden]=\"!payoutLoaded\">\n      @for (field of (payoutProviderSupported ? payoutFields : []); track field.control) {\n        <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n          <label [attr.for]=\"'subscription-agents-' + field.control\">\n            {{ field.labelKey | transloco }}\n          </label>\n          <!-- Gated on `touched`, not `submitted`: @ValidateForm returns before\n               the method body runs when the form is invalid, so `submitted`\n               never becomes true on a failed submit. The decorator does call\n               markAllAsTouched(). -->\n          <input type=\"text\"\n              class=\"form-control\"\n              [id]=\"'subscription-agents-' + field.control\"\n              [formControlName]=\"field.control\"\n              [attr.aria-invalid]=\"form.get(field.control).touched && form.get(field.control).invalid\"\n              [ngClass]=\"{'is-invalid': form.get(field.control).touched && form.get(field.control).errors}\"\n              autocomplete=\"off\"/>\n          @if (form.get(field.control).touched && form.get(field.control).errors?.required) {\n            <div class=\"invalid-feedback d-block\">\n              {{ 'Admin.Subscriptions.Payout.FieldRequired' | transloco }}\n            </div>\n          }\n        </div>\n      }\n    </div>\n\n    <div class=\"row text-end mt-4\">\n      <div class=\"col-12\">\n        <button type=\"button\"\n          class=\"btn btn-outline-default me-2\"\n          (click)=\"back()\">\n          Cancel\n        </button>\n        <button type=\"submit\"\n          [buttonBusy]=\"submitted\"\n          class=\"btn btn-primary\"\n          *rbacAllow=\"'Pages.Admin.Subscription.Edit'\">\n          {{ 'Button.Update' | transloco }}\n        </button>\n      </div>\n    </div>\n  </form>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i1$1.GroupService }, { type: i2.NgbDatepickerConfig }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }], propDecorators: { updateDetails: [] } });
 
 class SubscriptionProductsComponent extends AppBaseComponent {
@@ -7494,14 +7486,8 @@ class SubscriptionAgentsListComponent extends AppBaseComponent {
         }
         this.filteredUsers = values;
     }
-    /** Only the selected rail's fields — see visiblePayoutFields. */
     get payoutFields() {
-        return visiblePayoutFields(this.formEmbassador, this.formEmbassador.get('payout_provider').value);
-    }
-    /** The rail changes which fields are required, so it re-syncs validators
-     *  exactly as a provider change does. */
-    onTransferMethodChange() {
-        this.syncPayoutValidators();
+        return payoutProviderDefinition(this.formEmbassador.get('payout_provider').value).fields;
     }
     /**
      * This form creates ONE agent per selected ambassador, but a payout
@@ -7512,7 +7498,19 @@ class SubscriptionAgentsListComponent extends AppBaseComponent {
      * their destination on the edit screen.
      */
     get isSingleAmbassadorSelected() {
-        return (this.formEmbassador.get('email').value ?? []).length === 1;
+        return this.selectedAmbassadorCount === 1;
+    }
+    /**
+     * Only a genuine MULTI-selection gets the bulk hint. Gating it on
+     * `!isSingleAmbassadorSelected` also caught the zero-selected case, so a
+     * blank form explained bulk-add behaviour before anything had been picked —
+     * and the message then vanished the moment one ambassador was chosen.
+     */
+    get isBulkAmbassadorSelection() {
+        return this.selectedAmbassadorCount > 1;
+    }
+    get selectedAmbassadorCount() {
+        return (this.formEmbassador.get('email').value ?? []).length;
     }
     onPayoutProviderChange(_provider) {
         this.syncPayoutValidators();
@@ -7599,11 +7597,11 @@ class SubscriptionAgentsListComponent extends AppBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SubscriptionAgentsListComponent, deps: [{ token: i1.AdminService }, { token: i2.NgbDateParserFormatter }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i3$2.ConfirmDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: SubscriptionAgentsListComponent, isStandalone: false, selector: "pw-subscription-agents-list", usesInheritance: true, ngImport: i0, template: "@if (!newEmbass) {\n  <div class=\"w-100 text-center mt-3\">\n    <div class=\"d-flex align-items-center\">\n      <div class=\"ms-auto col-xs-12\">\n        <a class=\"btn btn-sm btn-outline-primary float-end\"\n          (click)=\"newEmbass = true\"\n          id=\"btn-create\">\n          <i class=\"fa fa-plus-circle me-2\" aria-hidden=\"true\"></i>Add Ambassadors\n        </a>\n      </div>\n    </div>\n    @if (!isLoaded) {\n      <p-progressSpinner> </p-progressSpinner>\n    }\n  </div>\n  <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n    [class.hideTable]=\"totalUnfilteredCount === 0\">\n    <p-table #dt\n      [value]=\"allAgents\"\n      [paginator]=\"totalRecords !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [lazy]=\"true\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      [customSort]=\"true\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"text-end\">\n          <p-iconfield iconPosition=\"left\">\n            <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n            <input type=\"text\"\n              id=\"subscription-agents-list-search\"\n              name=\"subscription-agents-list-search\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              placeholder=\"Search ambassadors...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </p-iconfield>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.AgentName' | transloco }}</th>\n          <th scope=\"true\">{{ 'Label.Email' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Percentage' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.EndDate' | transloco }}</th>\n          <th scope=\"true\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-agent>\n        <tr>\n          <td data-head=\"Agent Name\">\n            {{ agent.user.first_name !== null ? agent.user.first_name : 'N/A' }}\n          </td>\n          <td data-head=\"Email\">\n            {{ agent.user.email !== null ? agent.user.email : 'N/A' }}\n          </td>\n          <td data-head=\"Percentage\">{{ agent.percentage }}</td>\n          <td data-head=\"End Date\">{{ agent.end_date | dateFormat }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Edit\"\n                tooltipPosition=\"top\"\n                appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[\n                                    '/admin/subscriptions/',\n                                    agent.subscription_id,\n                                    'agent_details',\n                                    agent.user_id\n                                ]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\"\n                tooltipPosition=\"top\"\n                appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                (keydown.enter)=\"onDelete(agent?.user_id)\"\n                (click)=\"onDelete(agent?.user_id)\">\n                <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if (totalRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n    }\n  </div>\n  @if (totalRecords === 0 && isLoaded) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoAmbassadorsMessage' | transloco\">\n      </pw-no-data>\n    </div>\n  }\n}\n@if (newEmbass) {\n  <form [formGroup]=\"formEmbassador\"\n    id=\"mainFrom\"\n    class=\"mt-4\"\n    (ngSubmit)=\"onAddEmbassador()\">\n    <div class=\"row mb-2\">\n      <div class=\"col-10 col-md-6 offset-md-3\">\n        <div class=\"ui-fluid skills-modal\">\n          <p-autoComplete appendTo=\"body\" [suggestions]=\"filteredUsers\"\n            formControlName=\"email\"\n            dataKey=\"id\"\n            optionLabel=\"displayName\"\n            (completeMethod)=\"search($event)\"\n            styleClass=\"w-100\"\n            [dropdown]=\"true\"\n            placeholder=\"Search ambassadors...\"\n            [multiple]=\"true\">\n          </p-autoComplete>\n        </div>\n        <div class=\"row mt-3\">\n          <div class=\"col\">\n            <input type=\"number\"\n              formControlName=\"percentage\"\n              class=\"form-control\"\n              placeholder=\"Enter percentage\" id=\"input_percentage_2\" name=\"input_percentage_2\"/>\n          </div>\n          <div class=\"col\">\n            <label for=\"subscription-agents-list-endDate\" class=\"visually-hidden\">End Date</label>\n            <div class=\"input-group\">\n              <input class=\"form-control\"\n                id=\"subscription-agents-list-endDate\"\n                name=\"endDate\"\n                placeholder=\"dd-mmm-yyyy\"\n                formControlName=\"endDate\"\n                ngbDatepicker\n                #d=\"ngbDatepicker\"\n                (click)=\"d.open()\"\n                [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n                [maxDate]=\"{ day: 31, month: 12, year: 2050 }\" />\n                <button class=\"btn btn-primary\"\n                  type=\"button\"\n                  aria-label=\"Open date picker\"\n                  (click)=\"d.toggle()\">\n                  <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                </button>\n            </div>\n          </div>\n        </div>\n        <!-- Payout destination (#951): the provider drives which fields render. -->\n        <div class=\"row mt-3\">\n          <!-- Explicit responsive columns, not a bare `col`: Bootstrap's auto\n               columns never wrap, so with a dozen Airwallex fields in this row\n               each one collapsed to ~24px at mobile width. -->\n          <div class=\"col-12 col-sm-6 col-md-4 col-lg-3 mb-2\">\n            <label for=\"subscription-agents-list-payout_provider\" class=\"visually-hidden\">\n              {{ 'Admin.Subscriptions.Payout.Provider' | transloco }}\n            </label>\n            <p-select\n              inputId=\"subscription-agents-list-payout_provider\"\n              appendTo=\"body\"\n              styleClass=\"w-100\"\n              [options]=\"payoutProviders\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              formControlName=\"payout_provider\"\n              (onChange)=\"onPayoutProviderChange($event.value)\">\n            </p-select>\n          </div>\n          @if (isSingleAmbassadorSelected) {\n            @for (field of payoutFields; track field.control) {\n              <div class=\"col-12 col-sm-6 col-md-4 col-lg-3 mb-2\">\n                <label [attr.for]=\"'subscription-agents-list-' + field.control\" class=\"visually-hidden\">\n                  {{ field.labelKey | transloco }}\n                </label>\n                @if (field.options) {\n                  <p-select\n                    [inputId]=\"'subscription-agents-list-' + field.control\"\n                    appendTo=\"body\"\n                    styleClass=\"w-100\"\n                    [options]=\"field.options\"\n                    optionLabel=\"labelKey\"\n                    optionValue=\"value\"\n                    [formControlName]=\"field.control\"\n                    (onChange)=\"onTransferMethodChange()\">\n                    <ng-template let-option pTemplate=\"item\">{{ option.labelKey | transloco }}</ng-template>\n                    <ng-template let-option pTemplate=\"selectedItem\">{{ option.labelKey | transloco }}</ng-template>\n                  </p-select>\n                } @else {\n                  <input type=\"text\"\n                    class=\"form-control\"\n                    [id]=\"'subscription-agents-list-' + field.control\"\n                    [formControlName]=\"field.control\"\n                    [placeholder]=\"field.labelKey | transloco\"\n                    autocomplete=\"off\"/>\n                }\n              </div>\n            }\n          }\n        </div>\n        @if (!isSingleAmbassadorSelected) {\n          <div class=\"row mt-2\">\n            <div class=\"col\">\n              <small class=\"text-muted\">\n                {{ 'Admin.Subscriptions.Payout.BulkHint' | transloco }}\n              </small>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n    <div class=\"text-center mt-4\">\n      <button type=\"button\"\n        (click)=\"newEmbass = false\"\n        class=\"btn btn-sm btn-outline-default me-2\">\n        {{ 'Button.Cancel' | transloco }}\n      </button>\n      <button type=\"submit\"\n        [buttonBusy]=\"submitted\"\n      class=\"btn btn-sm btn-primary me-2\">Add Ambassador</button>\n    </div>\n  </form>\n}\n", styles: ["#mainFrom{padding-bottom:144px}.input-group>.form-control{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.input-group>.btn{border-top-left-radius:0;border-bottom-left-radius:0}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.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: i4$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i6.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: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i14.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: SubscriptionAgentsListComponent, isStandalone: false, selector: "pw-subscription-agents-list", usesInheritance: true, ngImport: i0, template: "@if (!newEmbass) {\n  <div class=\"w-100 text-center mt-3\">\n    <div class=\"d-flex align-items-center\">\n      <div class=\"ms-auto col-xs-12\">\n        <a class=\"btn btn-sm btn-outline-primary float-end\"\n          (click)=\"newEmbass = true\"\n          id=\"btn-create\">\n          <i class=\"fa fa-plus-circle me-2\" aria-hidden=\"true\"></i>Add Ambassadors\n        </a>\n      </div>\n    </div>\n    @if (!isLoaded) {\n      <p-progressSpinner> </p-progressSpinner>\n    }\n  </div>\n  <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n    [class.hideTable]=\"totalUnfilteredCount === 0\">\n    <p-table #dt\n      [value]=\"allAgents\"\n      [paginator]=\"totalRecords !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [lazy]=\"true\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      [customSort]=\"true\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"text-end\">\n          <p-iconfield iconPosition=\"left\">\n            <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n            <input type=\"text\"\n              id=\"subscription-agents-list-search\"\n              name=\"subscription-agents-list-search\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              placeholder=\"Search ambassadors...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </p-iconfield>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.AgentName' | transloco }}</th>\n          <th scope=\"true\">{{ 'Label.Email' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Percentage' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.EndDate' | transloco }}</th>\n          <th scope=\"true\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-agent>\n        <tr>\n          <td data-head=\"Agent Name\">\n            {{ agent.user.first_name !== null ? agent.user.first_name : 'N/A' }}\n          </td>\n          <td data-head=\"Email\">\n            {{ agent.user.email !== null ? agent.user.email : 'N/A' }}\n          </td>\n          <td data-head=\"Percentage\">{{ agent.percentage }}</td>\n          <td data-head=\"End Date\">{{ agent.end_date | dateFormat }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Edit\"\n                tooltipPosition=\"top\"\n                appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[\n                                    '/admin/subscriptions/',\n                                    agent.subscription_id,\n                                    'agent_details',\n                                    agent.user_id\n                                ]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\"\n                tooltipPosition=\"top\"\n                appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                (keydown.enter)=\"onDelete(agent?.user_id)\"\n                (click)=\"onDelete(agent?.user_id)\">\n                <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if (totalRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n    }\n  </div>\n  @if (totalRecords === 0 && isLoaded) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoAmbassadorsMessage' | transloco\">\n      </pw-no-data>\n    </div>\n  }\n}\n@if (newEmbass) {\n  <form [formGroup]=\"formEmbassador\"\n    id=\"mainFrom\"\n    class=\"mt-4\"\n    (ngSubmit)=\"onAddEmbassador()\">\n    <div class=\"row mb-2\">\n      <div class=\"col-10 col-md-6 offset-md-3\">\n        <div class=\"ui-fluid skills-modal\">\n          <p-autoComplete appendTo=\"body\" [suggestions]=\"filteredUsers\"\n            formControlName=\"email\"\n            dataKey=\"id\"\n            optionLabel=\"displayName\"\n            (completeMethod)=\"search($event)\"\n            styleClass=\"w-100\"\n            [dropdown]=\"true\"\n            placeholder=\"Search ambassadors...\"\n            [multiple]=\"true\">\n          </p-autoComplete>\n        </div>\n        <div class=\"row mt-3\">\n          <div class=\"col\">\n            <input type=\"number\"\n              formControlName=\"percentage\"\n              class=\"form-control\"\n              placeholder=\"Enter percentage\" id=\"input_percentage_2\" name=\"input_percentage_2\"/>\n          </div>\n          <div class=\"col\">\n            <label for=\"subscription-agents-list-endDate\" class=\"visually-hidden\">End Date</label>\n            <div class=\"input-group\">\n              <input class=\"form-control\"\n                id=\"subscription-agents-list-endDate\"\n                name=\"endDate\"\n                placeholder=\"dd-mmm-yyyy\"\n                formControlName=\"endDate\"\n                ngbDatepicker\n                #d=\"ngbDatepicker\"\n                (click)=\"d.open()\"\n                [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n                [maxDate]=\"{ day: 31, month: 12, year: 2050 }\" />\n                <button class=\"btn btn-primary\"\n                  type=\"button\"\n                  aria-label=\"Open date picker\"\n                  (click)=\"d.toggle()\">\n                  <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                </button>\n            </div>\n          </div>\n        </div>\n        <!-- Payout destination (#951): the provider drives which fields render. -->\n        <div class=\"row mt-3\">\n          <!-- Half-width from sm up, matching the Percentage / End Date row above;\n               full width on mobile. Explicit breakpoints rather than a bare `col`,\n               which never wraps - with three items in this row that would leave\n               each ~33% on desktop and unusably narrow on a phone. -->\n          <div class=\"col-12 col-sm-6 mb-2\">\n            <label for=\"subscription-agents-list-payout_provider\" class=\"visually-hidden\">\n              {{ 'Admin.Subscriptions.Payout.Provider' | transloco }}\n            </label>\n            <p-select\n              inputId=\"subscription-agents-list-payout_provider\"\n              appendTo=\"body\"\n              styleClass=\"w-100\"\n              [options]=\"payoutProviders\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              formControlName=\"payout_provider\"\n              (onChange)=\"onPayoutProviderChange($event.value)\">\n            </p-select>\n          </div>\n          @if (isSingleAmbassadorSelected) {\n            @for (field of payoutFields; track field.control) {\n              <div class=\"col-12 col-sm-6 mb-2\">\n                <label [attr.for]=\"'subscription-agents-list-' + field.control\" class=\"visually-hidden\">\n                  {{ field.labelKey | transloco }}\n                </label>\n                  <input type=\"text\"\n                    class=\"form-control\"\n                    [id]=\"'subscription-agents-list-' + field.control\"\n                    [formControlName]=\"field.control\"\n                    [placeholder]=\"field.labelKey | transloco\"\n                    autocomplete=\"off\"/>\n              </div>\n            }\n          }\n        </div>\n        @if (isBulkAmbassadorSelection) {\n          <div class=\"row mt-2\">\n            <div class=\"col\">\n              <small class=\"text-muted\">\n                {{ 'Admin.Subscriptions.Payout.BulkHint' | transloco }}\n              </small>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n    <div class=\"text-center mt-4\">\n      <button type=\"button\"\n        (click)=\"newEmbass = false\"\n        class=\"btn btn-sm btn-outline-default me-2\">\n        {{ 'Button.Cancel' | transloco }}\n      </button>\n      <button type=\"submit\"\n        [buttonBusy]=\"submitted\"\n      class=\"btn btn-sm btn-primary me-2\">Add Ambassador</button>\n    </div>\n  </form>\n}\n", styles: ["#mainFrom{padding-bottom:144px}.input-group>.form-control{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.input-group>.btn{border-top-left-radius:0;border-bottom-left-radius:0}\n"], dependencies: [{ kind: "component", type: i3$3.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.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: i4$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i6.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: "directive", type: i6$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i14.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SubscriptionAgentsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-subscription-agents-list', standalone: false, template: "@if (!newEmbass) {\n  <div class=\"w-100 text-center mt-3\">\n    <div class=\"d-flex align-items-center\">\n      <div class=\"ms-auto col-xs-12\">\n        <a class=\"btn btn-sm btn-outline-primary float-end\"\n          (click)=\"newEmbass = true\"\n          id=\"btn-create\">\n          <i class=\"fa fa-plus-circle me-2\" aria-hidden=\"true\"></i>Add Ambassadors\n        </a>\n      </div>\n    </div>\n    @if (!isLoaded) {\n      <p-progressSpinner> </p-progressSpinner>\n    }\n  </div>\n  <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n    [class.hideTable]=\"totalUnfilteredCount === 0\">\n    <p-table #dt\n      [value]=\"allAgents\"\n      [paginator]=\"totalRecords !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [lazy]=\"true\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      [customSort]=\"true\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"text-end\">\n          <p-iconfield iconPosition=\"left\">\n            <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n            <input type=\"text\"\n              id=\"subscription-agents-list-search\"\n              name=\"subscription-agents-list-search\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              placeholder=\"Search ambassadors...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </p-iconfield>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.AgentName' | transloco }}</th>\n          <th scope=\"true\">{{ 'Label.Email' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Percentage' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.EndDate' | transloco }}</th>\n          <th scope=\"true\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-agent>\n        <tr>\n          <td data-head=\"Agent Name\">\n            {{ agent.user.first_name !== null ? agent.user.first_name : 'N/A' }}\n          </td>\n          <td data-head=\"Email\">\n            {{ agent.user.email !== null ? agent.user.email : 'N/A' }}\n          </td>\n          <td data-head=\"Percentage\">{{ agent.percentage }}</td>\n          <td data-head=\"End Date\">{{ agent.end_date | dateFormat }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Edit\"\n                tooltipPosition=\"top\"\n                appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[\n                                    '/admin/subscriptions/',\n                                    agent.subscription_id,\n                                    'agent_details',\n                                    agent.user_id\n                                ]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\"\n                tooltipPosition=\"top\"\n                appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                (keydown.enter)=\"onDelete(agent?.user_id)\"\n                (click)=\"onDelete(agent?.user_id)\">\n                <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if (totalRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n    }\n  </div>\n  @if (totalRecords === 0 && isLoaded) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoAmbassadorsMessage' | transloco\">\n      </pw-no-data>\n    </div>\n  }\n}\n@if (newEmbass) {\n  <form [formGroup]=\"formEmbassador\"\n    id=\"mainFrom\"\n    class=\"mt-4\"\n    (ngSubmit)=\"onAddEmbassador()\">\n    <div class=\"row mb-2\">\n      <div class=\"col-10 col-md-6 offset-md-3\">\n        <div class=\"ui-fluid skills-modal\">\n          <p-autoComplete appendTo=\"body\" [suggestions]=\"filteredUsers\"\n            formControlName=\"email\"\n            dataKey=\"id\"\n            optionLabel=\"displayName\"\n            (completeMethod)=\"search($event)\"\n            styleClass=\"w-100\"\n            [dropdown]=\"true\"\n            placeholder=\"Search ambassadors...\"\n            [multiple]=\"true\">\n          </p-autoComplete>\n        </div>\n        <div class=\"row mt-3\">\n          <div class=\"col\">\n            <input type=\"number\"\n              formControlName=\"percentage\"\n              class=\"form-control\"\n              placeholder=\"Enter percentage\" id=\"input_percentage_2\" name=\"input_percentage_2\"/>\n          </div>\n          <div class=\"col\">\n            <label for=\"subscription-agents-list-endDate\" class=\"visually-hidden\">End Date</label>\n            <div class=\"input-group\">\n              <input class=\"form-control\"\n                id=\"subscription-agents-list-endDate\"\n                name=\"endDate\"\n                placeholder=\"dd-mmm-yyyy\"\n                formControlName=\"endDate\"\n                ngbDatepicker\n                #d=\"ngbDatepicker\"\n                (click)=\"d.open()\"\n                [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n                [maxDate]=\"{ day: 31, month: 12, year: 2050 }\" />\n                <button class=\"btn btn-primary\"\n                  type=\"button\"\n                  aria-label=\"Open date picker\"\n                  (click)=\"d.toggle()\">\n                  <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                </button>\n            </div>\n          </div>\n        </div>\n        <!-- Payout destination (#951): the provider drives which fields render. -->\n        <div class=\"row mt-3\">\n          <!-- Explicit responsive columns, not a bare `col`: Bootstrap's auto\n               columns never wrap, so with a dozen Airwallex fields in this row\n               each one collapsed to ~24px at mobile width. -->\n          <div class=\"col-12 col-sm-6 col-md-4 col-lg-3 mb-2\">\n            <label for=\"subscription-agents-list-payout_provider\" class=\"visually-hidden\">\n              {{ 'Admin.Subscriptions.Payout.Provider' | transloco }}\n            </label>\n            <p-select\n              inputId=\"subscription-agents-list-payout_provider\"\n              appendTo=\"body\"\n              styleClass=\"w-100\"\n              [options]=\"payoutProviders\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              formControlName=\"payout_provider\"\n              (onChange)=\"onPayoutProviderChange($event.value)\">\n            </p-select>\n          </div>\n          @if (isSingleAmbassadorSelected) {\n            @for (field of payoutFields; track field.control) {\n              <div class=\"col-12 col-sm-6 col-md-4 col-lg-3 mb-2\">\n                <label [attr.for]=\"'subscription-agents-list-' + field.control\" class=\"visually-hidden\">\n                  {{ field.labelKey | transloco }}\n                </label>\n                @if (field.options) {\n                  <p-select\n                    [inputId]=\"'subscription-agents-list-' + field.control\"\n                    appendTo=\"body\"\n                    styleClass=\"w-100\"\n                    [options]=\"field.options\"\n                    optionLabel=\"labelKey\"\n                    optionValue=\"value\"\n                    [formControlName]=\"field.control\"\n                    (onChange)=\"onTransferMethodChange()\">\n                    <ng-template let-option pTemplate=\"item\">{{ option.labelKey | transloco }}</ng-template>\n                    <ng-template let-option pTemplate=\"selectedItem\">{{ option.labelKey | transloco }}</ng-template>\n                  </p-select>\n                } @else {\n                  <input type=\"text\"\n                    class=\"form-control\"\n                    [id]=\"'subscription-agents-list-' + field.control\"\n                    [formControlName]=\"field.control\"\n                    [placeholder]=\"field.labelKey | transloco\"\n                    autocomplete=\"off\"/>\n                }\n              </div>\n            }\n          }\n        </div>\n        @if (!isSingleAmbassadorSelected) {\n          <div class=\"row mt-2\">\n            <div class=\"col\">\n              <small class=\"text-muted\">\n                {{ 'Admin.Subscriptions.Payout.BulkHint' | transloco }}\n              </small>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n    <div class=\"text-center mt-4\">\n      <button type=\"button\"\n        (click)=\"newEmbass = false\"\n        class=\"btn btn-sm btn-outline-default me-2\">\n        {{ 'Button.Cancel' | transloco }}\n      </button>\n      <button type=\"submit\"\n        [buttonBusy]=\"submitted\"\n      class=\"btn btn-sm btn-primary me-2\">Add Ambassador</button>\n    </div>\n  </form>\n}\n", styles: ["#mainFrom{padding-bottom:144px}.input-group>.form-control{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.input-group>.btn{border-top-left-radius:0;border-bottom-left-radius:0}\n"] }]
+            args: [{ selector: 'pw-subscription-agents-list', standalone: false, template: "@if (!newEmbass) {\n  <div class=\"w-100 text-center mt-3\">\n    <div class=\"d-flex align-items-center\">\n      <div class=\"ms-auto col-xs-12\">\n        <a class=\"btn btn-sm btn-outline-primary float-end\"\n          (click)=\"newEmbass = true\"\n          id=\"btn-create\">\n          <i class=\"fa fa-plus-circle me-2\" aria-hidden=\"true\"></i>Add Ambassadors\n        </a>\n      </div>\n    </div>\n    @if (!isLoaded) {\n      <p-progressSpinner> </p-progressSpinner>\n    }\n  </div>\n  <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n    [class.hideTable]=\"totalUnfilteredCount === 0\">\n    <p-table #dt\n      [value]=\"allAgents\"\n      [paginator]=\"totalRecords !== 0\"\n      [rows]=\"PAGE_SIZE\"\n      [lazy]=\"true\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      [filterDelay]=\"1000\"\n      [customSort]=\"true\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"text-end\">\n          <p-iconfield iconPosition=\"left\">\n            <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n            <input type=\"text\"\n              id=\"subscription-agents-list-search\"\n              name=\"subscription-agents-list-search\"\n              [(ngModel)]=\"searchText\"\n              pInputText\n              placeholder=\"Search ambassadors...\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </p-iconfield>\n        </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.AgentName' | transloco }}</th>\n          <th scope=\"true\">{{ 'Label.Email' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.Percentage' | transloco }}</th>\n          <th scope=\"true\">{{ 'Admin.Subscriptions.EndDate' | transloco }}</th>\n          <th scope=\"true\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-agent>\n        <tr>\n          <td data-head=\"Agent Name\">\n            {{ agent.user.first_name !== null ? agent.user.first_name : 'N/A' }}\n          </td>\n          <td data-head=\"Email\">\n            {{ agent.user.email !== null ? agent.user.email : 'N/A' }}\n          </td>\n          <td data-head=\"Percentage\">{{ agent.percentage }}</td>\n          <td data-head=\"End Date\">{{ agent.end_date | dateFormat }}</td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li pTooltip=\"Edit\"\n                tooltipPosition=\"top\"\n                appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                [routerLink]=\"[\n                                    '/admin/subscriptions/',\n                                    agent.subscription_id,\n                                    'agent_details',\n                                    agent.user_id\n                                ]\">\n                <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n              </li>\n              <li pTooltip=\"Delete\"\n                tooltipPosition=\"top\"\n                appendTo=\"body\"\n                class=\"me-2 me-sm-3\"\n                (keydown.enter)=\"onDelete(agent?.user_id)\"\n                (click)=\"onDelete(agent?.user_id)\">\n                <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    @if (totalRecords !== 0) {\n      <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n    }\n  </div>\n  @if (totalRecords === 0 && isLoaded) {\n    <div>\n      <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoAmbassadorsMessage' | transloco\">\n      </pw-no-data>\n    </div>\n  }\n}\n@if (newEmbass) {\n  <form [formGroup]=\"formEmbassador\"\n    id=\"mainFrom\"\n    class=\"mt-4\"\n    (ngSubmit)=\"onAddEmbassador()\">\n    <div class=\"row mb-2\">\n      <div class=\"col-10 col-md-6 offset-md-3\">\n        <div class=\"ui-fluid skills-modal\">\n          <p-autoComplete appendTo=\"body\" [suggestions]=\"filteredUsers\"\n            formControlName=\"email\"\n            dataKey=\"id\"\n            optionLabel=\"displayName\"\n            (completeMethod)=\"search($event)\"\n            styleClass=\"w-100\"\n            [dropdown]=\"true\"\n            placeholder=\"Search ambassadors...\"\n            [multiple]=\"true\">\n          </p-autoComplete>\n        </div>\n        <div class=\"row mt-3\">\n          <div class=\"col\">\n            <input type=\"number\"\n              formControlName=\"percentage\"\n              class=\"form-control\"\n              placeholder=\"Enter percentage\" id=\"input_percentage_2\" name=\"input_percentage_2\"/>\n          </div>\n          <div class=\"col\">\n            <label for=\"subscription-agents-list-endDate\" class=\"visually-hidden\">End Date</label>\n            <div class=\"input-group\">\n              <input class=\"form-control\"\n                id=\"subscription-agents-list-endDate\"\n                name=\"endDate\"\n                placeholder=\"dd-mmm-yyyy\"\n                formControlName=\"endDate\"\n                ngbDatepicker\n                #d=\"ngbDatepicker\"\n                (click)=\"d.open()\"\n                [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n                [maxDate]=\"{ day: 31, month: 12, year: 2050 }\" />\n                <button class=\"btn btn-primary\"\n                  type=\"button\"\n                  aria-label=\"Open date picker\"\n                  (click)=\"d.toggle()\">\n                  <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                </button>\n            </div>\n          </div>\n        </div>\n        <!-- Payout destination (#951): the provider drives which fields render. -->\n        <div class=\"row mt-3\">\n          <!-- Half-width from sm up, matching the Percentage / End Date row above;\n               full width on mobile. Explicit breakpoints rather than a bare `col`,\n               which never wraps - with three items in this row that would leave\n               each ~33% on desktop and unusably narrow on a phone. -->\n          <div class=\"col-12 col-sm-6 mb-2\">\n            <label for=\"subscription-agents-list-payout_provider\" class=\"visually-hidden\">\n              {{ 'Admin.Subscriptions.Payout.Provider' | transloco }}\n            </label>\n            <p-select\n              inputId=\"subscription-agents-list-payout_provider\"\n              appendTo=\"body\"\n              styleClass=\"w-100\"\n              [options]=\"payoutProviders\"\n              optionLabel=\"label\"\n              optionValue=\"value\"\n              formControlName=\"payout_provider\"\n              (onChange)=\"onPayoutProviderChange($event.value)\">\n            </p-select>\n          </div>\n          @if (isSingleAmbassadorSelected) {\n            @for (field of payoutFields; track field.control) {\n              <div class=\"col-12 col-sm-6 mb-2\">\n                <label [attr.for]=\"'subscription-agents-list-' + field.control\" class=\"visually-hidden\">\n                  {{ field.labelKey | transloco }}\n                </label>\n                  <input type=\"text\"\n                    class=\"form-control\"\n                    [id]=\"'subscription-agents-list-' + field.control\"\n                    [formControlName]=\"field.control\"\n                    [placeholder]=\"field.labelKey | transloco\"\n                    autocomplete=\"off\"/>\n              </div>\n            }\n          }\n        </div>\n        @if (isBulkAmbassadorSelection) {\n          <div class=\"row mt-2\">\n            <div class=\"col\">\n              <small class=\"text-muted\">\n                {{ 'Admin.Subscriptions.Payout.BulkHint' | transloco }}\n              </small>\n            </div>\n          </div>\n        }\n      </div>\n    </div>\n    <div class=\"text-center mt-4\">\n      <button type=\"button\"\n        (click)=\"newEmbass = false\"\n        class=\"btn btn-sm btn-outline-default me-2\">\n        {{ 'Button.Cancel' | transloco }}\n      </button>\n      <button type=\"submit\"\n        [buttonBusy]=\"submitted\"\n      class=\"btn btn-sm btn-primary me-2\">Add Ambassador</button>\n    </div>\n  </form>\n}\n", styles: ["#mainFrom{padding-bottom:144px}.input-group>.form-control{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.input-group>.btn{border-top-left-radius:0;border-bottom-left-radius:0}\n"] }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i2.NgbDateParserFormatter }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i3$2.ConfirmDialogService }] });
 
 class SubscriptionDetailsComponent extends AppBaseComponent {
@@ -7620,7 +7618,10 @@ class SubscriptionDetailsComponent extends AppBaseComponent {
         this.isLoading = true;
         this.allAgents = [];
         this.allRoles = [];
+        // One or more comma-separated emails, no surrounding spaces (optional field).
+        this.commaSeparatedEmails = /^([^\s@,]+@[^\s@,]+\.[^\s@,]+)(,[^\s@,]+@[^\s@,]+\.[^\s@,]+)*$/;
         this.form = AppAdmin.getSubscriptionsForm();
+        this.form.addControl('invoice_recipient_emails', new UntypedFormControl('', [Validators.pattern(this.commaSeparatedEmails)]));
     }
     ngOnInit() {
         this.subscriptionId = PermissionService.selectedSubscription?.id;
@@ -7732,6 +7733,7 @@ class SubscriptionDetailsComponent extends AppBaseComponent {
                 address: formValue.address,
                 tax_id: formValue.tax_id,
                 contact_email: formValue.contact_email,
+                invoice_recipient_emails: formValue.invoice_recipient_emails,
                 contact_tel: formValue.contact_tel,
                 organization_type_id: formValue.organization_type_id,
                 organization_industry_id: formValue.organization_industry_id,
@@ -7795,11 +7797,11 @@ class SubscriptionDetailsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SubscriptionDetailsComponent, deps: [{ token: i1$1.SubscriptionService }, { token: i1.AdminService }, { token: i3.DatePipe }, { token: i1$1.CommonService }, { token: i1$1.NgbDateCustomParserFormatter }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: SubscriptionDetailsComponent, isStandalone: false, selector: "pw-subscription-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          routerLink=\"/admin/subscriptions/list\"\n          class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n          <h3 class=\"m-subheader__title m-subheader__title--separator\">\n            <span>Subscription Details</span>\n          </h3>\n          @if (currentSubscriber?.is_deleted) {\n            <span class=\"badge rounded-pill bg-danger ms-2\"\n            >Deleted</span>\n          }\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 >\n            <ul ngbNav\n              #nav=\"ngbNav\"\n              class=\"nav-tabs\">\n              <li [ngbNavItem]=\"1\">\n                <a ngbNavLink>Subscription</a>\n                <ng-template ngbNavContent>\n                  <div class=\"container-fluid pw-tab overflow-hidden\">\n                    <div class=\"dashboard\">\n                      <div class=\"dashboard-body\">\n                        <div class=\"mt-4\">\n                          <form [formGroup]=\"form\"\n                            (ngSubmit)=\"saveDetails()\">\n                            <h3>{{ 'Admin.Subscriptions.Section.IdentityContact' | transloco }}</h3>\n                            <div class=\"row\">\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Organization' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.Organization' | transloco\"\n                                  name=\"organisation\"\n                                  controlId=\"sub-details-organisation\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-organisation\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n                                    formControlName=\"organisation\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactName' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.ContactName' | transloco\"\n                                  name=\"contact_name\"\n                                  controlId=\"sub-details-contact_name\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-contact_name\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactName' | transloco\"\n                                    formControlName=\"contact_name\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactEmail' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.ContactEmail' | transloco\"\n                                  name=\"contact_email\"\n                                  controlId=\"sub-details-contact_email\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-contact_email\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactEmail' | transloco\"\n                                    formControlName=\"contact_email\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactTel' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.ContactTel' | transloco\"\n                                  name=\"contact_tel\"\n                                  controlId=\"sub-details-contact_tel\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-contact_tel\"\n                                    formControlName=\"contact_tel\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactTel' | transloco\"\n                                    class=\"form-control\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [label]=\"'Admin.Subscriptions.TaxId' | transloco\"\n                                  [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.TaxId' | transloco\"\n                                  name=\"tax_id\"\n                                  controlId=\"sub-details-tax_id\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-tax_id\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.TaxId' | transloco\"\n                                    formControlName=\"tax_id\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n                                *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                                <span class=\"pw-label-style\" id=\"subscription-details-roles-label\" [pTooltip]=\"'Admin.Subscriptions.Tooltip.AssignedRoles' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">{{ 'Admin.Subscriptions.AssignedRoles' | transloco }}\n                                  <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n                                </span>\n                                <p-multiSelect inputId=\"subscription-details-roles\" [options]=\"allRoles\"\n                                  formControlName=\"roles\"\n                                  appendTo=\"body\"\n                                  [placeholder]=\"'Admin.Subscriptions.Placeholder.AssignedRoles' | transloco\"\n                                  [ariaLabelledBy]=\"'subscription-details-roles-label'\"\n                                [ariaLabel]=\"'Admin.Subscriptions.AssignedRoles' | transloco\"></p-multiSelect>\n                              </div>\n                              @if (organizationTypes$ | async; as types) {\n                                <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n                                  >\n                                  <pw-input-container [showTooltip]=\"true\"\n                                    [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\"\n                                    [label]=\"'Organization.OrganizationType' | transloco\"\n                                    name=\"organization_type_id\" controlId=\"subscription-organization_type_id\" [useAriaLabelledbyOnly]=\"true\">\n                                    <p-select\n                                      [ariaLabelledBy]=\"'subscription-organization_type_id-label'\"\n                                      [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n                                      [options]=\"types['organization_types']\"\n                                      formControlName=\"organization_type_id\"\n                                      [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationType' | transloco\"\n                                      optionValue=\"id\"\n                                      optionLabel=\"name\">\n                                    </p-select>\n                                  </pw-input-container>\n                                </div>\n                              }\n                              @if (organizationIndustries$ | async; as industries) {\n                                <div class=\"mb-3 col-sm-6 col-md-3\"\n                                  >\n                                  <pw-input-container [showTooltip]=\"true\"\n                                    [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\"\n                                    [label]=\"'Organization.OrganizationIndustry' | transloco\"\n                                    name=\"organization_industry_id\" controlId=\"subscription-organization_industry_id\" [useAriaLabelledbyOnly]=\"true\">\n                                    <p-select\n                                      [ariaLabelledBy]=\"'subscription-organization_industry_id-label'\"\n                                      [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n                                      [options]=\"industries['organization_industries']\"\n                                      formControlName=\"organization_industry_id\"\n                                      [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationIndustry' | transloco\"\n                                      optionValue=\"id\"\n                                      optionLabel=\"name\">\n                                    </p-select>\n                                  </pw-input-container>\n                                </div>\n                              }\n                              @if (organizationSizes$ | async; as sizes) {\n                                <div class=\"mb-3 col-sm-6 col-md-3\"\n                                  >\n                                  <pw-input-container [showTooltip]=\"true\"\n                                    [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\"\n                                    [label]=\"'Size' | transloco\"\n                                    name=\"organization_size_id\" controlId=\"subscription-organization_size_id\" [useAriaLabelledbyOnly]=\"true\">\n                                    <p-select\n                                      [ariaLabelledBy]=\"'subscription-organization_size_id-label'\"\n                                      [ariaLabel]=\"'Size' | transloco\"\n                                      [options]=\"sizes['organization_sizes']\"\n                                      formControlName=\"organization_size_id\"\n                                      [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationSize' | transloco\"\n                                      optionValue=\"id\"\n                                      optionLabel=\"name\">\n                                    </p-select>\n                                  </pw-input-container>\n                                </div>\n                              }\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.CompanyUrl' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\"\n                                  name=\"company_url\"\n                                  controlId=\"sub-details-company_url\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-company_url\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.CompanyUrl' | transloco\"\n                                    formControlName=\"company_url\" />\n                                </pw-input-container>\n                              </div>\n                            </div>\n                            <h3>{{ 'Admin.Subscriptions.Section.PlanSeats' | transloco }}</h3>\n                            <div class=\"row\">\n                              <!-- Readonly Starts -->\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reference' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.Reference' | transloco\"\n                                  name=\"reference_number\"\n                                  controlId=\"sub-details-reference_number\">\n                                  @if (form) {\n                                    <input type=\"text\"\n                                      id=\"sub-details-reference_number\"\n                                      readonly\n                                      class=\"form-control\"\n                                      data-control=\"reference\"\n                                      [value]=\"form.get('reference_number')?.value\" />\n                                  }\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.UnitsInUse' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\"\n                                  name=\"units_in_use\"\n                                  controlId=\"sub-details-units_in_use\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-units_in_use\"\n                                    readonly\n                                    class=\"form-control\"\n                                    formControlName=\"units_in_use\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.MaxUnits' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.MaxUnits' | transloco\"\n                                  name=\"max_units\"\n                                  controlId=\"sub-details-max_units\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-max_units\"\n                                    readonly\n                                    class=\"form-control\"\n                                    formControlName=\"max_units\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.CalculatedPrice' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\"\n                                  name=\"calculated_price\"\n                                  controlId=\"sub-details-calculated_price\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-calculated_price\"\n                                    class=\"form-control\"\n                                    readonly\n                                    formControlName=\"calculated_price\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.MainExpiryDate' | transloco\"\n                            [label]=\"\n                                                      'Admin.Subscriptions.MainExpiryDate' | transloco\n                                                  \"\n                                  name=\"expires_at\" controlId=\"sub-details-expires_at\">\n                                  <div class=\"input-group\">\n                                    <input class=\"form-control\"\n                                      id=\"sub-details-expires_at\"\n                                      name=\"expires_at\"\n                                      container=\"body\"\n                                      formControlName=\"expires_at\"\n                                      [readonly]=\"true\"\n                                      ngbDatepicker\n                                      #c=\"ngbDatepicker\" />\n                                      <button class=\"btn btn-primary\"\n                                        type=\"button\"\n                                        [disabled]=\"true\"\n                                        aria-label=\"Open date picker\"\n                                        (click)=\"c.toggle()\">\n                                        <i\n                                          class=\"fa fa-calendar\"\n                                          aria-hidden=\"true\"\n                                        ></i>\n                                      </button>\n                                  </div>\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n                                *rbacAllow=\"'SuperAdmin'\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.PurchasedSeats' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\"\n                                  name=\"purchased_units\"\n                                  controlId=\"sub-details-purchased_units\">\n                                  <input type=\"number\"\n                                    id=\"sub-details-purchased_units\"\n                                    min=\"0\"\n                                    readonly\n                                    class=\"form-control\"\n                                    formControlName=\"purchased_units\" />\n                                </pw-input-container>\n                              </div>\n                              <!-- Readonly Ends -->\n                            </div>\n                            <!-- social links -->\n                            <h3>{{ 'Admin.Subscriptions.Section.SocialLinks' | transloco }}</h3>\n                            <div class=\"row\">\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Facebook' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.Facebook' | transloco\"\n                                  name=\"facebook_handle\"\n                                  controlId=\"sub-details-facebook_handle\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-facebook_handle\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.Facebook' | transloco\"\n                                    formControlName=\"facebook_handle\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Twitter' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.Twitter' | transloco\"\n                                  name=\"twitter_handle\"\n                                  controlId=\"sub-details-twitter_handle\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-twitter_handle\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.Twitter' | transloco\"\n                                    formControlName=\"twitter_handle\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Linkedin' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.LinkedIn' | transloco\"\n                                  name=\"linkedin_handle\"\n                                  controlId=\"sub-details-linkedin_handle\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-linkedin_handle\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.LinkedIn' | transloco\"\n                                    formControlName=\"linkedin_handle\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reddit' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.Reddit' | transloco\"\n                                  name=\"reddit_handle\"\n                                  controlId=\"sub-details-reddit_handle\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-reddit_handle\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.Reddit' | transloco\"\n                                    formControlName=\"reddit_handle\" />\n                                </pw-input-container>\n                              </div>\n                            </div>\n                            <ng-container *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                              <h3>{{ 'Admin.Subscriptions.Section.Security' | transloco }}</h3>\n                              <div class=\"row\">\n                                <div class=\"col-12 col-sm-3\">\n                                  <pw-input-container [showTooltip]=\"true\"\n                                    [tooltipText]=\"'Admin.Subscriptions.Tooltip.Enforce2fa'| transloco\"\n                                    label=\"Enforce 2FA\"\n                                    name=\"enforce_2fa\" controlId=\"subscription-enforce_2fa\" [useAriaLabelledbyOnly]=\"true\">\n                                    <ui-switch formControlName=\"enforce_2fa\"\n                                      [attr.aria-labelledby]=\"'subscription-enforce_2fa-label'\"\n                                      name=\"enforce_2fa\">\n                                    </ui-switch>\n                                  </pw-input-container>\n                                </div>\n                              </div>\n                            </ng-container>\n                            <div class=\"row text-end mt-4\">\n                              <div class=\"col-12\">\n                                <button type=\"button\"\n                                  class=\"btn btn-outline-default me-2\"\n                                  (click)=\"back()\">\n                                  {{ 'Button.Cancel' | transloco }}\n                                </button>\n                                <button type=\"submit\"\n                                  [buttonBusy]=\"submitted\"\n                                  class=\"btn btn-primary\"\n                                  *rbacAllow=\"'Pages.Admin.Subscription.Edit'\">\n                                  {{ 'Button.Save' | transloco }}\n                                </button>\n                              </div>\n                            </div>\n                          </form>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </ng-template>\n              </li>\n              <li [ngbNavItem]=\"2\">\n                <a ngbNavLink>Products</a>\n                <ng-template ngbNavContent>\n                  <pw-subscription-products></pw-subscription-products>\n                </ng-template>\n              </li>\n              <li [ngbNavItem]=\"3\">\n                <a ngbNavLink>Members</a>\n                <ng-template ngbNavContent>\n                  <pw-subscription-users></pw-subscription-users>\n                </ng-template>\n              </li>\n              <li [ngbNavItem]=\"4\"\n                *rbacAllow=\"'SuperAdmin'\">\n                <a ngbNavLink>Ambassadors</a>\n                <ng-template ngbNavContent>\n                  <pw-subscription-agents-list></pw-subscription-agents-list>\n                </ng-template>\n              </li>\n            </ul>\n            <div [ngbNavOutlet]=\"nav\"></div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n", styles: [".ui-autocomplete-multiple-container,.ui-fluid.skills-modal p-autocomplete{background:transparent}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}:host ::ng-deep .pw-label-style+p-multiselect{margin-top:6px}:host ::ng-deep .input-group .btn{min-height:36px;display:inline-flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i5.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: i6.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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "component", type: i10.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.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: i14.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i14.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: SubscriptionProductsComponent, selector: "pw-subscription-products" }, { kind: "component", type: SubscriptionUsersComponent, selector: "pw-subscription-users" }, { kind: "component", type: SubscriptionAgentsListComponent, selector: "pw-subscription-agents-list" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: SubscriptionDetailsComponent, isStandalone: false, selector: "pw-subscription-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          routerLink=\"/admin/subscriptions/list\"\n          class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n          <h3 class=\"m-subheader__title m-subheader__title--separator\">\n            <span>Subscription Details</span>\n          </h3>\n          @if (currentSubscriber?.is_deleted) {\n            <span class=\"badge rounded-pill bg-danger ms-2\"\n            >Deleted</span>\n          }\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 >\n            <ul ngbNav\n              #nav=\"ngbNav\"\n              class=\"nav-tabs\">\n              <li [ngbNavItem]=\"1\">\n                <a ngbNavLink>Subscription</a>\n                <ng-template ngbNavContent>\n                  <div class=\"container-fluid pw-tab overflow-hidden\">\n                    <div class=\"dashboard\">\n                      <div class=\"dashboard-body\">\n                        <div class=\"mt-4\">\n                          <form [formGroup]=\"form\"\n                            (ngSubmit)=\"saveDetails()\">\n                            <h3>{{ 'Admin.Subscriptions.Section.IdentityContact' | transloco }}</h3>\n                            <div class=\"row\">\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Organization' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.Organization' | transloco\"\n                                  name=\"organisation\"\n                                  controlId=\"sub-details-organisation\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-organisation\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n                                    formControlName=\"organisation\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactName' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.ContactName' | transloco\"\n                                  name=\"contact_name\"\n                                  controlId=\"sub-details-contact_name\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-contact_name\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactName' | transloco\"\n                                    formControlName=\"contact_name\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactEmail' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.ContactEmail' | transloco\"\n                                  name=\"contact_email\"\n                                  controlId=\"sub-details-contact_email\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-contact_email\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactEmail' | transloco\"\n                                    formControlName=\"contact_email\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.InvoiceRecipientEmails' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.InvoiceRecipientEmails' | transloco\"\n                                  name=\"invoice_recipient_emails\"\n                                  controlId=\"sub-details-invoice_recipient_emails\"\n                                  [errorMsg]=\"'Admin.Subscriptions.Validation.InvoiceRecipientEmails' | transloco\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-invoice_recipient_emails\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.InvoiceRecipientEmails' | transloco\"\n                                    formControlName=\"invoice_recipient_emails\"\n                                    [ngClass]=\"{\n                                      'is-invalid': form.get('invoice_recipient_emails').touched && form.get('invoice_recipient_emails').invalid\n                                    }\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactTel' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.ContactTel' | transloco\"\n                                  name=\"contact_tel\"\n                                  controlId=\"sub-details-contact_tel\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-contact_tel\"\n                                    formControlName=\"contact_tel\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactTel' | transloco\"\n                                    class=\"form-control\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [label]=\"'Admin.Subscriptions.TaxId' | transloco\"\n                                  [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.TaxId' | transloco\"\n                                  name=\"tax_id\"\n                                  controlId=\"sub-details-tax_id\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-tax_id\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.TaxId' | transloco\"\n                                    formControlName=\"tax_id\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n                                *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                                <span class=\"pw-label-style\" id=\"subscription-details-roles-label\" [pTooltip]=\"'Admin.Subscriptions.Tooltip.AssignedRoles' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">{{ 'Admin.Subscriptions.AssignedRoles' | transloco }}\n                                  <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n                                </span>\n                                <p-multiSelect inputId=\"subscription-details-roles\" [options]=\"allRoles\"\n                                  formControlName=\"roles\"\n                                  appendTo=\"body\"\n                                  [placeholder]=\"'Admin.Subscriptions.Placeholder.AssignedRoles' | transloco\"\n                                  [ariaLabelledBy]=\"'subscription-details-roles-label'\"\n                                [ariaLabel]=\"'Admin.Subscriptions.AssignedRoles' | transloco\"></p-multiSelect>\n                              </div>\n                              @if (organizationTypes$ | async; as types) {\n                                <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n                                  >\n                                  <pw-input-container [showTooltip]=\"true\"\n                                    [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\"\n                                    [label]=\"'Organization.OrganizationType' | transloco\"\n                                    name=\"organization_type_id\" controlId=\"subscription-organization_type_id\" [useAriaLabelledbyOnly]=\"true\">\n                                    <p-select\n                                      [ariaLabelledBy]=\"'subscription-organization_type_id-label'\"\n                                      [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n                                      [options]=\"types['organization_types']\"\n                                      formControlName=\"organization_type_id\"\n                                      [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationType' | transloco\"\n                                      optionValue=\"id\"\n                                      optionLabel=\"name\">\n                                    </p-select>\n                                  </pw-input-container>\n                                </div>\n                              }\n                              @if (organizationIndustries$ | async; as industries) {\n                                <div class=\"mb-3 col-sm-6 col-md-3\"\n                                  >\n                                  <pw-input-container [showTooltip]=\"true\"\n                                    [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\"\n                                    [label]=\"'Organization.OrganizationIndustry' | transloco\"\n                                    name=\"organization_industry_id\" controlId=\"subscription-organization_industry_id\" [useAriaLabelledbyOnly]=\"true\">\n                                    <p-select\n                                      [ariaLabelledBy]=\"'subscription-organization_industry_id-label'\"\n                                      [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n                                      [options]=\"industries['organization_industries']\"\n                                      formControlName=\"organization_industry_id\"\n                                      [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationIndustry' | transloco\"\n                                      optionValue=\"id\"\n                                      optionLabel=\"name\">\n                                    </p-select>\n                                  </pw-input-container>\n                                </div>\n                              }\n                              @if (organizationSizes$ | async; as sizes) {\n                                <div class=\"mb-3 col-sm-6 col-md-3\"\n                                  >\n                                  <pw-input-container [showTooltip]=\"true\"\n                                    [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\"\n                                    [label]=\"'Size' | transloco\"\n                                    name=\"organization_size_id\" controlId=\"subscription-organization_size_id\" [useAriaLabelledbyOnly]=\"true\">\n                                    <p-select\n                                      [ariaLabelledBy]=\"'subscription-organization_size_id-label'\"\n                                      [ariaLabel]=\"'Size' | transloco\"\n                                      [options]=\"sizes['organization_sizes']\"\n                                      formControlName=\"organization_size_id\"\n                                      [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationSize' | transloco\"\n                                      optionValue=\"id\"\n                                      optionLabel=\"name\">\n                                    </p-select>\n                                  </pw-input-container>\n                                </div>\n                              }\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.CompanyUrl' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\"\n                                  name=\"company_url\"\n                                  controlId=\"sub-details-company_url\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-company_url\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.CompanyUrl' | transloco\"\n                                    formControlName=\"company_url\" />\n                                </pw-input-container>\n                              </div>\n                            </div>\n                            <h3>{{ 'Admin.Subscriptions.Section.PlanSeats' | transloco }}</h3>\n                            <div class=\"row\">\n                              <!-- Readonly Starts -->\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reference' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.Reference' | transloco\"\n                                  name=\"reference_number\"\n                                  controlId=\"sub-details-reference_number\">\n                                  @if (form) {\n                                    <input type=\"text\"\n                                      id=\"sub-details-reference_number\"\n                                      readonly\n                                      class=\"form-control\"\n                                      data-control=\"reference\"\n                                      [value]=\"form.get('reference_number')?.value\" />\n                                  }\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.UnitsInUse' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\"\n                                  name=\"units_in_use\"\n                                  controlId=\"sub-details-units_in_use\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-units_in_use\"\n                                    readonly\n                                    class=\"form-control\"\n                                    formControlName=\"units_in_use\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.MaxUnits' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.MaxUnits' | transloco\"\n                                  name=\"max_units\"\n                                  controlId=\"sub-details-max_units\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-max_units\"\n                                    readonly\n                                    class=\"form-control\"\n                                    formControlName=\"max_units\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.CalculatedPrice' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\"\n                                  name=\"calculated_price\"\n                                  controlId=\"sub-details-calculated_price\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-calculated_price\"\n                                    class=\"form-control\"\n                                    readonly\n                                    formControlName=\"calculated_price\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.MainExpiryDate' | transloco\"\n                            [label]=\"\n                                                      'Admin.Subscriptions.MainExpiryDate' | transloco\n                                                  \"\n                                  name=\"expires_at\" controlId=\"sub-details-expires_at\">\n                                  <div class=\"input-group\">\n                                    <input class=\"form-control\"\n                                      id=\"sub-details-expires_at\"\n                                      name=\"expires_at\"\n                                      container=\"body\"\n                                      formControlName=\"expires_at\"\n                                      [readonly]=\"true\"\n                                      ngbDatepicker\n                                      #c=\"ngbDatepicker\" />\n                                      <button class=\"btn btn-primary\"\n                                        type=\"button\"\n                                        [disabled]=\"true\"\n                                        aria-label=\"Open date picker\"\n                                        (click)=\"c.toggle()\">\n                                        <i\n                                          class=\"fa fa-calendar\"\n                                          aria-hidden=\"true\"\n                                        ></i>\n                                      </button>\n                                  </div>\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n                                *rbacAllow=\"'SuperAdmin'\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.PurchasedSeats' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\"\n                                  name=\"purchased_units\"\n                                  controlId=\"sub-details-purchased_units\">\n                                  <input type=\"number\"\n                                    id=\"sub-details-purchased_units\"\n                                    min=\"0\"\n                                    readonly\n                                    class=\"form-control\"\n                                    formControlName=\"purchased_units\" />\n                                </pw-input-container>\n                              </div>\n                              <!-- Readonly Ends -->\n                            </div>\n                            <!-- social links -->\n                            <h3>{{ 'Admin.Subscriptions.Section.SocialLinks' | transloco }}</h3>\n                            <div class=\"row\">\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Facebook' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.Facebook' | transloco\"\n                                  name=\"facebook_handle\"\n                                  controlId=\"sub-details-facebook_handle\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-facebook_handle\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.Facebook' | transloco\"\n                                    formControlName=\"facebook_handle\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Twitter' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.Twitter' | transloco\"\n                                  name=\"twitter_handle\"\n                                  controlId=\"sub-details-twitter_handle\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-twitter_handle\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.Twitter' | transloco\"\n                                    formControlName=\"twitter_handle\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Linkedin' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.LinkedIn' | transloco\"\n                                  name=\"linkedin_handle\"\n                                  controlId=\"sub-details-linkedin_handle\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-linkedin_handle\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.LinkedIn' | transloco\"\n                                    formControlName=\"linkedin_handle\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reddit' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.Reddit' | transloco\"\n                                  name=\"reddit_handle\"\n                                  controlId=\"sub-details-reddit_handle\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-reddit_handle\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.Reddit' | transloco\"\n                                    formControlName=\"reddit_handle\" />\n                                </pw-input-container>\n                              </div>\n                            </div>\n                            <ng-container *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                              <h3>{{ 'Admin.Subscriptions.Section.Security' | transloco }}</h3>\n                              <div class=\"row\">\n                                <div class=\"col-12 col-sm-3\">\n                                  <pw-input-container [showTooltip]=\"true\"\n                                    [tooltipText]=\"'Admin.Subscriptions.Tooltip.Enforce2fa'| transloco\"\n                                    label=\"Enforce 2FA\"\n                                    name=\"enforce_2fa\" controlId=\"subscription-enforce_2fa\" [useAriaLabelledbyOnly]=\"true\">\n                                    <ui-switch formControlName=\"enforce_2fa\"\n                                      [attr.aria-labelledby]=\"'subscription-enforce_2fa-label'\"\n                                      name=\"enforce_2fa\">\n                                    </ui-switch>\n                                  </pw-input-container>\n                                </div>\n                              </div>\n                            </ng-container>\n                            <div class=\"row text-end mt-4\">\n                              <div class=\"col-12\">\n                                <button type=\"button\"\n                                  class=\"btn btn-outline-default me-2\"\n                                  (click)=\"back()\">\n                                  {{ 'Button.Cancel' | transloco }}\n                                </button>\n                                <button type=\"submit\"\n                                  [buttonBusy]=\"submitted\"\n                                  class=\"btn btn-primary\"\n                                  *rbacAllow=\"'Pages.Admin.Subscription.Edit'\">\n                                  {{ 'Button.Save' | transloco }}\n                                </button>\n                              </div>\n                            </div>\n                          </form>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </ng-template>\n              </li>\n              <li [ngbNavItem]=\"2\">\n                <a ngbNavLink>Products</a>\n                <ng-template ngbNavContent>\n                  <pw-subscription-products></pw-subscription-products>\n                </ng-template>\n              </li>\n              <li [ngbNavItem]=\"3\">\n                <a ngbNavLink>Members</a>\n                <ng-template ngbNavContent>\n                  <pw-subscription-users></pw-subscription-users>\n                </ng-template>\n              </li>\n              <li [ngbNavItem]=\"4\"\n                *rbacAllow=\"'SuperAdmin'\">\n                <a ngbNavLink>Ambassadors</a>\n                <ng-template ngbNavContent>\n                  <pw-subscription-agents-list></pw-subscription-agents-list>\n                </ng-template>\n              </li>\n            </ul>\n            <div [ngbNavOutlet]=\"nav\"></div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n", styles: [".ui-autocomplete-multiple-container,.ui-fluid.skills-modal p-autocomplete{background:transparent}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}:host ::ng-deep .pw-label-style+p-multiselect{margin-top:6px}:host ::ng-deep .input-group .btn{min-height:36px;display:inline-flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i5.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: i6.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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "component", type: i10.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.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: i14.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i14.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: SubscriptionProductsComponent, selector: "pw-subscription-products" }, { kind: "component", type: SubscriptionUsersComponent, selector: "pw-subscription-users" }, { kind: "component", type: SubscriptionAgentsListComponent, selector: "pw-subscription-agents-list" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SubscriptionDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-subscription-details', standalone: false, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          routerLink=\"/admin/subscriptions/list\"\n          class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n          <h3 class=\"m-subheader__title m-subheader__title--separator\">\n            <span>Subscription Details</span>\n          </h3>\n          @if (currentSubscriber?.is_deleted) {\n            <span class=\"badge rounded-pill bg-danger ms-2\"\n            >Deleted</span>\n          }\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 >\n            <ul ngbNav\n              #nav=\"ngbNav\"\n              class=\"nav-tabs\">\n              <li [ngbNavItem]=\"1\">\n                <a ngbNavLink>Subscription</a>\n                <ng-template ngbNavContent>\n                  <div class=\"container-fluid pw-tab overflow-hidden\">\n                    <div class=\"dashboard\">\n                      <div class=\"dashboard-body\">\n                        <div class=\"mt-4\">\n                          <form [formGroup]=\"form\"\n                            (ngSubmit)=\"saveDetails()\">\n                            <h3>{{ 'Admin.Subscriptions.Section.IdentityContact' | transloco }}</h3>\n                            <div class=\"row\">\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Organization' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.Organization' | transloco\"\n                                  name=\"organisation\"\n                                  controlId=\"sub-details-organisation\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-organisation\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n                                    formControlName=\"organisation\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactName' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.ContactName' | transloco\"\n                                  name=\"contact_name\"\n                                  controlId=\"sub-details-contact_name\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-contact_name\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactName' | transloco\"\n                                    formControlName=\"contact_name\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactEmail' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.ContactEmail' | transloco\"\n                                  name=\"contact_email\"\n                                  controlId=\"sub-details-contact_email\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-contact_email\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactEmail' | transloco\"\n                                    formControlName=\"contact_email\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactTel' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.ContactTel' | transloco\"\n                                  name=\"contact_tel\"\n                                  controlId=\"sub-details-contact_tel\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-contact_tel\"\n                                    formControlName=\"contact_tel\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactTel' | transloco\"\n                                    class=\"form-control\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [label]=\"'Admin.Subscriptions.TaxId' | transloco\"\n                                  [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.TaxId' | transloco\"\n                                  name=\"tax_id\"\n                                  controlId=\"sub-details-tax_id\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-tax_id\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.TaxId' | transloco\"\n                                    formControlName=\"tax_id\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n                                *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                                <span class=\"pw-label-style\" id=\"subscription-details-roles-label\" [pTooltip]=\"'Admin.Subscriptions.Tooltip.AssignedRoles' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">{{ 'Admin.Subscriptions.AssignedRoles' | transloco }}\n                                  <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n                                </span>\n                                <p-multiSelect inputId=\"subscription-details-roles\" [options]=\"allRoles\"\n                                  formControlName=\"roles\"\n                                  appendTo=\"body\"\n                                  [placeholder]=\"'Admin.Subscriptions.Placeholder.AssignedRoles' | transloco\"\n                                  [ariaLabelledBy]=\"'subscription-details-roles-label'\"\n                                [ariaLabel]=\"'Admin.Subscriptions.AssignedRoles' | transloco\"></p-multiSelect>\n                              </div>\n                              @if (organizationTypes$ | async; as types) {\n                                <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n                                  >\n                                  <pw-input-container [showTooltip]=\"true\"\n                                    [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\"\n                                    [label]=\"'Organization.OrganizationType' | transloco\"\n                                    name=\"organization_type_id\" controlId=\"subscription-organization_type_id\" [useAriaLabelledbyOnly]=\"true\">\n                                    <p-select\n                                      [ariaLabelledBy]=\"'subscription-organization_type_id-label'\"\n                                      [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n                                      [options]=\"types['organization_types']\"\n                                      formControlName=\"organization_type_id\"\n                                      [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationType' | transloco\"\n                                      optionValue=\"id\"\n                                      optionLabel=\"name\">\n                                    </p-select>\n                                  </pw-input-container>\n                                </div>\n                              }\n                              @if (organizationIndustries$ | async; as industries) {\n                                <div class=\"mb-3 col-sm-6 col-md-3\"\n                                  >\n                                  <pw-input-container [showTooltip]=\"true\"\n                                    [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\"\n                                    [label]=\"'Organization.OrganizationIndustry' | transloco\"\n                                    name=\"organization_industry_id\" controlId=\"subscription-organization_industry_id\" [useAriaLabelledbyOnly]=\"true\">\n                                    <p-select\n                                      [ariaLabelledBy]=\"'subscription-organization_industry_id-label'\"\n                                      [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n                                      [options]=\"industries['organization_industries']\"\n                                      formControlName=\"organization_industry_id\"\n                                      [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationIndustry' | transloco\"\n                                      optionValue=\"id\"\n                                      optionLabel=\"name\">\n                                    </p-select>\n                                  </pw-input-container>\n                                </div>\n                              }\n                              @if (organizationSizes$ | async; as sizes) {\n                                <div class=\"mb-3 col-sm-6 col-md-3\"\n                                  >\n                                  <pw-input-container [showTooltip]=\"true\"\n                                    [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\"\n                                    [label]=\"'Size' | transloco\"\n                                    name=\"organization_size_id\" controlId=\"subscription-organization_size_id\" [useAriaLabelledbyOnly]=\"true\">\n                                    <p-select\n                                      [ariaLabelledBy]=\"'subscription-organization_size_id-label'\"\n                                      [ariaLabel]=\"'Size' | transloco\"\n                                      [options]=\"sizes['organization_sizes']\"\n                                      formControlName=\"organization_size_id\"\n                                      [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationSize' | transloco\"\n                                      optionValue=\"id\"\n                                      optionLabel=\"name\">\n                                    </p-select>\n                                  </pw-input-container>\n                                </div>\n                              }\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.CompanyUrl' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\"\n                                  name=\"company_url\"\n                                  controlId=\"sub-details-company_url\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-company_url\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.CompanyUrl' | transloco\"\n                                    formControlName=\"company_url\" />\n                                </pw-input-container>\n                              </div>\n                            </div>\n                            <h3>{{ 'Admin.Subscriptions.Section.PlanSeats' | transloco }}</h3>\n                            <div class=\"row\">\n                              <!-- Readonly Starts -->\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reference' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.Reference' | transloco\"\n                                  name=\"reference_number\"\n                                  controlId=\"sub-details-reference_number\">\n                                  @if (form) {\n                                    <input type=\"text\"\n                                      id=\"sub-details-reference_number\"\n                                      readonly\n                                      class=\"form-control\"\n                                      data-control=\"reference\"\n                                      [value]=\"form.get('reference_number')?.value\" />\n                                  }\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.UnitsInUse' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\"\n                                  name=\"units_in_use\"\n                                  controlId=\"sub-details-units_in_use\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-units_in_use\"\n                                    readonly\n                                    class=\"form-control\"\n                                    formControlName=\"units_in_use\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.MaxUnits' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.MaxUnits' | transloco\"\n                                  name=\"max_units\"\n                                  controlId=\"sub-details-max_units\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-max_units\"\n                                    readonly\n                                    class=\"form-control\"\n                                    formControlName=\"max_units\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.CalculatedPrice' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\"\n                                  name=\"calculated_price\"\n                                  controlId=\"sub-details-calculated_price\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-calculated_price\"\n                                    class=\"form-control\"\n                                    readonly\n                                    formControlName=\"calculated_price\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.MainExpiryDate' | transloco\"\n                            [label]=\"\n                                                      'Admin.Subscriptions.MainExpiryDate' | transloco\n                                                  \"\n                                  name=\"expires_at\" controlId=\"sub-details-expires_at\">\n                                  <div class=\"input-group\">\n                                    <input class=\"form-control\"\n                                      id=\"sub-details-expires_at\"\n                                      name=\"expires_at\"\n                                      container=\"body\"\n                                      formControlName=\"expires_at\"\n                                      [readonly]=\"true\"\n                                      ngbDatepicker\n                                      #c=\"ngbDatepicker\" />\n                                      <button class=\"btn btn-primary\"\n                                        type=\"button\"\n                                        [disabled]=\"true\"\n                                        aria-label=\"Open date picker\"\n                                        (click)=\"c.toggle()\">\n                                        <i\n                                          class=\"fa fa-calendar\"\n                                          aria-hidden=\"true\"\n                                        ></i>\n                                      </button>\n                                  </div>\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n                                *rbacAllow=\"'SuperAdmin'\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.PurchasedSeats' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\"\n                                  name=\"purchased_units\"\n                                  controlId=\"sub-details-purchased_units\">\n                                  <input type=\"number\"\n                                    id=\"sub-details-purchased_units\"\n                                    min=\"0\"\n                                    readonly\n                                    class=\"form-control\"\n                                    formControlName=\"purchased_units\" />\n                                </pw-input-container>\n                              </div>\n                              <!-- Readonly Ends -->\n                            </div>\n                            <!-- social links -->\n                            <h3>{{ 'Admin.Subscriptions.Section.SocialLinks' | transloco }}</h3>\n                            <div class=\"row\">\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Facebook' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.Facebook' | transloco\"\n                                  name=\"facebook_handle\"\n                                  controlId=\"sub-details-facebook_handle\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-facebook_handle\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.Facebook' | transloco\"\n                                    formControlName=\"facebook_handle\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Twitter' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.Twitter' | transloco\"\n                                  name=\"twitter_handle\"\n                                  controlId=\"sub-details-twitter_handle\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-twitter_handle\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.Twitter' | transloco\"\n                                    formControlName=\"twitter_handle\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Linkedin' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.LinkedIn' | transloco\"\n                                  name=\"linkedin_handle\"\n                                  controlId=\"sub-details-linkedin_handle\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-linkedin_handle\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.LinkedIn' | transloco\"\n                                    formControlName=\"linkedin_handle\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reddit' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.Reddit' | transloco\"\n                                  name=\"reddit_handle\"\n                                  controlId=\"sub-details-reddit_handle\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-reddit_handle\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.Reddit' | transloco\"\n                                    formControlName=\"reddit_handle\" />\n                                </pw-input-container>\n                              </div>\n                            </div>\n                            <ng-container *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                              <h3>{{ 'Admin.Subscriptions.Section.Security' | transloco }}</h3>\n                              <div class=\"row\">\n                                <div class=\"col-12 col-sm-3\">\n                                  <pw-input-container [showTooltip]=\"true\"\n                                    [tooltipText]=\"'Admin.Subscriptions.Tooltip.Enforce2fa'| transloco\"\n                                    label=\"Enforce 2FA\"\n                                    name=\"enforce_2fa\" controlId=\"subscription-enforce_2fa\" [useAriaLabelledbyOnly]=\"true\">\n                                    <ui-switch formControlName=\"enforce_2fa\"\n                                      [attr.aria-labelledby]=\"'subscription-enforce_2fa-label'\"\n                                      name=\"enforce_2fa\">\n                                    </ui-switch>\n                                  </pw-input-container>\n                                </div>\n                              </div>\n                            </ng-container>\n                            <div class=\"row text-end mt-4\">\n                              <div class=\"col-12\">\n                                <button type=\"button\"\n                                  class=\"btn btn-outline-default me-2\"\n                                  (click)=\"back()\">\n                                  {{ 'Button.Cancel' | transloco }}\n                                </button>\n                                <button type=\"submit\"\n                                  [buttonBusy]=\"submitted\"\n                                  class=\"btn btn-primary\"\n                                  *rbacAllow=\"'Pages.Admin.Subscription.Edit'\">\n                                  {{ 'Button.Save' | transloco }}\n                                </button>\n                              </div>\n                            </div>\n                          </form>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </ng-template>\n              </li>\n              <li [ngbNavItem]=\"2\">\n                <a ngbNavLink>Products</a>\n                <ng-template ngbNavContent>\n                  <pw-subscription-products></pw-subscription-products>\n                </ng-template>\n              </li>\n              <li [ngbNavItem]=\"3\">\n                <a ngbNavLink>Members</a>\n                <ng-template ngbNavContent>\n                  <pw-subscription-users></pw-subscription-users>\n                </ng-template>\n              </li>\n              <li [ngbNavItem]=\"4\"\n                *rbacAllow=\"'SuperAdmin'\">\n                <a ngbNavLink>Ambassadors</a>\n                <ng-template ngbNavContent>\n                  <pw-subscription-agents-list></pw-subscription-agents-list>\n                </ng-template>\n              </li>\n            </ul>\n            <div [ngbNavOutlet]=\"nav\"></div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n", styles: [".ui-autocomplete-multiple-container,.ui-fluid.skills-modal p-autocomplete{background:transparent}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}:host ::ng-deep .pw-label-style+p-multiselect{margin-top:6px}:host ::ng-deep .input-group .btn{min-height:36px;display:inline-flex;align-items:center;justify-content:center}\n"] }]
+            args: [{ selector: 'pw-subscription-details', standalone: false, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          routerLink=\"/admin/subscriptions/list\"\n          class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n          <h3 class=\"m-subheader__title m-subheader__title--separator\">\n            <span>Subscription Details</span>\n          </h3>\n          @if (currentSubscriber?.is_deleted) {\n            <span class=\"badge rounded-pill bg-danger ms-2\"\n            >Deleted</span>\n          }\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 >\n            <ul ngbNav\n              #nav=\"ngbNav\"\n              class=\"nav-tabs\">\n              <li [ngbNavItem]=\"1\">\n                <a ngbNavLink>Subscription</a>\n                <ng-template ngbNavContent>\n                  <div class=\"container-fluid pw-tab overflow-hidden\">\n                    <div class=\"dashboard\">\n                      <div class=\"dashboard-body\">\n                        <div class=\"mt-4\">\n                          <form [formGroup]=\"form\"\n                            (ngSubmit)=\"saveDetails()\">\n                            <h3>{{ 'Admin.Subscriptions.Section.IdentityContact' | transloco }}</h3>\n                            <div class=\"row\">\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Organization' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.Organization' | transloco\"\n                                  name=\"organisation\"\n                                  controlId=\"sub-details-organisation\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-organisation\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n                                    formControlName=\"organisation\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactName' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.ContactName' | transloco\"\n                                  name=\"contact_name\"\n                                  controlId=\"sub-details-contact_name\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-contact_name\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactName' | transloco\"\n                                    formControlName=\"contact_name\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactEmail' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.ContactEmail' | transloco\"\n                                  name=\"contact_email\"\n                                  controlId=\"sub-details-contact_email\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-contact_email\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactEmail' | transloco\"\n                                    formControlName=\"contact_email\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.InvoiceRecipientEmails' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.InvoiceRecipientEmails' | transloco\"\n                                  name=\"invoice_recipient_emails\"\n                                  controlId=\"sub-details-invoice_recipient_emails\"\n                                  [errorMsg]=\"'Admin.Subscriptions.Validation.InvoiceRecipientEmails' | transloco\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-invoice_recipient_emails\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.InvoiceRecipientEmails' | transloco\"\n                                    formControlName=\"invoice_recipient_emails\"\n                                    [ngClass]=\"{\n                                      'is-invalid': form.get('invoice_recipient_emails').touched && form.get('invoice_recipient_emails').invalid\n                                    }\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactTel' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.ContactTel' | transloco\"\n                                  name=\"contact_tel\"\n                                  controlId=\"sub-details-contact_tel\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-contact_tel\"\n                                    formControlName=\"contact_tel\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactTel' | transloco\"\n                                    class=\"form-control\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [label]=\"'Admin.Subscriptions.TaxId' | transloco\"\n                                  [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.TaxId' | transloco\"\n                                  name=\"tax_id\"\n                                  controlId=\"sub-details-tax_id\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-tax_id\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.TaxId' | transloco\"\n                                    formControlName=\"tax_id\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n                                *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                                <span class=\"pw-label-style\" id=\"subscription-details-roles-label\" [pTooltip]=\"'Admin.Subscriptions.Tooltip.AssignedRoles' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">{{ 'Admin.Subscriptions.AssignedRoles' | transloco }}\n                                  <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n                                </span>\n                                <p-multiSelect inputId=\"subscription-details-roles\" [options]=\"allRoles\"\n                                  formControlName=\"roles\"\n                                  appendTo=\"body\"\n                                  [placeholder]=\"'Admin.Subscriptions.Placeholder.AssignedRoles' | transloco\"\n                                  [ariaLabelledBy]=\"'subscription-details-roles-label'\"\n                                [ariaLabel]=\"'Admin.Subscriptions.AssignedRoles' | transloco\"></p-multiSelect>\n                              </div>\n                              @if (organizationTypes$ | async; as types) {\n                                <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n                                  >\n                                  <pw-input-container [showTooltip]=\"true\"\n                                    [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\"\n                                    [label]=\"'Organization.OrganizationType' | transloco\"\n                                    name=\"organization_type_id\" controlId=\"subscription-organization_type_id\" [useAriaLabelledbyOnly]=\"true\">\n                                    <p-select\n                                      [ariaLabelledBy]=\"'subscription-organization_type_id-label'\"\n                                      [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n                                      [options]=\"types['organization_types']\"\n                                      formControlName=\"organization_type_id\"\n                                      [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationType' | transloco\"\n                                      optionValue=\"id\"\n                                      optionLabel=\"name\">\n                                    </p-select>\n                                  </pw-input-container>\n                                </div>\n                              }\n                              @if (organizationIndustries$ | async; as industries) {\n                                <div class=\"mb-3 col-sm-6 col-md-3\"\n                                  >\n                                  <pw-input-container [showTooltip]=\"true\"\n                                    [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\"\n                                    [label]=\"'Organization.OrganizationIndustry' | transloco\"\n                                    name=\"organization_industry_id\" controlId=\"subscription-organization_industry_id\" [useAriaLabelledbyOnly]=\"true\">\n                                    <p-select\n                                      [ariaLabelledBy]=\"'subscription-organization_industry_id-label'\"\n                                      [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n                                      [options]=\"industries['organization_industries']\"\n                                      formControlName=\"organization_industry_id\"\n                                      [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationIndustry' | transloco\"\n                                      optionValue=\"id\"\n                                      optionLabel=\"name\">\n                                    </p-select>\n                                  </pw-input-container>\n                                </div>\n                              }\n                              @if (organizationSizes$ | async; as sizes) {\n                                <div class=\"mb-3 col-sm-6 col-md-3\"\n                                  >\n                                  <pw-input-container [showTooltip]=\"true\"\n                                    [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\"\n                                    [label]=\"'Size' | transloco\"\n                                    name=\"organization_size_id\" controlId=\"subscription-organization_size_id\" [useAriaLabelledbyOnly]=\"true\">\n                                    <p-select\n                                      [ariaLabelledBy]=\"'subscription-organization_size_id-label'\"\n                                      [ariaLabel]=\"'Size' | transloco\"\n                                      [options]=\"sizes['organization_sizes']\"\n                                      formControlName=\"organization_size_id\"\n                                      [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationSize' | transloco\"\n                                      optionValue=\"id\"\n                                      optionLabel=\"name\">\n                                    </p-select>\n                                  </pw-input-container>\n                                </div>\n                              }\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.CompanyUrl' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\"\n                                  name=\"company_url\"\n                                  controlId=\"sub-details-company_url\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-company_url\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.CompanyUrl' | transloco\"\n                                    formControlName=\"company_url\" />\n                                </pw-input-container>\n                              </div>\n                            </div>\n                            <h3>{{ 'Admin.Subscriptions.Section.PlanSeats' | transloco }}</h3>\n                            <div class=\"row\">\n                              <!-- Readonly Starts -->\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reference' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.Reference' | transloco\"\n                                  name=\"reference_number\"\n                                  controlId=\"sub-details-reference_number\">\n                                  @if (form) {\n                                    <input type=\"text\"\n                                      id=\"sub-details-reference_number\"\n                                      readonly\n                                      class=\"form-control\"\n                                      data-control=\"reference\"\n                                      [value]=\"form.get('reference_number')?.value\" />\n                                  }\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.UnitsInUse' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\"\n                                  name=\"units_in_use\"\n                                  controlId=\"sub-details-units_in_use\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-units_in_use\"\n                                    readonly\n                                    class=\"form-control\"\n                                    formControlName=\"units_in_use\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.MaxUnits' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.MaxUnits' | transloco\"\n                                  name=\"max_units\"\n                                  controlId=\"sub-details-max_units\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-max_units\"\n                                    readonly\n                                    class=\"form-control\"\n                                    formControlName=\"max_units\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.CalculatedPrice' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\"\n                                  name=\"calculated_price\"\n                                  controlId=\"sub-details-calculated_price\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-calculated_price\"\n                                    class=\"form-control\"\n                                    readonly\n                                    formControlName=\"calculated_price\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.MainExpiryDate' | transloco\"\n                            [label]=\"\n                                                      'Admin.Subscriptions.MainExpiryDate' | transloco\n                                                  \"\n                                  name=\"expires_at\" controlId=\"sub-details-expires_at\">\n                                  <div class=\"input-group\">\n                                    <input class=\"form-control\"\n                                      id=\"sub-details-expires_at\"\n                                      name=\"expires_at\"\n                                      container=\"body\"\n                                      formControlName=\"expires_at\"\n                                      [readonly]=\"true\"\n                                      ngbDatepicker\n                                      #c=\"ngbDatepicker\" />\n                                      <button class=\"btn btn-primary\"\n                                        type=\"button\"\n                                        [disabled]=\"true\"\n                                        aria-label=\"Open date picker\"\n                                        (click)=\"c.toggle()\">\n                                        <i\n                                          class=\"fa fa-calendar\"\n                                          aria-hidden=\"true\"\n                                        ></i>\n                                      </button>\n                                  </div>\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n                                *rbacAllow=\"'SuperAdmin'\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.PurchasedSeats' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\"\n                                  name=\"purchased_units\"\n                                  controlId=\"sub-details-purchased_units\">\n                                  <input type=\"number\"\n                                    id=\"sub-details-purchased_units\"\n                                    min=\"0\"\n                                    readonly\n                                    class=\"form-control\"\n                                    formControlName=\"purchased_units\" />\n                                </pw-input-container>\n                              </div>\n                              <!-- Readonly Ends -->\n                            </div>\n                            <!-- social links -->\n                            <h3>{{ 'Admin.Subscriptions.Section.SocialLinks' | transloco }}</h3>\n                            <div class=\"row\">\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Facebook' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.Facebook' | transloco\"\n                                  name=\"facebook_handle\"\n                                  controlId=\"sub-details-facebook_handle\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-facebook_handle\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.Facebook' | transloco\"\n                                    formControlName=\"facebook_handle\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Twitter' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.Twitter' | transloco\"\n                                  name=\"twitter_handle\"\n                                  controlId=\"sub-details-twitter_handle\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-twitter_handle\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.Twitter' | transloco\"\n                                    formControlName=\"twitter_handle\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Linkedin' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.LinkedIn' | transloco\"\n                                  name=\"linkedin_handle\"\n                                  controlId=\"sub-details-linkedin_handle\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-linkedin_handle\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.LinkedIn' | transloco\"\n                                    formControlName=\"linkedin_handle\" />\n                                </pw-input-container>\n                              </div>\n                              <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                                <pw-input-container [showTooltip]=\"true\"\n                                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reddit' | transloco\"\n                                  [label]=\"'Admin.Subscriptions.Reddit' | transloco\"\n                                  name=\"reddit_handle\"\n                                  controlId=\"sub-details-reddit_handle\">\n                                  <input type=\"text\"\n                                    id=\"sub-details-reddit_handle\"\n                                    class=\"form-control\"\n                                    [placeholder]=\"'Admin.Subscriptions.Placeholder.Reddit' | transloco\"\n                                    formControlName=\"reddit_handle\" />\n                                </pw-input-container>\n                              </div>\n                            </div>\n                            <ng-container *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                              <h3>{{ 'Admin.Subscriptions.Section.Security' | transloco }}</h3>\n                              <div class=\"row\">\n                                <div class=\"col-12 col-sm-3\">\n                                  <pw-input-container [showTooltip]=\"true\"\n                                    [tooltipText]=\"'Admin.Subscriptions.Tooltip.Enforce2fa'| transloco\"\n                                    label=\"Enforce 2FA\"\n                                    name=\"enforce_2fa\" controlId=\"subscription-enforce_2fa\" [useAriaLabelledbyOnly]=\"true\">\n                                    <ui-switch formControlName=\"enforce_2fa\"\n                                      [attr.aria-labelledby]=\"'subscription-enforce_2fa-label'\"\n                                      name=\"enforce_2fa\">\n                                    </ui-switch>\n                                  </pw-input-container>\n                                </div>\n                              </div>\n                            </ng-container>\n                            <div class=\"row text-end mt-4\">\n                              <div class=\"col-12\">\n                                <button type=\"button\"\n                                  class=\"btn btn-outline-default me-2\"\n                                  (click)=\"back()\">\n                                  {{ 'Button.Cancel' | transloco }}\n                                </button>\n                                <button type=\"submit\"\n                                  [buttonBusy]=\"submitted\"\n                                  class=\"btn btn-primary\"\n                                  *rbacAllow=\"'Pages.Admin.Subscription.Edit'\">\n                                  {{ 'Button.Save' | transloco }}\n                                </button>\n                              </div>\n                            </div>\n                          </form>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </ng-template>\n              </li>\n              <li [ngbNavItem]=\"2\">\n                <a ngbNavLink>Products</a>\n                <ng-template ngbNavContent>\n                  <pw-subscription-products></pw-subscription-products>\n                </ng-template>\n              </li>\n              <li [ngbNavItem]=\"3\">\n                <a ngbNavLink>Members</a>\n                <ng-template ngbNavContent>\n                  <pw-subscription-users></pw-subscription-users>\n                </ng-template>\n              </li>\n              <li [ngbNavItem]=\"4\"\n                *rbacAllow=\"'SuperAdmin'\">\n                <a ngbNavLink>Ambassadors</a>\n                <ng-template ngbNavContent>\n                  <pw-subscription-agents-list></pw-subscription-agents-list>\n                </ng-template>\n              </li>\n            </ul>\n            <div [ngbNavOutlet]=\"nav\"></div>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n", styles: [".ui-autocomplete-multiple-container,.ui-fluid.skills-modal p-autocomplete{background:transparent}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}:host ::ng-deep .pw-label-style+p-multiselect{margin-top:6px}:host ::ng-deep .input-group .btn{min-height:36px;display:inline-flex;align-items:center;justify-content:center}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.SubscriptionService }, { type: i1.AdminService }, { type: i3.DatePipe }, { type: i1$1.CommonService }, { type: i1$1.NgbDateCustomParserFormatter }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
 
 class SubscriptionProductDetailsComponent extends AppBaseComponent {
@@ -8413,6 +8415,8 @@ class InviteUsersComponent extends AppBaseComponent {
             first_name: ['', Validators.required],
             last_name: ['', Validators.required],
             email: ['', [Validators.required, Validators.email]],
+            contact_email: ['', [Validators.email]],
+            invoice_recipient_emails: ['', [this.commaSeparatedEmailsValidator()]],
             organization_industry_id: [''],
             organization_type_id: [''],
             organization_size_id: [''],
@@ -8459,6 +8463,31 @@ class InviteUsersComponent extends AppBaseComponent {
             this.cdr.markForCheck();
         });
     }
+    commaSeparatedEmailsValidator() {
+        return (control) => {
+            if (!control.value) {
+                return null; // Optional field — allow empty values
+            }
+            const value = control.value;
+            // Reject spaces around commas (comma-space or space-comma patterns)
+            if (value.includes(',') && (value.includes(', ') || value.includes(' ,'))) {
+                return { invalidFormat: true };
+            }
+            // Reject any part that has surrounding or internal spaces
+            const emailParts = value.split(',');
+            if (emailParts.some((part) => part.trim() !== part || part.includes(' '))) {
+                return { invalidFormat: true };
+            }
+            // Validate each email
+            const emails = emailParts.map((email) => email.trim());
+            for (const email of emails) {
+                if (email && !ValidationService.email(email)) {
+                    return { invalidEmail: true };
+                }
+            }
+            return null;
+        };
+    }
     onSave() {
         if (this.form.invalid) {
             FormHelperService.validateAllFormFields(this.form);
@@ -8468,6 +8497,8 @@ class InviteUsersComponent extends AppBaseComponent {
             const productId = this.form.get('product_id').value.id;
             const inviteObj = {
                 email: this.form.get('email').value,
+                contact_email: this.form.get('contact_email').value,
+                invoice_recipient_emails: this.form.get('invoice_recipient_emails').value,
                 first_name: this.form.get('first_name').value,
                 last_name: this.form.get('last_name').value,
                 units: this.form.get('units').value,
@@ -8586,11 +8617,11 @@ class InviteUsersComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InviteUsersComponent, deps: [{ token: i3$1.UntypedFormBuilder }, { token: i1.AdminService }, { token: i1$1.ProductService }, { token: i0.Injector }, { token: i1$1.CommonService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InviteUsersComponent, isStandalone: false, selector: "pw-invite-users", viewQueries: [{ propertyName: "refProduct", first: true, predicate: ["refProduct"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard user-details\">\n    <div class=\"dashboard-body\">\n\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">{{ 'Admin.Subscriptions.InviteNewUser' | transloco }}</h3>\n        <p>{{ 'Admin.Subscriptions.InviteNewUserDescription' | transloco }}</p>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n\n          <h3>{{ 'Admin.Subscriptions.Section.UserDetails' | transloco }}</h3>\n          <div class=\"row\">\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.FirstName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.FirstName' | transloco\"\n                name=\"first_name\"\n                controlId=\"invite-first_name\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.FirstName' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-first_name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.InviteFirstName' | transloco\"\n                  formControlName=\"first_name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('first_name').touched && form.get('first_name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.LastName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.LastName' | transloco\"\n                name=\"last_name\"\n                controlId=\"invite-last_name\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.LastName' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-last_name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.InviteLastName' | transloco\"\n                  formControlName=\"last_name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('last_name').touched && form.get('last_name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.Email' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.Email' | transloco\"\n                name=\"email\"\n                controlId=\"invite-email\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Email' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-email\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Label.EmailPlaceholder' | transloco\"\n                  formControlName=\"email\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('email').touched && form.get('email').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <h3>{{ 'Admin.Subscriptions.Section.ProductSeats' | transloco }}</h3>\n          <div class=\"row\">\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.Product' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.SubscriptionProduct' | transloco\"\n                name=\"product_id\"\n                controlId=\"invite-product_id\"\n                [useAriaLabelledbyOnly]=\"true\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Product' | transloco\">\n                <p-autoComplete appendTo=\"body\" #refProduct\n                  [suggestions]=\"filteredProducts\"\n                  [ariaLabelledBy]=\"'invite-product_id-label'\"\n                  [ariaLabel]=\"'Label.Product' | transloco\"\n                  formControlName=\"product_id\"\n                  dataKey=\"id\"\n                  optionLabel=\"label\"\n                  [dropdown]=\"true\"\n                  [delay]=\"1000\"\n                  [type]=\"'search'\"\n                  (completeMethod)=\"searchProduct($event)\"\n                  (onSelect)=\"onProductChange($event)\"\n                  (onClear)=\"onProductClear($event)\"\n                  styleClass=\"w-100\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.SearchProducts' | transloco\"\n                  [inputStyleClass]=\"form.get('product_id').touched && form.get('product_id').invalid ? 'is-invalid' : ''\"\n                  [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container label=\"{{'Label.Seats' | transloco}}{{unitsText}}\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.Units' | transloco\"\n                name=\"units\"\n                controlId=\"invite-units\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Units' | transloco\">\n                <input type=\"number\"\n                  id=\"invite-units\"\n                  class=\"form-control\"\n                  formControlName=\"units\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('units').touched && form.get('units').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.MinUnits' | transloco\"\n                [showTooltip]=\"true\"\n                name=\"min_units\"\n                controlId=\"invite-min_units\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.MinUnits' | transloco\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.MinUnits' | transloco\">\n                <input type=\"number\"\n                  id=\"invite-min_units\"\n                  min=\"0\"\n                  [max]=\"form.get('units').value\"\n                  class=\"form-control\"\n                  formControlName=\"min_units\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <h3>{{ 'Admin.Subscriptions.Section.Organization' | transloco }}</h3>\n          <div class=\"row\">\n            @if (organizationIndustries$ | async; as industries) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationIndustry' | transloco\"\n                  name=\"organization_industry_id\"\n                  controlId=\"invite-organization_industry_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_industry_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n                    [options]=\"industries['organization_industries']\"\n                    formControlName=\"organization_industry_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationIndustry' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            @if (organizationSizes$ | async; as sizes) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationSize' | transloco\"\n                  name=\"organization_size_id\"\n                  controlId=\"invite-organization_size_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_size_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationSize' | transloco\"\n                    [options]=\"sizes['organization_sizes']\"\n                    formControlName=\"organization_size_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationSize' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            @if (organizationTypes$ | async; as types) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationType' | transloco\"\n                  name=\"organization_type_id\"\n                  controlId=\"invite-organization_type_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_type_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n                    [options]=\"types['organization_types']\"\n                    formControlName=\"organization_type_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationType' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Organization.OrganizationName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationName' | transloco\"\n                name=\"name\"\n                controlId=\"invite-organization-name\">\n                <input type=\"text\"\n                  id=\"invite-organization-name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n                  formControlName=\"name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('name').touched && form.get('name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <div class=\"row\">\n            <div class=\"col-12 text-end\">\n              <button type=\"button\"\n                class=\"btn btn-secondary me-3\"\n                (click)=\"form.reset(); totalRecordsUnFiltered = 0; back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"buttonBusy\"\n                [disabled]=\"buttonBusy\"\n                class=\"btn btn-primary\">\n                {{ 'Button.Invite' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}\n"], dependencies: [{ kind: "component", type: i4$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i6.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: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "component", type: i3$2.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: i14.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: InviteUsersComponent, isStandalone: false, selector: "pw-invite-users", viewQueries: [{ propertyName: "refProduct", first: true, predicate: ["refProduct"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard user-details\">\n    <div class=\"dashboard-body\">\n\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">{{ 'Admin.Subscriptions.InviteNewUser' | transloco }}</h3>\n        <p>{{ 'Admin.Subscriptions.InviteNewUserDescription' | transloco }}</p>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n\n          <h3>{{ 'Admin.Subscriptions.Section.UserDetails' | transloco }}</h3>\n          <div class=\"row\">\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.FirstName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.FirstName' | transloco\"\n                name=\"first_name\"\n                controlId=\"invite-first_name\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.FirstName' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-first_name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.InviteFirstName' | transloco\"\n                  formControlName=\"first_name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('first_name').touched && form.get('first_name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.LastName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.LastName' | transloco\"\n                name=\"last_name\"\n                controlId=\"invite-last_name\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.LastName' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-last_name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.InviteLastName' | transloco\"\n                  formControlName=\"last_name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('last_name').touched && form.get('last_name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.Email' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.Email' | transloco\"\n                name=\"email\"\n                controlId=\"invite-email\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Email' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-email\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Label.EmailPlaceholder' | transloco\"\n                  formControlName=\"email\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('email').touched && form.get('email').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.ContactEmail' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactEmail' | transloco\"\n                name=\"contact_email\"\n                controlId=\"invite-contact_email\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.ContactEmail' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-contact_email\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactEmail' | transloco\"\n                  formControlName=\"contact_email\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('contact_email').touched && form.get('contact_email').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.InvoiceRecipientEmails' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.InvoiceRecipientEmails' | transloco\"\n                name=\"invoice_recipient_emails\"\n                controlId=\"invite-invoice_recipient_emails\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.InvoiceRecipientEmails' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-invoice_recipient_emails\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.InvoiceRecipientEmails' | transloco\"\n                  formControlName=\"invoice_recipient_emails\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('invoice_recipient_emails').touched && form.get('invoice_recipient_emails').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <h3>{{ 'Admin.Subscriptions.Section.ProductSeats' | transloco }}</h3>\n          <div class=\"row\">\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.Product' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.SubscriptionProduct' | transloco\"\n                name=\"product_id\"\n                controlId=\"invite-product_id\"\n                [useAriaLabelledbyOnly]=\"true\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Product' | transloco\">\n                <p-autoComplete appendTo=\"body\" #refProduct\n                  [suggestions]=\"filteredProducts\"\n                  [ariaLabelledBy]=\"'invite-product_id-label'\"\n                  [ariaLabel]=\"'Label.Product' | transloco\"\n                  formControlName=\"product_id\"\n                  dataKey=\"id\"\n                  optionLabel=\"label\"\n                  [dropdown]=\"true\"\n                  [delay]=\"1000\"\n                  [type]=\"'search'\"\n                  (completeMethod)=\"searchProduct($event)\"\n                  (onSelect)=\"onProductChange($event)\"\n                  (onClear)=\"onProductClear($event)\"\n                  styleClass=\"w-100\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.SearchProducts' | transloco\"\n                  [inputStyleClass]=\"form.get('product_id').touched && form.get('product_id').invalid ? 'is-invalid' : ''\"\n                  [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container label=\"{{'Label.Seats' | transloco}}{{unitsText}}\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.Units' | transloco\"\n                name=\"units\"\n                controlId=\"invite-units\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Units' | transloco\">\n                <input type=\"number\"\n                  id=\"invite-units\"\n                  class=\"form-control\"\n                  formControlName=\"units\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('units').touched && form.get('units').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.MinUnits' | transloco\"\n                [showTooltip]=\"true\"\n                name=\"min_units\"\n                controlId=\"invite-min_units\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.MinUnits' | transloco\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.MinUnits' | transloco\">\n                <input type=\"number\"\n                  id=\"invite-min_units\"\n                  min=\"0\"\n                  [max]=\"form.get('units').value\"\n                  class=\"form-control\"\n                  formControlName=\"min_units\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <h3>{{ 'Admin.Subscriptions.Section.Organization' | transloco }}</h3>\n          <div class=\"row\">\n            @if (organizationIndustries$ | async; as industries) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationIndustry' | transloco\"\n                  name=\"organization_industry_id\"\n                  controlId=\"invite-organization_industry_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_industry_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n                    [options]=\"industries['organization_industries']\"\n                    formControlName=\"organization_industry_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationIndustry' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            @if (organizationSizes$ | async; as sizes) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationSize' | transloco\"\n                  name=\"organization_size_id\"\n                  controlId=\"invite-organization_size_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_size_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationSize' | transloco\"\n                    [options]=\"sizes['organization_sizes']\"\n                    formControlName=\"organization_size_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationSize' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            @if (organizationTypes$ | async; as types) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationType' | transloco\"\n                  name=\"organization_type_id\"\n                  controlId=\"invite-organization_type_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_type_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n                    [options]=\"types['organization_types']\"\n                    formControlName=\"organization_type_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationType' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Organization.OrganizationName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationName' | transloco\"\n                name=\"name\"\n                controlId=\"invite-organization-name\">\n                <input type=\"text\"\n                  id=\"invite-organization-name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n                  formControlName=\"name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('name').touched && form.get('name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <div class=\"row\">\n            <div class=\"col-12 text-end\">\n              <button type=\"button\"\n                class=\"btn btn-secondary me-3\"\n                (click)=\"form.reset(); totalRecordsUnFiltered = 0; back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"buttonBusy\"\n                [disabled]=\"buttonBusy\"\n                class=\"btn btn-primary\">\n                {{ 'Button.Invite' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}\n"], dependencies: [{ kind: "component", type: i4$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i6.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: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "component", type: i3$2.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: i14.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: InviteUsersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-invite-users', standalone: false, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard user-details\">\n    <div class=\"dashboard-body\">\n\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">{{ 'Admin.Subscriptions.InviteNewUser' | transloco }}</h3>\n        <p>{{ 'Admin.Subscriptions.InviteNewUserDescription' | transloco }}</p>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n\n          <h3>{{ 'Admin.Subscriptions.Section.UserDetails' | transloco }}</h3>\n          <div class=\"row\">\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.FirstName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.FirstName' | transloco\"\n                name=\"first_name\"\n                controlId=\"invite-first_name\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.FirstName' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-first_name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.InviteFirstName' | transloco\"\n                  formControlName=\"first_name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('first_name').touched && form.get('first_name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.LastName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.LastName' | transloco\"\n                name=\"last_name\"\n                controlId=\"invite-last_name\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.LastName' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-last_name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.InviteLastName' | transloco\"\n                  formControlName=\"last_name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('last_name').touched && form.get('last_name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.Email' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.Email' | transloco\"\n                name=\"email\"\n                controlId=\"invite-email\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Email' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-email\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Label.EmailPlaceholder' | transloco\"\n                  formControlName=\"email\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('email').touched && form.get('email').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <h3>{{ 'Admin.Subscriptions.Section.ProductSeats' | transloco }}</h3>\n          <div class=\"row\">\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.Product' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.SubscriptionProduct' | transloco\"\n                name=\"product_id\"\n                controlId=\"invite-product_id\"\n                [useAriaLabelledbyOnly]=\"true\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Product' | transloco\">\n                <p-autoComplete appendTo=\"body\" #refProduct\n                  [suggestions]=\"filteredProducts\"\n                  [ariaLabelledBy]=\"'invite-product_id-label'\"\n                  [ariaLabel]=\"'Label.Product' | transloco\"\n                  formControlName=\"product_id\"\n                  dataKey=\"id\"\n                  optionLabel=\"label\"\n                  [dropdown]=\"true\"\n                  [delay]=\"1000\"\n                  [type]=\"'search'\"\n                  (completeMethod)=\"searchProduct($event)\"\n                  (onSelect)=\"onProductChange($event)\"\n                  (onClear)=\"onProductClear($event)\"\n                  styleClass=\"w-100\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.SearchProducts' | transloco\"\n                  [inputStyleClass]=\"form.get('product_id').touched && form.get('product_id').invalid ? 'is-invalid' : ''\"\n                  [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container label=\"{{'Label.Seats' | transloco}}{{unitsText}}\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.Units' | transloco\"\n                name=\"units\"\n                controlId=\"invite-units\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Units' | transloco\">\n                <input type=\"number\"\n                  id=\"invite-units\"\n                  class=\"form-control\"\n                  formControlName=\"units\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('units').touched && form.get('units').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.MinUnits' | transloco\"\n                [showTooltip]=\"true\"\n                name=\"min_units\"\n                controlId=\"invite-min_units\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.MinUnits' | transloco\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.MinUnits' | transloco\">\n                <input type=\"number\"\n                  id=\"invite-min_units\"\n                  min=\"0\"\n                  [max]=\"form.get('units').value\"\n                  class=\"form-control\"\n                  formControlName=\"min_units\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <h3>{{ 'Admin.Subscriptions.Section.Organization' | transloco }}</h3>\n          <div class=\"row\">\n            @if (organizationIndustries$ | async; as industries) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationIndustry' | transloco\"\n                  name=\"organization_industry_id\"\n                  controlId=\"invite-organization_industry_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_industry_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n                    [options]=\"industries['organization_industries']\"\n                    formControlName=\"organization_industry_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationIndustry' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            @if (organizationSizes$ | async; as sizes) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationSize' | transloco\"\n                  name=\"organization_size_id\"\n                  controlId=\"invite-organization_size_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_size_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationSize' | transloco\"\n                    [options]=\"sizes['organization_sizes']\"\n                    formControlName=\"organization_size_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationSize' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            @if (organizationTypes$ | async; as types) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationType' | transloco\"\n                  name=\"organization_type_id\"\n                  controlId=\"invite-organization_type_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_type_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n                    [options]=\"types['organization_types']\"\n                    formControlName=\"organization_type_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationType' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Organization.OrganizationName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationName' | transloco\"\n                name=\"name\"\n                controlId=\"invite-organization-name\">\n                <input type=\"text\"\n                  id=\"invite-organization-name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n                  formControlName=\"name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('name').touched && form.get('name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <div class=\"row\">\n            <div class=\"col-12 text-end\">\n              <button type=\"button\"\n                class=\"btn btn-secondary me-3\"\n                (click)=\"form.reset(); totalRecordsUnFiltered = 0; back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"buttonBusy\"\n                [disabled]=\"buttonBusy\"\n                class=\"btn btn-primary\">\n                {{ 'Button.Invite' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}\n"] }]
+            args: [{ selector: 'pw-invite-users', standalone: false, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard user-details\">\n    <div class=\"dashboard-body\">\n\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"back()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"\">{{ 'Admin.Subscriptions.InviteNewUser' | transloco }}</h3>\n        <p>{{ 'Admin.Subscriptions.InviteNewUserDescription' | transloco }}</p>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n\n          <h3>{{ 'Admin.Subscriptions.Section.UserDetails' | transloco }}</h3>\n          <div class=\"row\">\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.FirstName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.FirstName' | transloco\"\n                name=\"first_name\"\n                controlId=\"invite-first_name\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.FirstName' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-first_name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.InviteFirstName' | transloco\"\n                  formControlName=\"first_name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('first_name').touched && form.get('first_name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.LastName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.LastName' | transloco\"\n                name=\"last_name\"\n                controlId=\"invite-last_name\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.LastName' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-last_name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.InviteLastName' | transloco\"\n                  formControlName=\"last_name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('last_name').touched && form.get('last_name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.Email' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.Email' | transloco\"\n                name=\"email\"\n                controlId=\"invite-email\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Email' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-email\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Label.EmailPlaceholder' | transloco\"\n                  formControlName=\"email\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('email').touched && form.get('email').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.ContactEmail' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactEmail' | transloco\"\n                name=\"contact_email\"\n                controlId=\"invite-contact_email\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.ContactEmail' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-contact_email\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactEmail' | transloco\"\n                  formControlName=\"contact_email\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('contact_email').touched && form.get('contact_email').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.InvoiceRecipientEmails' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.InvoiceRecipientEmails' | transloco\"\n                name=\"invoice_recipient_emails\"\n                controlId=\"invite-invoice_recipient_emails\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.InvoiceRecipientEmails' | transloco\">\n                <input type=\"text\"\n                  id=\"invite-invoice_recipient_emails\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.InvoiceRecipientEmails' | transloco\"\n                  formControlName=\"invoice_recipient_emails\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('invoice_recipient_emails').touched && form.get('invoice_recipient_emails').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <h3>{{ 'Admin.Subscriptions.Section.ProductSeats' | transloco }}</h3>\n          <div class=\"row\">\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Label.Product' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.SubscriptionProduct' | transloco\"\n                name=\"product_id\"\n                controlId=\"invite-product_id\"\n                [useAriaLabelledbyOnly]=\"true\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Product' | transloco\">\n                <p-autoComplete appendTo=\"body\" #refProduct\n                  [suggestions]=\"filteredProducts\"\n                  [ariaLabelledBy]=\"'invite-product_id-label'\"\n                  [ariaLabel]=\"'Label.Product' | transloco\"\n                  formControlName=\"product_id\"\n                  dataKey=\"id\"\n                  optionLabel=\"label\"\n                  [dropdown]=\"true\"\n                  [delay]=\"1000\"\n                  [type]=\"'search'\"\n                  (completeMethod)=\"searchProduct($event)\"\n                  (onSelect)=\"onProductChange($event)\"\n                  (onClear)=\"onProductClear($event)\"\n                  styleClass=\"w-100\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.SearchProducts' | transloco\"\n                  [inputStyleClass]=\"form.get('product_id').touched && form.get('product_id').invalid ? 'is-invalid' : ''\"\n                  [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container label=\"{{'Label.Seats' | transloco}}{{unitsText}}\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.Units' | transloco\"\n                name=\"units\"\n                controlId=\"invite-units\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Units' | transloco\">\n                <input type=\"number\"\n                  id=\"invite-units\"\n                  class=\"form-control\"\n                  formControlName=\"units\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('units').touched && form.get('units').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.MinUnits' | transloco\"\n                [showTooltip]=\"true\"\n                name=\"min_units\"\n                controlId=\"invite-min_units\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.MinUnits' | transloco\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.MinUnits' | transloco\">\n                <input type=\"number\"\n                  id=\"invite-min_units\"\n                  min=\"0\"\n                  [max]=\"form.get('units').value\"\n                  class=\"form-control\"\n                  formControlName=\"min_units\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <h3>{{ 'Admin.Subscriptions.Section.Organization' | transloco }}</h3>\n          <div class=\"row\">\n            @if (organizationIndustries$ | async; as industries) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationIndustry' | transloco\"\n                  name=\"organization_industry_id\"\n                  controlId=\"invite-organization_industry_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_industry_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n                    [options]=\"industries['organization_industries']\"\n                    formControlName=\"organization_industry_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationIndustry' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            @if (organizationSizes$ | async; as sizes) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationSize' | transloco\"\n                  name=\"organization_size_id\"\n                  controlId=\"invite-organization_size_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_size_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationSize' | transloco\"\n                    [options]=\"sizes['organization_sizes']\"\n                    formControlName=\"organization_size_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationSize' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            @if (organizationTypes$ | async; as types) {\n              <div class=\"mb-3 col-12 col-md-4\">\n                <pw-input-container [label]=\"'Organization.OrganizationType' | transloco\"\n                  name=\"organization_type_id\"\n                  controlId=\"invite-organization_type_id\"\n                  [useAriaLabelledbyOnly]=\"true\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\">\n                  <p-select\n                    [ariaLabelledBy]=\"'invite-organization_type_id-label'\"\n                    [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n                    [options]=\"types['organization_types']\"\n                    formControlName=\"organization_type_id\"\n                    [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationType' | transloco\"\n                    optionValue=\"id\"\n                    optionLabel=\"name\">\n                  </p-select>\n                </pw-input-container>\n              </div>\n            }\n            <div class=\"mb-3 col-12 col-md-4\">\n              <pw-input-container [label]=\"'Organization.OrganizationName' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationName' | transloco\"\n                name=\"name\"\n                controlId=\"invite-organization-name\">\n                <input type=\"text\"\n                  id=\"invite-organization-name\"\n                  class=\"form-control\"\n                  [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n                  formControlName=\"name\"\n                  [ngClass]=\"{\n                    'is-invalid': form.get('name').touched && form.get('name').invalid\n                  }\" />\n              </pw-input-container>\n            </div>\n          </div>\n\n          <div class=\"row\">\n            <div class=\"col-12 text-end\">\n              <button type=\"button\"\n                class=\"btn btn-secondary me-3\"\n                (click)=\"form.reset(); totalRecordsUnFiltered = 0; back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"buttonBusy\"\n                [disabled]=\"buttonBusy\"\n                class=\"btn btn-primary\">\n                {{ 'Button.Invite' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: rgb(255 255 255);--public-btn-radius: 24px}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}\n"] }]
         }], ctorParameters: () => [{ type: i3$1.UntypedFormBuilder }, { type: i1.AdminService }, { type: i1$1.ProductService }, { type: i0.Injector }, { type: i1$1.CommonService }, { type: i0.ChangeDetectorRef }], propDecorators: { refProduct: [{
                 type: ViewChild,
                 args: ['refProduct']