@posiwise/admin-module 0.0.59 → 0.0.60

package/esm2022/lib/components/subscriptions/subscription-details/subscription-details.component.mjs

@@ -166,10 +166,10 @@ export class SubscriptionDetailsComponent extends AppBaseComponent {
     ngOnDestroy() {
         super.ngOnDestroy();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SubscriptionDetailsComponent, deps: [{ token: i1.SubscriptionService }, { token: i2.AdminService }, { token: i3.DatePipe }, { token: i1.CommonService }, { token: i1.NgbDateCustomParserFormatter }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SubscriptionDetailsComponent, selector: "pw-subscription-details", usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex\">\n  <a href=\"javascript:void(0)\"\n    routerLink=\"/admin/subscriptions/list\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"mt-3\">Subscription Details</h3>\n  <span class=\"badge rounded-pill bg-danger ms-2\"\n    *ngIf=\"currentSubscriber?.is_deleted\">Deleted</span>\n</div>\n\n<ul ngbNav\n  #nav=\"ngbNav\"\n  class=\"nav-tabs\">\n  <li [ngbNavItem]=\"1\">\n    <a ngbNavLink>Subscription</a>\n    <ng-template ngbNavContent>\n      <div class=\"container-fluid pw-tab overflow-hidden\">\n        <div class=\"dashboard\">\n          <div class=\"dashboard-body\">\n            <div class=\"mt-4\">\n              <form [formGroup]=\"form\"\n                (ngSubmit)=\"saveDetails()\">\n                <div class=\"row\">\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.Organization' | transloco\"\n                      [label]=\"'Admin.Subscriptions.Organization' | transloco\"\n                      name=\"organisation\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"organisation\" />\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactName' | transloco\"\n                      [label]=\"'Admin.Subscriptions.ContactName' | transloco\"\n                      name=\"contact_name\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"contact_name\" />\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactEmail' | transloco\"\n                      [label]=\"'Admin.Subscriptions.ContactEmail' | transloco\"\n                      name=\"contact_email\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"contact_email\" />\n                    </pw-input-container>\n                  </div>\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactTel' | transloco\"\n                      [label]=\"'Admin.Subscriptions.ContactTel' | transloco\"\n                      name=\"contact_tel\">\n                      <input type=\"text\"\n                        formControlName=\"contact_tel\"\n                        class=\"form-control\" />\n                    </pw-input-container>\n                  </div>\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [label]=\"'Tax Id'\"\n                      [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.TaxId' | transloco\"\n                      name=\"tax_id\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"tax_id\" />\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n                    *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                    <label class=\"info-circle\">{{ 'Admin.Subscriptions.AssignedRoles' | transloco }}\n                      <span class=\"tooltiptext gradient-custom-branding\">{{\n                                                'Admin.Subscriptions.Tooltip.AssignedRoles'\n                                                    | transloco\n                                            }}</span>\n                    </label>\n\n                    <p-multiSelect [options]=\"allRoles\"\n                      formControlName=\"roles\"\n                      appendTo=\"body\"></p-multiSelect>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n                    *ngIf=\"organizationTypes$ | async as types\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\"\n                      [label]=\"'Organization.OrganizationType' | transloco\"\n                      name=\"organization_type_id\">\n                      <select formControlName=\"organization_type_id\"\n                        class=\"form-control form-select\">\n                        <option *ngFor=\"let option of types['organization_types']\"\n                          [value]=\"option.id\">\n                          {{ option.name }}\n                        </option>\n                      </select>\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-sm-6 col-md-3\"\n                    *ngIf=\"organizationIndustries$ | async as industries\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\"\n                      [label]=\"'Organization.OrganizationIndustry' | transloco\"\n                      name=\"organization_industry_id\">\n                      <select formControlName=\"organization_industry_id\"\n                        class=\"form-control form-select\">\n                        <option *ngFor=\"\n                                                    let option of industries[\n                                                        'organization_industries'\n                                                    ]\n                                                \"\n                          [value]=\"option.id\">\n                          {{ option.name }}\n                        </option>\n                      </select>\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-sm-6 col-md-3\"\n                    *ngIf=\"organizationSizes$ | async as sizes\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\"\n                      [label]=\"'Size' | transloco\"\n                      name=\"organization_size_id\">\n                      <select formControlName=\"organization_size_id\"\n                        class=\"form-control form-select\">\n                        <option *ngFor=\"let option of sizes['organization_sizes']\"\n                          [value]=\"option.id\">\n                          {{ option.name }}\n                        </option>\n                      </select>\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.CompanyUrl' | transloco\"\n                      [label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\"\n                      name=\"company_url\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"company_url\" />\n                    </pw-input-container>\n                  </div>\n\n                  <!-- Readonly Starts -->\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reference' | transloco\"\n                      [label]=\"'Admin.Subscriptions.Reference' | transloco\"\n                      name=\"reference_number\">\n                      <input type=\"text\"\n                        readonly\n                        class=\"form-control\"\n                        data-control=\"reference\"\n                        *ngIf=\"form\"\n                        [value]=\"form.get('reference_number')?.value\" />\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.UnitsInUse' | transloco\"\n                      [label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\"\n                      name=\"units_in_use\">\n                      <input type=\"text\"\n                        readonly\n                        class=\"form-control\"\n                        formControlName=\"units_in_use\" />\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.MaxUnits' | transloco\"\n                      [label]=\"'Admin.Subscriptions.MaxUnits' | transloco\"\n                      name=\"max_units\">\n                      <input type=\"text\"\n                        readonly\n                        class=\"form-control\"\n                        formControlName=\"max_units\" />\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.CalculatedPrice' | transloco\"\n                      [label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\"\n                      name=\"calculated_price\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        readonly\n                        formControlName=\"calculated_price\" />\n                    </pw-input-container>\n                  </div>\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.MainExpiryDate' | transloco\"\n                      [label]=\"\n                                                'Admin.Subscriptions.MainExpiryDate' | transloco\n                                            \"\n                      name=\"expires_at\">\n                      <div class=\"input-group\">\n                        <input class=\"form-control\"\n                          container=\"body\"\n                          placeholder=\"Expiry Date\"\n                          formControlName=\"expires_at\"\n                          [readonly]=\"true\"\n                          ngbDatepicker\n                          #c=\"ngbDatepicker\" />\n                        <div class=\"input-group-append\">\n                          <button class=\"btn btn-primary\"\n                            [disabled]=\"true\"\n                            (click)=\"c.toggle()\"\n                            type=\"button\">\n                            <i\n                                                            class=\"fa fa-calendar\"\n                                                            aria-hidden=\"true\"\n                                                        ></i>\n                          </button>\n                        </div>\n                      </div>\n                    </pw-input-container>\n                  </div>\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n                    *rbacAllow=\"'SuperAdmin'\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.PurchasedSeats' | transloco\"\n                      [label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\"\n                      name=\"purchased_units\">\n                      <input type=\"number\"\n                        min=\"0\"\n                        readonly\n                        class=\"form-control\"\n                        formControlName=\"purchased_units\" />\n                    </pw-input-container>\n                  </div>\n\n                  <!-- Readonly Ends -->\n                </div>\n                <!-- social links -->\n                <h3>Social Links</h3>\n                <div class=\"row\">\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.Facebook' | transloco\"\n                      [label]=\"'Admin.Subscriptions.Facebook' | transloco\"\n                      name=\"facebook_handle\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"facebook_handle\" />\n                    </pw-input-container>\n                  </div>\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.Twitter' | transloco\"\n                      [label]=\"'Admin.Subscriptions.Twitter' | transloco\"\n                      name=\"twitter_handle\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"twitter_handle\" />\n                    </pw-input-container>\n                  </div>\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.Linkedin' | transloco\"\n                      [label]=\"'Admin.Subscriptions.LinkedIn' | transloco\"\n                      name=\"linkedin_handle\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"linkedin_handle\" />\n                    </pw-input-container>\n                  </div>\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reddit' | transloco\"\n                      [label]=\"'Admin.Subscriptions.Reddit' | transloco\"\n                      name=\"reddit_handle\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"reddit_handle\" />\n                    </pw-input-container>\n                  </div>\n                </div>\n                <ng-container *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                  <h3>Security</h3>\n                  <div class=\"row\">\n                    <div class=\"col-12 col-sm-3\">\n                      <pw-input-container [showTooltip]=\"true\"\n                        [tooltipText]=\"'Admin.Subscriptions.Tooltip.Enforce2fa'| transloco\"\n                        label=\"Enforce 2FA\"\n                        name=\"enforce_2fa\">\n                        <ui-switch formControlName=\"enforce_2fa\"\n                          name=\"enforce_2fa\">\n                        </ui-switch>\n                      </pw-input-container>\n                    </div>\n                  </div>\n                </ng-container>\n                <div class=\"row text-end mt-4\">\n                  <div class=\"col-12\">\n                    <button type=\"button\"\n                      class=\"btn btn-outline-default me-2\"\n                      (click)=\"back()\">\n                      {{ 'Button.Cancel' | transloco }}\n                    </button>\n                    <button type=\"submit\"\n                      class=\"btn btn-primary\"\n                      *rbacAllow=\"'Pages.Admin.Subscription.Edit'\">\n                      {{ 'Button.Save' | transloco }}\n                    </button>\n                  </div>\n                </div>\n              </form>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n  </li>\n  <li [ngbNavItem]=\"2\">\n    <a ngbNavLink>Products</a>\n    <ng-template ngbNavContent>\n      <pw-subscription-products></pw-subscription-products>\n    </ng-template>\n  </li>\n  <li [ngbNavItem]=\"3\">\n    <a ngbNavLink>Members</a>\n    <ng-template ngbNavContent>\n      <pw-subscription-users></pw-subscription-users>\n    </ng-template>\n  </li>\n  <li [ngbNavItem]=\"4\"\n    *rbacAllow=\"'SuperAdmin'\">\n    <a ngbNavLink>Ambassadors</a>\n    <ng-template ngbNavContent>\n      <pw-subscription-agents-list></pw-subscription-agents-list>\n    </ng-template>\n  </li>\n</ul>\n\n<div [ngbNavOutlet]=\"nav\"></div>\n", styles: [".ui-autocomplete-multiple-container,.ui-fluid.skills-modal p-autocomplete{background:transparent}\n"], dependencies: [{ kind: "component", type: i4.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "component", type: i6.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i8.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "directive", type: i9.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i10.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: "directive", type: i10.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i10.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i10.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i10.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i10.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i10.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i10.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.SubscriptionProductsComponent, selector: "pw-subscription-products" }, { kind: "component", type: i12.SubscriptionUsersComponent, selector: "pw-subscription-users" }, { kind: "component", type: i13.SubscriptionAgentsListComponent, selector: "pw-subscription-agents-list" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SubscriptionDetailsComponent, deps: [{ token: i1.SubscriptionService }, { token: i2.AdminService }, { token: i3.DatePipe }, { token: i1.CommonService }, { token: i1.NgbDateCustomParserFormatter }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: SubscriptionDetailsComponent, selector: "pw-subscription-details", usesInheritance: true, ngImport: i0, template: "<div class=\"d-flex\">\n  <a href=\"javascript:void(0)\"\n    routerLink=\"/admin/subscriptions/list\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"mt-3\">Subscription Details</h3>\n  <span class=\"badge rounded-pill bg-danger ms-2\"\n    *ngIf=\"currentSubscriber?.is_deleted\">Deleted</span>\n</div>\n\n<ul ngbNav\n  #nav=\"ngbNav\"\n  class=\"nav-tabs\">\n  <li [ngbNavItem]=\"1\">\n    <a ngbNavLink>Subscription</a>\n    <ng-template ngbNavContent>\n      <div class=\"container-fluid pw-tab overflow-hidden\">\n        <div class=\"dashboard\">\n          <div class=\"dashboard-body\">\n            <div class=\"mt-4\">\n              <form [formGroup]=\"form\"\n                (ngSubmit)=\"saveDetails()\">\n                <div class=\"row\">\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.Organization' | transloco\"\n                      [label]=\"'Admin.Subscriptions.Organization' | transloco\"\n                      name=\"organisation\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"organisation\" />\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactName' | transloco\"\n                      [label]=\"'Admin.Subscriptions.ContactName' | transloco\"\n                      name=\"contact_name\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"contact_name\" />\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactEmail' | transloco\"\n                      [label]=\"'Admin.Subscriptions.ContactEmail' | transloco\"\n                      name=\"contact_email\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"contact_email\" />\n                    </pw-input-container>\n                  </div>\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactTel' | transloco\"\n                      [label]=\"'Admin.Subscriptions.ContactTel' | transloco\"\n                      name=\"contact_tel\">\n                      <input type=\"text\"\n                        formControlName=\"contact_tel\"\n                        class=\"form-control\" />\n                    </pw-input-container>\n                  </div>\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [label]=\"'Tax Id'\"\n                      [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.TaxId' | transloco\"\n                      name=\"tax_id\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"tax_id\" />\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n                    *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                    <label class=\"info-circle\">{{ 'Admin.Subscriptions.AssignedRoles' | transloco }}\n                      <span class=\"tooltiptext gradient-custom-branding\">{{\n                                                'Admin.Subscriptions.Tooltip.AssignedRoles'\n                                                    | transloco\n                                            }}</span>\n                    </label>\n\n                    <p-multiSelect [options]=\"allRoles\"\n                      formControlName=\"roles\"\n                      appendTo=\"body\"></p-multiSelect>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n                    *ngIf=\"organizationTypes$ | async as types\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\"\n                      [label]=\"'Organization.OrganizationType' | transloco\"\n                      name=\"organization_type_id\">\n                      <select formControlName=\"organization_type_id\"\n                        class=\"form-control form-select\">\n                        <option *ngFor=\"let option of types['organization_types']\"\n                          [value]=\"option.id\">\n                          {{ option.name }}\n                        </option>\n                      </select>\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-sm-6 col-md-3\"\n                    *ngIf=\"organizationIndustries$ | async as industries\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\"\n                      [label]=\"'Organization.OrganizationIndustry' | transloco\"\n                      name=\"organization_industry_id\">\n                      <select formControlName=\"organization_industry_id\"\n                        class=\"form-control form-select\">\n                        <option *ngFor=\"\n                                                    let option of industries[\n                                                        'organization_industries'\n                                                    ]\n                                                \"\n                          [value]=\"option.id\">\n                          {{ option.name }}\n                        </option>\n                      </select>\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-sm-6 col-md-3\"\n                    *ngIf=\"organizationSizes$ | async as sizes\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\"\n                      [label]=\"'Size' | transloco\"\n                      name=\"organization_size_id\">\n                      <select formControlName=\"organization_size_id\"\n                        class=\"form-control form-select\">\n                        <option *ngFor=\"let option of sizes['organization_sizes']\"\n                          [value]=\"option.id\">\n                          {{ option.name }}\n                        </option>\n                      </select>\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.CompanyUrl' | transloco\"\n                      [label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\"\n                      name=\"company_url\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"company_url\" />\n                    </pw-input-container>\n                  </div>\n\n                  <!-- Readonly Starts -->\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reference' | transloco\"\n                      [label]=\"'Admin.Subscriptions.Reference' | transloco\"\n                      name=\"reference_number\">\n                      <input type=\"text\"\n                        readonly\n                        class=\"form-control\"\n                        data-control=\"reference\"\n                        *ngIf=\"form\"\n                        [value]=\"form.get('reference_number')?.value\" />\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.UnitsInUse' | transloco\"\n                      [label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\"\n                      name=\"units_in_use\">\n                      <input type=\"text\"\n                        readonly\n                        class=\"form-control\"\n                        formControlName=\"units_in_use\" />\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.MaxUnits' | transloco\"\n                      [label]=\"'Admin.Subscriptions.MaxUnits' | transloco\"\n                      name=\"max_units\">\n                      <input type=\"text\"\n                        readonly\n                        class=\"form-control\"\n                        formControlName=\"max_units\" />\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.CalculatedPrice' | transloco\"\n                      [label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\"\n                      name=\"calculated_price\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        readonly\n                        formControlName=\"calculated_price\" />\n                    </pw-input-container>\n                  </div>\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.MainExpiryDate' | transloco\"\n                      [label]=\"\n                                                'Admin.Subscriptions.MainExpiryDate' | transloco\n                                            \"\n                      name=\"expires_at\">\n                      <div class=\"input-group\">\n                        <input class=\"form-control\"\n                          container=\"body\"\n                          placeholder=\"Expiry Date\"\n                          formControlName=\"expires_at\"\n                          [readonly]=\"true\"\n                          ngbDatepicker\n                          #c=\"ngbDatepicker\" />\n                        <div class=\"input-group-append\">\n                          <button class=\"btn btn-primary\"\n                            [disabled]=\"true\"\n                            (click)=\"c.toggle()\"\n                            type=\"button\">\n                            <i\n                                                            class=\"fa fa-calendar\"\n                                                            aria-hidden=\"true\"\n                                                        ></i>\n                          </button>\n                        </div>\n                      </div>\n                    </pw-input-container>\n                  </div>\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n                    *rbacAllow=\"'SuperAdmin'\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.PurchasedSeats' | transloco\"\n                      [label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\"\n                      name=\"purchased_units\">\n                      <input type=\"number\"\n                        min=\"0\"\n                        readonly\n                        class=\"form-control\"\n                        formControlName=\"purchased_units\" />\n                    </pw-input-container>\n                  </div>\n\n                  <!-- Readonly Ends -->\n                </div>\n                <!-- social links -->\n                <h3>Social Links</h3>\n                <div class=\"row\">\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.Facebook' | transloco\"\n                      [label]=\"'Admin.Subscriptions.Facebook' | transloco\"\n                      name=\"facebook_handle\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"facebook_handle\" />\n                    </pw-input-container>\n                  </div>\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.Twitter' | transloco\"\n                      [label]=\"'Admin.Subscriptions.Twitter' | transloco\"\n                      name=\"twitter_handle\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"twitter_handle\" />\n                    </pw-input-container>\n                  </div>\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.Linkedin' | transloco\"\n                      [label]=\"'Admin.Subscriptions.LinkedIn' | transloco\"\n                      name=\"linkedin_handle\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"linkedin_handle\" />\n                    </pw-input-container>\n                  </div>\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reddit' | transloco\"\n                      [label]=\"'Admin.Subscriptions.Reddit' | transloco\"\n                      name=\"reddit_handle\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"reddit_handle\" />\n                    </pw-input-container>\n                  </div>\n                </div>\n                <ng-container *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                  <h3>Security</h3>\n                  <div class=\"row\">\n                    <div class=\"col-12 col-sm-3\">\n                      <pw-input-container [showTooltip]=\"true\"\n                        [tooltipText]=\"'Admin.Subscriptions.Tooltip.Enforce2fa'| transloco\"\n                        label=\"Enforce 2FA\"\n                        name=\"enforce_2fa\">\n                        <ui-switch formControlName=\"enforce_2fa\"\n                          name=\"enforce_2fa\">\n                        </ui-switch>\n                      </pw-input-container>\n                    </div>\n                  </div>\n                </ng-container>\n                <div class=\"row text-end mt-4\">\n                  <div class=\"col-12\">\n                    <button type=\"button\"\n                      class=\"btn btn-outline-default me-2\"\n                      (click)=\"back()\">\n                      {{ 'Button.Cancel' | transloco }}\n                    </button>\n                    <button type=\"submit\"\n                      class=\"btn btn-primary\"\n                      *rbacAllow=\"'Pages.Admin.Subscription.Edit'\">\n                      {{ 'Button.Save' | transloco }}\n                    </button>\n                  </div>\n                </div>\n              </form>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n  </li>\n  <li [ngbNavItem]=\"2\">\n    <a ngbNavLink>Products</a>\n    <ng-template ngbNavContent>\n      <pw-subscription-products></pw-subscription-products>\n    </ng-template>\n  </li>\n  <li [ngbNavItem]=\"3\">\n    <a ngbNavLink>Members</a>\n    <ng-template ngbNavContent>\n      <pw-subscription-users></pw-subscription-users>\n    </ng-template>\n  </li>\n  <li [ngbNavItem]=\"4\"\n    *rbacAllow=\"'SuperAdmin'\">\n    <a ngbNavLink>Ambassadors</a>\n    <ng-template ngbNavContent>\n      <pw-subscription-agents-list></pw-subscription-agents-list>\n    </ng-template>\n  </li>\n</ul>\n\n<div [ngbNavOutlet]=\"nav\"></div>\n", styles: [".ui-autocomplete-multiple-container,.ui-fluid.skills-modal p-autocomplete{background:transparent}\n"], dependencies: [{ kind: "component", type: i4.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "component", type: i6.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i8.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "directive", type: i9.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i10.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: "directive", type: i10.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i10.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i10.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i10.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i10.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i10.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i10.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i11.SubscriptionProductsComponent, selector: "pw-subscription-products" }, { kind: "component", type: i12.SubscriptionUsersComponent, selector: "pw-subscription-users" }, { kind: "component", type: i13.SubscriptionAgentsListComponent, selector: "pw-subscription-agents-list" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i14.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SubscriptionDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SubscriptionDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-subscription-details', template: "<div class=\"d-flex\">\n  <a href=\"javascript:void(0)\"\n    routerLink=\"/admin/subscriptions/list\"\n    class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n  <h3 class=\"mt-3\">Subscription Details</h3>\n  <span class=\"badge rounded-pill bg-danger ms-2\"\n    *ngIf=\"currentSubscriber?.is_deleted\">Deleted</span>\n</div>\n\n<ul ngbNav\n  #nav=\"ngbNav\"\n  class=\"nav-tabs\">\n  <li [ngbNavItem]=\"1\">\n    <a ngbNavLink>Subscription</a>\n    <ng-template ngbNavContent>\n      <div class=\"container-fluid pw-tab overflow-hidden\">\n        <div class=\"dashboard\">\n          <div class=\"dashboard-body\">\n            <div class=\"mt-4\">\n              <form [formGroup]=\"form\"\n                (ngSubmit)=\"saveDetails()\">\n                <div class=\"row\">\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.Organization' | transloco\"\n                      [label]=\"'Admin.Subscriptions.Organization' | transloco\"\n                      name=\"organisation\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"organisation\" />\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactName' | transloco\"\n                      [label]=\"'Admin.Subscriptions.ContactName' | transloco\"\n                      name=\"contact_name\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"contact_name\" />\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactEmail' | transloco\"\n                      [label]=\"'Admin.Subscriptions.ContactEmail' | transloco\"\n                      name=\"contact_email\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"contact_email\" />\n                    </pw-input-container>\n                  </div>\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactTel' | transloco\"\n                      [label]=\"'Admin.Subscriptions.ContactTel' | transloco\"\n                      name=\"contact_tel\">\n                      <input type=\"text\"\n                        formControlName=\"contact_tel\"\n                        class=\"form-control\" />\n                    </pw-input-container>\n                  </div>\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [label]=\"'Tax Id'\"\n                      [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.TaxId' | transloco\"\n                      name=\"tax_id\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"tax_id\" />\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n                    *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                    <label class=\"info-circle\">{{ 'Admin.Subscriptions.AssignedRoles' | transloco }}\n                      <span class=\"tooltiptext gradient-custom-branding\">{{\n                                                'Admin.Subscriptions.Tooltip.AssignedRoles'\n                                                    | transloco\n                                            }}</span>\n                    </label>\n\n                    <p-multiSelect [options]=\"allRoles\"\n                      formControlName=\"roles\"\n                      appendTo=\"body\"></p-multiSelect>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n                    *ngIf=\"organizationTypes$ | async as types\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\"\n                      [label]=\"'Organization.OrganizationType' | transloco\"\n                      name=\"organization_type_id\">\n                      <select formControlName=\"organization_type_id\"\n                        class=\"form-control form-select\">\n                        <option *ngFor=\"let option of types['organization_types']\"\n                          [value]=\"option.id\">\n                          {{ option.name }}\n                        </option>\n                      </select>\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-sm-6 col-md-3\"\n                    *ngIf=\"organizationIndustries$ | async as industries\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\"\n                      [label]=\"'Organization.OrganizationIndustry' | transloco\"\n                      name=\"organization_industry_id\">\n                      <select formControlName=\"organization_industry_id\"\n                        class=\"form-control form-select\">\n                        <option *ngFor=\"\n                                                    let option of industries[\n                                                        'organization_industries'\n                                                    ]\n                                                \"\n                          [value]=\"option.id\">\n                          {{ option.name }}\n                        </option>\n                      </select>\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-sm-6 col-md-3\"\n                    *ngIf=\"organizationSizes$ | async as sizes\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\"\n                      [label]=\"'Size' | transloco\"\n                      name=\"organization_size_id\">\n                      <select formControlName=\"organization_size_id\"\n                        class=\"form-control form-select\">\n                        <option *ngFor=\"let option of sizes['organization_sizes']\"\n                          [value]=\"option.id\">\n                          {{ option.name }}\n                        </option>\n                      </select>\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.CompanyUrl' | transloco\"\n                      [label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\"\n                      name=\"company_url\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"company_url\" />\n                    </pw-input-container>\n                  </div>\n\n                  <!-- Readonly Starts -->\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reference' | transloco\"\n                      [label]=\"'Admin.Subscriptions.Reference' | transloco\"\n                      name=\"reference_number\">\n                      <input type=\"text\"\n                        readonly\n                        class=\"form-control\"\n                        data-control=\"reference\"\n                        *ngIf=\"form\"\n                        [value]=\"form.get('reference_number')?.value\" />\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.UnitsInUse' | transloco\"\n                      [label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\"\n                      name=\"units_in_use\">\n                      <input type=\"text\"\n                        readonly\n                        class=\"form-control\"\n                        formControlName=\"units_in_use\" />\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.MaxUnits' | transloco\"\n                      [label]=\"'Admin.Subscriptions.MaxUnits' | transloco\"\n                      name=\"max_units\">\n                      <input type=\"text\"\n                        readonly\n                        class=\"form-control\"\n                        formControlName=\"max_units\" />\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.CalculatedPrice' | transloco\"\n                      [label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\"\n                      name=\"calculated_price\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        readonly\n                        formControlName=\"calculated_price\" />\n                    </pw-input-container>\n                  </div>\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.MainExpiryDate' | transloco\"\n                      [label]=\"\n                                                'Admin.Subscriptions.MainExpiryDate' | transloco\n                                            \"\n                      name=\"expires_at\">\n                      <div class=\"input-group\">\n                        <input class=\"form-control\"\n                          container=\"body\"\n                          placeholder=\"Expiry Date\"\n                          formControlName=\"expires_at\"\n                          [readonly]=\"true\"\n                          ngbDatepicker\n                          #c=\"ngbDatepicker\" />\n                        <div class=\"input-group-append\">\n                          <button class=\"btn btn-primary\"\n                            [disabled]=\"true\"\n                            (click)=\"c.toggle()\"\n                            type=\"button\">\n                            <i\n                                                            class=\"fa fa-calendar\"\n                                                            aria-hidden=\"true\"\n                                                        ></i>\n                          </button>\n                        </div>\n                      </div>\n                    </pw-input-container>\n                  </div>\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n                    *rbacAllow=\"'SuperAdmin'\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.PurchasedSeats' | transloco\"\n                      [label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\"\n                      name=\"purchased_units\">\n                      <input type=\"number\"\n                        min=\"0\"\n                        readonly\n                        class=\"form-control\"\n                        formControlName=\"purchased_units\" />\n                    </pw-input-container>\n                  </div>\n\n                  <!-- Readonly Ends -->\n                </div>\n                <!-- social links -->\n                <h3>Social Links</h3>\n                <div class=\"row\">\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.Facebook' | transloco\"\n                      [label]=\"'Admin.Subscriptions.Facebook' | transloco\"\n                      name=\"facebook_handle\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"facebook_handle\" />\n                    </pw-input-container>\n                  </div>\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.Twitter' | transloco\"\n                      [label]=\"'Admin.Subscriptions.Twitter' | transloco\"\n                      name=\"twitter_handle\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"twitter_handle\" />\n                    </pw-input-container>\n                  </div>\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.Linkedin' | transloco\"\n                      [label]=\"'Admin.Subscriptions.LinkedIn' | transloco\"\n                      name=\"linkedin_handle\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"linkedin_handle\" />\n                    </pw-input-container>\n                  </div>\n                  <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n                    <pw-input-container [showTooltip]=\"true\"\n                      [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reddit' | transloco\"\n                      [label]=\"'Admin.Subscriptions.Reddit' | transloco\"\n                      name=\"reddit_handle\">\n                      <input type=\"text\"\n                        class=\"form-control\"\n                        formControlName=\"reddit_handle\" />\n                    </pw-input-container>\n                  </div>\n                </div>\n                <ng-container *rbacAllow=\"'SubscriptionSuperAdmin'\">\n                  <h3>Security</h3>\n                  <div class=\"row\">\n                    <div class=\"col-12 col-sm-3\">\n                      <pw-input-container [showTooltip]=\"true\"\n                        [tooltipText]=\"'Admin.Subscriptions.Tooltip.Enforce2fa'| transloco\"\n                        label=\"Enforce 2FA\"\n                        name=\"enforce_2fa\">\n                        <ui-switch formControlName=\"enforce_2fa\"\n                          name=\"enforce_2fa\">\n                        </ui-switch>\n                      </pw-input-container>\n                    </div>\n                  </div>\n                </ng-container>\n                <div class=\"row text-end mt-4\">\n                  <div class=\"col-12\">\n                    <button type=\"button\"\n                      class=\"btn btn-outline-default me-2\"\n                      (click)=\"back()\">\n                      {{ 'Button.Cancel' | transloco }}\n                    </button>\n                    <button type=\"submit\"\n                      class=\"btn btn-primary\"\n                      *rbacAllow=\"'Pages.Admin.Subscription.Edit'\">\n                      {{ 'Button.Save' | transloco }}\n                    </button>\n                  </div>\n                </div>\n              </form>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n  </li>\n  <li [ngbNavItem]=\"2\">\n    <a ngbNavLink>Products</a>\n    <ng-template ngbNavContent>\n      <pw-subscription-products></pw-subscription-products>\n    </ng-template>\n  </li>\n  <li [ngbNavItem]=\"3\">\n    <a ngbNavLink>Members</a>\n    <ng-template ngbNavContent>\n      <pw-subscription-users></pw-subscription-users>\n    </ng-template>\n  </li>\n  <li [ngbNavItem]=\"4\"\n    *rbacAllow=\"'SuperAdmin'\">\n    <a ngbNavLink>Ambassadors</a>\n    <ng-template ngbNavContent>\n      <pw-subscription-agents-list></pw-subscription-agents-list>\n    </ng-template>\n  </li>\n</ul>\n\n<div [ngbNavOutlet]=\"nav\"></div>\n", styles: [".ui-autocomplete-multiple-container,.ui-fluid.skills-modal p-autocomplete{background:transparent}\n"] }]
         }], ctorParameters: () => [{ type: i1.SubscriptionService }, { type: i2.AdminService }, { type: i3.DatePipe }, { type: i1.CommonService }, { type: i1.NgbDateCustomParserFormatter }, { type: i0.Injector }] });

package/esm2022/lib/components/subscriptions/subscription-product-details/subscription-product-details.component.mjs

@@ -196,8 +196,8 @@ export class SubscriptionProductDetailsComponent extends AppBaseComponent {
         //     this.form.controls['signed_up_at'].updateValueAndValidity();
         // });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SubscriptionProductDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.AdminService }, { token: i2.ProductService }, { token: i2.NgbDateCustomParserFormatter }, { token: i3.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SubscriptionProductDetailsComponent, selector: "pw-subscription-product-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6\">\n        <a href=\"javascript:void(0)\"\n          (click)=\"back()\"\n          class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i>\n        </a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n          <span>Subscription Product</span>\n        </h3>\n      </div>\n      <div class=\"w-100 text-center mt-3\"\n        *ngIf=\"isLoading\">\n        <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n      </div>\n      <div class=\"p-2 mt-3\">\n        <p>\n          You can update the Purchased Seats, Product, and Product Expiry date as long as the user hasn't subscribed using stripe.\n        </p>\n        <p class=\"mb-5\">\n          If you set the subscription as External Payment you'll have to manually manage the Product Expiry Date.\n        </p>\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3 col-lg-2\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\"\n                [showTooltip]=\"true\"\n                name=\"purchased_units\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.PurchasedSeats' | transloco\">\n                <input type=\"number\"\n                  min=\"0\"\n                  class=\"form-control\"\n                  formControlName=\"purchased_units\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3 col-lg-2\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.MinUnits' | transloco\"\n                [showTooltip]=\"true\"\n                name=\"min_units\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.MinUnits' | transloco\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.MinUnits' | transloco\">\n                <input type=\"number\"\n                  min=\"0\"\n                  [max]=\"form.get('purchased_units').value\"\n                  class=\"form-control\"\n                  formControlName=\"min_units\" />\n              </pw-input-container>\n            </div>\n            <!-- product expiry date -->\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.ProductExpiryDate' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.ProductExpiryDate' | transloco\"\n                name=\"expires_at\">\n                <div class=\"input-group\">\n                  <input class=\"form-control\"\n                    container=\"body\"\n                    placeholder=\"Expiry Date\"\n                    formControlName=\"expires_at\"\n                    [outsideDays]=\"'hidden'\"\n                    ngbDatepicker\n                    #c=\"ngbDatepicker\" />\n                  <div class=\"input-group-append\">\n                    <button class=\"btn btn-primary\"\n                      [disabled]=\"disableExpiresAt\"\n                      (click)=\"c.toggle()\"\n                      type=\"button\">\n                      <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                    </button>\n                  </div>\n                </div>\n              </pw-input-container>\n            </div>\n\n            <!-- signedup at-->\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3 col-lg-2\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.SignedUpAt' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.SignedUpAt' | transloco\"\n                name=\"signed_up_at\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.SignedUpAt' | transloco\">\n                <div class=\"input-group\">\n                  <input class=\"form-control\"\n                    container=\"body\"\n                    placeholder=\"Signed Up At\"\n                    formControlName=\"signed_up_at\"\n                    ngbDatepicker\n                    #d=\"ngbDatepicker\" />\n                  <div class=\"input-group-append\">\n                    <button class=\"btn btn-primary\"\n                      [disabled]=\"!isSuperAdmin\"\n                      (click)=\"d.toggle()\"\n                      type=\"button\">\n                      <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                    </button>\n                  </div>\n                </div>\n              </pw-input-container>\n            </div>\n            <!-- stripe subscription id -->\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.StripeSubscriptionId' | transloco\"\n                name=\"stripe_subscription_id\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.StripeSubscriptionId' | transloco\">\n                <input type=\"text\"\n                  class=\"form-control\"\n                  formControlName=\"stripe_subscription_id\" />\n              </pw-input-container>\n            </div>\n            <!-- external payment toggle -->\n            <div class=\"col-12 col-sm-2\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.ExternalPayment' | transloco\"\n                name=\"external_payment\"\n                [showTooltip]=\"true\"\n                [tooltipPosition]=\"'left'\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.ExternalPayment' | transloco\">\n                <ui-switch formControlName=\"external_payment\"\n                  name=\"external_payment\">\n                </ui-switch>\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-sm-4\">\n              <pw-input-container [label]=\"'Label.Product' | transloco\"\n                name=\"new_product_id\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.Product' | transloco\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Product' | transloco\">\n                <p-autoComplete [suggestions]=\"filteredProducts\"\n                  formControlName=\"new_product_id\"\n                  dataKey=\"value\"\n                  field=\"label\"\n                  [dropdown]=\"true\"\n                  [delay]=\"1000\"\n                  (completeMethod)=\"searchProduct($event)\"\n                  styleClass=\"w-100\"\n                  placeholder=\"Search Product\"\n                  [inputStyle]=\"\n                                        form.get('new_product_id').touched && form.get('new_product_id').invalid\n                                            ? { border: '1px solid #ff586b' }\n                                            : { border: '1px solid gray' }\n                                    \"\n                  [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"col-12 text-end mt-3\">\n            <button type=\"button\"\n              class=\"btn btn-outline-default me-2\"\n              (click)=\"back()\">\n              {{ 'Button.Cancel' | transloco }}\n            </button>\n            <button type=\"submit\"\n              class=\"btn btn-primary\">\n              {{ 'Button.Submit' | transloco }}\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i4.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i5.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "component", type: i6.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i7.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration"] }, { kind: "component", type: i8.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "directive", type: i9.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: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i10.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SubscriptionProductDetailsComponent, deps: [{ token: i0.Injector }, { token: i1.AdminService }, { token: i2.ProductService }, { token: i2.NgbDateCustomParserFormatter }, { token: i3.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: SubscriptionProductDetailsComponent, selector: "pw-subscription-product-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6\">\n        <a href=\"javascript:void(0)\"\n          (click)=\"back()\"\n          class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i>\n        </a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n          <span>Subscription Product</span>\n        </h3>\n      </div>\n      <div class=\"w-100 text-center mt-3\"\n        *ngIf=\"isLoading\">\n        <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n      </div>\n      <div class=\"p-2 mt-3\">\n        <p>\n          You can update the Purchased Seats, Product, and Product Expiry date as long as the user hasn't subscribed using stripe.\n        </p>\n        <p class=\"mb-5\">\n          If you set the subscription as External Payment you'll have to manually manage the Product Expiry Date.\n        </p>\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3 col-lg-2\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\"\n                [showTooltip]=\"true\"\n                name=\"purchased_units\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.PurchasedSeats' | transloco\">\n                <input type=\"number\"\n                  min=\"0\"\n                  class=\"form-control\"\n                  formControlName=\"purchased_units\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3 col-lg-2\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.MinUnits' | transloco\"\n                [showTooltip]=\"true\"\n                name=\"min_units\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.MinUnits' | transloco\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.MinUnits' | transloco\">\n                <input type=\"number\"\n                  min=\"0\"\n                  [max]=\"form.get('purchased_units').value\"\n                  class=\"form-control\"\n                  formControlName=\"min_units\" />\n              </pw-input-container>\n            </div>\n            <!-- product expiry date -->\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.ProductExpiryDate' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.ProductExpiryDate' | transloco\"\n                name=\"expires_at\">\n                <div class=\"input-group\">\n                  <input class=\"form-control\"\n                    container=\"body\"\n                    placeholder=\"Expiry Date\"\n                    formControlName=\"expires_at\"\n                    [outsideDays]=\"'hidden'\"\n                    ngbDatepicker\n                    #c=\"ngbDatepicker\" />\n                  <div class=\"input-group-append\">\n                    <button class=\"btn btn-primary\"\n                      [disabled]=\"disableExpiresAt\"\n                      (click)=\"c.toggle()\"\n                      type=\"button\">\n                      <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                    </button>\n                  </div>\n                </div>\n              </pw-input-container>\n            </div>\n\n            <!-- signedup at-->\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3 col-lg-2\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.SignedUpAt' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.SignedUpAt' | transloco\"\n                name=\"signed_up_at\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.SignedUpAt' | transloco\">\n                <div class=\"input-group\">\n                  <input class=\"form-control\"\n                    container=\"body\"\n                    placeholder=\"Signed Up At\"\n                    formControlName=\"signed_up_at\"\n                    ngbDatepicker\n                    #d=\"ngbDatepicker\" />\n                  <div class=\"input-group-append\">\n                    <button class=\"btn btn-primary\"\n                      [disabled]=\"!isSuperAdmin\"\n                      (click)=\"d.toggle()\"\n                      type=\"button\">\n                      <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                    </button>\n                  </div>\n                </div>\n              </pw-input-container>\n            </div>\n            <!-- stripe subscription id -->\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.StripeSubscriptionId' | transloco\"\n                name=\"stripe_subscription_id\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.StripeSubscriptionId' | transloco\">\n                <input type=\"text\"\n                  class=\"form-control\"\n                  formControlName=\"stripe_subscription_id\" />\n              </pw-input-container>\n            </div>\n            <!-- external payment toggle -->\n            <div class=\"col-12 col-sm-2\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.ExternalPayment' | transloco\"\n                name=\"external_payment\"\n                [showTooltip]=\"true\"\n                [tooltipPosition]=\"'left'\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.ExternalPayment' | transloco\">\n                <ui-switch formControlName=\"external_payment\"\n                  name=\"external_payment\">\n                </ui-switch>\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-sm-4\">\n              <pw-input-container [label]=\"'Label.Product' | transloco\"\n                name=\"new_product_id\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.Product' | transloco\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Product' | transloco\">\n                <p-autoComplete [suggestions]=\"filteredProducts\"\n                  formControlName=\"new_product_id\"\n                  dataKey=\"value\"\n                  field=\"label\"\n                  [dropdown]=\"true\"\n                  [delay]=\"1000\"\n                  (completeMethod)=\"searchProduct($event)\"\n                  styleClass=\"w-100\"\n                  placeholder=\"Search Product\"\n                  [inputStyle]=\"\n                                        form.get('new_product_id').touched && form.get('new_product_id').invalid\n                                            ? { border: '1px solid #ff586b' }\n                                            : { border: '1px solid gray' }\n                                    \"\n                  [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"col-12 text-end mt-3\">\n            <button type=\"button\"\n              class=\"btn btn-outline-default me-2\"\n              (click)=\"back()\">\n              {{ 'Button.Cancel' | transloco }}\n            </button>\n            <button type=\"submit\"\n              class=\"btn btn-primary\">\n              {{ 'Button.Submit' | transloco }}\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n", dependencies: [{ kind: "component", type: i4.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i5.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "component", type: i6.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i7.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration"] }, { kind: "component", type: i8.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText"] }, { kind: "directive", type: i9.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: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i10.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -205,7 +205,7 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], SubscriptionProductDetailsComponent.prototype, "onSave", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SubscriptionProductDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SubscriptionProductDetailsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-subscription-product-details', template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n      <div class=\"me-auto col-xs-6\">\n        <a href=\"javascript:void(0)\"\n          (click)=\"back()\"\n          class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i>\n        </a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n          <span>Subscription Product</span>\n        </h3>\n      </div>\n      <div class=\"w-100 text-center mt-3\"\n        *ngIf=\"isLoading\">\n        <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n      </div>\n      <div class=\"p-2 mt-3\">\n        <p>\n          You can update the Purchased Seats, Product, and Product Expiry date as long as the user hasn't subscribed using stripe.\n        </p>\n        <p class=\"mb-5\">\n          If you set the subscription as External Payment you'll have to manually manage the Product Expiry Date.\n        </p>\n        <form [formGroup]=\"form\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3 col-lg-2\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\"\n                [showTooltip]=\"true\"\n                name=\"purchased_units\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.PurchasedSeats' | transloco\">\n                <input type=\"number\"\n                  min=\"0\"\n                  class=\"form-control\"\n                  formControlName=\"purchased_units\" />\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3 col-lg-2\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.MinUnits' | transloco\"\n                [showTooltip]=\"true\"\n                name=\"min_units\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.MinUnits' | transloco\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.MinUnits' | transloco\">\n                <input type=\"number\"\n                  min=\"0\"\n                  [max]=\"form.get('purchased_units').value\"\n                  class=\"form-control\"\n                  formControlName=\"min_units\" />\n              </pw-input-container>\n            </div>\n            <!-- product expiry date -->\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.ProductExpiryDate' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.ProductExpiryDate' | transloco\"\n                name=\"expires_at\">\n                <div class=\"input-group\">\n                  <input class=\"form-control\"\n                    container=\"body\"\n                    placeholder=\"Expiry Date\"\n                    formControlName=\"expires_at\"\n                    [outsideDays]=\"'hidden'\"\n                    ngbDatepicker\n                    #c=\"ngbDatepicker\" />\n                  <div class=\"input-group-append\">\n                    <button class=\"btn btn-primary\"\n                      [disabled]=\"disableExpiresAt\"\n                      (click)=\"c.toggle()\"\n                      type=\"button\">\n                      <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                    </button>\n                  </div>\n                </div>\n              </pw-input-container>\n            </div>\n\n            <!-- signedup at-->\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3 col-lg-2\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.SignedUpAt' | transloco\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.SignedUpAt' | transloco\"\n                name=\"signed_up_at\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.SignedUpAt' | transloco\">\n                <div class=\"input-group\">\n                  <input class=\"form-control\"\n                    container=\"body\"\n                    placeholder=\"Signed Up At\"\n                    formControlName=\"signed_up_at\"\n                    ngbDatepicker\n                    #d=\"ngbDatepicker\" />\n                  <div class=\"input-group-append\">\n                    <button class=\"btn btn-primary\"\n                      [disabled]=\"!isSuperAdmin\"\n                      (click)=\"d.toggle()\"\n                      type=\"button\">\n                      <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n                    </button>\n                  </div>\n                </div>\n              </pw-input-container>\n            </div>\n            <!-- stripe subscription id -->\n            <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.StripeSubscriptionId' | transloco\"\n                name=\"stripe_subscription_id\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.StripeSubscriptionId' | transloco\">\n                <input type=\"text\"\n                  class=\"form-control\"\n                  formControlName=\"stripe_subscription_id\" />\n              </pw-input-container>\n            </div>\n            <!-- external payment toggle -->\n            <div class=\"col-12 col-sm-2\">\n              <pw-input-container [label]=\"'Admin.Subscriptions.ExternalPayment' | transloco\"\n                name=\"external_payment\"\n                [showTooltip]=\"true\"\n                [tooltipPosition]=\"'left'\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.ExternalPayment' | transloco\">\n                <ui-switch formControlName=\"external_payment\"\n                  name=\"external_payment\">\n                </ui-switch>\n              </pw-input-container>\n            </div>\n            <div class=\"mb-3 col-sm-4\">\n              <pw-input-container [label]=\"'Label.Product' | transloco\"\n                name=\"new_product_id\"\n                [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.Subscriptions.Tooltip.Product' | transloco\"\n                [errorMsg]=\"'Admin.Subscriptions.Validation.Product' | transloco\">\n                <p-autoComplete [suggestions]=\"filteredProducts\"\n                  formControlName=\"new_product_id\"\n                  dataKey=\"value\"\n                  field=\"label\"\n                  [dropdown]=\"true\"\n                  [delay]=\"1000\"\n                  (completeMethod)=\"searchProduct($event)\"\n                  styleClass=\"w-100\"\n                  placeholder=\"Search Product\"\n                  [inputStyle]=\"\n                                        form.get('new_product_id').touched && form.get('new_product_id').invalid\n                                            ? { border: '1px solid #ff586b' }\n                                            : { border: '1px solid gray' }\n                                    \"\n                  [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"col-12 text-end mt-3\">\n            <button type=\"button\"\n              class=\"btn btn-outline-default me-2\"\n              (click)=\"back()\">\n              {{ 'Button.Cancel' | transloco }}\n            </button>\n            <button type=\"submit\"\n              class=\"btn btn-primary\">\n              {{ 'Button.Submit' | transloco }}\n            </button>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.AdminService }, { type: i2.ProductService }, { type: i2.NgbDateCustomParserFormatter }, { type: i3.DatePipe }], propDecorators: { onSave: [] } });

package/esm2022/lib/components/subscriptions/subscription-products/subscription-products.component.mjs

@@ -53,10 +53,10 @@ export class SubscriptionProductsComponent extends AppBaseComponent {
             this.loading = false;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SubscriptionProductsComponent, deps: [{ token: i1.SubscriptionService }, { token: i0.Injector }, { token: i1.ProductService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SubscriptionProductsComponent, selector: "pw-subscription-products", usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\">\n  <ng-template [ngIf]=\"!isLoaded\">\n    <p-progressSpinner> </p-progressSpinner>\n  </ng-template>\n</div>\n<div class=\"primeng-datatable-container table-responsive mt-0\"\n  [class.hideTable]=\"totalRecords === 0\">\n  <p-table #dt\n    [value]=\"subscriptionProducts\"\n    [paginator]=\"true\"\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        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search subscription products...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\">{{ 'Label.Name' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.PricePerUnit' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.Currency' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.BillingFrequency' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.MinUnits' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.MaxUnits' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.PurchasedUnits' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.CalculatedPrice' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.IsDeleted' | transloco }}</th>\n        <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr>\n        <td data-head=\"Name\">{{ item.name }}</td>\n        <td data-head=\"Price Per Unit\">\n          <span>{{ (item.price_per_unit / 100).toFixed(2) }}\n            <i\n                            class=\"fa fa-info-circle\"\n                            *ngIf=\"item?.discount && objectKeys(item?.discount)?.length\"\n                            aria-hidden=\"true\"\n                            tooltipPosition=\"top\"\n                            [pTooltip]=\"item?.discount | json\"\n                        ></i>\n          </span>\n        </td>\n        <td data-head=\"Currency\">\n          <span [appDynamicBadge]=\"{ itemsArray: currency, item: item.currency }\"\n            color=\"blue-grey\"\n            class=\"badge\">{{ item.currency }}</span>\n        </td>\n        <td data-head=\"Billing Frequency\">\n          {{ item.billing_frequency }}\n          <span *ngIf=\"item?.pause_collection && objectKeys(item?.pause_collection)?.length\"\n            class=\"ms-2\"\n            [pTooltip]=\"item?.pause_collection | json\"\n            tooltipPosition=\"top\">\n            <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n          </span>\n        </td>\n        <td data-head=\"Min Units\">{{ item.min_units }}</td>\n        <td data-head=\"Max Units\">{{ item.max_units }}</td>\n        <td data-head=\"Purchased Units\">{{ item.purchased_units }}</td>\n        <td data-head=\"Calculated Price\">{{ (item.calculated_price / 100).toFixed(2) }}</td>\n        <td data-head=\"Deleted\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_deleted }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ item?.is_deleted ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Edit\"\n              *rbacAllow=\"'SubscriptionSuperAdmin'\"\n              [routerLink]=\"[\n                                routers.subscriptionProductDetails + item.subscription_product_id\n                            ]\"\n              [queryParams]=\"{ subscription_id: id }\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n</div>\n<div *ngIf=\"totalRecords === 0 && isLoaded\">\n  <pw-no-data [message]=\"'Admin.Subscriptions.NoSubscriptionProductsMessage' | transloco\">\n  </pw-no-data>\n</div>\n", dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], 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: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]" }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration"] }, { kind: "component", type: i10.NoDataComponent, selector: "pw-no-data", inputs: ["message"] }, { kind: "directive", type: i11.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i11.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i6.JsonPipe, name: "json" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SubscriptionProductsComponent, deps: [{ token: i1.SubscriptionService }, { token: i0.Injector }, { token: i1.ProductService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: SubscriptionProductsComponent, selector: "pw-subscription-products", usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\">\n  <ng-template [ngIf]=\"!isLoaded\">\n    <p-progressSpinner> </p-progressSpinner>\n  </ng-template>\n</div>\n<div class=\"primeng-datatable-container table-responsive mt-0\"\n  [class.hideTable]=\"totalRecords === 0\">\n  <p-table #dt\n    [value]=\"subscriptionProducts\"\n    [paginator]=\"true\"\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        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search subscription products...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\">{{ 'Label.Name' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.PricePerUnit' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.Currency' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.BillingFrequency' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.MinUnits' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.MaxUnits' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.PurchasedUnits' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.CalculatedPrice' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.IsDeleted' | transloco }}</th>\n        <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr>\n        <td data-head=\"Name\">{{ item.name }}</td>\n        <td data-head=\"Price Per Unit\">\n          <span>{{ (item.price_per_unit / 100).toFixed(2) }}\n            <i\n                            class=\"fa fa-info-circle\"\n                            *ngIf=\"item?.discount && objectKeys(item?.discount)?.length\"\n                            aria-hidden=\"true\"\n                            tooltipPosition=\"top\"\n                            [pTooltip]=\"item?.discount | json\"\n                        ></i>\n          </span>\n        </td>\n        <td data-head=\"Currency\">\n          <span [appDynamicBadge]=\"{ itemsArray: currency, item: item.currency }\"\n            color=\"blue-grey\"\n            class=\"badge\">{{ item.currency }}</span>\n        </td>\n        <td data-head=\"Billing Frequency\">\n          {{ item.billing_frequency }}\n          <span *ngIf=\"item?.pause_collection && objectKeys(item?.pause_collection)?.length\"\n            class=\"ms-2\"\n            [pTooltip]=\"item?.pause_collection | json\"\n            tooltipPosition=\"top\">\n            <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n          </span>\n        </td>\n        <td data-head=\"Min Units\">{{ item.min_units }}</td>\n        <td data-head=\"Max Units\">{{ item.max_units }}</td>\n        <td data-head=\"Purchased Units\">{{ item.purchased_units }}</td>\n        <td data-head=\"Calculated Price\">{{ (item.calculated_price / 100).toFixed(2) }}</td>\n        <td data-head=\"Deleted\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_deleted }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ item?.is_deleted ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Edit\"\n              *rbacAllow=\"'SubscriptionSuperAdmin'\"\n              [routerLink]=\"[\n                                routers.subscriptionProductDetails + item.subscription_product_id\n                            ]\"\n              [queryParams]=\"{ subscription_id: id }\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n</div>\n<div *ngIf=\"totalRecords === 0 && isLoaded\">\n  <pw-no-data [message]=\"'Admin.Subscriptions.NoSubscriptionProductsMessage' | transloco\">\n  </pw-no-data>\n</div>\n", dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], 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: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]" }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i9.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration"] }, { kind: "component", type: i10.NoDataComponent, selector: "pw-no-data", inputs: ["message"] }, { kind: "directive", type: i11.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i11.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i6.JsonPipe, name: "json" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SubscriptionProductsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SubscriptionProductsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-subscription-products', template: "<div class=\"w-100 text-center mt-3\">\n  <ng-template [ngIf]=\"!isLoaded\">\n    <p-progressSpinner> </p-progressSpinner>\n  </ng-template>\n</div>\n<div class=\"primeng-datatable-container table-responsive mt-0\"\n  [class.hideTable]=\"totalRecords === 0\">\n  <p-table #dt\n    [value]=\"subscriptionProducts\"\n    [paginator]=\"true\"\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        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search subscription products...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\">{{ 'Label.Name' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.PricePerUnit' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.Currency' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.BillingFrequency' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.MinUnits' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.MaxUnits' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.PurchasedUnits' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.CalculatedPrice' | transloco }}</th>\n        <th scope=\"true\">{{ 'Admin.Subscriptions.IsDeleted' | transloco }}</th>\n        <th class=\"actions-list-two\"\n          scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr>\n        <td data-head=\"Name\">{{ item.name }}</td>\n        <td data-head=\"Price Per Unit\">\n          <span>{{ (item.price_per_unit / 100).toFixed(2) }}\n            <i\n                            class=\"fa fa-info-circle\"\n                            *ngIf=\"item?.discount && objectKeys(item?.discount)?.length\"\n                            aria-hidden=\"true\"\n                            tooltipPosition=\"top\"\n                            [pTooltip]=\"item?.discount | json\"\n                        ></i>\n          </span>\n        </td>\n        <td data-head=\"Currency\">\n          <span [appDynamicBadge]=\"{ itemsArray: currency, item: item.currency }\"\n            color=\"blue-grey\"\n            class=\"badge\">{{ item.currency }}</span>\n        </td>\n        <td data-head=\"Billing Frequency\">\n          {{ item.billing_frequency }}\n          <span *ngIf=\"item?.pause_collection && objectKeys(item?.pause_collection)?.length\"\n            class=\"ms-2\"\n            [pTooltip]=\"item?.pause_collection | json\"\n            tooltipPosition=\"top\">\n            <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n          </span>\n        </td>\n        <td data-head=\"Min Units\">{{ item.min_units }}</td>\n        <td data-head=\"Max Units\">{{ item.max_units }}</td>\n        <td data-head=\"Purchased Units\">{{ item.purchased_units }}</td>\n        <td data-head=\"Calculated Price\">{{ (item.calculated_price / 100).toFixed(2) }}</td>\n        <td data-head=\"Deleted\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_deleted }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ item?.is_deleted ? 'Yes' : 'No' }}</span>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Edit\"\n              *rbacAllow=\"'SubscriptionSuperAdmin'\"\n              [routerLink]=\"[\n                                routers.subscriptionProductDetails + item.subscription_product_id\n                            ]\"\n              [queryParams]=\"{ subscription_id: id }\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n</div>\n<div *ngIf=\"totalRecords === 0 && isLoaded\">\n  <pw-no-data [message]=\"'Admin.Subscriptions.NoSubscriptionProductsMessage' | transloco\">\n  </pw-no-data>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.SubscriptionService }, { type: i0.Injector }, { type: i1.ProductService }] });

