@posiwise/enterprise-module 0.0.109 → 0.0.110

package/fesm2022/posiwise-enterprise-module.mjs

@@ -836,7 +836,7 @@ class EnterpriseMembersComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: EnterpriseMembersComponent, deps: [{ token: i0.Injector }, { token: i1$1.UntypedFormBuilder }, { token: i1.SubscriptionService }, { token: i1.AuthService }, { token: i3$2.AdminService }, { token: i0.ChangeDetectorRef }, { token: i4$1.ConfirmDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: EnterpriseMembersComponent, isStandalone: false, selector: "pw-enterprise-members", usesInheritance: true, ngImport: i0, template: "<section>\n  <div class=\"row\">\n    <div class=\"col-12 mb-3\">\n      <div class=\"title\">\n        @if (isAddEnabled) {\n          <a\n            aria-label=\"Navigate to Target\"\n            (click)=\"back()\"\n            class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n          }\n          <h2>Enterprise Members for {{ productName }}</h2>\n        </div>\n        @if (!isAddEnabled) {\n          <p>\n            You'll find in this section all the members of your subscription. Based on your role\n            in the enterprise, you'll be able to see, add, edit or remove access to them.\n          </p>\n        }\n        @if (isAddEnabled) {\n          <p>Here you can add members to your subscriptions</p>\n        }\n      </div>\n    </div>\n  </section>\n  @if (!isAddEnabled) {\n    <section id=\"enrolled\"\n      >\n      <div class=\"row\">\n        @if (hasAccess) {\n          <div class=\"col-12 text-end\"\n            >\n            @if (!isAddEnabled) {\n              <button class=\"btn btn-sm btn-outline-primary\"\n                (click)=\"isAddEnabled = true\">\n                <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n              </button>\n            }\n          </div>\n        }\n      </div>\n      @if (!isLoaded) {\n        <div class=\"w-100 text-center mt-3\"\n          >\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </div>\n      }\n      <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n        [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n        <p-table #dt\n          [value]=\"subscriptionMembers?.members\"\n          [paginator]=\"subscriptionMembers?.members.length !== 0\"\n          [totalRecords]=\"subscriptionMembers?.members.length\"\n          [globalFilterFields]=\"['email', 'name']\"\n          [rows]=\"PAGE_SIZE\"\n          [loading]=\"loading\"\n          [lazy]=\"true\"\n          (onLazyLoad)=\"onLazyLoad($event)\">\n          <ng-template pTemplate=\"caption\">\n            <div class=\"text-end\">\n              <label for=\"enterprise-members-search-contact\" class=\"visually-hidden\">Search contact</label>\n              <p-iconfield iconPosition=\"left\">\n                <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n                <input type=\"text\"\n                  id=\"enterprise-members-search-contact\"\n                  name=\"enterprise-members-search-contact\"\n                  [(ngModel)]=\"searchText\"\n                  pInputText\n                  placeholder=\"Search contact...\"\n                  (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n              </p-iconfield>\n            </div>\n          </ng-template>\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Label.Name' | transloco }}</th>\n              <th scope=\"true\">{{ 'Label.Email' | transloco }}</th>\n              <th scope=\"true\">{{ 'Enterprise.Members.Team' | transloco }}</th>\n              <th scope=\"true\">{{ 'Label.Roles' | transloco }}</th>\n              <th scope=\"true\">{{ 'Enterprise.Members.LastSeen' | transloco }}</th>\n              <th scope=\"true\" class=\"actions-list-three\">{{ 'Label.Actions' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-users>\n            <tr class=\"table-row\">\n              <td data-head=\"Name\">\n                <span>\n                  <a [routerLink]=\"['/members', users.slug]\">{{\n                    users?.preferred_name\n                    ? users?.preferred_name\n                    : (users | ifNameNullShowEmail)\n                    }}\n                  </a>\n                  @if (!users?.has_password) {\n                    <span class=\"ms-2\"\n                      [pTooltip]=\"'This user hasn\\'t joined yet'\"\n                      tooltipPosition=\"top\">\n                      <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n                    </span>\n                  }\n                  @if (users?.enable_two_factor_authenticator) {\n                    <span class=\"ms-2\"\n                      [pTooltip]=\"'2FA enabled'\"\n                      tooltipPosition=\"top\">\n                      <i class=\"fa-solid fa-lock text-success-muted\"></i>\n                    </span>\n                  }\n                  @if (users?.blocked) {\n                    <span class=\"ms-2\"\n                      [pTooltip]=\"'This user has been blocked, please contact support'\"\n                      tooltipPosition=\"top\">\n                      <i class=\"fa-solid fa-hexagon-exclamation text-danger\"></i>\n                    </span>\n                  }\n                  @if (users.id === subscriptionOwner) {\n                    <span class=\"badge bg-dark mx-1\"> Owner </span>\n                  }\n                  @if (subscriptionMembers.admins.includes(users.id)) {\n                    <span class=\"badge bg-success mx-1 admin-badge\"> Admin </span>\n                  }\n                  @if (users.id === user.id) {\n                    <span class=\"badge mx-1 you-badge\"> You </span>\n                  }\n                </span>\n              </td>\n              <td data-head=\"Email\">{{ users.email }}</td>\n              <td data-head=\"Team\">\n                @for (groups of users.user_groups; track groups) {\n                  <span><a class=\"badge bg-primary text-white ms-2\"\n                [routerLink]=\"[\n                                    '/' + subscription?.slug + '/enterprise',\n                                    'groups',\n                                    groups.id,\n                                    'members'\n                                ]\">{{ groups.name }}</a>\n                </span>\n              }\n            </td>\n            <td data-head=\"Roles\">\n              @if (hasAccess && allRoles.length) {\n                <div *rbacAllow=\"'Pages.Alpha'\">\n                  <p-multiSelect [(ngModel)]=\"users.selected_roles\" [options]=\"allRoles\" (onChange)=\"onRoleChange($event, users)\"\n                    inputId=\"enterprise-members-roles-{{ users.id }}\"\n                    placeholder=\"Set roles\" [showHeader]=\"false\" appendTo=\"body\">\n                  </p-multiSelect>\n                </div>\n              }\n            </td>\n            <td data-head=\"Last seen\">\n              @if (users?.current_sign_in_at) {\n                <span>\n                  <span>{{ users.current_sign_in_at | dateFormat }}</span>\n                  @if (users.current_sign_in_at) {\n                    <span>&nbsp;({{ users.current_sign_in_at | sinceAgo }})</span>\n                  }\n                </span>\n              } @else {\n                <span>\n                  <span>{{ users.last_sign_in_at | dateFormat }}</span>\n                  @if (users.last_sign_in_at) {\n                    <span>&nbsp;({{ users.last_sign_in_at | sinceAgo }})</span>\n                  }\n                </span>\n              }\n            </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline\">\n                <!-- Message Icon -->\n                <li ngbTooltip=\"Message\"\n                  class=\"me-2 me-sm-3 mx-2\"\n                  *rbacAllow=\"chatPermission\"\n                  [class.invisible]=\"user && user.id === users.id\"\n                  [routerLink]=\"['/message']\"\n                  [fragment]=\"users.slug\">\n                  <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n                </li>\n                <!-- Action Buttons -->\n                @if (hasAccess && users.id !== subscriptionOwner) {\n                  <!-- Make Admin -->\n                  @if (!this.subscriptionMembers.admins.includes(users.id)) {\n                    <li ngbTooltip=\"Make Admin\"\n                      class=\"me-2 me-sm-3 mx-2\"\n                      >\n                      <i\n                        class=\"fa fa-user-crown fa-lg success\"\n                        (click)=\"makeAdmin(users, true)\"\n                        (keydown.enter)=\"makeAdmin(users, true)\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </li>\n                  }\n                  <li></li>\n                  <!-- Remove Admin -->\n                  @if (this.subscriptionMembers.admins.includes(users.id)) {\n                    <li ngbTooltip=\"Remove Admin\"\n                      class=\"me-2 me-sm-3 mx-2\"\n                      >\n                      <i\n                        class=\"fa fa-ban warning fa-lg\"\n                        (keydown.enter)=\"makeAdmin(users, false)\"\n                        (click)=\"makeAdmin(users, false)\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </li>\n                  }\n                } @else {\n                  <li class=\"mx-3\"></li>\n                }\n                @if (hasAccess) {\n                  @if (users.id !== subscriptionOwner) {\n                    <li class=\"delete-user mx-2\"\n                      ngbTooltip=\"Remove user from subscription\"\n                      >\n                      <i\n                        class=\"fa fa-trash delete-icon\"\n                        (keydown.enter)=\"onDelete(users)\"\n                        (keydown.space)=\"onDelete(users)\"\n                        (click)=\"onDelete(users)\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </li>\n                  }\n                }\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if (subscriptionMembers?.members.length !== 0) {\n        <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"subscriptionMembers?.members.length || 0\" />\n      }\n    </div>\n  </section>\n}\n\n@if (isAddEnabled) {\n  <section id=\"manage-members\"\n    >\n    <h5 class=\"ms-2 pt-3\">Upload File (CSV)</h5>\n    <div class=\"row p-2\">\n      <div class=\"col-12\">\n        <div class=\"upload-box\">\n          <div class=\"upload-box-content\">\n            <div class=\"drop-container\"\n              ngFileDrop\n              [options]=\"options\"\n              (uploadOutput)=\"onUploadOutput($event)\"\n              [uploadInput]=\"uploadInput\">\n              <p>\n                Drag files here or\n                <label class=\"upload-button\">\n                  <input type=\"file\"\n                    id=\"enterprise-members-csv-upload\"\n                    name=\"enterprise-members-csv-upload\"\n                    ngFileSelect\n                    [options]=\"options\"\n                    (uploadOutput)=\"onUploadOutput($event)\"\n                    [uploadInput]=\"uploadInput\"\n                    multiple />\n                  browse\n                </label>\n                to upload.\n              </p>\n            </div>\n            @for (f of files; track f; let i = $index) {\n              <div class=\"upload-item\"\n                >\n                <div class=\"upload-item-content\">\n                  <div class=\"filename\">\n                    <div class=\"filename-left\">\n                      <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n                      <span>{{ f.name }}</span>\n                    </div>\n                  </div>\n                  <div class=\"progress-content\">\n                    <div class=\"progress\">\n                      <span class=\"bar\"\n                        [style.width]=\"f?.progress?.data?.percentage + '%'\"\n                      [class.is-done]=\"f?.progress?.data?.percentage === 100\"></span>\n                    </div>\n                  </div>\n                  <div class=\"progress-text-content\">\n                    <span class=\"progress-text\"\n                      [class.is-done]=\"f?.progress?.data?.percentage === 100\">\n                      <span>{{ f.progress?.data?.percentage }}% </span>\n                      @if (f.progress?.data?.percentage !== 100) {\n                        <span>Uploading...</span>\n                      }\n                      @if (f.progress?.data?.percentage === 100) {\n                        <span>Done</span>\n                      }\n                    </span>\n                    @if (\n                      f.progress?.data?.percentage !== 0 &&\n                      f.progress?.data?.percentage !== 100\n                      ) {\n                      <span class=\"speed-and-eta-text\"\n                        >\n                        <span>{{ f.progress?.data?.speedHuman }} </span>\n                        <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n                      </span>\n                    }\n                  </div>\n                </div>\n              </div>\n            }\n            <div class=\"help-text\">\n              <span>Note: You can upload a .csv file containing the comma separated emails\n              of the members to add.</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <h5 class=\"ms-2 pt-3 d-inline-block me-2\">Add Member's Email</h5>\n    <small><strong> (Available {{ availableUnits }} Seats) </strong></small>\n    <div class=\"p-2\">\n      <form [formGroup]=\"form\"\n        (ngSubmit)=\"onSignUpMember()\">\n        @for (\n          item of form.get('emailsFormArray')['controls']; track\n          item; let i = $index; let last = $last) {\n          <div formArrayName=\"emailsFormArray\"\n            >\n            <div [formGroupName]=\"i\">\n              <div class=\"row mb-2\">\n                <label class=\"col-12 col-md-4 text-md-end col-form-label col-form-label-sm\" [attr.for]=\"'enterprise-members-email-' + i\">\n                #{{ i + 1 }}</label>\n                <div class=\"col-10 col-md-4\">\n                  <input formControlName=\"email\"\n                    [id]=\"'enterprise-members-email-' + i\"\n                    class=\"form-control form-control-sm\"\n                    placeholder=\"Email\" id=\"input_email_3\" name=\"input_email_3\"/>\n                </div>\n                <div class=\"col-2\">\n                  <button class=\"btn btn-sm btn-danger\"\n                    type=\"button\">\n                    <i\n                      class=\"fa fa-times\"\n                      title=\"Delete\"\n                      (click)=\"removeItem(i)\"\n                      (keydown.enter)=\"removeItem(i)\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </button>\n                  @if (last && emailsFormArray?.controls?.length < availableUnits) {\n                    <i\n                      class=\"btn btn-sm btn-primary fal fa-plus ms-2\"\n                      title=\"Add More\"\n                      (click)=\"addItem()\"\n                      (keydown.enter)=\"addItem()\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n        <div class=\"text-center mt-2\">\n          <button class=\"btn btn-sm btn-outline-default me-2\"\n            (click)=\"isAddEnabled = false\">\n            <i class=\"fa fa-plus-times\" aria-hidden=\"true\"></i>\n            {{ 'Button.Back' | transloco }}\n          </button>\n          <button type=\"submit\"\n            class=\"btn btn-sm btn-outline-primary me-2\"\n            [buttonBusy]=\"buttonBusy\"\n            [disabled]=\"form.invalid || buttonBusy\">\n            Add Members\n          </button>\n        </div>\n      </form>\n    </div>\n  </section>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}a.previous i{top:0}.pw-tab .card{min-height:auto}td[data-head=Roles]{vertical-align:middle;min-width:200px;max-width:220px}td[data-head=Roles] p-multiselect{width:100%}.title{display:flex}.table-row{vertical-align:top}.admin-badge,.you-badge{background-color:var(--first)}td{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i3$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i4.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i7.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "component", type: i13$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i12.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i13.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i4$1.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i14.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i16.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i16$1.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i16$1.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "pipe", type: i18.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i19.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i19.SinceAgoPipe, name: "sinceAgo" }, { kind: "pipe", type: i19.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: EnterpriseMembersComponent, isStandalone: false, selector: "pw-enterprise-members", usesInheritance: true, ngImport: i0, template: "<section>\n  <div class=\"row\">\n    <div class=\"col-12 mb-3\">\n      <div class=\"title\">\n        @if (isAddEnabled) {\n          <a\n            aria-label=\"Navigate to Target\"\n            (click)=\"back()\"\n            class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n          }\n          <h2>Enterprise Members for {{ productName }}</h2>\n        </div>\n        @if (!isAddEnabled) {\n          <p>\n            You'll find in this section all the members of your subscription. Based on your role\n            in the enterprise, you'll be able to see, add, edit or remove access to them.\n          </p>\n        }\n        @if (isAddEnabled) {\n          <p>Here you can add members to your subscriptions</p>\n        }\n      </div>\n    </div>\n  </section>\n  @if (!isAddEnabled) {\n    <section id=\"enrolled\"\n      >\n      <div class=\"row\">\n        @if (hasAccess) {\n          <div class=\"col-12 text-end\"\n            >\n            @if (!isAddEnabled) {\n              <button class=\"btn btn-sm btn-outline-primary\"\n                (click)=\"isAddEnabled = true\">\n                <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n              </button>\n            }\n          </div>\n        }\n      </div>\n      @if (!isLoaded) {\n        <div class=\"w-100 text-center mt-3\"\n          >\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </div>\n      }\n      <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n        [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n        <p-table #dt\n          [value]=\"subscriptionMembers?.members\"\n          [paginator]=\"subscriptionMembers?.members.length !== 0\"\n          [totalRecords]=\"subscriptionMembers?.members.length\"\n          [globalFilterFields]=\"['email', 'name']\"\n          [rows]=\"PAGE_SIZE\"\n          [loading]=\"loading\"\n          [lazy]=\"true\"\n          (onLazyLoad)=\"onLazyLoad($event)\">\n          <ng-template pTemplate=\"caption\">\n            <div class=\"text-end\">\n              <label for=\"enterprise-members-search-contact\" class=\"visually-hidden\">Search contact</label>\n              <p-iconfield iconPosition=\"left\">\n                <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n                <input type=\"text\"\n                  id=\"enterprise-members-search-contact\"\n                  name=\"enterprise-members-search-contact\"\n                  [(ngModel)]=\"searchText\"\n                  pInputText\n                  placeholder=\"Search contacts...\"\n                  (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n              </p-iconfield>\n            </div>\n          </ng-template>\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Label.Name' | transloco }}</th>\n              <th scope=\"true\">{{ 'Label.Email' | transloco }}</th>\n              <th scope=\"true\">{{ 'Enterprise.Members.Team' | transloco }}</th>\n              <th scope=\"true\">{{ 'Label.Roles' | transloco }}</th>\n              <th scope=\"true\">{{ 'Enterprise.Members.LastSeen' | transloco }}</th>\n              <th scope=\"true\" class=\"actions-list-three\">{{ 'Label.Actions' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-users>\n            <tr class=\"table-row\">\n              <td data-head=\"Name\">\n                <span>\n                  <a [routerLink]=\"['/members', users.slug]\">{{\n                    users?.preferred_name\n                    ? users?.preferred_name\n                    : (users | ifNameNullShowEmail)\n                    }}\n                  </a>\n                  @if (!users?.has_password) {\n                    <span class=\"ms-2\"\n                      [pTooltip]=\"'This user hasn\\'t joined yet'\"\n                      tooltipPosition=\"top\">\n                      <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n                    </span>\n                  }\n                  @if (users?.enable_two_factor_authenticator) {\n                    <span class=\"ms-2\"\n                      [pTooltip]=\"'2FA enabled'\"\n                      tooltipPosition=\"top\">\n                      <i class=\"fa-solid fa-lock text-success-muted\"></i>\n                    </span>\n                  }\n                  @if (users?.blocked) {\n                    <span class=\"ms-2\"\n                      [pTooltip]=\"'This user has been blocked, please contact support'\"\n                      tooltipPosition=\"top\">\n                      <i class=\"fa-solid fa-hexagon-exclamation text-danger\"></i>\n                    </span>\n                  }\n                  @if (users.id === subscriptionOwner) {\n                    <span class=\"badge bg-dark mx-1\"> Owner </span>\n                  }\n                  @if (subscriptionMembers.admins.includes(users.id)) {\n                    <span class=\"badge bg-success mx-1 admin-badge\"> Admin </span>\n                  }\n                  @if (users.id === user.id) {\n                    <span class=\"badge mx-1 you-badge\"> You </span>\n                  }\n                </span>\n              </td>\n              <td data-head=\"Email\">{{ users.email }}</td>\n              <td data-head=\"Team\">\n                @for (groups of users.user_groups; track groups) {\n                  <span><a class=\"badge bg-primary text-white ms-2\"\n                [routerLink]=\"[\n                                    '/' + subscription?.slug + '/enterprise',\n                                    'groups',\n                                    groups.id,\n                                    'members'\n                                ]\">{{ groups.name }}</a>\n                </span>\n              }\n            </td>\n            <td data-head=\"Roles\">\n              @if (hasAccess && allRoles.length) {\n                <div *rbacAllow=\"'Pages.Alpha'\">\n                  <p-multiSelect [(ngModel)]=\"users.selected_roles\" [options]=\"allRoles\" (onChange)=\"onRoleChange($event, users)\"\n                    inputId=\"enterprise-members-roles-{{ users.id }}\"\n                    placeholder=\"Set roles\" [showHeader]=\"false\" appendTo=\"body\">\n                  </p-multiSelect>\n                </div>\n              }\n            </td>\n            <td data-head=\"Last seen\">\n              @if (users?.current_sign_in_at) {\n                <span>\n                  <span>{{ users.current_sign_in_at | dateFormat }}</span>\n                  @if (users.current_sign_in_at) {\n                    <span>&nbsp;({{ users.current_sign_in_at | sinceAgo }})</span>\n                  }\n                </span>\n              } @else {\n                <span>\n                  <span>{{ users.last_sign_in_at | dateFormat }}</span>\n                  @if (users.last_sign_in_at) {\n                    <span>&nbsp;({{ users.last_sign_in_at | sinceAgo }})</span>\n                  }\n                </span>\n              }\n            </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline\">\n                <!-- Message Icon -->\n                <li ngbTooltip=\"Message\"\n                  class=\"me-2 me-sm-3 mx-2\"\n                  *rbacAllow=\"chatPermission\"\n                  [class.invisible]=\"user && user.id === users.id\"\n                  [routerLink]=\"['/message']\"\n                  [fragment]=\"users.slug\">\n                  <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n                </li>\n                <!-- Action Buttons -->\n                @if (hasAccess && users.id !== subscriptionOwner) {\n                  <!-- Make Admin -->\n                  @if (!this.subscriptionMembers.admins.includes(users.id)) {\n                    <li ngbTooltip=\"Make Admin\"\n                      class=\"me-2 me-sm-3 mx-2\"\n                      >\n                      <i\n                        class=\"fa fa-user-crown fa-lg success\"\n                        (click)=\"makeAdmin(users, true)\"\n                        (keydown.enter)=\"makeAdmin(users, true)\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </li>\n                  }\n                  <li></li>\n                  <!-- Remove Admin -->\n                  @if (this.subscriptionMembers.admins.includes(users.id)) {\n                    <li ngbTooltip=\"Remove Admin\"\n                      class=\"me-2 me-sm-3 mx-2\"\n                      >\n                      <i\n                        class=\"fa fa-ban warning fa-lg\"\n                        (keydown.enter)=\"makeAdmin(users, false)\"\n                        (click)=\"makeAdmin(users, false)\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </li>\n                  }\n                } @else {\n                  <li class=\"mx-3\"></li>\n                }\n                @if (hasAccess) {\n                  @if (users.id !== subscriptionOwner) {\n                    <li class=\"delete-user mx-2\"\n                      ngbTooltip=\"Remove user from subscription\"\n                      >\n                      <i\n                        class=\"fa fa-trash delete-icon\"\n                        (keydown.enter)=\"onDelete(users)\"\n                        (keydown.space)=\"onDelete(users)\"\n                        (click)=\"onDelete(users)\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </li>\n                  }\n                }\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if (subscriptionMembers?.members.length !== 0) {\n        <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"subscriptionMembers?.members.length || 0\" />\n      }\n    </div>\n  </section>\n}\n\n@if (isAddEnabled) {\n  <section id=\"manage-members\"\n    >\n    <h5 class=\"ms-2 pt-3\">Upload File (CSV)</h5>\n    <div class=\"row p-2\">\n      <div class=\"col-12\">\n        <div class=\"upload-box\">\n          <div class=\"upload-box-content\">\n            <div class=\"drop-container\"\n              ngFileDrop\n              [options]=\"options\"\n              (uploadOutput)=\"onUploadOutput($event)\"\n              [uploadInput]=\"uploadInput\">\n              <p>\n                Drag files here or\n                <label class=\"upload-button\">\n                  <input type=\"file\"\n                    id=\"enterprise-members-csv-upload\"\n                    name=\"enterprise-members-csv-upload\"\n                    ngFileSelect\n                    [options]=\"options\"\n                    (uploadOutput)=\"onUploadOutput($event)\"\n                    [uploadInput]=\"uploadInput\"\n                    multiple />\n                  browse\n                </label>\n                to upload.\n              </p>\n            </div>\n            @for (f of files; track f; let i = $index) {\n              <div class=\"upload-item\"\n                >\n                <div class=\"upload-item-content\">\n                  <div class=\"filename\">\n                    <div class=\"filename-left\">\n                      <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n                      <span>{{ f.name }}</span>\n                    </div>\n                  </div>\n                  <div class=\"progress-content\">\n                    <div class=\"progress\">\n                      <span class=\"bar\"\n                        [style.width]=\"f?.progress?.data?.percentage + '%'\"\n                      [class.is-done]=\"f?.progress?.data?.percentage === 100\"></span>\n                    </div>\n                  </div>\n                  <div class=\"progress-text-content\">\n                    <span class=\"progress-text\"\n                      [class.is-done]=\"f?.progress?.data?.percentage === 100\">\n                      <span>{{ f.progress?.data?.percentage }}% </span>\n                      @if (f.progress?.data?.percentage !== 100) {\n                        <span>Uploading...</span>\n                      }\n                      @if (f.progress?.data?.percentage === 100) {\n                        <span>Done</span>\n                      }\n                    </span>\n                    @if (\n                      f.progress?.data?.percentage !== 0 &&\n                      f.progress?.data?.percentage !== 100\n                      ) {\n                      <span class=\"speed-and-eta-text\"\n                        >\n                        <span>{{ f.progress?.data?.speedHuman }} </span>\n                        <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n                      </span>\n                    }\n                  </div>\n                </div>\n              </div>\n            }\n            <div class=\"help-text\">\n              <span>Note: You can upload a .csv file containing the comma separated emails\n              of the members to add.</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <h5 class=\"ms-2 pt-3 d-inline-block me-2\">Add Member's Email</h5>\n    <small><strong> (Available {{ availableUnits }} Seats) </strong></small>\n    <div class=\"p-2\">\n      <form [formGroup]=\"form\"\n        (ngSubmit)=\"onSignUpMember()\">\n        @for (\n          item of form.get('emailsFormArray')['controls']; track\n          item; let i = $index; let last = $last) {\n          <div formArrayName=\"emailsFormArray\"\n            >\n            <div [formGroupName]=\"i\">\n              <div class=\"row mb-2\">\n                <label class=\"col-12 col-md-4 text-md-end col-form-label col-form-label-sm\" [attr.for]=\"'enterprise-members-email-' + i\">\n                #{{ i + 1 }}</label>\n                <div class=\"col-10 col-md-4\">\n                  <input formControlName=\"email\"\n                    [id]=\"'enterprise-members-email-' + i\"\n                    class=\"form-control form-control-sm\"\n                    placeholder=\"Email\" id=\"input_email_3\" name=\"input_email_3\"/>\n                </div>\n                <div class=\"col-2\">\n                  <button class=\"btn btn-sm btn-danger\"\n                    type=\"button\">\n                    <i\n                      class=\"fa fa-times\"\n                      title=\"Delete\"\n                      (click)=\"removeItem(i)\"\n                      (keydown.enter)=\"removeItem(i)\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </button>\n                  @if (last && emailsFormArray?.controls?.length < availableUnits) {\n                    <i\n                      class=\"btn btn-sm btn-primary fal fa-plus ms-2\"\n                      title=\"Add More\"\n                      (click)=\"addItem()\"\n                      (keydown.enter)=\"addItem()\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n        <div class=\"text-center mt-2\">\n          <button class=\"btn btn-sm btn-outline-default me-2\"\n            (click)=\"isAddEnabled = false\">\n            <i class=\"fa fa-plus-times\" aria-hidden=\"true\"></i>\n            {{ 'Button.Back' | transloco }}\n          </button>\n          <button type=\"submit\"\n            class=\"btn btn-sm btn-outline-primary me-2\"\n            [buttonBusy]=\"buttonBusy\"\n            [disabled]=\"form.invalid || buttonBusy\">\n            Add Members\n          </button>\n        </div>\n      </form>\n    </div>\n  </section>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}a.previous i{top:0}.pw-tab .card{min-height:auto}td[data-head=Roles]{vertical-align:middle;min-width:200px;max-width:220px}td[data-head=Roles] p-multiselect{width:100%}.title{display:flex}.table-row{vertical-align:top}.admin-badge,.you-badge{background-color:var(--first)}td{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i3$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i4.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i5.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i6.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i7.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "component", type: i13$1.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "component", type: i12.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "component", type: i13.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i4$1.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i14.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "directive", type: i16.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i16$1.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i16$1.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "pipe", type: i18.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i19.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i19.SinceAgoPipe, name: "sinceAgo" }, { kind: "pipe", type: i19.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -846,7 +846,7 @@ __decorate([
 ], EnterpriseMembersComponent.prototype, "onSignUpMember", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: EnterpriseMembersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-enterprise-members', standalone: false, template: "<section>\n  <div class=\"row\">\n    <div class=\"col-12 mb-3\">\n      <div class=\"title\">\n        @if (isAddEnabled) {\n          <a\n            aria-label=\"Navigate to Target\"\n            (click)=\"back()\"\n            class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n          }\n          <h2>Enterprise Members for {{ productName }}</h2>\n        </div>\n        @if (!isAddEnabled) {\n          <p>\n            You'll find in this section all the members of your subscription. Based on your role\n            in the enterprise, you'll be able to see, add, edit or remove access to them.\n          </p>\n        }\n        @if (isAddEnabled) {\n          <p>Here you can add members to your subscriptions</p>\n        }\n      </div>\n    </div>\n  </section>\n  @if (!isAddEnabled) {\n    <section id=\"enrolled\"\n      >\n      <div class=\"row\">\n        @if (hasAccess) {\n          <div class=\"col-12 text-end\"\n            >\n            @if (!isAddEnabled) {\n              <button class=\"btn btn-sm btn-outline-primary\"\n                (click)=\"isAddEnabled = true\">\n                <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n              </button>\n            }\n          </div>\n        }\n      </div>\n      @if (!isLoaded) {\n        <div class=\"w-100 text-center mt-3\"\n          >\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </div>\n      }\n      <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n        [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n        <p-table #dt\n          [value]=\"subscriptionMembers?.members\"\n          [paginator]=\"subscriptionMembers?.members.length !== 0\"\n          [totalRecords]=\"subscriptionMembers?.members.length\"\n          [globalFilterFields]=\"['email', 'name']\"\n          [rows]=\"PAGE_SIZE\"\n          [loading]=\"loading\"\n          [lazy]=\"true\"\n          (onLazyLoad)=\"onLazyLoad($event)\">\n          <ng-template pTemplate=\"caption\">\n            <div class=\"text-end\">\n              <label for=\"enterprise-members-search-contact\" class=\"visually-hidden\">Search contact</label>\n              <p-iconfield iconPosition=\"left\">\n                <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n                <input type=\"text\"\n                  id=\"enterprise-members-search-contact\"\n                  name=\"enterprise-members-search-contact\"\n                  [(ngModel)]=\"searchText\"\n                  pInputText\n                  placeholder=\"Search contact...\"\n                  (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n              </p-iconfield>\n            </div>\n          </ng-template>\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Label.Name' | transloco }}</th>\n              <th scope=\"true\">{{ 'Label.Email' | transloco }}</th>\n              <th scope=\"true\">{{ 'Enterprise.Members.Team' | transloco }}</th>\n              <th scope=\"true\">{{ 'Label.Roles' | transloco }}</th>\n              <th scope=\"true\">{{ 'Enterprise.Members.LastSeen' | transloco }}</th>\n              <th scope=\"true\" class=\"actions-list-three\">{{ 'Label.Actions' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-users>\n            <tr class=\"table-row\">\n              <td data-head=\"Name\">\n                <span>\n                  <a [routerLink]=\"['/members', users.slug]\">{{\n                    users?.preferred_name\n                    ? users?.preferred_name\n                    : (users | ifNameNullShowEmail)\n                    }}\n                  </a>\n                  @if (!users?.has_password) {\n                    <span class=\"ms-2\"\n                      [pTooltip]=\"'This user hasn\\'t joined yet'\"\n                      tooltipPosition=\"top\">\n                      <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n                    </span>\n                  }\n                  @if (users?.enable_two_factor_authenticator) {\n                    <span class=\"ms-2\"\n                      [pTooltip]=\"'2FA enabled'\"\n                      tooltipPosition=\"top\">\n                      <i class=\"fa-solid fa-lock text-success-muted\"></i>\n                    </span>\n                  }\n                  @if (users?.blocked) {\n                    <span class=\"ms-2\"\n                      [pTooltip]=\"'This user has been blocked, please contact support'\"\n                      tooltipPosition=\"top\">\n                      <i class=\"fa-solid fa-hexagon-exclamation text-danger\"></i>\n                    </span>\n                  }\n                  @if (users.id === subscriptionOwner) {\n                    <span class=\"badge bg-dark mx-1\"> Owner </span>\n                  }\n                  @if (subscriptionMembers.admins.includes(users.id)) {\n                    <span class=\"badge bg-success mx-1 admin-badge\"> Admin </span>\n                  }\n                  @if (users.id === user.id) {\n                    <span class=\"badge mx-1 you-badge\"> You </span>\n                  }\n                </span>\n              </td>\n              <td data-head=\"Email\">{{ users.email }}</td>\n              <td data-head=\"Team\">\n                @for (groups of users.user_groups; track groups) {\n                  <span><a class=\"badge bg-primary text-white ms-2\"\n                [routerLink]=\"[\n                                    '/' + subscription?.slug + '/enterprise',\n                                    'groups',\n                                    groups.id,\n                                    'members'\n                                ]\">{{ groups.name }}</a>\n                </span>\n              }\n            </td>\n            <td data-head=\"Roles\">\n              @if (hasAccess && allRoles.length) {\n                <div *rbacAllow=\"'Pages.Alpha'\">\n                  <p-multiSelect [(ngModel)]=\"users.selected_roles\" [options]=\"allRoles\" (onChange)=\"onRoleChange($event, users)\"\n                    inputId=\"enterprise-members-roles-{{ users.id }}\"\n                    placeholder=\"Set roles\" [showHeader]=\"false\" appendTo=\"body\">\n                  </p-multiSelect>\n                </div>\n              }\n            </td>\n            <td data-head=\"Last seen\">\n              @if (users?.current_sign_in_at) {\n                <span>\n                  <span>{{ users.current_sign_in_at | dateFormat }}</span>\n                  @if (users.current_sign_in_at) {\n                    <span>&nbsp;({{ users.current_sign_in_at | sinceAgo }})</span>\n                  }\n                </span>\n              } @else {\n                <span>\n                  <span>{{ users.last_sign_in_at | dateFormat }}</span>\n                  @if (users.last_sign_in_at) {\n                    <span>&nbsp;({{ users.last_sign_in_at | sinceAgo }})</span>\n                  }\n                </span>\n              }\n            </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline\">\n                <!-- Message Icon -->\n                <li ngbTooltip=\"Message\"\n                  class=\"me-2 me-sm-3 mx-2\"\n                  *rbacAllow=\"chatPermission\"\n                  [class.invisible]=\"user && user.id === users.id\"\n                  [routerLink]=\"['/message']\"\n                  [fragment]=\"users.slug\">\n                  <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n                </li>\n                <!-- Action Buttons -->\n                @if (hasAccess && users.id !== subscriptionOwner) {\n                  <!-- Make Admin -->\n                  @if (!this.subscriptionMembers.admins.includes(users.id)) {\n                    <li ngbTooltip=\"Make Admin\"\n                      class=\"me-2 me-sm-3 mx-2\"\n                      >\n                      <i\n                        class=\"fa fa-user-crown fa-lg success\"\n                        (click)=\"makeAdmin(users, true)\"\n                        (keydown.enter)=\"makeAdmin(users, true)\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </li>\n                  }\n                  <li></li>\n                  <!-- Remove Admin -->\n                  @if (this.subscriptionMembers.admins.includes(users.id)) {\n                    <li ngbTooltip=\"Remove Admin\"\n                      class=\"me-2 me-sm-3 mx-2\"\n                      >\n                      <i\n                        class=\"fa fa-ban warning fa-lg\"\n                        (keydown.enter)=\"makeAdmin(users, false)\"\n                        (click)=\"makeAdmin(users, false)\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </li>\n                  }\n                } @else {\n                  <li class=\"mx-3\"></li>\n                }\n                @if (hasAccess) {\n                  @if (users.id !== subscriptionOwner) {\n                    <li class=\"delete-user mx-2\"\n                      ngbTooltip=\"Remove user from subscription\"\n                      >\n                      <i\n                        class=\"fa fa-trash delete-icon\"\n                        (keydown.enter)=\"onDelete(users)\"\n                        (keydown.space)=\"onDelete(users)\"\n                        (click)=\"onDelete(users)\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </li>\n                  }\n                }\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if (subscriptionMembers?.members.length !== 0) {\n        <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"subscriptionMembers?.members.length || 0\" />\n      }\n    </div>\n  </section>\n}\n\n@if (isAddEnabled) {\n  <section id=\"manage-members\"\n    >\n    <h5 class=\"ms-2 pt-3\">Upload File (CSV)</h5>\n    <div class=\"row p-2\">\n      <div class=\"col-12\">\n        <div class=\"upload-box\">\n          <div class=\"upload-box-content\">\n            <div class=\"drop-container\"\n              ngFileDrop\n              [options]=\"options\"\n              (uploadOutput)=\"onUploadOutput($event)\"\n              [uploadInput]=\"uploadInput\">\n              <p>\n                Drag files here or\n                <label class=\"upload-button\">\n                  <input type=\"file\"\n                    id=\"enterprise-members-csv-upload\"\n                    name=\"enterprise-members-csv-upload\"\n                    ngFileSelect\n                    [options]=\"options\"\n                    (uploadOutput)=\"onUploadOutput($event)\"\n                    [uploadInput]=\"uploadInput\"\n                    multiple />\n                  browse\n                </label>\n                to upload.\n              </p>\n            </div>\n            @for (f of files; track f; let i = $index) {\n              <div class=\"upload-item\"\n                >\n                <div class=\"upload-item-content\">\n                  <div class=\"filename\">\n                    <div class=\"filename-left\">\n                      <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n                      <span>{{ f.name }}</span>\n                    </div>\n                  </div>\n                  <div class=\"progress-content\">\n                    <div class=\"progress\">\n                      <span class=\"bar\"\n                        [style.width]=\"f?.progress?.data?.percentage + '%'\"\n                      [class.is-done]=\"f?.progress?.data?.percentage === 100\"></span>\n                    </div>\n                  </div>\n                  <div class=\"progress-text-content\">\n                    <span class=\"progress-text\"\n                      [class.is-done]=\"f?.progress?.data?.percentage === 100\">\n                      <span>{{ f.progress?.data?.percentage }}% </span>\n                      @if (f.progress?.data?.percentage !== 100) {\n                        <span>Uploading...</span>\n                      }\n                      @if (f.progress?.data?.percentage === 100) {\n                        <span>Done</span>\n                      }\n                    </span>\n                    @if (\n                      f.progress?.data?.percentage !== 0 &&\n                      f.progress?.data?.percentage !== 100\n                      ) {\n                      <span class=\"speed-and-eta-text\"\n                        >\n                        <span>{{ f.progress?.data?.speedHuman }} </span>\n                        <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n                      </span>\n                    }\n                  </div>\n                </div>\n              </div>\n            }\n            <div class=\"help-text\">\n              <span>Note: You can upload a .csv file containing the comma separated emails\n              of the members to add.</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <h5 class=\"ms-2 pt-3 d-inline-block me-2\">Add Member's Email</h5>\n    <small><strong> (Available {{ availableUnits }} Seats) </strong></small>\n    <div class=\"p-2\">\n      <form [formGroup]=\"form\"\n        (ngSubmit)=\"onSignUpMember()\">\n        @for (\n          item of form.get('emailsFormArray')['controls']; track\n          item; let i = $index; let last = $last) {\n          <div formArrayName=\"emailsFormArray\"\n            >\n            <div [formGroupName]=\"i\">\n              <div class=\"row mb-2\">\n                <label class=\"col-12 col-md-4 text-md-end col-form-label col-form-label-sm\" [attr.for]=\"'enterprise-members-email-' + i\">\n                #{{ i + 1 }}</label>\n                <div class=\"col-10 col-md-4\">\n                  <input formControlName=\"email\"\n                    [id]=\"'enterprise-members-email-' + i\"\n                    class=\"form-control form-control-sm\"\n                    placeholder=\"Email\" id=\"input_email_3\" name=\"input_email_3\"/>\n                </div>\n                <div class=\"col-2\">\n                  <button class=\"btn btn-sm btn-danger\"\n                    type=\"button\">\n                    <i\n                      class=\"fa fa-times\"\n                      title=\"Delete\"\n                      (click)=\"removeItem(i)\"\n                      (keydown.enter)=\"removeItem(i)\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </button>\n                  @if (last && emailsFormArray?.controls?.length < availableUnits) {\n                    <i\n                      class=\"btn btn-sm btn-primary fal fa-plus ms-2\"\n                      title=\"Add More\"\n                      (click)=\"addItem()\"\n                      (keydown.enter)=\"addItem()\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n        <div class=\"text-center mt-2\">\n          <button class=\"btn btn-sm btn-outline-default me-2\"\n            (click)=\"isAddEnabled = false\">\n            <i class=\"fa fa-plus-times\" aria-hidden=\"true\"></i>\n            {{ 'Button.Back' | transloco }}\n          </button>\n          <button type=\"submit\"\n            class=\"btn btn-sm btn-outline-primary me-2\"\n            [buttonBusy]=\"buttonBusy\"\n            [disabled]=\"form.invalid || buttonBusy\">\n            Add Members\n          </button>\n        </div>\n      </form>\n    </div>\n  </section>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}a.previous i{top:0}.pw-tab .card{min-height:auto}td[data-head=Roles]{vertical-align:middle;min-width:200px;max-width:220px}td[data-head=Roles] p-multiselect{width:100%}.title{display:flex}.table-row{vertical-align:top}.admin-badge,.you-badge{background-color:var(--first)}td{vertical-align:middle}\n"] }]
