@posiwise/admin-module 0.0.237 → 0.0.238

package/fesm2022/posiwise-admin-module.mjs

@@ -7,7 +7,7 @@ import { Validators, 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 {