@posiwise/enterprise-module 0.0.89 → 0.0.91

package/esm2022/lib/components/enterprise-communications/enterprise-communications.component.mjs

@@ -17,9 +17,9 @@ import * as i7 from "primeng/dropdown";
 import * as i8 from "primeng/api";
 import * as i9 from "primeng/fileupload";
 import * as i10 from "@posiwise/directives";
-import * as i11 from "@angular/router";
-import * as i12 from "primeng/progressspinner";
-import * as i13 from "primeng/table";
+import * as i11 from "primeng/table";
+import * as i12 from "@angular/router";
+import * as i13 from "primeng/progressspinner";
 import * as i14 from "@posiwise/shared-components";
 import * as i15 from "ngx-quill";
 import * as i16 from "@jsverse/transloco";
@@ -322,7 +322,7 @@ export class EnterpriseCommunicationsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: EnterpriseCommunicationsComponent, deps: [{ token: i1.GroupService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: EnterpriseCommunicationsComponent, selector: "pw-enterprise-communications", usesInheritance: true, ngImport: i0, template: "<section>\n  <div class=\"row\">\n    <div class=\"col-12\" [ngClass]=\"{'mb-3': !isEdit}\">\n      <div class=\"title\">\n        <a *ngIf=\"isEdit\"\n          aria-label=\"Navigate to Target\"\n          (click)=\"onCancel()\"\n          (keydown.enter)=\"onCancel()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3  *ngIf=\"isEdit\" class=\"m-subheader__title m-subheader__title--separator mt-1\">\n          <span>{{ !isAdd ? 'Edit' : 'Create new' }} Communication</span>\n        </h3>\n        <h2  *ngIf=\"!isEdit\" [ngClass]=\"{ 'mt-2': isEdit }\">Communications <span *ngIf=\"groupId\">for {{ groupName }}</span></h2>\n      </div>\n      <p *ngIf=\"!isEdit\">\n        Here you can send communications to your organization, based on the teams they are\n        part of.\n      </p>\n    </div>\n  </div>\n</section>\n<div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded && isEdit\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<ng-container *ngIf=\"isEdit && isLoaded\">\n  <div class=\"container-fluid pw-tab overflow-hidden\">\n    <div class=\"p-2 mt-1\">\n      <form [formGroup]=\"form\"\n        (ngSubmit)=\"onSave()\">\n        <div class=\"row mb-3\">\n          <div class=\"col-12 col-md-12\">\n            <pw-input-container [label]=\"'Enterprise.Documentation.Title' | transloco\"\n            [errorMsg]=\"'Enterprise.Documentation.Validation.Title' | transloco\"\n              name=\"title\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n          </div>\n\n          <pw-input-container [label]=\"'Enterprise.Documentation.Body' | transloco\"\n            class=\"col-12\"\n            name=\"body\"\n            [errorMsg]=\"'Enterprise.Documentation.Validation.Body' | transloco\">\n            <quill-editor [styles]=\"{ height: '220px' }\"\n            class=\"quillEditor quill-container\" [modules]=\"editorConfig\"\n              formControlName=\"body\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors }\">\n            </quill-editor>\n          </pw-input-container>\n\n          <div class=\"col-12 col-md-6\">\n            <pw-input-container [showTooltip]=\"true\"\n              [tooltipText]=\"'Enterprise.Tooltip.Group' | transloco\"\n              [label]=\"'Enterprise.Documentation.Team' | transloco\"\n              [isLeftTooltip]=\"true\"\n              name=\"group_id\"\n              [errorMsg]=\"'Enterprise.Documentation.Validation.Team' | transloco\">\n              <p-dropdown\n              [options]=\"allGroups\"\n              formControlName=\"group_id\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['group_id'].errors }\"\n              optionValue=\"id\"\n              optionLabel=\"name\">\n            </p-dropdown>\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <pw-input-container [showTooltip]=\"true\"\n              [tooltipText]=\"'Enterprise.Tooltip.VisibleGlobally' | transloco\"\n              [label]=\"'Enterprise.Documentation.VisibleGlobally' | transloco\"\n              name=\"visible_globally\">\n              <ui-switch class=\"d-block\"\n                formControlName=\"visible_globally\"\n                (change)=\"onChange($event, 'visible_globally')\"\n                name=\"visible_globally\">\n              </ui-switch>\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <pw-input-container [showTooltip]=\"true\"\n              [tooltipText]=\"'Enterprise.Tooltip.Published' | transloco\"\n              [label]=\"'Enterprise.Documentation.Published' | transloco\"\n              name=\"published\">\n              <ui-switch class=\"d-block\"\n                formControlName=\"published\"\n                (change)=\"onChange($event, 'published')\"\n                name=\"published\">\n              </ui-switch>\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <pw-input-container [showTooltip]=\"true\"\n              [tooltipText]=\"'Enterprise.Tooltip.Pushed' | transloco\"\n              [label]=\"'Enterprise.Documentation.Pushed' | transloco\"\n              name=\"pushed\">\n              <ui-switch class=\"d-block\"\n                formControlName=\"pushed\"\n                (change)=\"onChange($event, 'pushed')\"\n                name=\"pushed\">\n              </ui-switch>\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-6\">\n            <h4 class=\"mt-4\">You can add files to your communication here</h4>\n            <div class=\"mb-3\">\n              <label for=\"file\">Upload Communication File</label>\n              <p-fileUpload #forms\n                name=\"myfile[]\"\n                [customUpload]=\"true\"\n                [showUploadButton]=\"false\"\n                accept=\"\"\n                [disabled]=\"uploadedFiles && uploadedFiles.length > 0\"\n                (onSelect)=\"onSelect($event)\"\n                (onRemove)=\"onRemove($event)\"\n                (onError)=\"onUploadError($event)\">\n                <ng-template pTemplate=\"content\"\n                             [ngIf]=\"uploadedFiles?.length\">\n                  <div class=\"drag-drop-text\" *ngIf=\"!filesUploaded && (!uploadedFiles || uploadedFiles.length === 0)\">\n                    <p>You can drag and drop your file here</p>\n                  </div>\n                </ng-template>\n              </p-fileUpload>\n            </div>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-12 text-end mt-3\">\n            <button type=\"button\"\n              class=\"btn btn-outline-default me-2\"\n              (click)=\"onCancel()\"\n              (keydown.enter)=\"onCancel()\" >\n              {{ 'Button.Cancel' | transloco }}\n            </button>\n            <button type=\"submit\"\n              [buttonBusy]=\"buttonBusy\"\n              class=\"btn btn-primary\" [disabled]=\"invalidFile\">\n              {{ 'Button.Submit' | transloco }}\n            </button>\n          </div>\n        </div>\n      </form>\n      <div *ngIf=\"filesData?.length\"\n        class=\"mt-5\">\n        <h2>Communications files attached to this communication</h2>\n        <div class=\"communication-files\"\n          *ngFor=\"let files of filesData; let i = index\">\n          <p>\n            <a target=\"blank\"\n              href=\"{{ files.name.url }}\">{{\n                            files.name.url.split('?')[0].split('/')[\n                                files.name.url.split('?')[0].split('/').length - 1\n                            ]\n                        }}</a>\n          </p>\n          <p ngbTooltip=\"Delete\"\n            class=\"ms-3\">\n            <i\n                            class=\"fa fa-trash delete-icon\"\n                            (keydown.enter)=\"deleteCommunicationFiles(files.id, i)\"\n                            (keydown.space)=\"deleteCommunicationFiles(files.id, i)\"\n                            (click)=\"deleteCommunicationFiles(files.id, i)\"\n                            aria-hidden=\"true\"\n                        ></i>\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"!isEdit\">\n  <div class=\"row\">\n    <div class=\"col-12 text-end mb-3\">\n      <button class=\"btn btn-sm btn-outline-primary\"\n        (click)=\"showEditForm()\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add Communication' }}\n      </button>\n    </div>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n\n  <div class=\"primeng-datatable-container mt-0 table-responsive\"\n    [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n    <p-table #dt\n      [value]=\"allCommunication\"\n      [paginator]=\"totalRecords !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      (onLazyLoad)=\"onLazyLoad($event)\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"search-contact\">\n          <div class=\"col-12 col-md-3 mb-2 mb-md-0 filter-domain-list\">\n            <p-dropdown\n            [options]=\"allCommunicationGroups\"\n            optionLabel=\"name\"\n            optionValue=\"id\"\n            [(ngModel)]=\"groupId\"\n            placeholder=\"Select Communication Team\"\n            [appendTo]=\"'body'\"\n            (onChange)=\"filterDomainsList()\">\n          </p-dropdown>\n        </div>\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 Communications...\"\n              class=\"mw-90\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </div>\n      </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\">{{ 'Enterprise.Documentation.Title' | transloco }}</th>\n          <th scope=\"true\">{{ 'Enterprise.Documentation.Sender' | transloco }}</th>\n          <th scope=\"true\">{{ 'Enterprise.Documentation.Team' | transloco }}</th>\n          <th scope=\"true\">{{ 'Enterprise.Documentation.Files' | transloco }}</th>\n          <th scope=\"true\">{{ 'Enterprise.Documentation.Date' | transloco }}</th>\n          <th scope=\"true\">{{ 'Enterprise.Documentation.Status' | transloco }}</th>\n          <th scope=\"true\"\n            class=\"actions-column\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-item>\n        <tr class=\"table-row\">\n          <td data-head=\"Title\">\n            <a [routerLink]=\"[item.id]\">{{ item.title }}</a>\n          </td>\n          <td data-head=\"Sender\">{{ item.author | ifNameNullShowEmail }}</td>\n          <td data-head=\"Team\">{{ item.group?.name }}</td>\n          <td data-head=\"Files\">\n            <span *ngFor=\"let files of item.group_communication_files\">\n              <a target=\"blank\"\n                [href]=\"files.name.url\">{{\n                                files.name.url.split('?')[0].split('/')[\n                                    files.name.url.split('?')[0].split('/').length - 1\n                                ]\n                            }}</a>\n            </span>\n          </td>\n          <td data-head=\"Date\">{{ item.created_at | dateFormat: 'datetime' }}</td>\n          <td data-head=\"Status\">\n            <span *ngIf=\"item.visible_globally\"\n              class=\"badge bg-warning ms-2\">{{\n                            'Enterprise.Documentation.Global' | transloco\n                        }}</span><span *ngIf=\"item.published\"\n              class=\"badge bg-info ms-2\">{{\n                            'Enterprise.Documentation.Published' | transloco\n                        }}</span><span *ngIf=\"item.pushed\"\n              class=\"badge bg-success ms-2\">{{\n                            'Enterprise.Documentation.Pushed' | transloco\n                        }}</span>\n          </td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li ngbTooltip=\"Edit\"\n                class=\"me-2 me-sm-3\">\n                <i\n                                    class=\"fa fa-edit edit-icon\"\n                                    (click)=\"getCommunicationDetails(item.id)\"\n                                    (keydown.enter)=\"getCommunicationDetails(item.id)\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </li>\n              <li ngbTooltip=\"Delete\"\n                class=\"me-2 me-sm-3\">\n                <i\n                                    class=\"fa fa-trash delete-icon\"\n                                    (keydown.enter)=\"onDelete(item.id)\"\n                                    (click)=\"onDelete(item.id)\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </li>\n              <li ngbTooltip=\"See Communication\"\n                class=\"me-2 me-sm-3 see-icon\"\n                [routerLink]=\"[item.id]\">\n                <i class=\"fa fa-eye eye-icon\" aria-hidden=\"true\"></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0 && !groupId\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n    </div>\n    <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n  </div>\n  <div *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Enterprise.Communication.NoCommunication' | transloco\">\n    </pw-no-data>\n  </div>\n</ng-container>\n", styles: [":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)}.table-row{vertical-align:top}.communication-files{display:flex!important}.search-contact{display:flex;justify-content:space-between}@media (min-width: 320px) and (max-width: 720px){.search-contact{display:block}}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}.title{display:flex}a.previous i{top:0}.drag-drop-text{padding:20px;border:2px dashed #ccc;text-align:center;color:#aaa;margin-top:10px}::ng-deep .file-upload-support-details .p-fileupload .p-fileupload-content{padding:1rem}::ng-deep .file-upload-support-details .p-fileupload-content .p-fileupload-files .p-fileupload-row>:first-child{display:flex}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i4.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: 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { 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: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i11.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i12.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i13.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: "component", type: i14.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i14.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i15.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i16.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: EnterpriseCommunicationsComponent, selector: "pw-enterprise-communications", usesInheritance: true, ngImport: i0, template: "<section>\n  <div class=\"row\">\n    <div class=\"col-12\" [ngClass]=\"{'mb-3': !isEdit}\">\n      <div class=\"title\">\n        <a *ngIf=\"isEdit\"\n          aria-label=\"Navigate to Target\"\n          (click)=\"onCancel()\"\n          (keydown.enter)=\"onCancel()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3  *ngIf=\"isEdit\" class=\"m-subheader__title m-subheader__title--separator mt-1\">\n          <span>{{ !isAdd ? 'Edit' : 'Create new' }} Communication</span>\n        </h3>\n        <h2  *ngIf=\"!isEdit\" [ngClass]=\"{ 'mt-2': isEdit }\">Communications <span *ngIf=\"groupId\">for {{ groupName }}</span></h2>\n      </div>\n      <p *ngIf=\"!isEdit\">\n        Here you can send communications to your organization, based on the teams they are\n        part of.\n      </p>\n    </div>\n  </div>\n</section>\n<div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded && isEdit\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<ng-container *ngIf=\"isEdit && isLoaded\">\n  <div class=\"container-fluid pw-tab overflow-hidden\">\n    <div class=\"p-2 mt-1\">\n      <form [formGroup]=\"form\"\n        (ngSubmit)=\"onSave()\">\n        <div class=\"row mb-3\">\n          <div class=\"col-12 col-md-12\">\n            <pw-input-container [label]=\"'Enterprise.Documentation.Title' | transloco\"\n            [errorMsg]=\"'Enterprise.Documentation.Validation.Title' | transloco\"\n              name=\"title\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n          </div>\n\n          <pw-input-container [label]=\"'Enterprise.Documentation.Body' | transloco\"\n            class=\"col-12\"\n            name=\"body\"\n            [errorMsg]=\"'Enterprise.Documentation.Validation.Body' | transloco\">\n            <quill-editor [styles]=\"{ height: '220px' }\"\n            class=\"quillEditor quill-container\" [modules]=\"editorConfig\"\n              formControlName=\"body\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['body'].errors }\">\n            </quill-editor>\n          </pw-input-container>\n\n          <div class=\"col-12 col-md-6\">\n            <pw-input-container [showTooltip]=\"true\"\n              [tooltipText]=\"'Enterprise.Tooltip.Group' | transloco\"\n              [label]=\"'Enterprise.Documentation.Team' | transloco\"\n              [isLeftTooltip]=\"true\"\n              name=\"group_id\"\n              [errorMsg]=\"'Enterprise.Documentation.Validation.Team' | transloco\">\n              <p-dropdown\n              [options]=\"allGroups\"\n              formControlName=\"group_id\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['group_id'].errors }\"\n              optionValue=\"id\"\n              optionLabel=\"name\">\n            </p-dropdown>\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <pw-input-container [showTooltip]=\"true\"\n              [tooltipText]=\"'Enterprise.Tooltip.VisibleGlobally' | transloco\"\n              [label]=\"'Enterprise.Documentation.VisibleGlobally' | transloco\"\n              name=\"visible_globally\">\n              <ui-switch class=\"d-block\"\n                formControlName=\"visible_globally\"\n                (change)=\"onChange($event, 'visible_globally')\"\n                name=\"visible_globally\">\n              </ui-switch>\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <pw-input-container [showTooltip]=\"true\"\n              [tooltipText]=\"'Enterprise.Tooltip.Published' | transloco\"\n              [label]=\"'Enterprise.Documentation.Published' | transloco\"\n              name=\"published\">\n              <ui-switch class=\"d-block\"\n                formControlName=\"published\"\n                (change)=\"onChange($event, 'published')\"\n                name=\"published\">\n              </ui-switch>\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-2\">\n            <pw-input-container [showTooltip]=\"true\"\n              [tooltipText]=\"'Enterprise.Tooltip.Pushed' | transloco\"\n              [label]=\"'Enterprise.Documentation.Pushed' | transloco\"\n              name=\"pushed\">\n              <ui-switch class=\"d-block\"\n                formControlName=\"pushed\"\n                (change)=\"onChange($event, 'pushed')\"\n                name=\"pushed\">\n              </ui-switch>\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-12 col-md-6\">\n            <h4 class=\"mt-4\">You can add files to your communication here</h4>\n            <div class=\"mb-3\">\n              <label for=\"file\">Upload Communication File</label>\n              <p-fileUpload #forms\n                name=\"myfile[]\"\n                [customUpload]=\"true\"\n                [showUploadButton]=\"false\"\n                accept=\"\"\n                [disabled]=\"uploadedFiles && uploadedFiles.length > 0\"\n                (onSelect)=\"onSelect($event)\"\n                (onRemove)=\"onRemove($event)\"\n                (onError)=\"onUploadError($event)\">\n                <ng-template pTemplate=\"content\"\n                             [ngIf]=\"uploadedFiles?.length\">\n                  <div class=\"drag-drop-text\" *ngIf=\"!filesUploaded && (!uploadedFiles || uploadedFiles.length === 0)\">\n                    <p>You can drag and drop your file here</p>\n                  </div>\n                </ng-template>\n              </p-fileUpload>\n            </div>\n          </div>\n        </div>\n        <div class=\"row\">\n          <div class=\"col-12 text-end mt-3\">\n            <button type=\"button\"\n              class=\"btn btn-outline-default me-2\"\n              (click)=\"onCancel()\"\n              (keydown.enter)=\"onCancel()\" >\n              {{ 'Button.Cancel' | transloco }}\n            </button>\n            <button type=\"submit\"\n              [buttonBusy]=\"buttonBusy\"\n              class=\"btn btn-primary\" [disabled]=\"invalidFile\">\n              {{ 'Button.Submit' | transloco }}\n            </button>\n          </div>\n        </div>\n      </form>\n      <div *ngIf=\"filesData?.length\"\n        class=\"mt-5\">\n        <h2>Communications files attached to this communication</h2>\n        <div class=\"communication-files\"\n          *ngFor=\"let files of filesData; let i = index\">\n          <p>\n            <a target=\"blank\"\n              href=\"{{ files.name.url }}\">{{\n                            files.name.url.split('?')[0].split('/')[\n                                files.name.url.split('?')[0].split('/').length - 1\n                            ]\n                        }}</a>\n          </p>\n          <p ngbTooltip=\"Delete\"\n            class=\"ms-3\">\n            <i\n                            class=\"fa fa-trash delete-icon\"\n                            (keydown.enter)=\"deleteCommunicationFiles(files.id, i)\"\n                            (keydown.space)=\"deleteCommunicationFiles(files.id, i)\"\n                            (click)=\"deleteCommunicationFiles(files.id, i)\"\n                            aria-hidden=\"true\"\n                        ></i>\n          </p>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n<ng-container *ngIf=\"!isEdit\">\n  <div class=\"row\">\n    <div class=\"col-12 text-end mb-3\">\n      <button class=\"btn btn-sm btn-outline-primary\"\n        (click)=\"showEditForm()\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Add Communication' }}\n      </button>\n    </div>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n\n  <div class=\"primeng-datatable-container mt-0 table-responsive\"\n    [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n    <p-table #dt\n      [value]=\"allCommunication\"\n      [paginator]=\"totalRecords !== 0\"\n      [lazy]=\"true\"\n      [rows]=\"PAGE_SIZE\"\n      [totalRecords]=\"totalRecords\"\n      [loading]=\"loading\"\n      (onLazyLoad)=\"onLazyLoad($event)\">\n      <ng-template pTemplate=\"caption\">\n        <div class=\"search-contact\">\n          <div class=\"col-12 col-md-3 mb-2 mb-md-0 filter-domain-list\">\n            <p-dropdown\n            [options]=\"allCommunicationGroups\"\n            optionLabel=\"name\"\n            optionValue=\"id\"\n            [(ngModel)]=\"groupId\"\n            placeholder=\"Select Communication Team\"\n            [appendTo]=\"'body'\"\n            (onChange)=\"filterDomainsList()\">\n          </p-dropdown>\n        </div>\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 Communications...\"\n              class=\"mw-90\"\n              (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n          </div>\n      </div>\n      </ng-template>\n      <ng-template pTemplate=\"header\">\n        <tr>\n          <th scope=\"true\">{{ 'Enterprise.Documentation.Title' | transloco }}</th>\n          <th scope=\"true\">{{ 'Enterprise.Documentation.Sender' | transloco }}</th>\n          <th scope=\"true\">{{ 'Enterprise.Documentation.Team' | transloco }}</th>\n          <th scope=\"true\">{{ 'Enterprise.Documentation.Files' | transloco }}</th>\n          <th scope=\"true\">{{ 'Enterprise.Documentation.Date' | transloco }}</th>\n          <th scope=\"true\">{{ 'Enterprise.Documentation.Status' | transloco }}</th>\n          <th scope=\"true\"\n            class=\"actions-column\">{{ 'Label.Actions' | transloco }}</th>\n        </tr>\n      </ng-template>\n      <ng-template pTemplate=\"body\"\n        let-item>\n        <tr class=\"table-row\">\n          <td data-head=\"Title\">\n            <a [routerLink]=\"[item.id]\">{{ item.title }}</a>\n          </td>\n          <td data-head=\"Sender\">{{ item.author | ifNameNullShowEmail }}</td>\n          <td data-head=\"Team\">{{ item.group?.name }}</td>\n          <td data-head=\"Files\">\n            <span *ngFor=\"let files of item.group_communication_files\">\n              <a target=\"blank\"\n                [href]=\"files.name.url\">{{\n                                files.name.url.split('?')[0].split('/')[\n                                    files.name.url.split('?')[0].split('/').length - 1\n                                ]\n                            }}</a>\n            </span>\n          </td>\n          <td data-head=\"Date\">{{ item.created_at | dateFormat: 'datetime' }}</td>\n          <td data-head=\"Status\">\n            <span *ngIf=\"item.visible_globally\"\n              class=\"badge bg-warning ms-2\">{{\n                            'Enterprise.Documentation.Global' | transloco\n                        }}</span><span *ngIf=\"item.published\"\n              class=\"badge bg-info ms-2\">{{\n                            'Enterprise.Documentation.Published' | transloco\n                        }}</span><span *ngIf=\"item.pushed\"\n              class=\"badge bg-success ms-2\">{{\n                            'Enterprise.Documentation.Pushed' | transloco\n                        }}</span>\n          </td>\n          <td data-head=\"Action\">\n            <ul class=\"list-unstyled list-inline list-action\">\n              <li ngbTooltip=\"Edit\"\n                class=\"me-2 me-sm-3\">\n                <i\n                                    class=\"fa fa-edit edit-icon\"\n                                    (click)=\"getCommunicationDetails(item.id)\"\n                                    (keydown.enter)=\"getCommunicationDetails(item.id)\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </li>\n              <li ngbTooltip=\"Delete\"\n                class=\"me-2 me-sm-3\">\n                <i\n                                    class=\"fa fa-trash delete-icon\"\n                                    (keydown.enter)=\"onDelete(item.id)\"\n                                    (click)=\"onDelete(item.id)\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </li>\n              <li ngbTooltip=\"See Communication\"\n                class=\"me-2 me-sm-3 see-icon\"\n                [routerLink]=\"[item.id]\">\n                <i class=\"fa fa-eye eye-icon\" aria-hidden=\"true\"></i>\n              </li>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    <div *ngIf=\"totalRecords === 0 && totalRecordsUnFiltered !== 0 && !groupId\">\n      <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n    </pw-no-data>\n    </div>\n    <span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">{{ 'Label.Total' | transloco }}: {{ totalRecords }}</span>\n  </div>\n  <div *ngIf=\"totalRecordsUnFiltered === 0 && isLoaded\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Enterprise.Communication.NoCommunication' | transloco\">\n    </pw-no-data>\n  </div>\n</ng-container>\n", styles: [":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)}.table-row{vertical-align:top}.communication-files{display:flex!important}.search-contact{display:flex;justify-content:space-between}@media (min-width: 320px) and (max-width: 720px){.search-contact{display:block}}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}.title{display:flex}a.previous i{top:0}.drag-drop-text{padding:20px;border:2px dashed #ccc;text-align:center;color:#aaa;margin-top:10px}::ng-deep .file-upload-support-details .p-fileupload .p-fileupload-content{padding:1rem}::ng-deep .file-upload-support-details .p-fileupload-content .p-fileupload-files .p-fileupload-row>:first-child{display:flex}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i4.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: 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i8.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i9.FileUpload, selector: "p-fileUpload", inputs: ["name", "url", "method", "multiple", "accept", "disabled", "auto", "withCredentials", "maxFileSize", "invalidFileSizeMessageSummary", "invalidFileSizeMessageDetail", "invalidFileTypeMessageSummary", "invalidFileTypeMessageDetail", "invalidFileLimitMessageDetail", "invalidFileLimitMessageSummary", "style", "styleClass", "previewWidth", "chooseLabel", "uploadLabel", "cancelLabel", "chooseIcon", "uploadIcon", "cancelIcon", "showUploadButton", "showCancelButton", "mode", "headers", "customUpload", "fileLimit", "uploadStyleClass", "cancelStyleClass", "removeStyleClass", "chooseStyleClass", "files"], outputs: ["onBeforeUpload", "onSend", "onUpload", "onError", "onClear", "onRemove", "onSelect", "onProgress", "uploadHandler", "onImageError", "onRemoveUploadedFile"] }, { 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: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "component", type: i11.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: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i13.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i14.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i14.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i15.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i16.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }] }); }
 }
 __decorate([
     ValidateForm('form'),

package/esm2022/lib/components/enterprise-members/enterprise-members.component.mjs

@@ -19,11 +19,11 @@ import * as i5 from "primeng/inputtext";
 import * as i6 from "@ng-bootstrap/ng-bootstrap";
 import * as i7 from "primeng/api";
 import * as i8 from "@posiwise/directives";
-import * as i9 from "primeng/multiselect";
+import * as i9 from "primeng/table";
 import * as i10 from "@angular/router";
 import * as i11 from "primeng/tooltip";
-import * as i12 from "primeng/progressspinner";
-import * as i13 from "primeng/table";
+import * as i12 from "primeng/multiselect";
+import * as i13 from "primeng/progressspinner";
 import * as i14 from "ngx-uploader";
 import * as i15 from "@jsverse/transloco";
 import * as i16 from "@posiwise/pipes";
@@ -337,7 +337,7 @@ export class EnterpriseMembersComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: EnterpriseMembersComponent, deps: [{ token: i0.Injector }, { token: i1.UntypedFormBuilder }, { token: i2.SubscriptionService }, { token: i2.AuthService }, { token: i3.AdminService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: EnterpriseMembersComponent, 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        <a *ngIf=\"isAddEnabled\"\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        <h2>Enterprise Members for {{ productName }}</h2>\n      </div>\n      <p *ngIf=\"!isAddEnabled\">\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      <p *ngIf=\"isAddEnabled\">Here you can add members to your subscriptions</p>\n    </div>\n  </div>\n</section>\n<section id=\"enrolled\"\n  *ngIf=\"!isAddEnabled\">\n  <div class=\"row\">\n    <div class=\"col-12 text-end\"\n      *ngIf=\"hasAccess\">\n      <button class=\"btn btn-sm btn-outline-primary\"\n        *ngIf=\"!isAddEnabled\"\n        (click)=\"isAddEnabled = true\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n      </button>\n    </div>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"primeng-datatable-container 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          <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 contact...\"\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\">{{ 'Label.Email' | transloco }}</th>\n          <th scope=\"true\">{{ 'Enterprise.Members.Team' | transloco }}</th>\n          <th scope=\"true\">{{ 'Enterprise.Members.LastSeen' | transloco }}</th>\n          <th scope=\"true\">{{ '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              <span class=\"ms-2\"\n                *ngIf=\"!users?.has_password\"\n                [pTooltip]=\"'This user hasn\\'t joined yet'\"\n                tooltipPosition=\"top\">\n                <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n              </span>\n              <span class=\"ms-2\"\n                *ngIf=\"users?.enable_two_factor_authenticator\"\n                [pTooltip]=\"'2FA enabled'\"\n                tooltipPosition=\"top\">\n                <i class=\"fa-solid fa-lock text-success\"></i>\n              </span>\n              <span class=\"ms-2\"\n                *ngIf=\"users?.blocked\"\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              <span class=\"badge bg-dark mx-1\" *ngIf=\"users.id === subscriptionOwner\"> Owner </span>\n              <span class=\"badge bg-success mx-1 admin-badge\" *ngIf=\"subscriptionMembers.admins.includes(users.id)\"> Admin </span>\n              <span class=\"badge bg-info mx-1\" *ngIf=\"users.id === user.id\"> You </span>\n            </span>\n          </td>\n          <td data-head=\"Email\">{{ users.email }}</td>\n          <td data-head=\"Team\">\n            <span *ngFor=\"let groups of users.user_groups\"><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          </td>\n          <td data-head=\"Last seen\">\n            <span *ngIf=\"users?.current_sign_in_at; else lastSignin\">\n              <span>{{ users.current_sign_in_at | dateFormat }}</span>\n              <span *ngIf=\"users.current_sign_in_at\">&nbsp;({{ users.current_sign_in_at | sinceAgo }})</span>\n            </span>\n            <ng-template #lastSignin>\n              <span>\n                <span>{{ users.last_sign_in_at | dateFormat }}</span>\n                <span *ngIf=\"users.last_sign_in_at\">&nbsp;({{ users.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 d-inline-block me-2 list-action\">\n              <ng-container *ngIf=\"hasAccess && allRoles.length\">\n                <li class=\"enterprise-member-table mx-2 mb-2 mb-sm-0\" *rbacAllow=\"'Pages.Alpha'\">\n                  <p-multiSelect [(ngModel)]=\"users.selected_roles\" [options]=\"allRoles\" (onChange)=\"onRoleChange($event, users)\"\n                    placeholder=\"Set roles\" [showHeader]=\"false\" appendTo=\"body\">\n                  </p-multiSelect>\n                </li>\n              </ng-container>\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              <ng-template [ngIf]=\"hasAccess && users.id !== subscriptionOwner\"\n                [ngIfElse]=\"empty\">\n                <!-- Make Admin -->\n                <li ngbTooltip=\"Make Admin\"\n                  class=\"me-2 me-sm-3 mx-2\"\n                  *ngIf=\"!this.subscriptionMembers.admins.includes(users.id)\">\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                <li></li>\n                <!-- Remove Admin -->\n                <li ngbTooltip=\"Remove Admin\"\n                  class=\"me-2 me-sm-3 mx-2\"\n                  *ngIf=\"this.subscriptionMembers.admins.includes(users.id)\">\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              </ng-template>\n              <ng-template #empty>\n                <li class=\"mx-3\"></li>\n              </ng-template>\n              <ng-container *rbacAllow=\"'SubscriptionAdmin'\">\n                <li class=\"delete-user mx-2\"\n                  ngbTooltip=\"Delete\"\n                  *ngIf=\"users.id !== subscriptionOwner\">\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              </ng-container>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    <span class=\"total-records-count\" *ngIf=\"subscriptionMembers?.members.length !== 0\">{{ 'Label.Total' | transloco }}: {{ subscriptionMembers?.members.length || 0 }}</span>\n  </div>\n</section>\n\n<section id=\"manage-members\"\n  *ngIf=\"isAddEnabled\">\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                  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          <div class=\"upload-item\"\n            *ngFor=\"let f of files; let i = index\">\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                  <span *ngIf=\"f.progress?.data?.percentage !== 100\">Uploading...</span>\n                  <span *ngIf=\"f.progress?.data?.percentage === 100\">Done</span>\n                </span>\n                <span class=\"speed-and-eta-text\"\n                  *ngIf=\"\n                                        f.progress?.data?.percentage !== 0 &&\n                                        f.progress?.data?.percentage !== 100\n                                    \">\n                  <span>{{ f.progress?.data?.speedHuman }} </span>\n                  <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n                </span>\n              </div>\n            </div>\n          </div>\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      <div formArrayName=\"emailsFormArray\"\n        *ngFor=\"\n                    let item of form.get('emailsFormArray')['controls'];\n                    let i = index;\n                    let last = last\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\" for=\"Email\">\n              #{{ i + 1 }}</label>\n            <div class=\"col-10 col-md-4\">\n              <input formControlName=\"email\"\n                class=\"form-control form-control-sm\"\n                placeholder=\"Email\" />\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              <i\n                                class=\"btn btn-sm btn-primary fal fa-plus ms-2\"\n                                *ngIf=\"last && emailsFormArray?.controls?.length < availableUnits\"\n                                title=\"Add More\"\n                                (click)=\"addItem()\"\n                                (keydown.enter)=\"addItem()\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </div>\n          </div>\n        </div>\n      </div>\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", styles: [":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}.enterprise-member-table{vertical-align:middle;min-width:200px;max-width:200px}.delete-user{margin-left:15px}.title{display:flex}.table-row{vertical-align:top}.admin-badge{background-color:var(--first)}td{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i6.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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i8.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i8.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "component", type: i9.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "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", "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: i10.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i11.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i12.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i13.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: i14.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i14.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "pipe", type: i15.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i16.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i16.SinceAgoPipe, name: "sinceAgo" }, { kind: "pipe", type: i16.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: EnterpriseMembersComponent, 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        <a *ngIf=\"isAddEnabled\"\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        <h2>Enterprise Members for {{ productName }}</h2>\n      </div>\n      <p *ngIf=\"!isAddEnabled\">\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      <p *ngIf=\"isAddEnabled\">Here you can add members to your subscriptions</p>\n    </div>\n  </div>\n</section>\n<section id=\"enrolled\"\n  *ngIf=\"!isAddEnabled\">\n  <div class=\"row\">\n    <div class=\"col-12 text-end\"\n      *ngIf=\"hasAccess\">\n      <button class=\"btn btn-sm btn-outline-primary\"\n        *ngIf=\"!isAddEnabled\"\n        (click)=\"isAddEnabled = true\">\n        <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n      </button>\n    </div>\n  </div>\n  <div class=\"w-100 text-center mt-3\"\n    *ngIf=\"!isLoaded\">\n    <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n  </div>\n  <div class=\"primeng-datatable-container 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          <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 contact...\"\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\">{{ 'Label.Email' | transloco }}</th>\n          <th scope=\"true\">{{ 'Enterprise.Members.Team' | transloco }}</th>\n          <th scope=\"true\">{{ 'Enterprise.Members.LastSeen' | transloco }}</th>\n          <th scope=\"true\">{{ '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              <span class=\"ms-2\"\n                *ngIf=\"!users?.has_password\"\n                [pTooltip]=\"'This user hasn\\'t joined yet'\"\n                tooltipPosition=\"top\">\n                <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n              </span>\n              <span class=\"ms-2\"\n                *ngIf=\"users?.enable_two_factor_authenticator\"\n                [pTooltip]=\"'2FA enabled'\"\n                tooltipPosition=\"top\">\n                <i class=\"fa-solid fa-lock text-success\"></i>\n              </span>\n              <span class=\"ms-2\"\n                *ngIf=\"users?.blocked\"\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              <span class=\"badge bg-dark mx-1\" *ngIf=\"users.id === subscriptionOwner\"> Owner </span>\n              <span class=\"badge bg-success mx-1 admin-badge\" *ngIf=\"subscriptionMembers.admins.includes(users.id)\"> Admin </span>\n              <span class=\"badge bg-info mx-1\" *ngIf=\"users.id === user.id\"> You </span>\n            </span>\n          </td>\n          <td data-head=\"Email\">{{ users.email }}</td>\n          <td data-head=\"Team\">\n            <span *ngFor=\"let groups of users.user_groups\"><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          </td>\n          <td data-head=\"Last seen\">\n            <span *ngIf=\"users?.current_sign_in_at; else lastSignin\">\n              <span>{{ users.current_sign_in_at | dateFormat }}</span>\n              <span *ngIf=\"users.current_sign_in_at\">&nbsp;({{ users.current_sign_in_at | sinceAgo }})</span>\n            </span>\n            <ng-template #lastSignin>\n              <span>\n                <span>{{ users.last_sign_in_at | dateFormat }}</span>\n                <span *ngIf=\"users.last_sign_in_at\">&nbsp;({{ users.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 d-inline-block me-2 list-action\">\n              <ng-container *ngIf=\"hasAccess && allRoles.length\">\n                <li class=\"enterprise-member-table mx-2 mb-2 mb-sm-0\" *rbacAllow=\"'Pages.Alpha'\">\n                  <p-multiSelect [(ngModel)]=\"users.selected_roles\" [options]=\"allRoles\" (onChange)=\"onRoleChange($event, users)\"\n                    placeholder=\"Set roles\" [showHeader]=\"false\" appendTo=\"body\">\n                  </p-multiSelect>\n                </li>\n              </ng-container>\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              <ng-template [ngIf]=\"hasAccess && users.id !== subscriptionOwner\"\n                [ngIfElse]=\"empty\">\n                <!-- Make Admin -->\n                <li ngbTooltip=\"Make Admin\"\n                  class=\"me-2 me-sm-3 mx-2\"\n                  *ngIf=\"!this.subscriptionMembers.admins.includes(users.id)\">\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                <li></li>\n                <!-- Remove Admin -->\n                <li ngbTooltip=\"Remove Admin\"\n                  class=\"me-2 me-sm-3 mx-2\"\n                  *ngIf=\"this.subscriptionMembers.admins.includes(users.id)\">\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              </ng-template>\n              <ng-template #empty>\n                <li class=\"mx-3\"></li>\n              </ng-template>\n              <ng-container *rbacAllow=\"'SubscriptionAdmin'\">\n                <li class=\"delete-user mx-2\"\n                  ngbTooltip=\"Delete\"\n                  *ngIf=\"users.id !== subscriptionOwner\">\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              </ng-container>\n            </ul>\n          </td>\n        </tr>\n      </ng-template>\n    </p-table>\n    <span class=\"total-records-count\" *ngIf=\"subscriptionMembers?.members.length !== 0\">{{ 'Label.Total' | transloco }}: {{ subscriptionMembers?.members.length || 0 }}</span>\n  </div>\n</section>\n\n<section id=\"manage-members\"\n  *ngIf=\"isAddEnabled\">\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                  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          <div class=\"upload-item\"\n            *ngFor=\"let f of files; let i = index\">\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                  <span *ngIf=\"f.progress?.data?.percentage !== 100\">Uploading...</span>\n                  <span *ngIf=\"f.progress?.data?.percentage === 100\">Done</span>\n                </span>\n                <span class=\"speed-and-eta-text\"\n                  *ngIf=\"\n                                        f.progress?.data?.percentage !== 0 &&\n                                        f.progress?.data?.percentage !== 100\n                                    \">\n                  <span>{{ f.progress?.data?.speedHuman }} </span>\n                  <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n                </span>\n              </div>\n            </div>\n          </div>\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      <div formArrayName=\"emailsFormArray\"\n        *ngFor=\"\n                    let item of form.get('emailsFormArray')['controls'];\n                    let i = index;\n                    let last = last\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\" for=\"Email\">\n              #{{ i + 1 }}</label>\n            <div class=\"col-10 col-md-4\">\n              <input formControlName=\"email\"\n                class=\"form-control form-control-sm\"\n                placeholder=\"Email\" />\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              <i\n                                class=\"btn btn-sm btn-primary fal fa-plus ms-2\"\n                                *ngIf=\"last && emailsFormArray?.controls?.length < availableUnits\"\n                                title=\"Add More\"\n                                (click)=\"addItem()\"\n                                (keydown.enter)=\"addItem()\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </div>\n          </div>\n        </div>\n      </div>\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", styles: [":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}.enterprise-member-table{vertical-align:middle;min-width:200px;max-width:200px}.delete-user{margin-left:15px}.title{display:flex}.table-row{vertical-align:top}.admin-badge{background-color:var(--first)}td{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i6.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.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i8.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i8.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "component", type: i9.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: i10.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i11.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i12.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "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", "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: "component", type: i13.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i14.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i14.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "pipe", type: i15.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i16.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i16.SinceAgoPipe, name: "sinceAgo" }, { kind: "pipe", type: i16.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }] }); }
 }
 __decorate([
     ValidateForm('form'),