+            args: [{ selector: 'pw-enterprise-members', standalone: false, template: "<section>\n  <div class=\"row\">\n    <div class=\"col-12 mb-3\">\n      <div class=\"title\">\n        @if (isAddEnabled) {\n          <a\n            aria-label=\"Navigate to Target\"\n            (click)=\"back()\"\n            class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n          }\n          <h2>Enterprise Members for {{ productName }}</h2>\n        </div>\n        @if (!isAddEnabled) {\n          <p>\n            You'll find in this section all the members of your subscription. Based on your role\n            in the enterprise, you'll be able to see, add, edit or remove access to them.\n          </p>\n        }\n        @if (isAddEnabled) {\n          <p>Here you can add members to your subscriptions</p>\n        }\n      </div>\n    </div>\n  </section>\n  @if (!isAddEnabled) {\n    <section id=\"enrolled\"\n      >\n      <div class=\"row\">\n        @if (hasAccess) {\n          <div class=\"col-12 text-end\"\n            >\n            @if (!isAddEnabled) {\n              <button class=\"btn btn-sm btn-outline-primary\"\n                (click)=\"isAddEnabled = true\">\n                <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n              </button>\n            }\n          </div>\n        }\n      </div>\n      @if (!isLoaded) {\n        <div class=\"w-100 text-center mt-3\"\n          >\n          <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n        </div>\n      }\n      <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n        [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n        <p-table #dt\n          [value]=\"subscriptionMembers?.members\"\n          [paginator]=\"subscriptionMembers?.members.length !== 0\"\n          [totalRecords]=\"subscriptionMembers?.members.length\"\n          [globalFilterFields]=\"['email', 'name']\"\n          [rows]=\"PAGE_SIZE\"\n          [loading]=\"loading\"\n          [lazy]=\"true\"\n          (onLazyLoad)=\"onLazyLoad($event)\">\n          <ng-template pTemplate=\"caption\">\n            <div class=\"text-end\">\n              <label for=\"enterprise-members-search-contact\" class=\"visually-hidden\">Search contact</label>\n              <p-iconfield iconPosition=\"left\">\n                <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n                <input type=\"text\"\n                  id=\"enterprise-members-search-contact\"\n                  name=\"enterprise-members-search-contact\"\n                  [(ngModel)]=\"searchText\"\n                  pInputText\n                  placeholder=\"Search contacts...\"\n                  (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n              </p-iconfield>\n            </div>\n          </ng-template>\n          <ng-template pTemplate=\"header\">\n            <tr>\n              <th scope=\"true\">{{ 'Label.Name' | transloco }}</th>\n              <th scope=\"true\">{{ 'Label.Email' | transloco }}</th>\n              <th scope=\"true\">{{ 'Enterprise.Members.Team' | transloco }}</th>\n              <th scope=\"true\">{{ 'Label.Roles' | transloco }}</th>\n              <th scope=\"true\">{{ 'Enterprise.Members.LastSeen' | transloco }}</th>\n              <th scope=\"true\" class=\"actions-list-three\">{{ 'Label.Actions' | transloco }}</th>\n            </tr>\n          </ng-template>\n          <ng-template pTemplate=\"body\"\n            let-users>\n            <tr class=\"table-row\">\n              <td data-head=\"Name\">\n                <span>\n                  <a [routerLink]=\"['/members', users.slug]\">{{\n                    users?.preferred_name\n                    ? users?.preferred_name\n                    : (users | ifNameNullShowEmail)\n                    }}\n                  </a>\n                  @if (!users?.has_password) {\n                    <span class=\"ms-2\"\n                      [pTooltip]=\"'This user hasn\\'t joined yet'\"\n                      tooltipPosition=\"top\">\n                      <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n                    </span>\n                  }\n                  @if (users?.enable_two_factor_authenticator) {\n                    <span class=\"ms-2\"\n                      [pTooltip]=\"'2FA enabled'\"\n                      tooltipPosition=\"top\">\n                      <i class=\"fa-solid fa-lock text-success-muted\"></i>\n                    </span>\n                  }\n                  @if (users?.blocked) {\n                    <span class=\"ms-2\"\n                      [pTooltip]=\"'This user has been blocked, please contact support'\"\n                      tooltipPosition=\"top\">\n                      <i class=\"fa-solid fa-hexagon-exclamation text-danger\"></i>\n                    </span>\n                  }\n                  @if (users.id === subscriptionOwner) {\n                    <span class=\"badge bg-dark mx-1\"> Owner </span>\n                  }\n                  @if (subscriptionMembers.admins.includes(users.id)) {\n                    <span class=\"badge bg-success mx-1 admin-badge\"> Admin </span>\n                  }\n                  @if (users.id === user.id) {\n                    <span class=\"badge mx-1 you-badge\"> You </span>\n                  }\n                </span>\n              </td>\n              <td data-head=\"Email\">{{ users.email }}</td>\n              <td data-head=\"Team\">\n                @for (groups of users.user_groups; track groups) {\n                  <span><a class=\"badge bg-primary text-white ms-2\"\n                [routerLink]=\"[\n                                    '/' + subscription?.slug + '/enterprise',\n                                    'groups',\n                                    groups.id,\n                                    'members'\n                                ]\">{{ groups.name }}</a>\n                </span>\n              }\n            </td>\n            <td data-head=\"Roles\">\n              @if (hasAccess && allRoles.length) {\n                <div *rbacAllow=\"'Pages.Alpha'\">\n                  <p-multiSelect [(ngModel)]=\"users.selected_roles\" [options]=\"allRoles\" (onChange)=\"onRoleChange($event, users)\"\n                    inputId=\"enterprise-members-roles-{{ users.id }}\"\n                    placeholder=\"Set roles\" [showHeader]=\"false\" appendTo=\"body\">\n                  </p-multiSelect>\n                </div>\n              }\n            </td>\n            <td data-head=\"Last seen\">\n              @if (users?.current_sign_in_at) {\n                <span>\n                  <span>{{ users.current_sign_in_at | dateFormat }}</span>\n                  @if (users.current_sign_in_at) {\n                    <span>&nbsp;({{ users.current_sign_in_at | sinceAgo }})</span>\n                  }\n                </span>\n              } @else {\n                <span>\n                  <span>{{ users.last_sign_in_at | dateFormat }}</span>\n                  @if (users.last_sign_in_at) {\n                    <span>&nbsp;({{ users.last_sign_in_at | sinceAgo }})</span>\n                  }\n                </span>\n              }\n            </td>\n            <td data-head=\"Action\">\n              <ul class=\"list-unstyled list-inline\">\n                <!-- Message Icon -->\n                <li ngbTooltip=\"Message\"\n                  class=\"me-2 me-sm-3 mx-2\"\n                  *rbacAllow=\"chatPermission\"\n                  [class.invisible]=\"user && user.id === users.id\"\n                  [routerLink]=\"['/message']\"\n                  [fragment]=\"users.slug\">\n                  <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n                </li>\n                <!-- Action Buttons -->\n                @if (hasAccess && users.id !== subscriptionOwner) {\n                  <!-- Make Admin -->\n                  @if (!this.subscriptionMembers.admins.includes(users.id)) {\n                    <li ngbTooltip=\"Make Admin\"\n                      class=\"me-2 me-sm-3 mx-2\"\n                      >\n                      <i\n                        class=\"fa fa-user-crown fa-lg success\"\n                        (click)=\"makeAdmin(users, true)\"\n                        (keydown.enter)=\"makeAdmin(users, true)\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </li>\n                  }\n                  <li></li>\n                  <!-- Remove Admin -->\n                  @if (this.subscriptionMembers.admins.includes(users.id)) {\n                    <li ngbTooltip=\"Remove Admin\"\n                      class=\"me-2 me-sm-3 mx-2\"\n                      >\n                      <i\n                        class=\"fa fa-ban warning fa-lg\"\n                        (keydown.enter)=\"makeAdmin(users, false)\"\n                        (click)=\"makeAdmin(users, false)\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </li>\n                  }\n                } @else {\n                  <li class=\"mx-3\"></li>\n                }\n                @if (hasAccess) {\n                  @if (users.id !== subscriptionOwner) {\n                    <li class=\"delete-user mx-2\"\n                      ngbTooltip=\"Remove user from subscription\"\n                      >\n                      <i\n                        class=\"fa fa-trash delete-icon\"\n                        (keydown.enter)=\"onDelete(users)\"\n                        (keydown.space)=\"onDelete(users)\"\n                        (click)=\"onDelete(users)\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </li>\n                  }\n                }\n              </ul>\n            </td>\n          </tr>\n        </ng-template>\n      </p-table>\n      @if (subscriptionMembers?.members.length !== 0) {\n        <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"subscriptionMembers?.members.length || 0\" />\n      }\n    </div>\n  </section>\n}\n\n@if (isAddEnabled) {\n  <section id=\"manage-members\"\n    >\n    <h5 class=\"ms-2 pt-3\">Upload File (CSV)</h5>\n    <div class=\"row p-2\">\n      <div class=\"col-12\">\n        <div class=\"upload-box\">\n          <div class=\"upload-box-content\">\n            <div class=\"drop-container\"\n              ngFileDrop\n              [options]=\"options\"\n              (uploadOutput)=\"onUploadOutput($event)\"\n              [uploadInput]=\"uploadInput\">\n              <p>\n                Drag files here or\n                <label class=\"upload-button\">\n                  <input type=\"file\"\n                    id=\"enterprise-members-csv-upload\"\n                    name=\"enterprise-members-csv-upload\"\n                    ngFileSelect\n                    [options]=\"options\"\n                    (uploadOutput)=\"onUploadOutput($event)\"\n                    [uploadInput]=\"uploadInput\"\n                    multiple />\n                  browse\n                </label>\n                to upload.\n              </p>\n            </div>\n            @for (f of files; track f; let i = $index) {\n              <div class=\"upload-item\"\n                >\n                <div class=\"upload-item-content\">\n                  <div class=\"filename\">\n                    <div class=\"filename-left\">\n                      <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n                      <span>{{ f.name }}</span>\n                    </div>\n                  </div>\n                  <div class=\"progress-content\">\n                    <div class=\"progress\">\n                      <span class=\"bar\"\n                        [style.width]=\"f?.progress?.data?.percentage + '%'\"\n                      [class.is-done]=\"f?.progress?.data?.percentage === 100\"></span>\n                    </div>\n                  </div>\n                  <div class=\"progress-text-content\">\n                    <span class=\"progress-text\"\n                      [class.is-done]=\"f?.progress?.data?.percentage === 100\">\n                      <span>{{ f.progress?.data?.percentage }}% </span>\n                      @if (f.progress?.data?.percentage !== 100) {\n                        <span>Uploading...</span>\n                      }\n                      @if (f.progress?.data?.percentage === 100) {\n                        <span>Done</span>\n                      }\n                    </span>\n                    @if (\n                      f.progress?.data?.percentage !== 0 &&\n                      f.progress?.data?.percentage !== 100\n                      ) {\n                      <span class=\"speed-and-eta-text\"\n                        >\n                        <span>{{ f.progress?.data?.speedHuman }} </span>\n                        <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n                      </span>\n                    }\n                  </div>\n                </div>\n              </div>\n            }\n            <div class=\"help-text\">\n              <span>Note: You can upload a .csv file containing the comma separated emails\n              of the members to add.</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n    <h5 class=\"ms-2 pt-3 d-inline-block me-2\">Add Member's Email</h5>\n    <small><strong> (Available {{ availableUnits }} Seats) </strong></small>\n    <div class=\"p-2\">\n      <form [formGroup]=\"form\"\n        (ngSubmit)=\"onSignUpMember()\">\n        @for (\n          item of form.get('emailsFormArray')['controls']; track\n          item; let i = $index; let last = $last) {\n          <div formArrayName=\"emailsFormArray\"\n            >\n            <div [formGroupName]=\"i\">\n              <div class=\"row mb-2\">\n                <label class=\"col-12 col-md-4 text-md-end col-form-label col-form-label-sm\" [attr.for]=\"'enterprise-members-email-' + i\">\n                #{{ i + 1 }}</label>\n                <div class=\"col-10 col-md-4\">\n                  <input formControlName=\"email\"\n                    [id]=\"'enterprise-members-email-' + i\"\n                    class=\"form-control form-control-sm\"\n                    placeholder=\"Email\" id=\"input_email_3\" name=\"input_email_3\"/>\n                </div>\n                <div class=\"col-2\">\n                  <button class=\"btn btn-sm btn-danger\"\n                    type=\"button\">\n                    <i\n                      class=\"fa fa-times\"\n                      title=\"Delete\"\n                      (click)=\"removeItem(i)\"\n                      (keydown.enter)=\"removeItem(i)\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </button>\n                  @if (last && emailsFormArray?.controls?.length < availableUnits) {\n                    <i\n                      class=\"btn btn-sm btn-primary fal fa-plus ms-2\"\n                      title=\"Add More\"\n                      (click)=\"addItem()\"\n                      (keydown.enter)=\"addItem()\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  }\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n        <div class=\"text-center mt-2\">\n          <button class=\"btn btn-sm btn-outline-default me-2\"\n            (click)=\"isAddEnabled = false\">\n            <i class=\"fa fa-plus-times\" aria-hidden=\"true\"></i>\n            {{ 'Button.Back' | transloco }}\n          </button>\n          <button type=\"submit\"\n            class=\"btn btn-sm btn-outline-primary me-2\"\n            [buttonBusy]=\"buttonBusy\"\n            [disabled]=\"form.invalid || buttonBusy\">\n            Add Members\n          </button>\n        </div>\n      </form>\n    </div>\n  </section>\n}\n", styles: ["@charset \"UTF-8\";:root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}a.previous i{top:0}.pw-tab .card{min-height:auto}td[data-head=Roles]{vertical-align:middle;min-width:200px;max-width:220px}td[data-head=Roles] p-multiselect{width:100%}.title{display:flex}.table-row{vertical-align:top}.admin-badge,.you-badge{background-color:var(--first)}td{vertical-align:middle}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1$1.UntypedFormBuilder }, { type: i1.SubscriptionService }, { type: i1.AuthService }, { type: i3$2.AdminService }, { type: i0.ChangeDetectorRef }, { type: i4$1.ConfirmDialogService }], propDecorators: { onSignUpMember: [] } });
 
 class EnterprisePartnersComponent extends AppBaseComponent {