package/esm2022/lib/components/subscriptions/subscription-users/subscription-users.component.mjs

@@ -87,10 +87,10 @@ export class SubscriptionUsersComponent extends AppBaseComponent {
             this.loading = false;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SubscriptionUsersComponent, deps: [{ token: i1.SubscriptionService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1.AuthService }, { token: i1.WindowService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.8", type: SubscriptionUsersComponent, selector: "pw-subscription-users", viewQueries: [{ propertyName: "passwordValidationModalForImpersonate", first: true, predicate: ["passwordValidationModalForImpersonate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\">\n  <ng-template [ngIf]=\"!isLoaded\">\n    <p-progressSpinner> </p-progressSpinner>\n  </ng-template>\n</div>\n<div class=\"primeng-datatable-container table-responsive mt-0\"\n  [class.hideTable]=\"totalRecords === 0\">\n  <p-table #dt\n    [value]=\"subscriptionMembers\"\n    [paginator]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search subscription users...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"id\">\n          {{ 'Admin.Users.Id' | transloco }}\n          <p-sortIcon field=\"id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Label.FirstName' | transloco }}\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"last_name\">\n          {{ 'Label.LastName' | transloco }}\n          <p-sortIcon field=\"last_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"email\">\n          {{ 'Label.Email' | transloco }}\n          <p-sortIcon field=\"email\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"slug\">\n          {{ 'Admin.Subscriptions.NickName' | transloco }}\n          <p-sortIcon field=\"slug\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"has_password\">\n          {{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n          <p-sortIcon field=\"has_password\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"last_sign_in_at\">\n          {{ 'Admin.Subscriptions.LastLogin' | transloco }}\n          <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-user>\n      <tr>\n        <td data-head=\"Id\">{{ user.id }}</td>\n        <td data-head=\"First Name\">{{ user.first_name }}</td>\n        <td data-head=\"Last Name\">{{ user.last_name }}\n          <span *ngIf=\"user?.alpha\"\n            [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n            tooltipPosition=\"top\">\n            <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n          </span>\n          <span class=\"ms-2\"\n            *ngIf=\"user?.beta\"\n            [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n            tooltipPosition=\"top\">\n            <i class=\"fa-regular fa-square-b alpha-beta text-primary\" ></i>\n          </span>\n        </td>\n        <td data-head=\"Email\">{{ user.email }}</td>\n        <td data-head=\"Nick Name\">\n          <a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n        </td>\n        <td data-head=\"Email Confirm\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ user?.has_password ? 'Yes' : 'No' }}\n\n          </span>\n          <span class=\"ms-2\"\n            *ngIf=\"user?.blocked\"\n            [pTooltip]=\"'This user has been blocked'\"\n            tooltipPosition=\"top\">\n            <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n          </span>\n        </td>\n        <td data-head=\"Last Login\">\n          <span *ngIf=\"user?.current_sign_in_at; else lastSignin\">\n            <span>{{ user.current_sign_in_at | dateFormat }}</span>\n            <span *ngIf=\"user.current_sign_in_at\">&nbsp;({{ user.current_sign_in_at | sinceAgo }})</span>\n          </span>\n          <ng-template #lastSignin>\n            <span>\n              <span>{{ user.last_sign_in_at | dateFormat }}</span>\n              <span *ngIf=\"user.last_sign_in_at\">&nbsp;({{ user.last_sign_in_at | sinceAgo }})</span>\n            </span>\n          </ng-template>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Log in as\"\n              *rbacAllow=\"'Pages.Alpha'\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fas fa-people-arrows\"\n                                (click)=\"onImpersonate(user)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.usersDetails + user.id]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n</div>\n<div *ngIf=\"totalRecords === 0 && isLoaded\">\n  <pw-no-data [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n  </pw-no-data>\n</div>\n<!-- password validaton modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n  (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n", styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}\n"], dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], 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: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]" }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.PasswordValidationComponent, selector: "pw-password-validation", outputs: ["successEvent"] }, { kind: "directive", type: i9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i10.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration"] }, { kind: "component", type: i8.NoDataComponent, selector: "pw-no-data", inputs: ["message"] }, { kind: "directive", type: i11.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i11.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.SinceAgoPipe, name: "sinceAgo" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SubscriptionUsersComponent, deps: [{ token: i1.SubscriptionService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1.AuthService }, { token: i1.WindowService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.1", type: SubscriptionUsersComponent, selector: "pw-subscription-users", viewQueries: [{ propertyName: "passwordValidationModalForImpersonate", first: true, predicate: ["passwordValidationModalForImpersonate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\">\n  <ng-template [ngIf]=\"!isLoaded\">\n    <p-progressSpinner> </p-progressSpinner>\n  </ng-template>\n</div>\n<div class=\"primeng-datatable-container table-responsive mt-0\"\n  [class.hideTable]=\"totalRecords === 0\">\n  <p-table #dt\n    [value]=\"subscriptionMembers\"\n    [paginator]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search subscription users...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"id\">\n          {{ 'Admin.Users.Id' | transloco }}\n          <p-sortIcon field=\"id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Label.FirstName' | transloco }}\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"last_name\">\n          {{ 'Label.LastName' | transloco }}\n          <p-sortIcon field=\"last_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"email\">\n          {{ 'Label.Email' | transloco }}\n          <p-sortIcon field=\"email\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"slug\">\n          {{ 'Admin.Subscriptions.NickName' | transloco }}\n          <p-sortIcon field=\"slug\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"has_password\">\n          {{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n          <p-sortIcon field=\"has_password\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"last_sign_in_at\">\n          {{ 'Admin.Subscriptions.LastLogin' | transloco }}\n          <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-user>\n      <tr>\n        <td data-head=\"Id\">{{ user.id }}</td>\n        <td data-head=\"First Name\">{{ user.first_name }}</td>\n        <td data-head=\"Last Name\">{{ user.last_name }}\n          <span *ngIf=\"user?.alpha\"\n            [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n            tooltipPosition=\"top\">\n            <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n          </span>\n          <span class=\"ms-2\"\n            *ngIf=\"user?.beta\"\n            [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n            tooltipPosition=\"top\">\n            <i class=\"fa-regular fa-square-b alpha-beta text-primary\" ></i>\n          </span>\n        </td>\n        <td data-head=\"Email\">{{ user.email }}</td>\n        <td data-head=\"Nick Name\">\n          <a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n        </td>\n        <td data-head=\"Email Confirm\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ user?.has_password ? 'Yes' : 'No' }}\n\n          </span>\n          <span class=\"ms-2\"\n            *ngIf=\"user?.blocked\"\n            [pTooltip]=\"'This user has been blocked'\"\n            tooltipPosition=\"top\">\n            <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n          </span>\n        </td>\n        <td data-head=\"Last Login\">\n          <span *ngIf=\"user?.current_sign_in_at; else lastSignin\">\n            <span>{{ user.current_sign_in_at | dateFormat }}</span>\n            <span *ngIf=\"user.current_sign_in_at\">&nbsp;({{ user.current_sign_in_at | sinceAgo }})</span>\n          </span>\n          <ng-template #lastSignin>\n            <span>\n              <span>{{ user.last_sign_in_at | dateFormat }}</span>\n              <span *ngIf=\"user.last_sign_in_at\">&nbsp;({{ user.last_sign_in_at | sinceAgo }})</span>\n            </span>\n          </ng-template>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Log in as\"\n              *rbacAllow=\"'Pages.Alpha'\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fas fa-people-arrows\"\n                                (click)=\"onImpersonate(user)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.usersDetails + user.id]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n</div>\n<div *ngIf=\"totalRecords === 0 && isLoaded\">\n  <pw-no-data [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n  </pw-no-data>\n</div>\n<!-- password validaton modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n  (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n", styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}\n"], dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "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", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], 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: i3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i4.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]" }, { kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.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: i7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.PasswordValidationComponent, selector: "pw-password-validation", outputs: ["successEvent"] }, { kind: "directive", type: i9.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i10.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration"] }, { kind: "component", type: i8.NoDataComponent, selector: "pw-no-data", inputs: ["message"] }, { kind: "directive", type: i11.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color"] }, { kind: "directive", type: i11.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i14.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i14.SinceAgoPipe, name: "sinceAgo" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.8", ngImport: i0, type: SubscriptionUsersComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.1", ngImport: i0, type: SubscriptionUsersComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-subscription-users', template: "<div class=\"w-100 text-center mt-3\">\n  <ng-template [ngIf]=\"!isLoaded\">\n    <p-progressSpinner> </p-progressSpinner>\n  </ng-template>\n</div>\n<div class=\"primeng-datatable-container table-responsive mt-0\"\n  [class.hideTable]=\"totalRecords === 0\">\n  <p-table #dt\n    [value]=\"subscriptionMembers\"\n    [paginator]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [lazy]=\"true\"\n    [totalRecords]=\"totalRecords\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\"\n    [customSort]=\"true\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"text-end\">\n        <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n        <input type=\"text\"\n          [(ngModel)]=\"searchText\"\n          pInputText\n          size=\"50\"\n          placeholder=\"Search subscription users...\"\n          (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n          class=\"mw-90\" />\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\"\n          pSortableColumn=\"id\">\n          {{ 'Admin.Users.Id' | transloco }}\n          <p-sortIcon field=\"id\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"first_name\">\n          {{ 'Label.FirstName' | transloco }}\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"last_name\">\n          {{ 'Label.LastName' | transloco }}\n          <p-sortIcon field=\"last_name\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"email\">\n          {{ 'Label.Email' | transloco }}\n          <p-sortIcon field=\"email\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"slug\">\n          {{ 'Admin.Subscriptions.NickName' | transloco }}\n          <p-sortIcon field=\"slug\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"has_password\">\n          {{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n          <p-sortIcon field=\"has_password\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"last_sign_in_at\">\n          {{ 'Admin.Subscriptions.LastLogin' | transloco }}\n          <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-user>\n      <tr>\n        <td data-head=\"Id\">{{ user.id }}</td>\n        <td data-head=\"First Name\">{{ user.first_name }}</td>\n        <td data-head=\"Last Name\">{{ user.last_name }}\n          <span *ngIf=\"user?.alpha\"\n            [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n            tooltipPosition=\"top\">\n            <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n          </span>\n          <span class=\"ms-2\"\n            *ngIf=\"user?.beta\"\n            [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n            tooltipPosition=\"top\">\n            <i class=\"fa-regular fa-square-b alpha-beta text-primary\" ></i>\n          </span>\n        </td>\n        <td data-head=\"Email\">{{ user.email }}</td>\n        <td data-head=\"Nick Name\">\n          <a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n        </td>\n        <td data-head=\"Email Confirm\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n            color=\"success-danger\"\n            class=\"badge\">{{ user?.has_password ? 'Yes' : 'No' }}\n\n          </span>\n          <span class=\"ms-2\"\n            *ngIf=\"user?.blocked\"\n            [pTooltip]=\"'This user has been blocked'\"\n            tooltipPosition=\"top\">\n            <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n          </span>\n        </td>\n        <td data-head=\"Last Login\">\n          <span *ngIf=\"user?.current_sign_in_at; else lastSignin\">\n            <span>{{ user.current_sign_in_at | dateFormat }}</span>\n            <span *ngIf=\"user.current_sign_in_at\">&nbsp;({{ user.current_sign_in_at | sinceAgo }})</span>\n          </span>\n          <ng-template #lastSignin>\n            <span>\n              <span>{{ user.last_sign_in_at | dateFormat }}</span>\n              <span *ngIf=\"user.last_sign_in_at\">&nbsp;({{ user.last_sign_in_at | sinceAgo }})</span>\n            </span>\n          </ng-template>\n        </td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline\">\n            <li ngbTooltip=\"Log in as\"\n              *rbacAllow=\"'Pages.Alpha'\"\n              class=\"me-2 me-sm-3\">\n              <i\n                                class=\"fas fa-people-arrows\"\n                                (click)=\"onImpersonate(user)\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </li>\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              [routerLink]=\"[routers.usersDetails + user.id]\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <span class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n</div>\n<div *ngIf=\"totalRecords === 0 && isLoaded\">\n  <pw-no-data [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n  </pw-no-data>\n</div>\n<!-- password validaton modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n  (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n", styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}\n"] }]
         }], ctorParameters: () => [{ type: i1.SubscriptionService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1.AuthService }, { type: i1.WindowService }], propDecorators: { passwordValidationModalForImpersonate: [{