@posiwise/admin-module 0.0.215 → 0.0.217
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6229,7 +6229,7 @@ class ResourceAdminDetailsComponent extends AppBaseComponent {
|
|
|
6229
6229
|
super.ngOnDestroy();
|
|
6230
6230
|
}
|
|
6231
6231
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ResourceAdminDetailsComponent, deps: [{ token: i2$1.NgbModal }, { token: i1.AdminService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1$1.TagService }, { token: i1$1.SubscriptionService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6232
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: ResourceAdminDetailsComponent, isStandalone: false, selector: "pw-resources-details-index", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"navigateToResourceList()\"\n class=\"previous\">\n <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"m-subheader__title m-subheader__title--separator\">\n Add or edit resource\n </h3>\n </div>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n\n <div class=\"p-2 mt-3\">\n @if (!isLoading) {\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <!-- Title -->\n <pw-input-container [label]=\"'Label.Title' | transloco\"\n class=\"col-12\"\n name=\"title\" controlId=\"resource-title\"\n [errorMsg]=\"'Resource.Posts.Validation.Title' | transloco\">\n <input type=\"text\"\n id=\"resource-title\"\n class=\"form-control\"\n formControlName=\"title\"\n [placeholder]=\"'Resource.Posts.Placeholder.Title' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n </pw-input-container>\n <!-- Blurb -->\n <pw-input-container [label]=\"'Resource.Posts.Blurb' | transloco\"\n class=\"col-12\"\n name=\"blurb\" controlId=\"resource-blurb\"\n class=\"blurb\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'The blurb is used for the metadata.description field'\">\n <textarea id=\"resource-blurb\" class=\"form-control\"\n rows=\"3\"\n formControlName=\"blurb\"\n [placeholder]=\"'Resource.Posts.Placeholder.Blurb' | transloco\"></textarea>\n </pw-input-container>\n <!-- Rich Text Editor -->\n <pw-input-container [label]=\"'Resource.Posts.Body' | transloco\"\n class=\"col-9 col-md-9 col-sm-12\"\n name=\"body\" controlId=\"resource-body\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Resource.Posts.Validation.Body' | transloco\">\n <quill-editor [attr.aria-labelledby]=\"'resource-body-label'\" [styles]=\"{ height: '500px' }\"\n class=\"quillEditor\" [modules]=\"editorConfig\"\n formControlName=\"body\"\n [placeholder]=\"'Resource.Posts.Placeholder.Body' | transloco\"\n [ngClass]=\"{\n 'w-100': true,\n 'quill-container': true,\n 'is-invalid': submitted && f['body'].errors\n }\">\n </quill-editor>\n </pw-input-container>\n <div class=\"col-12 col-md-3 col-sm-4 my-4\">\n <!-- Cover Picture -->\n <div class=\"text-start mb-4\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\">{{ 'Resource.Posts.CoverPicture' | transloco }}</h4>\n @if (image && !image.includes('default-photo.jpg') && !coverImageBroken) {\n <img [src]=\"image\" class=\"image cover-picture\" alt=\"Cover picture preview\"\n role=\"presentation\" (error)=\"coverImageBroken = true\" />\n <div class=\"d-flex align-items-center gap-3 mt-1\">\n <div class=\"overlay\" (click)=\"openModal(content)\" (keydown.enter)=\"openModal(content)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Change cover picture\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n <i class=\"fa fa-trash delete-icon text-danger cursor-pointer\"\n title=\"Remove Image\"\n (click)=\"deleteCoverImage()\"\n (keydown.enter)=\"deleteCoverImage()\"></i>\n </div>\n } @else {\n <div class=\"logo-dropzone cover-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload cover picture\" (keydown.enter)=\"openModal(content)\" (click)=\"openModal(content)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a picture</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n <!-- Rectangular Picture -->\n <div class=\"text-start\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\">{{ 'Resource.Posts.RectangularPicture' | transloco }}</h4>\n @if (rectangularImage && !rectangularImage.includes('default-photo.jpg') && !rectangularImageBroken) {\n <img [src]=\"rectangularImage\" class=\"image rectangular-picture\" alt=\"Rectangular picture preview\"\n role=\"presentation\" (error)=\"rectangularImageBroken = true\" />\n <div class=\"d-flex align-items-center gap-3 mt-1\">\n <div class=\"overlay\" (click)=\"openRectModal(rectContent)\" (keydown.enter)=\"openRectModal(rectContent)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Change rectangular picture\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n <i class=\"fa fa-trash delete-icon text-danger cursor-pointer\"\n title=\"Remove Image\"\n (click)=\"deleteRectangularImage()\"\n (keydown.enter)=\"deleteRectangularImage()\"></i>\n </div>\n } @else {\n <div class=\"logo-dropzone rectangular-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload rectangular picture\" (keydown.enter)=\"openRectModal(rectContent)\" (click)=\"openRectModal(rectContent)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a picture</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n </div>\n <pw-input-container [label]=\"'Resource.Posts.CtaText' | transloco\"\n class=\"col-12 col-md-6\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\"\n name=\"cta_text\" controlId=\"resource-cta_text\">\n <input type=\"text\"\n id=\"resource-cta_text\"\n class=\"form-control\"\n formControlName=\"cta_text\"\n [placeholder]=\"'Resource.Posts.Placeholder.CtaText' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n </pw-input-container>\n <pw-input-container [label]=\"'Resource.Posts.ExternalUrl' | transloco\"\n class=\"col-12 col-md-6\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.ExternalUrl' | transloco\"\n name=\"external_url\" controlId=\"resource-external_url\">\n <input type=\"text\"\n id=\"resource-external_url\"\n class=\"form-control\"\n formControlName=\"external_url\"\n [placeholder]=\"'Resource.Posts.Placeholder.ExternalUrl' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['external_url'].errors }\" />\n </pw-input-container>\n <pw-input-container [label]=\"'Resource.Posts.Tags' | transloco \" class=\"ui-fluid skills-modal col-12 col-md-6 col-sm-12 tags\"\n [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\" name=\"tags\" controlId=\"resource-tags\" [useAriaLabelledbyOnly]=\"true\">\n <p-autoComplete appendTo=\"body\" [(ngModel)]=\"selectedTags\" class=\"body-bg\" [attr.aria-labelledby]=\"'resource-tags-label'\" [suggestions]=\"tagsSuggestion\" dataKey=\"id\" optionLabel=\"name\"\n (completeMethod)=\"search($event)\" styleClass=\"w-100\" [minLength]=\"1\" [maxlength]=\"10\" [dropdown]=\"true\"\n [ngModelOptions]=\"{ standalone: true }\" [placeholder]=\"'Resource.Posts.Placeholder.Tags' | transloco\" [multiple]=\"true\">\n </p-autoComplete>\n </pw-input-container>\n <pw-input-container [label]=\"'Author' | transloco\"\n class=\"col-12 col-md-4 col-sm-6\"\n name=\"author_id\" controlId=\"resource-author_id\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Please select an author' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'resource-author_id-label'\"\n formControlName=\"author_id\"\n [options]=\"availableAuthors\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [placeholder]=\"'Resource.Posts.Placeholder.Author' | transloco\"\n [loading]=\"authorsLoading\"\n [ngClass]=\"{ 'is-invalid': submitted && f['author_id'].errors }\"\n styleClass=\"w-100\">\n <ng-template pTemplate=\"item\" let-author>\n <div>\n <div>{{ author.label }}</div>\n </div>\n </ng-template>\n </p-select>\n </pw-input-container>\n <!-- WHEN and AUTHOR on same line -->\n <div class=\"col-12 col-md-2 col-sm-6\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Resource.Posts.When' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.When' | transloco\"\n name=\"when\" controlId=\"resource-when\" [useAriaLabelledbyOnly]=\"true\">\n <div>\n <p-datepicker inputId=\"resource-admin-details-when\" formControlName=\"when\"\n [attr.aria-labelledby]=\"'resource-when-label'\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\"\n [placeholder]=\"'Resource.Posts.Placeholder.When' | transloco\"\n [ngClass]=\"{'is-invalid': submitted && f['when'].errors}\">\n </p-datepicker>\n </div>\n </pw-input-container>\n </div>\n </div>\n <!-- Author Dropdown -->\n <!-- Three toggles on next line -->\n <div class=\"col-12\">\n <div class=\"row\">\n <div class=\"col-12 col-md-2 col-sm-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.ShowCase' | transloco\"\n [label]=\"'Resource.Posts.ShowCase' | transloco\" name=\"showcase\" controlId=\"resource-post-showcase\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" [attr.aria-labelledby]=\"'resource-post-showcase-label'\" formControlName=\"showcase\" name=\"showcase\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <!--Published At -->\n <div class=\"col-12 col-md-2 col-sm-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.Published' | transloco\"\n [label]=\"'Resource.Posts.Published' | transloco\"\n name=\"published_at\" controlId=\"resource-post-published_at\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\"\n [attr.aria-labelledby]=\"'resource-post-published_at-label'\"\n formControlName=\"published_at\"\n name=\"published_at\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <!--Accepted At -->\n <div class=\"col-12 col-md-2 col-sm-6 accept-icon\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.AcceptedByAdmin' | transloco\"\n [label]=\"'Resource.Posts.AcceptedByAdmin' | transloco\"\n name=\"accepted_at\" controlId=\"resource-post-accepted_at\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\"\n [attr.aria-labelledby]=\"'resource-post-accepted_at-label'\"\n formControlName=\"accepted_at\"\n name=\"accepted_at\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"navigateToResourceList()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"submitted\"\n class=\"btn btn-primary\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </form>\n }\n </div>\n </div>\n </div>\n </div>\n\n\n <ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Picture</h5>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small>You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n nudity, artwork or copyrighted images.)</small>\n <pw-image-cropper #profile\n aspectRatio=\"auto\"\n (imageSelectionEvent)=\"onImageSelection($event)\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n </ng-template>\n\n <ng-template #rectContent let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Picture</h5>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n </button>\n </div>\n\n <div class=\"modal-body\">\n <small>\n You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n nudity, artwork or copyrighted images.)\n </small>\n\n\n <pw-image-cropper\n #profile\n [aspectRatio]=\"'dynamic'\"\n [dynamicData]=\"getAspectRatio()\"\n (imageSelectionEvent)=\"onRectangularImageSelection($event)\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n </ng-template>\n", styles: [".col-md-6.display-grid{display:grid}body .ui-autocomplete.ui-autocomplete-multiple .ui-autocomplete-multiple-container{width:100%}body .ui-inputtext{padding:0}.comment{border:1px solid rgb(238,238,238)}.is-invalid .ql-container.ql-snow,.is-invalid .ql-toolbar.ql-snow{border-color:#dc3545}pw-resources-details-index .image-container>h4{color:var(--titles, #222);font-size:14px;font-weight:600}pw-resources-details-index .cover-picture,pw-resources-details-index .rectangular-picture{background:#f7f8fa;border:1px solid #e2e5ea;border-radius:8px;object-fit:contain;padding:12px;width:100%}pw-resources-details-index .cover-picture{aspect-ratio:16/9}pw-resources-details-index .rectangular-picture{aspect-ratio:3/1}pw-resources-details-index .cover-dropzone,pw-resources-details-index .rectangular-dropzone{min-height:96px;width:100%}pw-resources-details-index .cover-dropzone{aspect-ratio:16/9}pw-resources-details-index .rectangular-dropzone{aspect-ratio:3/1}pw-resources-details-index .overlay{cursor:pointer}pw-resources-details-index .overlay-text a{color:var(--first, #1769e1);cursor:pointer;font-weight:600}pw-resources-details-index .overlay-text a:hover{text-decoration:underline}.body-bg span .ui-autocomplete-multiple-container{background-color:#f5f7fa}.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token{color:var(--tabs_text)}.tags .info-circle .tooltiptext:after{left:25px!important}.tags .info-circle .tooltiptext{left:-30px!important}.blurb .info-circle .tooltiptext:after{left:50px!important}.blurb .info-circle .tooltiptext{left:-55px!important}.accept-icon .info-circle .tooltiptext:after{left:110px!important}.accept-icon .info-circle .tooltiptext{right:-85px!important}\n"], dependencies: [{ kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i10$2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i9.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i9.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i9.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i13$1.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i10$1.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i11.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i11.LazyImgDirective, selector: "img" }, { kind: "directive", type: i9.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$1.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6232
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: ResourceAdminDetailsComponent, isStandalone: false, selector: "pw-resources-details-index", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"navigateToResourceList()\"\n class=\"previous\">\n <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"m-subheader__title m-subheader__title--separator\">\n Add or edit resource\n </h3>\n </div>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n\n <div class=\"p-2 mt-3\">\n @if (!isLoading) {\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <!-- Title -->\n <pw-input-container [label]=\"'Label.Title' | transloco\"\n class=\"col-12\"\n name=\"title\" controlId=\"resource-title\"\n [errorMsg]=\"'Resource.Posts.Validation.Title' | transloco\">\n <input type=\"text\"\n id=\"resource-title\"\n class=\"form-control\"\n formControlName=\"title\"\n [placeholder]=\"'Resource.Posts.Placeholder.Title' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n </pw-input-container>\n <!-- Blurb -->\n <pw-input-container [label]=\"'Resource.Posts.Blurb' | transloco\"\n class=\"col-12\"\n name=\"blurb\" controlId=\"resource-blurb\"\n class=\"blurb\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'The blurb is used for the metadata.description field'\">\n <textarea id=\"resource-blurb\" class=\"form-control\"\n rows=\"3\"\n formControlName=\"blurb\"\n [placeholder]=\"'Resource.Posts.Placeholder.Blurb' | transloco\"></textarea>\n </pw-input-container>\n <!-- Rich Text Editor -->\n <pw-input-container [label]=\"'Resource.Posts.Body' | transloco\"\n class=\"col-9 col-md-9 col-sm-12\"\n name=\"body\" controlId=\"resource-body\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Resource.Posts.Validation.Body' | transloco\">\n <quill-editor [attr.aria-labelledby]=\"'resource-body-label'\" [styles]=\"{ height: '500px' }\"\n class=\"quillEditor\" [modules]=\"editorConfig\"\n formControlName=\"body\"\n [placeholder]=\"'Resource.Posts.Placeholder.Body' | transloco\"\n [ngClass]=\"{\n 'w-100': true,\n 'quill-container': true,\n 'is-invalid': submitted && f['body'].errors\n }\">\n </quill-editor>\n </pw-input-container>\n <div class=\"col-12 col-md-3 col-sm-4 my-4\">\n <!-- Cover Picture -->\n <div class=\"text-start mb-4\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\">{{ 'Resource.Posts.CoverPicture' | transloco }}</h4>\n @if (image && !image.includes('default-photo.jpg') && !coverImageBroken) {\n <img [src]=\"image\" class=\"image cover-picture\" alt=\"Cover preview\"\n role=\"presentation\" (error)=\"coverImageBroken = true\" />\n <div class=\"d-flex align-items-center gap-3 mt-1\">\n <div class=\"overlay\" (click)=\"openModal(content)\" (keydown.enter)=\"openModal(content)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Change cover picture\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n <i class=\"fa fa-trash delete-icon text-danger cursor-pointer\"\n title=\"Remove Image\"\n (click)=\"deleteCoverImage()\"\n (keydown.enter)=\"deleteCoverImage()\"></i>\n </div>\n } @else {\n <div class=\"logo-dropzone cover-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload cover picture\" (keydown.enter)=\"openModal(content)\" (click)=\"openModal(content)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a picture</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n <!-- Rectangular Picture -->\n <div class=\"text-start\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\">{{ 'Resource.Posts.RectangularPicture' | transloco }}</h4>\n @if (rectangularImage && !rectangularImage.includes('default-photo.jpg') && !rectangularImageBroken) {\n <img [src]=\"rectangularImage\" class=\"image rectangular-picture\" alt=\"Rectangular preview\"\n role=\"presentation\" (error)=\"rectangularImageBroken = true\" />\n <div class=\"d-flex align-items-center gap-3 mt-1\">\n <div class=\"overlay\" (click)=\"openRectModal(rectContent)\" (keydown.enter)=\"openRectModal(rectContent)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Change rectangular picture\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n <i class=\"fa fa-trash delete-icon text-danger cursor-pointer\"\n title=\"Remove Image\"\n (click)=\"deleteRectangularImage()\"\n (keydown.enter)=\"deleteRectangularImage()\"></i>\n </div>\n } @else {\n <div class=\"logo-dropzone rectangular-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload rectangular picture\" (keydown.enter)=\"openRectModal(rectContent)\" (click)=\"openRectModal(rectContent)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a picture</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n </div>\n <pw-input-container [label]=\"'Resource.Posts.CtaText' | transloco\"\n class=\"col-12 col-md-6\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\"\n name=\"cta_text\" controlId=\"resource-cta_text\">\n <input type=\"text\"\n id=\"resource-cta_text\"\n class=\"form-control\"\n formControlName=\"cta_text\"\n [placeholder]=\"'Resource.Posts.Placeholder.CtaText' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n </pw-input-container>\n <pw-input-container [label]=\"'Resource.Posts.ExternalUrl' | transloco\"\n class=\"col-12 col-md-6\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.ExternalUrl' | transloco\"\n name=\"external_url\" controlId=\"resource-external_url\">\n <input type=\"text\"\n id=\"resource-external_url\"\n class=\"form-control\"\n formControlName=\"external_url\"\n [placeholder]=\"'Resource.Posts.Placeholder.ExternalUrl' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['external_url'].errors }\" />\n </pw-input-container>\n <pw-input-container [label]=\"'Resource.Posts.Tags' | transloco \" class=\"ui-fluid skills-modal col-12 col-md-6 col-sm-12 tags\"\n [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\" name=\"tags\" controlId=\"resource-tags\" [useAriaLabelledbyOnly]=\"true\">\n <p-autoComplete appendTo=\"body\" [(ngModel)]=\"selectedTags\" class=\"body-bg\" [attr.aria-labelledby]=\"'resource-tags-label'\" [suggestions]=\"tagsSuggestion\" dataKey=\"id\" optionLabel=\"name\"\n (completeMethod)=\"search($event)\" styleClass=\"w-100\" [minLength]=\"1\" [maxlength]=\"10\" [dropdown]=\"true\"\n [ngModelOptions]=\"{ standalone: true }\" [placeholder]=\"'Resource.Posts.Placeholder.Tags' | transloco\" [multiple]=\"true\">\n </p-autoComplete>\n </pw-input-container>\n <pw-input-container [label]=\"'Author' | transloco\"\n class=\"col-12 col-md-4 col-sm-6\"\n name=\"author_id\" controlId=\"resource-author_id\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Please select an author' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'resource-author_id-label'\"\n formControlName=\"author_id\"\n [options]=\"availableAuthors\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [placeholder]=\"'Resource.Posts.Placeholder.Author' | transloco\"\n [loading]=\"authorsLoading\"\n [ngClass]=\"{ 'is-invalid': submitted && f['author_id'].errors }\"\n styleClass=\"w-100\">\n <ng-template pTemplate=\"item\" let-author>\n <div>\n <div>{{ author.label }}</div>\n </div>\n </ng-template>\n </p-select>\n </pw-input-container>\n <!-- WHEN and AUTHOR on same line -->\n <div class=\"col-12 col-md-2 col-sm-6\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Resource.Posts.When' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.When' | transloco\"\n name=\"when\" controlId=\"resource-when\" [useAriaLabelledbyOnly]=\"true\">\n <div>\n <p-datepicker inputId=\"resource-admin-details-when\" formControlName=\"when\"\n [attr.aria-labelledby]=\"'resource-when-label'\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\"\n [placeholder]=\"'Resource.Posts.Placeholder.When' | transloco\"\n [ngClass]=\"{'is-invalid': submitted && f['when'].errors}\">\n </p-datepicker>\n </div>\n </pw-input-container>\n </div>\n </div>\n <!-- Author Dropdown -->\n <!-- Three toggles on next line -->\n <div class=\"col-12\">\n <div class=\"row\">\n <div class=\"col-12 col-md-2 col-sm-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.ShowCase' | transloco\"\n [label]=\"'Resource.Posts.ShowCase' | transloco\" name=\"showcase\" controlId=\"resource-post-showcase\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" [attr.aria-labelledby]=\"'resource-post-showcase-label'\" formControlName=\"showcase\" name=\"showcase\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <!--Published At -->\n <div class=\"col-12 col-md-2 col-sm-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.Published' | transloco\"\n [label]=\"'Resource.Posts.Published' | transloco\"\n name=\"published_at\" controlId=\"resource-post-published_at\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\"\n [attr.aria-labelledby]=\"'resource-post-published_at-label'\"\n formControlName=\"published_at\"\n name=\"published_at\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <!--Accepted At -->\n <div class=\"col-12 col-md-2 col-sm-6 accept-icon\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.AcceptedByAdmin' | transloco\"\n [label]=\"'Resource.Posts.AcceptedByAdmin' | transloco\"\n name=\"accepted_at\" controlId=\"resource-post-accepted_at\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\"\n [attr.aria-labelledby]=\"'resource-post-accepted_at-label'\"\n formControlName=\"accepted_at\"\n name=\"accepted_at\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"navigateToResourceList()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"submitted\"\n class=\"btn btn-primary\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </form>\n }\n </div>\n </div>\n </div>\n </div>\n\n\n <ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Picture</h5>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small>You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n nudity, artwork or copyrighted images.)</small>\n <pw-image-cropper #profile\n aspectRatio=\"auto\"\n (imageSelectionEvent)=\"onImageSelection($event)\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n </ng-template>\n\n <ng-template #rectContent let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Picture</h5>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n </button>\n </div>\n\n <div class=\"modal-body\">\n <small>\n You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n nudity, artwork or copyrighted images.)\n </small>\n\n\n <pw-image-cropper\n #profile\n [aspectRatio]=\"'dynamic'\"\n [dynamicData]=\"getAspectRatio()\"\n (imageSelectionEvent)=\"onRectangularImageSelection($event)\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n </ng-template>\n", styles: [".col-md-6.display-grid{display:grid}body .ui-autocomplete.ui-autocomplete-multiple .ui-autocomplete-multiple-container{width:100%}body .ui-inputtext{padding:0}.comment{border:1px solid rgb(238,238,238)}.is-invalid .ql-container.ql-snow,.is-invalid .ql-toolbar.ql-snow{border-color:#dc3545}pw-resources-details-index .image-container>h4{color:var(--titles, #222);font-size:14px;font-weight:600}pw-resources-details-index .cover-picture,pw-resources-details-index .rectangular-picture{background:#f7f8fa;border:1px solid #e2e5ea;border-radius:8px;object-fit:contain;padding:12px;width:100%}pw-resources-details-index .cover-picture{aspect-ratio:16/9}pw-resources-details-index .rectangular-picture{aspect-ratio:3/1}pw-resources-details-index .cover-dropzone,pw-resources-details-index .rectangular-dropzone{min-height:96px;width:100%}pw-resources-details-index .cover-dropzone{aspect-ratio:16/9}pw-resources-details-index .rectangular-dropzone{aspect-ratio:3/1}pw-resources-details-index .overlay{cursor:pointer}pw-resources-details-index .overlay-text a{color:var(--first, #1769e1);cursor:pointer;font-weight:600}pw-resources-details-index .overlay-text a:hover{text-decoration:underline}.body-bg span .ui-autocomplete-multiple-container{background-color:#f5f7fa}.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token{color:var(--tabs_text)}.tags .info-circle .tooltiptext:after{left:25px!important}.tags .info-circle .tooltiptext{left:-30px!important}.blurb .info-circle .tooltiptext:after{left:50px!important}.blurb .info-circle .tooltiptext{left:-55px!important}.accept-icon .info-circle .tooltiptext:after{left:110px!important}.accept-icon .info-circle .tooltiptext{right:-85px!important}\n"], dependencies: [{ kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i10$2.DatePicker, selector: "p-datePicker, p-datepicker, p-date-picker", inputs: ["iconDisplay", "styleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "readonlyInput", "shortYearCutoff", "hourFormat", "timeOnly", "stepHour", "stepMinute", "stepSecond", "showSeconds", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "minDate", "maxDate", "disabledDates", "disabledDays", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "view", "defaultDate", "appendTo", "motionOptions"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i9.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i9.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i9.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i13$1.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i10$1.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i11.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i11.LazyImgDirective, selector: "img" }, { kind: "directive", type: i9.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$1.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
6233
6233
|
}
|
|
6234
6234
|
__decorate([
|
|
6235
6235
|
ValidateForm('form'),
|
|
@@ -6239,7 +6239,7 @@ __decorate([
|
|
|
6239
6239
|
], ResourceAdminDetailsComponent.prototype, "onSave", null);
|
|
6240
6240
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ResourceAdminDetailsComponent, decorators: [{
|
|
6241
6241
|
type: Component,
|
|
6242
|
-
args: [{ selector: 'pw-resources-details-index', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"navigateToResourceList()\"\n class=\"previous\">\n <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"m-subheader__title m-subheader__title--separator\">\n Add or edit resource\n </h3>\n </div>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n\n <div class=\"p-2 mt-3\">\n @if (!isLoading) {\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <!-- Title -->\n <pw-input-container [label]=\"'Label.Title' | transloco\"\n class=\"col-12\"\n name=\"title\" controlId=\"resource-title\"\n [errorMsg]=\"'Resource.Posts.Validation.Title' | transloco\">\n <input type=\"text\"\n id=\"resource-title\"\n class=\"form-control\"\n formControlName=\"title\"\n [placeholder]=\"'Resource.Posts.Placeholder.Title' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n </pw-input-container>\n <!-- Blurb -->\n <pw-input-container [label]=\"'Resource.Posts.Blurb' | transloco\"\n class=\"col-12\"\n name=\"blurb\" controlId=\"resource-blurb\"\n class=\"blurb\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'The blurb is used for the metadata.description field'\">\n <textarea id=\"resource-blurb\" class=\"form-control\"\n rows=\"3\"\n formControlName=\"blurb\"\n [placeholder]=\"'Resource.Posts.Placeholder.Blurb' | transloco\"></textarea>\n </pw-input-container>\n <!-- Rich Text Editor -->\n <pw-input-container [label]=\"'Resource.Posts.Body' | transloco\"\n class=\"col-9 col-md-9 col-sm-12\"\n name=\"body\" controlId=\"resource-body\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Resource.Posts.Validation.Body' | transloco\">\n <quill-editor [attr.aria-labelledby]=\"'resource-body-label'\" [styles]=\"{ height: '500px' }\"\n class=\"quillEditor\" [modules]=\"editorConfig\"\n formControlName=\"body\"\n [placeholder]=\"'Resource.Posts.Placeholder.Body' | transloco\"\n [ngClass]=\"{\n 'w-100': true,\n 'quill-container': true,\n 'is-invalid': submitted && f['body'].errors\n }\">\n </quill-editor>\n </pw-input-container>\n <div class=\"col-12 col-md-3 col-sm-4 my-4\">\n <!-- Cover Picture -->\n <div class=\"text-start mb-4\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\">{{ 'Resource.Posts.CoverPicture' | transloco }}</h4>\n @if (image && !image.includes('default-photo.jpg') && !coverImageBroken) {\n <img [src]=\"image\" class=\"image cover-picture\" alt=\"Cover picture preview\"\n role=\"presentation\" (error)=\"coverImageBroken = true\" />\n <div class=\"d-flex align-items-center gap-3 mt-1\">\n <div class=\"overlay\" (click)=\"openModal(content)\" (keydown.enter)=\"openModal(content)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Change cover picture\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n <i class=\"fa fa-trash delete-icon text-danger cursor-pointer\"\n title=\"Remove Image\"\n (click)=\"deleteCoverImage()\"\n (keydown.enter)=\"deleteCoverImage()\"></i>\n </div>\n } @else {\n <div class=\"logo-dropzone cover-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload cover picture\" (keydown.enter)=\"openModal(content)\" (click)=\"openModal(content)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a picture</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n <!-- Rectangular Picture -->\n <div class=\"text-start\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\">{{ 'Resource.Posts.RectangularPicture' | transloco }}</h4>\n @if (rectangularImage && !rectangularImage.includes('default-photo.jpg') && !rectangularImageBroken) {\n <img [src]=\"rectangularImage\" class=\"image rectangular-picture\" alt=\"Rectangular picture preview\"\n role=\"presentation\" (error)=\"rectangularImageBroken = true\" />\n <div class=\"d-flex align-items-center gap-3 mt-1\">\n <div class=\"overlay\" (click)=\"openRectModal(rectContent)\" (keydown.enter)=\"openRectModal(rectContent)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Change rectangular picture\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n <i class=\"fa fa-trash delete-icon text-danger cursor-pointer\"\n title=\"Remove Image\"\n (click)=\"deleteRectangularImage()\"\n (keydown.enter)=\"deleteRectangularImage()\"></i>\n </div>\n } @else {\n <div class=\"logo-dropzone rectangular-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload rectangular picture\" (keydown.enter)=\"openRectModal(rectContent)\" (click)=\"openRectModal(rectContent)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a picture</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n </div>\n <pw-input-container [label]=\"'Resource.Posts.CtaText' | transloco\"\n class=\"col-12 col-md-6\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\"\n name=\"cta_text\" controlId=\"resource-cta_text\">\n <input type=\"text\"\n id=\"resource-cta_text\"\n class=\"form-control\"\n formControlName=\"cta_text\"\n [placeholder]=\"'Resource.Posts.Placeholder.CtaText' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n </pw-input-container>\n <pw-input-container [label]=\"'Resource.Posts.ExternalUrl' | transloco\"\n class=\"col-12 col-md-6\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.ExternalUrl' | transloco\"\n name=\"external_url\" controlId=\"resource-external_url\">\n <input type=\"text\"\n id=\"resource-external_url\"\n class=\"form-control\"\n formControlName=\"external_url\"\n [placeholder]=\"'Resource.Posts.Placeholder.ExternalUrl' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['external_url'].errors }\" />\n </pw-input-container>\n <pw-input-container [label]=\"'Resource.Posts.Tags' | transloco \" class=\"ui-fluid skills-modal col-12 col-md-6 col-sm-12 tags\"\n [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\" name=\"tags\" controlId=\"resource-tags\" [useAriaLabelledbyOnly]=\"true\">\n <p-autoComplete appendTo=\"body\" [(ngModel)]=\"selectedTags\" class=\"body-bg\" [attr.aria-labelledby]=\"'resource-tags-label'\" [suggestions]=\"tagsSuggestion\" dataKey=\"id\" optionLabel=\"name\"\n (completeMethod)=\"search($event)\" styleClass=\"w-100\" [minLength]=\"1\" [maxlength]=\"10\" [dropdown]=\"true\"\n [ngModelOptions]=\"{ standalone: true }\" [placeholder]=\"'Resource.Posts.Placeholder.Tags' | transloco\" [multiple]=\"true\">\n </p-autoComplete>\n </pw-input-container>\n <pw-input-container [label]=\"'Author' | transloco\"\n class=\"col-12 col-md-4 col-sm-6\"\n name=\"author_id\" controlId=\"resource-author_id\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Please select an author' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'resource-author_id-label'\"\n formControlName=\"author_id\"\n [options]=\"availableAuthors\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [placeholder]=\"'Resource.Posts.Placeholder.Author' | transloco\"\n [loading]=\"authorsLoading\"\n [ngClass]=\"{ 'is-invalid': submitted && f['author_id'].errors }\"\n styleClass=\"w-100\">\n <ng-template pTemplate=\"item\" let-author>\n <div>\n <div>{{ author.label }}</div>\n </div>\n </ng-template>\n </p-select>\n </pw-input-container>\n <!-- WHEN and AUTHOR on same line -->\n <div class=\"col-12 col-md-2 col-sm-6\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Resource.Posts.When' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.When' | transloco\"\n name=\"when\" controlId=\"resource-when\" [useAriaLabelledbyOnly]=\"true\">\n <div>\n <p-datepicker inputId=\"resource-admin-details-when\" formControlName=\"when\"\n [attr.aria-labelledby]=\"'resource-when-label'\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\"\n [placeholder]=\"'Resource.Posts.Placeholder.When' | transloco\"\n [ngClass]=\"{'is-invalid': submitted && f['when'].errors}\">\n </p-datepicker>\n </div>\n </pw-input-container>\n </div>\n </div>\n <!-- Author Dropdown -->\n <!-- Three toggles on next line -->\n <div class=\"col-12\">\n <div class=\"row\">\n <div class=\"col-12 col-md-2 col-sm-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.ShowCase' | transloco\"\n [label]=\"'Resource.Posts.ShowCase' | transloco\" name=\"showcase\" controlId=\"resource-post-showcase\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" [attr.aria-labelledby]=\"'resource-post-showcase-label'\" formControlName=\"showcase\" name=\"showcase\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <!--Published At -->\n <div class=\"col-12 col-md-2 col-sm-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.Published' | transloco\"\n [label]=\"'Resource.Posts.Published' | transloco\"\n name=\"published_at\" controlId=\"resource-post-published_at\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\"\n [attr.aria-labelledby]=\"'resource-post-published_at-label'\"\n formControlName=\"published_at\"\n name=\"published_at\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <!--Accepted At -->\n <div class=\"col-12 col-md-2 col-sm-6 accept-icon\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.AcceptedByAdmin' | transloco\"\n [label]=\"'Resource.Posts.AcceptedByAdmin' | transloco\"\n name=\"accepted_at\" controlId=\"resource-post-accepted_at\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\"\n [attr.aria-labelledby]=\"'resource-post-accepted_at-label'\"\n formControlName=\"accepted_at\"\n name=\"accepted_at\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"navigateToResourceList()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"submitted\"\n class=\"btn btn-primary\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </form>\n }\n </div>\n </div>\n </div>\n </div>\n\n\n <ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Picture</h5>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small>You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n nudity, artwork or copyrighted images.)</small>\n <pw-image-cropper #profile\n aspectRatio=\"auto\"\n (imageSelectionEvent)=\"onImageSelection($event)\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n </ng-template>\n\n <ng-template #rectContent let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Picture</h5>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n </button>\n </div>\n\n <div class=\"modal-body\">\n <small>\n You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n nudity, artwork or copyrighted images.)\n </small>\n\n\n <pw-image-cropper\n #profile\n [aspectRatio]=\"'dynamic'\"\n [dynamicData]=\"getAspectRatio()\"\n (imageSelectionEvent)=\"onRectangularImageSelection($event)\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n </ng-template>\n", styles: [".col-md-6.display-grid{display:grid}body .ui-autocomplete.ui-autocomplete-multiple .ui-autocomplete-multiple-container{width:100%}body .ui-inputtext{padding:0}.comment{border:1px solid rgb(238,238,238)}.is-invalid .ql-container.ql-snow,.is-invalid .ql-toolbar.ql-snow{border-color:#dc3545}pw-resources-details-index .image-container>h4{color:var(--titles, #222);font-size:14px;font-weight:600}pw-resources-details-index .cover-picture,pw-resources-details-index .rectangular-picture{background:#f7f8fa;border:1px solid #e2e5ea;border-radius:8px;object-fit:contain;padding:12px;width:100%}pw-resources-details-index .cover-picture{aspect-ratio:16/9}pw-resources-details-index .rectangular-picture{aspect-ratio:3/1}pw-resources-details-index .cover-dropzone,pw-resources-details-index .rectangular-dropzone{min-height:96px;width:100%}pw-resources-details-index .cover-dropzone{aspect-ratio:16/9}pw-resources-details-index .rectangular-dropzone{aspect-ratio:3/1}pw-resources-details-index .overlay{cursor:pointer}pw-resources-details-index .overlay-text a{color:var(--first, #1769e1);cursor:pointer;font-weight:600}pw-resources-details-index .overlay-text a:hover{text-decoration:underline}.body-bg span .ui-autocomplete-multiple-container{background-color:#f5f7fa}.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token{color:var(--tabs_text)}.tags .info-circle .tooltiptext:after{left:25px!important}.tags .info-circle .tooltiptext{left:-30px!important}.blurb .info-circle .tooltiptext:after{left:50px!important}.blurb .info-circle .tooltiptext{left:-55px!important}.accept-icon .info-circle .tooltiptext:after{left:110px!important}.accept-icon .info-circle .tooltiptext{right:-85px!important}\n"] }]
|
|
6242
|
+
args: [{ selector: 'pw-resources-details-index', encapsulation: ViewEncapsulation.None, standalone: false, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\"\n (click)=\"navigateToResourceList()\"\n class=\"previous\">\n <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"m-subheader__title m-subheader__title--separator\">\n Add or edit resource\n </h3>\n </div>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n\n <div class=\"p-2 mt-3\">\n @if (!isLoading) {\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <!-- Title -->\n <pw-input-container [label]=\"'Label.Title' | transloco\"\n class=\"col-12\"\n name=\"title\" controlId=\"resource-title\"\n [errorMsg]=\"'Resource.Posts.Validation.Title' | transloco\">\n <input type=\"text\"\n id=\"resource-title\"\n class=\"form-control\"\n formControlName=\"title\"\n [placeholder]=\"'Resource.Posts.Placeholder.Title' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n </pw-input-container>\n <!-- Blurb -->\n <pw-input-container [label]=\"'Resource.Posts.Blurb' | transloco\"\n class=\"col-12\"\n name=\"blurb\" controlId=\"resource-blurb\"\n class=\"blurb\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'The blurb is used for the metadata.description field'\">\n <textarea id=\"resource-blurb\" class=\"form-control\"\n rows=\"3\"\n formControlName=\"blurb\"\n [placeholder]=\"'Resource.Posts.Placeholder.Blurb' | transloco\"></textarea>\n </pw-input-container>\n <!-- Rich Text Editor -->\n <pw-input-container [label]=\"'Resource.Posts.Body' | transloco\"\n class=\"col-9 col-md-9 col-sm-12\"\n name=\"body\" controlId=\"resource-body\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Resource.Posts.Validation.Body' | transloco\">\n <quill-editor [attr.aria-labelledby]=\"'resource-body-label'\" [styles]=\"{ height: '500px' }\"\n class=\"quillEditor\" [modules]=\"editorConfig\"\n formControlName=\"body\"\n [placeholder]=\"'Resource.Posts.Placeholder.Body' | transloco\"\n [ngClass]=\"{\n 'w-100': true,\n 'quill-container': true,\n 'is-invalid': submitted && f['body'].errors\n }\">\n </quill-editor>\n </pw-input-container>\n <div class=\"col-12 col-md-3 col-sm-4 my-4\">\n <!-- Cover Picture -->\n <div class=\"text-start mb-4\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\">{{ 'Resource.Posts.CoverPicture' | transloco }}</h4>\n @if (image && !image.includes('default-photo.jpg') && !coverImageBroken) {\n <img [src]=\"image\" class=\"image cover-picture\" alt=\"Cover preview\"\n role=\"presentation\" (error)=\"coverImageBroken = true\" />\n <div class=\"d-flex align-items-center gap-3 mt-1\">\n <div class=\"overlay\" (click)=\"openModal(content)\" (keydown.enter)=\"openModal(content)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Change cover picture\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n <i class=\"fa fa-trash delete-icon text-danger cursor-pointer\"\n title=\"Remove Image\"\n (click)=\"deleteCoverImage()\"\n (keydown.enter)=\"deleteCoverImage()\"></i>\n </div>\n } @else {\n <div class=\"logo-dropzone cover-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload cover picture\" (keydown.enter)=\"openModal(content)\" (click)=\"openModal(content)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a picture</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n <!-- Rectangular Picture -->\n <div class=\"text-start\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\">{{ 'Resource.Posts.RectangularPicture' | transloco }}</h4>\n @if (rectangularImage && !rectangularImage.includes('default-photo.jpg') && !rectangularImageBroken) {\n <img [src]=\"rectangularImage\" class=\"image rectangular-picture\" alt=\"Rectangular preview\"\n role=\"presentation\" (error)=\"rectangularImageBroken = true\" />\n <div class=\"d-flex align-items-center gap-3 mt-1\">\n <div class=\"overlay\" (click)=\"openRectModal(rectContent)\" (keydown.enter)=\"openRectModal(rectContent)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Change rectangular picture\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n <i class=\"fa fa-trash delete-icon text-danger cursor-pointer\"\n title=\"Remove Image\"\n (click)=\"deleteRectangularImage()\"\n (keydown.enter)=\"deleteRectangularImage()\"></i>\n </div>\n } @else {\n <div class=\"logo-dropzone rectangular-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload rectangular picture\" (keydown.enter)=\"openRectModal(rectContent)\" (click)=\"openRectModal(rectContent)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a picture</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n </div>\n <pw-input-container [label]=\"'Resource.Posts.CtaText' | transloco\"\n class=\"col-12 col-md-6\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\"\n name=\"cta_text\" controlId=\"resource-cta_text\">\n <input type=\"text\"\n id=\"resource-cta_text\"\n class=\"form-control\"\n formControlName=\"cta_text\"\n [placeholder]=\"'Resource.Posts.Placeholder.CtaText' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n </pw-input-container>\n <pw-input-container [label]=\"'Resource.Posts.ExternalUrl' | transloco\"\n class=\"col-12 col-md-6\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.ExternalUrl' | transloco\"\n name=\"external_url\" controlId=\"resource-external_url\">\n <input type=\"text\"\n id=\"resource-external_url\"\n class=\"form-control\"\n formControlName=\"external_url\"\n [placeholder]=\"'Resource.Posts.Placeholder.ExternalUrl' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['external_url'].errors }\" />\n </pw-input-container>\n <pw-input-container [label]=\"'Resource.Posts.Tags' | transloco \" class=\"ui-fluid skills-modal col-12 col-md-6 col-sm-12 tags\"\n [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\" name=\"tags\" controlId=\"resource-tags\" [useAriaLabelledbyOnly]=\"true\">\n <p-autoComplete appendTo=\"body\" [(ngModel)]=\"selectedTags\" class=\"body-bg\" [attr.aria-labelledby]=\"'resource-tags-label'\" [suggestions]=\"tagsSuggestion\" dataKey=\"id\" optionLabel=\"name\"\n (completeMethod)=\"search($event)\" styleClass=\"w-100\" [minLength]=\"1\" [maxlength]=\"10\" [dropdown]=\"true\"\n [ngModelOptions]=\"{ standalone: true }\" [placeholder]=\"'Resource.Posts.Placeholder.Tags' | transloco\" [multiple]=\"true\">\n </p-autoComplete>\n </pw-input-container>\n <pw-input-container [label]=\"'Author' | transloco\"\n class=\"col-12 col-md-4 col-sm-6\"\n name=\"author_id\" controlId=\"resource-author_id\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Please select an author' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'resource-author_id-label'\"\n formControlName=\"author_id\"\n [options]=\"availableAuthors\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [placeholder]=\"'Resource.Posts.Placeholder.Author' | transloco\"\n [loading]=\"authorsLoading\"\n [ngClass]=\"{ 'is-invalid': submitted && f['author_id'].errors }\"\n styleClass=\"w-100\">\n <ng-template pTemplate=\"item\" let-author>\n <div>\n <div>{{ author.label }}</div>\n </div>\n </ng-template>\n </p-select>\n </pw-input-container>\n <!-- WHEN and AUTHOR on same line -->\n <div class=\"col-12 col-md-2 col-sm-6\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Resource.Posts.When' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.When' | transloco\"\n name=\"when\" controlId=\"resource-when\" [useAriaLabelledbyOnly]=\"true\">\n <div>\n <p-datepicker inputId=\"resource-admin-details-when\" formControlName=\"when\"\n [attr.aria-labelledby]=\"'resource-when-label'\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\"\n [placeholder]=\"'Resource.Posts.Placeholder.When' | transloco\"\n [ngClass]=\"{'is-invalid': submitted && f['when'].errors}\">\n </p-datepicker>\n </div>\n </pw-input-container>\n </div>\n </div>\n <!-- Author Dropdown -->\n <!-- Three toggles on next line -->\n <div class=\"col-12\">\n <div class=\"row\">\n <div class=\"col-12 col-md-2 col-sm-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.ShowCase' | transloco\"\n [label]=\"'Resource.Posts.ShowCase' | transloco\" name=\"showcase\" controlId=\"resource-post-showcase\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" [attr.aria-labelledby]=\"'resource-post-showcase-label'\" formControlName=\"showcase\" name=\"showcase\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <!--Published At -->\n <div class=\"col-12 col-md-2 col-sm-6\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.Published' | transloco\"\n [label]=\"'Resource.Posts.Published' | transloco\"\n name=\"published_at\" controlId=\"resource-post-published_at\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\"\n [attr.aria-labelledby]=\"'resource-post-published_at-label'\"\n formControlName=\"published_at\"\n name=\"published_at\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <!--Accepted At -->\n <div class=\"col-12 col-md-2 col-sm-6 accept-icon\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.AcceptedByAdmin' | transloco\"\n [label]=\"'Resource.Posts.AcceptedByAdmin' | transloco\"\n name=\"accepted_at\" controlId=\"resource-post-accepted_at\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\"\n [attr.aria-labelledby]=\"'resource-post-accepted_at-label'\"\n formControlName=\"accepted_at\"\n name=\"accepted_at\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"navigateToResourceList()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"submitted\"\n class=\"btn btn-primary\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </form>\n }\n </div>\n </div>\n </div>\n </div>\n\n\n <ng-template #content\n let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Picture</h5>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n\n </button>\n </div>\n <div class=\"modal-body\">\n <small>You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n nudity, artwork or copyrighted images.)</small>\n <pw-image-cropper #profile\n aspectRatio=\"auto\"\n (imageSelectionEvent)=\"onImageSelection($event)\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n </ng-template>\n\n <ng-template #rectContent let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Picture</h5>\n <button type=\"button\"\n class=\"btn-close float-end\"\n aria-label=\"Close\"\n (click)=\"modal.dismiss()\">\n </button>\n </div>\n\n <div class=\"modal-body\">\n <small>\n You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n nudity, artwork or copyrighted images.)\n </small>\n\n\n <pw-image-cropper\n #profile\n [aspectRatio]=\"'dynamic'\"\n [dynamicData]=\"getAspectRatio()\"\n (imageSelectionEvent)=\"onRectangularImageSelection($event)\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n </ng-template>\n", styles: [".col-md-6.display-grid{display:grid}body .ui-autocomplete.ui-autocomplete-multiple .ui-autocomplete-multiple-container{width:100%}body .ui-inputtext{padding:0}.comment{border:1px solid rgb(238,238,238)}.is-invalid .ql-container.ql-snow,.is-invalid .ql-toolbar.ql-snow{border-color:#dc3545}pw-resources-details-index .image-container>h4{color:var(--titles, #222);font-size:14px;font-weight:600}pw-resources-details-index .cover-picture,pw-resources-details-index .rectangular-picture{background:#f7f8fa;border:1px solid #e2e5ea;border-radius:8px;object-fit:contain;padding:12px;width:100%}pw-resources-details-index .cover-picture{aspect-ratio:16/9}pw-resources-details-index .rectangular-picture{aspect-ratio:3/1}pw-resources-details-index .cover-dropzone,pw-resources-details-index .rectangular-dropzone{min-height:96px;width:100%}pw-resources-details-index .cover-dropzone{aspect-ratio:16/9}pw-resources-details-index .rectangular-dropzone{aspect-ratio:3/1}pw-resources-details-index .overlay{cursor:pointer}pw-resources-details-index .overlay-text a{color:var(--first, #1769e1);cursor:pointer;font-weight:600}pw-resources-details-index .overlay-text a:hover{text-decoration:underline}.body-bg span .ui-autocomplete-multiple-container{background-color:#f5f7fa}.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token{color:var(--tabs_text)}.tags .info-circle .tooltiptext:after{left:25px!important}.tags .info-circle .tooltiptext{left:-30px!important}.blurb .info-circle .tooltiptext:after{left:50px!important}.blurb .info-circle .tooltiptext{left:-55px!important}.accept-icon .info-circle .tooltiptext:after{left:110px!important}.accept-icon .info-circle .tooltiptext{right:-85px!important}\n"] }]
|
|
6243
6243
|
}], ctorParameters: () => [{ type: i2$1.NgbModal }, { type: i1.AdminService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$1.TagService }, { type: i1$1.SubscriptionService }], propDecorators: { onSave: [] } });
|
|
6244
6244
|
|
|
6245
6245
|
class ResourcesAdminIndexComponent extends AppBaseComponent {
|
|
@@ -7026,11 +7026,11 @@ class SubscriptionUsersComponent extends AppBaseComponent {
|
|
|
7026
7026
|
});
|
|
7027
7027
|
}
|
|
7028
7028
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SubscriptionUsersComponent, deps: [{ token: i1$1.SubscriptionService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1$1.AuthService }, { token: i1$1.WindowService }, { token: i1.AdminService }, { token: i1$1.CustomToastService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7029
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SubscriptionUsersComponent, isStandalone: false, selector: "pw-subscription-users", viewQueries: [{ propertyName: "passwordValidationModalForImpersonate", first: true, predicate: ["passwordValidationModalForImpersonate"], descendants: true }, { propertyName: "passwordValidationModalForUserDelete", first: true, predicate: ["passwordValidationModalForUserDelete"], descendants: true }, { propertyName: "passwordValidationModalForRemove2fa", first: true, predicate: ["passwordValidationModalForRemove2fa"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\">\n @if (!isLoaded) {\n <p-progressSpinner></p-progressSpinner>\n }\n</div>\n@if (!isAddEnabled && canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n <div class=\"text-end mb-2\">\n <button class=\"btn btn-sm btn-outline-primary\" (click)=\"isAddEnabled = true\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n </button>\n </div>\n}\n@if (!isAddEnabled) {\n <section id=\"members\"\n >\n <div [class.hideTable]=\"totalUnfilteredCount === 0\"\n class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\">\n <p-table #dt\n [value]=\"subscriptionMembers\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n [customSort]=\"true\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <label for=\"subscription-users-search\" class=\"visually-hidden\">Search subscription users</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input id=\"subscription-users-search\"\n name=\"subscription-users-search\"\n [(ngModel)]=\"searchText\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n type=\"text\"\n pInputText\n placeholder=\"Search subscription users...\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"id\">\n {{ 'Admin.Users.Id' | transloco }}\n <p-sortIcon field=\"id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Label.FirstName' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_name\">\n {{ 'Label.LastName' | transloco }}\n <p-sortIcon field=\"last_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"email\">\n {{ 'Label.Email' | transloco }}\n <p-sortIcon field=\"email\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"slug\">\n {{ 'Admin.Subscriptions.NickName' | transloco }}\n <p-sortIcon field=\"slug\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"has_password\">\n {{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n <p-sortIcon field=\"has_password\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_sign_in_at\">\n {{ 'Admin.Subscriptions.LastLogin' | transloco }}\n <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n </th>\n <th scope=\"true\" class=\"actions-list-two\">\n {{ 'Label.Actions' | transloco }}\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-user>\n <tr>\n <td data-head=\"Id\">{{ user.id }}</td>\n <td data-head=\"First Name\">\n <span class=\"first-name\">{{ user.first_name }}</span>\n @if (subscriptionOwnerUserId === user.id) {\n <span *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Subscription Owner\">\n <i class=\"info-icon fas fa-user-tie success\" aria-hidden=\"true\"></i>\n </span>\n }\n @if (subscriptionAdmins?.includes(user?.id)) {\n <span class=\"badge bg-success mx-1 admin-badge\"> Admin </span>\n }\n </td>\n <td data-head=\"Last Name\">\n {{ user.last_name }}\n @if (user?.alpha) {\n <span\n [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n tooltipPosition=\"top\">\n <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n </span>\n }\n @if (user?.beta) {\n <span\n [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n class=\"ms-2\"\n tooltipPosition=\"top\">\n <i class=\"fa-regular fa-square-b alpha-beta text-primary\"></i>\n </span>\n }\n @if (user?.cognito_sso_activated) {\n <span\n class=\"ms-2\"\n [pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n tooltipPosition=\"top\">\n <i class=\"fa fa-cloud success\" ></i>\n </span>\n }\n </td>\n <td data-head=\"Email\">{{ user.email }}</td>\n <td data-head=\"Nick Name\">\n <a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n </td>\n <td data-head=\"Email Confirm\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n color=\"success-danger\"\n class=\"badge\">\n {{ user?.has_password ? 'Yes' : 'No' }}\n </span>\n @if (user?.blocked) {\n <span\n [pTooltip]=\"'This user has been blocked'\"\n class=\"ms-2\"\n tooltipPosition=\"top\">\n <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n </span>\n }\n </td>\n <td data-head=\"Last Login\">\n @if (user?.current_sign_in_at) {\n <span>\n <span>\n {{ user.current_sign_in_at | dateFormat }}\n </span>\n @if (user.current_sign_in_at) {\n <span>\n ({{ user.current_sign_in_at | sinceAgo }})\n </span>\n }\n </span>\n } @else {\n <span>\n <span>\n {{ user.last_sign_in_at | dateFormat }}\n </span>\n @if (user.last_sign_in_at) {\n <span>\n ({{ user.last_sign_in_at | sinceAgo }})\n </span>\n }\n </span>\n }\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Impersonate this user\" class=\"me-2 me-sm-3\">\n <i (click)=\"onImpersonate(user)\" (keydown.enter)=\"onImpersonate(user)\" class=\"fas fa-people-arrows fa-lg\" aria-hidden=\"true\"></i>\n </li>\n @if (subscriptionOwnerUserId !== user.id) {\n <li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Set this user as new owner\" class=\"me-2 me-sm-3\">\n <i (click)=\"onChangeOwner(user)\" (keydown.enter)=\"onChangeOwner(user)\" class=\"fa fa-user-crown warning fa-lg\" aria-hidden=\"true\"></i>\n </li>\n }\n @if (user?.enable_two_factor_authenticator) {\n <li *rbacAllow=\"'Pages.Alpha'\"\n (click)=\"disable2fa(user?.id)\"\n (keydown.enter)=\"disable2fa(user?.id)\"\n ngbTooltip=\"Disable 2FA\"\n class=\"me-2 me-sm-3 success\">\n <i class=\"fa fa-lock\"\n aria-hidden=\"true\"></i>\n </li>\n }\n @if (canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n <!-- Make Admin -->\n @if (!subscriptionAdmins?.includes(user.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(user, true)\"\n (keydown.enter)=\"makeAdmin(users, true)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n }\n <li></li>\n <!-- Remove Admin -->\n @if (subscriptionAdmins?.includes(user.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(user, false)\"\n (click)=\"makeAdmin(user, false)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n }\n } @else {\n <li class=\"mx-3\"></li>\n }\n @if (canShowSubscriptionActions) {\n <li\n [routerLink]=\"[routers.usersDetails + user.id]\"\n ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\">\n <i class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"></i>\n </li>\n }\n @if (canShowSubscriptionActions && isGranted('Pages.Admin.Users.Delete')) {\n <li\n ngbTooltip=\"Remove user from subscription\"\n class=\"me-2 me-sm-3\">\n <i (click)=\"onDelete(user)\"\n (keydown.enter)=\"onDelete(user)\"\n class=\"fa fa-trash delete-icon\"\n aria-hidden=\"true\"></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords === 0 && totalUnfilteredCount !== 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n }\n @if (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n @if (totalUnfilteredCount === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </section>\n}\n\n\n@if (isAddEnabled) {\n <section id=\"manage-members\"\n >\n <pw-add-members (membersAdded)=\"onMembersAdded()\"\n ></pw-add-members>\n </section>\n}\n\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}.info-icon{vertical-align:middle;margin-left:5px}.first-name{margin-right:5px}\n"], dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i6$1.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: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i6.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i2$1.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: i9.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10$1.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage"], outputs: ["successEvent"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i10$1.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i11.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i11.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: AddMembersComponent, selector: "pw-add-members", outputs: ["membersAdded"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.SinceAgoPipe, name: "sinceAgo" }] }); }
|
|
7029
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SubscriptionUsersComponent, isStandalone: false, selector: "pw-subscription-users", viewQueries: [{ propertyName: "passwordValidationModalForImpersonate", first: true, predicate: ["passwordValidationModalForImpersonate"], descendants: true }, { propertyName: "passwordValidationModalForUserDelete", first: true, predicate: ["passwordValidationModalForUserDelete"], descendants: true }, { propertyName: "passwordValidationModalForRemove2fa", first: true, predicate: ["passwordValidationModalForRemove2fa"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\">\n @if (!isLoaded) {\n <p-progressSpinner></p-progressSpinner>\n }\n</div>\n@if (!isAddEnabled && canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n <div class=\"text-end mb-2\">\n <button class=\"btn btn-sm btn-outline-primary\" (click)=\"isAddEnabled = true\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n </button>\n </div>\n}\n@if (!isAddEnabled) {\n <section id=\"members\"\n >\n <div [class.hideTable]=\"totalUnfilteredCount === 0\"\n class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\">\n <p-table #dt\n [value]=\"subscriptionMembers\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n [customSort]=\"true\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <label for=\"subscription-users-search\" class=\"visually-hidden\">Search subscription users</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input id=\"subscription-users-search\"\n name=\"subscription-users-search\"\n [(ngModel)]=\"searchText\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n type=\"text\"\n pInputText\n placeholder=\"Search subscription users...\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"id\">\n {{ 'Admin.Users.Id' | transloco }}\n <p-sortIcon field=\"id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Label.FirstName' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_name\">\n {{ 'Label.LastName' | transloco }}\n <p-sortIcon field=\"last_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"email\">\n {{ 'Label.Email' | transloco }}\n <p-sortIcon field=\"email\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"slug\">\n {{ 'Admin.Subscriptions.NickName' | transloco }}\n <p-sortIcon field=\"slug\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"has_password\">\n {{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n <p-sortIcon field=\"has_password\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_sign_in_at\">\n {{ 'Admin.Subscriptions.LastLogin' | transloco }}\n <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n </th>\n <th scope=\"true\" class=\"actions-list-two\">\n {{ 'Label.Actions' | transloco }}\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-user>\n <tr>\n <td data-head=\"Id\">{{ user.id }}</td>\n <td data-head=\"First Name\">\n <span class=\"first-name\">{{ user.first_name }}</span>\n @if (subscriptionOwnerUserId === user.id) {\n <span *rbacAllow=\"'Pages.Alpha'\" class=\"badge bg-primary mx-1\"> Owner </span>\n }\n @if (subscriptionAdmins?.includes(user?.id)) {\n <span class=\"badge bg-success mx-1 admin-badge\"> Admin </span>\n }\n </td>\n <td data-head=\"Last Name\">\n {{ user.last_name }}\n @if (user?.alpha) {\n <span\n [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n tooltipPosition=\"top\">\n <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n </span>\n }\n @if (user?.beta) {\n <span\n [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n class=\"ms-2\"\n tooltipPosition=\"top\">\n <i class=\"fa-regular fa-square-b alpha-beta text-primary\"></i>\n </span>\n }\n @if (user?.cognito_sso_activated) {\n <span\n class=\"ms-2\"\n [pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n tooltipPosition=\"top\">\n <i class=\"fa fa-cloud success\" ></i>\n </span>\n }\n </td>\n <td data-head=\"Email\">{{ user.email }}</td>\n <td data-head=\"Nick Name\">\n <a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n </td>\n <td data-head=\"Email Confirm\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n color=\"success-danger\"\n class=\"badge\">\n {{ user?.has_password ? 'Yes' : 'No' }}\n </span>\n @if (user?.blocked) {\n <span\n [pTooltip]=\"'This user has been blocked'\"\n class=\"ms-2\"\n tooltipPosition=\"top\">\n <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n </span>\n }\n </td>\n <td data-head=\"Last Login\">\n @if (user?.current_sign_in_at) {\n <span>\n <span>\n {{ user.current_sign_in_at | dateFormat }}\n </span>\n @if (user.current_sign_in_at) {\n <span>\n ({{ user.current_sign_in_at | sinceAgo }})\n </span>\n }\n </span>\n } @else {\n <span>\n <span>\n {{ user.last_sign_in_at | dateFormat }}\n </span>\n @if (user.last_sign_in_at) {\n <span>\n ({{ user.last_sign_in_at | sinceAgo }})\n </span>\n }\n </span>\n }\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Impersonate this user\" class=\"me-2 me-sm-3\">\n <i (click)=\"onImpersonate(user)\" (keydown.enter)=\"onImpersonate(user)\" class=\"fas fa-people-arrows fa-lg\" aria-hidden=\"true\"></i>\n </li>\n @if (subscriptionOwnerUserId !== user.id) {\n <li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Set this user as new owner\" class=\"me-2 me-sm-3\">\n <i (click)=\"onChangeOwner(user)\" (keydown.enter)=\"onChangeOwner(user)\" class=\"fa fa-key warning fa-lg\" aria-hidden=\"true\"></i>\n </li>\n }\n @if (user?.enable_two_factor_authenticator) {\n <li *rbacAllow=\"'Pages.Alpha'\"\n (click)=\"disable2fa(user?.id)\"\n (keydown.enter)=\"disable2fa(user?.id)\"\n ngbTooltip=\"Disable 2FA\"\n class=\"me-2 me-sm-3 success\">\n <i class=\"fa fa-lock\"\n aria-hidden=\"true\"></i>\n </li>\n }\n @if (canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n <!-- Make Admin -->\n @if (!subscriptionAdmins?.includes(user.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(user, true)\"\n (keydown.enter)=\"makeAdmin(users, true)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n }\n <li></li>\n <!-- Remove Admin -->\n @if (subscriptionAdmins?.includes(user.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(user, false)\"\n (click)=\"makeAdmin(user, false)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n }\n } @else {\n <li class=\"mx-3\"></li>\n }\n @if (canShowSubscriptionActions) {\n <li\n [routerLink]=\"[routers.usersDetails + user.id]\"\n ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\">\n <i class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"></i>\n </li>\n }\n @if (canShowSubscriptionActions && isGranted('Pages.Admin.Users.Delete')) {\n <li\n ngbTooltip=\"Remove user from subscription\"\n class=\"me-2 me-sm-3\">\n <i (click)=\"onDelete(user)\"\n (keydown.enter)=\"onDelete(user)\"\n class=\"fa fa-trash delete-icon\"\n aria-hidden=\"true\"></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords === 0 && totalUnfilteredCount !== 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n }\n @if (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n @if (totalUnfilteredCount === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </section>\n}\n\n\n@if (isAddEnabled) {\n <section id=\"manage-members\"\n >\n <pw-add-members (membersAdded)=\"onMembersAdded()\"\n ></pw-add-members>\n </section>\n}\n\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}.info-icon{vertical-align:middle;margin-left:5px}.first-name{margin-right:5px}\n"], dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i6$1.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: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i6.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i2$1.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: i9.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10$1.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage"], outputs: ["successEvent"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i10$1.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i11.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i11.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: AddMembersComponent, selector: "pw-add-members", outputs: ["membersAdded"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.SinceAgoPipe, name: "sinceAgo" }] }); }
|
|
7030
7030
|
}
|
|
7031
7031
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SubscriptionUsersComponent, decorators: [{
|
|
7032
7032
|
type: Component,
|
|
7033
|
-
args: [{ selector: 'pw-subscription-users', standalone: false, template: "<div class=\"w-100 text-center mt-3\">\n @if (!isLoaded) {\n <p-progressSpinner></p-progressSpinner>\n }\n</div>\n@if (!isAddEnabled && canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n <div class=\"text-end mb-2\">\n <button class=\"btn btn-sm btn-outline-primary\" (click)=\"isAddEnabled = true\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n </button>\n </div>\n}\n@if (!isAddEnabled) {\n <section id=\"members\"\n >\n <div [class.hideTable]=\"totalUnfilteredCount === 0\"\n class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\">\n <p-table #dt\n [value]=\"subscriptionMembers\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n [customSort]=\"true\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <label for=\"subscription-users-search\" class=\"visually-hidden\">Search subscription users</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input id=\"subscription-users-search\"\n name=\"subscription-users-search\"\n [(ngModel)]=\"searchText\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n type=\"text\"\n pInputText\n placeholder=\"Search subscription users...\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"id\">\n {{ 'Admin.Users.Id' | transloco }}\n <p-sortIcon field=\"id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Label.FirstName' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_name\">\n {{ 'Label.LastName' | transloco }}\n <p-sortIcon field=\"last_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"email\">\n {{ 'Label.Email' | transloco }}\n <p-sortIcon field=\"email\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"slug\">\n {{ 'Admin.Subscriptions.NickName' | transloco }}\n <p-sortIcon field=\"slug\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"has_password\">\n {{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n <p-sortIcon field=\"has_password\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_sign_in_at\">\n {{ 'Admin.Subscriptions.LastLogin' | transloco }}\n <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n </th>\n <th scope=\"true\" class=\"actions-list-two\">\n {{ 'Label.Actions' | transloco }}\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-user>\n <tr>\n <td data-head=\"Id\">{{ user.id }}</td>\n <td data-head=\"First Name\">\n <span class=\"first-name\">{{ user.first_name }}</span>\n @if (subscriptionOwnerUserId === user.id) {\n <span *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Subscription Owner\">\n <i class=\"info-icon fas fa-user-tie success\" aria-hidden=\"true\"></i>\n </span>\n }\n @if (subscriptionAdmins?.includes(user?.id)) {\n <span class=\"badge bg-success mx-1 admin-badge\"> Admin </span>\n }\n </td>\n <td data-head=\"Last Name\">\n {{ user.last_name }}\n @if (user?.alpha) {\n <span\n [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n tooltipPosition=\"top\">\n <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n </span>\n }\n @if (user?.beta) {\n <span\n [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n class=\"ms-2\"\n tooltipPosition=\"top\">\n <i class=\"fa-regular fa-square-b alpha-beta text-primary\"></i>\n </span>\n }\n @if (user?.cognito_sso_activated) {\n <span\n class=\"ms-2\"\n [pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n tooltipPosition=\"top\">\n <i class=\"fa fa-cloud success\" ></i>\n </span>\n }\n </td>\n <td data-head=\"Email\">{{ user.email }}</td>\n <td data-head=\"Nick Name\">\n <a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n </td>\n <td data-head=\"Email Confirm\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n color=\"success-danger\"\n class=\"badge\">\n {{ user?.has_password ? 'Yes' : 'No' }}\n </span>\n @if (user?.blocked) {\n <span\n [pTooltip]=\"'This user has been blocked'\"\n class=\"ms-2\"\n tooltipPosition=\"top\">\n <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n </span>\n }\n </td>\n <td data-head=\"Last Login\">\n @if (user?.current_sign_in_at) {\n <span>\n <span>\n {{ user.current_sign_in_at | dateFormat }}\n </span>\n @if (user.current_sign_in_at) {\n <span>\n ({{ user.current_sign_in_at | sinceAgo }})\n </span>\n }\n </span>\n } @else {\n <span>\n <span>\n {{ user.last_sign_in_at | dateFormat }}\n </span>\n @if (user.last_sign_in_at) {\n <span>\n ({{ user.last_sign_in_at | sinceAgo }})\n </span>\n }\n </span>\n }\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Impersonate this user\" class=\"me-2 me-sm-3\">\n <i (click)=\"onImpersonate(user)\" (keydown.enter)=\"onImpersonate(user)\" class=\"fas fa-people-arrows fa-lg\" aria-hidden=\"true\"></i>\n </li>\n @if (subscriptionOwnerUserId !== user.id) {\n <li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Set this user as new owner\" class=\"me-2 me-sm-3\">\n <i (click)=\"onChangeOwner(user)\" (keydown.enter)=\"onChangeOwner(user)\" class=\"fa fa-user-crown warning fa-lg\" aria-hidden=\"true\"></i>\n </li>\n }\n @if (user?.enable_two_factor_authenticator) {\n <li *rbacAllow=\"'Pages.Alpha'\"\n (click)=\"disable2fa(user?.id)\"\n (keydown.enter)=\"disable2fa(user?.id)\"\n ngbTooltip=\"Disable 2FA\"\n class=\"me-2 me-sm-3 success\">\n <i class=\"fa fa-lock\"\n aria-hidden=\"true\"></i>\n </li>\n }\n @if (canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n <!-- Make Admin -->\n @if (!subscriptionAdmins?.includes(user.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(user, true)\"\n (keydown.enter)=\"makeAdmin(users, true)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n }\n <li></li>\n <!-- Remove Admin -->\n @if (subscriptionAdmins?.includes(user.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(user, false)\"\n (click)=\"makeAdmin(user, false)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n }\n } @else {\n <li class=\"mx-3\"></li>\n }\n @if (canShowSubscriptionActions) {\n <li\n [routerLink]=\"[routers.usersDetails + user.id]\"\n ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\">\n <i class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"></i>\n </li>\n }\n @if (canShowSubscriptionActions && isGranted('Pages.Admin.Users.Delete')) {\n <li\n ngbTooltip=\"Remove user from subscription\"\n class=\"me-2 me-sm-3\">\n <i (click)=\"onDelete(user)\"\n (keydown.enter)=\"onDelete(user)\"\n class=\"fa fa-trash delete-icon\"\n aria-hidden=\"true\"></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords === 0 && totalUnfilteredCount !== 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n }\n @if (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n @if (totalUnfilteredCount === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </section>\n}\n\n\n@if (isAddEnabled) {\n <section id=\"manage-members\"\n >\n <pw-add-members (membersAdded)=\"onMembersAdded()\"\n ></pw-add-members>\n </section>\n}\n\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}.info-icon{vertical-align:middle;margin-left:5px}.first-name{margin-right:5px}\n"] }]
|
|
7033
|
+
args: [{ selector: 'pw-subscription-users', standalone: false, template: "<div class=\"w-100 text-center mt-3\">\n @if (!isLoaded) {\n <p-progressSpinner></p-progressSpinner>\n }\n</div>\n@if (!isAddEnabled && canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n <div class=\"text-end mb-2\">\n <button class=\"btn btn-sm btn-outline-primary\" (click)=\"isAddEnabled = true\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n </button>\n </div>\n}\n@if (!isAddEnabled) {\n <section id=\"members\"\n >\n <div [class.hideTable]=\"totalUnfilteredCount === 0\"\n class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\">\n <p-table #dt\n [value]=\"subscriptionMembers\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n [customSort]=\"true\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <label for=\"subscription-users-search\" class=\"visually-hidden\">Search subscription users</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input id=\"subscription-users-search\"\n name=\"subscription-users-search\"\n [(ngModel)]=\"searchText\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n type=\"text\"\n pInputText\n placeholder=\"Search subscription users...\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"id\">\n {{ 'Admin.Users.Id' | transloco }}\n <p-sortIcon field=\"id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Label.FirstName' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_name\">\n {{ 'Label.LastName' | transloco }}\n <p-sortIcon field=\"last_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"email\">\n {{ 'Label.Email' | transloco }}\n <p-sortIcon field=\"email\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"slug\">\n {{ 'Admin.Subscriptions.NickName' | transloco }}\n <p-sortIcon field=\"slug\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"has_password\">\n {{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n <p-sortIcon field=\"has_password\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_sign_in_at\">\n {{ 'Admin.Subscriptions.LastLogin' | transloco }}\n <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n </th>\n <th scope=\"true\" class=\"actions-list-two\">\n {{ 'Label.Actions' | transloco }}\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-user>\n <tr>\n <td data-head=\"Id\">{{ user.id }}</td>\n <td data-head=\"First Name\">\n <span class=\"first-name\">{{ user.first_name }}</span>\n @if (subscriptionOwnerUserId === user.id) {\n <span *rbacAllow=\"'Pages.Alpha'\" class=\"badge bg-primary mx-1\"> Owner </span>\n }\n @if (subscriptionAdmins?.includes(user?.id)) {\n <span class=\"badge bg-success mx-1 admin-badge\"> Admin </span>\n }\n </td>\n <td data-head=\"Last Name\">\n {{ user.last_name }}\n @if (user?.alpha) {\n <span\n [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n tooltipPosition=\"top\">\n <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n </span>\n }\n @if (user?.beta) {\n <span\n [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n class=\"ms-2\"\n tooltipPosition=\"top\">\n <i class=\"fa-regular fa-square-b alpha-beta text-primary\"></i>\n </span>\n }\n @if (user?.cognito_sso_activated) {\n <span\n class=\"ms-2\"\n [pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n tooltipPosition=\"top\">\n <i class=\"fa fa-cloud success\" ></i>\n </span>\n }\n </td>\n <td data-head=\"Email\">{{ user.email }}</td>\n <td data-head=\"Nick Name\">\n <a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n </td>\n <td data-head=\"Email Confirm\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n color=\"success-danger\"\n class=\"badge\">\n {{ user?.has_password ? 'Yes' : 'No' }}\n </span>\n @if (user?.blocked) {\n <span\n [pTooltip]=\"'This user has been blocked'\"\n class=\"ms-2\"\n tooltipPosition=\"top\">\n <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n </span>\n }\n </td>\n <td data-head=\"Last Login\">\n @if (user?.current_sign_in_at) {\n <span>\n <span>\n {{ user.current_sign_in_at | dateFormat }}\n </span>\n @if (user.current_sign_in_at) {\n <span>\n ({{ user.current_sign_in_at | sinceAgo }})\n </span>\n }\n </span>\n } @else {\n <span>\n <span>\n {{ user.last_sign_in_at | dateFormat }}\n </span>\n @if (user.last_sign_in_at) {\n <span>\n ({{ user.last_sign_in_at | sinceAgo }})\n </span>\n }\n </span>\n }\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Impersonate this user\" class=\"me-2 me-sm-3\">\n <i (click)=\"onImpersonate(user)\" (keydown.enter)=\"onImpersonate(user)\" class=\"fas fa-people-arrows fa-lg\" aria-hidden=\"true\"></i>\n </li>\n @if (subscriptionOwnerUserId !== user.id) {\n <li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Set this user as new owner\" class=\"me-2 me-sm-3\">\n <i (click)=\"onChangeOwner(user)\" (keydown.enter)=\"onChangeOwner(user)\" class=\"fa fa-key warning fa-lg\" aria-hidden=\"true\"></i>\n </li>\n }\n @if (user?.enable_two_factor_authenticator) {\n <li *rbacAllow=\"'Pages.Alpha'\"\n (click)=\"disable2fa(user?.id)\"\n (keydown.enter)=\"disable2fa(user?.id)\"\n ngbTooltip=\"Disable 2FA\"\n class=\"me-2 me-sm-3 success\">\n <i class=\"fa fa-lock\"\n aria-hidden=\"true\"></i>\n </li>\n }\n @if (canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n <!-- Make Admin -->\n @if (!subscriptionAdmins?.includes(user.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(user, true)\"\n (keydown.enter)=\"makeAdmin(users, true)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n }\n <li></li>\n <!-- Remove Admin -->\n @if (subscriptionAdmins?.includes(user.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(user, false)\"\n (click)=\"makeAdmin(user, false)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n }\n } @else {\n <li class=\"mx-3\"></li>\n }\n @if (canShowSubscriptionActions) {\n <li\n [routerLink]=\"[routers.usersDetails + user.id]\"\n ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\">\n <i class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"></i>\n </li>\n }\n @if (canShowSubscriptionActions && isGranted('Pages.Admin.Users.Delete')) {\n <li\n ngbTooltip=\"Remove user from subscription\"\n class=\"me-2 me-sm-3\">\n <i (click)=\"onDelete(user)\"\n (keydown.enter)=\"onDelete(user)\"\n class=\"fa fa-trash delete-icon\"\n aria-hidden=\"true\"></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords === 0 && totalUnfilteredCount !== 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n }\n @if (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n @if (totalUnfilteredCount === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </section>\n}\n\n\n@if (isAddEnabled) {\n <section id=\"manage-members\"\n >\n <pw-add-members (membersAdded)=\"onMembersAdded()\"\n ></pw-add-members>\n </section>\n}\n\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}.info-icon{vertical-align:middle;margin-left:5px}.first-name{margin-right:5px}\n"] }]
|
|
7034
7034
|
}], ctorParameters: () => [{ type: i1$1.SubscriptionService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$1.AuthService }, { type: i1$1.WindowService }, { type: i1.AdminService }, { type: i1$1.CustomToastService }], propDecorators: { passwordValidationModalForImpersonate: [{
|
|
7035
7035
|
type: ViewChild,
|
|
7036
7036
|
args: ['passwordValidationModalForImpersonate', { static: false }]
|
|
@@ -7156,11 +7156,11 @@ class SubscriptionAgentsListComponent extends AppBaseComponent {
|
|
|
7156
7156
|
});
|
|
7157
7157
|
}
|
|
7158
7158
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SubscriptionAgentsListComponent, deps: [{ token: i1.AdminService }, { token: i2$1.NgbDateParserFormatter }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7159
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SubscriptionAgentsListComponent, isStandalone: false, selector: "pw-subscription-agents-list", usesInheritance: true, ngImport: i0, template: "@if (!newEmbass) {\n <div class=\"w-100 text-center mt-3\">\n <div class=\"d-flex align-items-center\">\n <div class=\"ms-auto col-xs-12\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"newEmbass = true\"\n id=\"btn-create\">\n <i class=\"fa fa-plus-circle me-2\" aria-hidden=\"true\"></i>Add Ambassadors\n </a>\n </div>\n </div>\n @if (!isLoaded) {\n <p-progressSpinner> </p-progressSpinner>\n }\n </div>\n <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n [class.hideTable]=\"totalUnfilteredCount === 0\">\n <p-table #dt\n [value]=\"allAgents\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"subscription-agents-list-search\"\n name=\"subscription-agents-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search Ambassadors...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Admin.Subscriptions.AgentName' | transloco }}</th>\n <th scope=\"true\">{{ 'Label.Email' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.Percentage' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.EndDate' | transloco }}</th>\n <th scope=\"true\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-agent>\n <tr>\n <td data-head=\"Agent Name\">\n {{ agent.user.first_name !== null ? agent.user.first_name : 'N/A' }}\n </td>\n <td data-head=\"Email\">\n {{ agent.user.email !== null ? agent.user.email : 'N/A' }}\n </td>\n <td data-head=\"Percentage\">{{ agent.percentage }}</td>\n <td data-head=\"End Date\">{{ agent.end_date | dateFormat }}</td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/admin/subscriptions/',\n agent.subscription_id,\n 'agent_details',\n agent.user_id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\"\n (keydown.enter)=\"onDelete(agent?.user_id)\"\n (click)=\"onDelete(agent?.user_id)\">\n <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n @if (totalRecords === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoAmbassadorsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n}\n@if (newEmbass) {\n <form [formGroup]=\"formEmbassador\"\n id=\"mainFrom\"\n (ngSubmit)=\"onAddEmbassador()\">\n <div class=\"row mb-2\">\n <div class=\"col-10 col-md-6 offset-md-3\">\n <div class=\"ui-fluid skills-modal\">\n <p-autoComplete appendTo=\"body\" [suggestions]=\"filteredUsers\"\n formControlName=\"email\"\n dataKey=\"id\"\n optionLabel=\"displayName\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n [dropdown]=\"true\"\n placeholder=\"Search ambassador\"\n [multiple]=\"true\">\n </p-autoComplete>\n </div>\n <div class=\"row mt-3\">\n <div class=\"col\">\n <input type=\"number\"\n formControlName=\"percentage\"\n class=\"form-control\"\n placeholder=\"Enter percentage\" id=\"input_percentage_2\" name=\"input_percentage_2\"/>\n </div>\n <div class=\"col\">\n <label for=\"subscription-agents-list-endDate\" class=\"visually-hidden\">End Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"subscription-agents-list-endDate\"\n name=\"endDate\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"endDate\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n [maxDate]=\"{ day: 31, month: 12, year: 2050 }\" />\n <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"text-center mt-2\">\n <button type=\"button\"\n (click)=\"newEmbass = false\"\n class=\"btn btn-sm btn-outline-default me-2\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"submitted\"\n class=\"btn btn-sm btn-primary me-2\">Add Ambassador</button>\n </div>\n </form>\n}\n", styles: ["#mainFrom{padding-bottom:144px}\n"], dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i6.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i2$1.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: i9.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i9.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: i9.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i10$1.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i11.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i9.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }] }); }
|
|
7159
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SubscriptionAgentsListComponent, isStandalone: false, selector: "pw-subscription-agents-list", usesInheritance: true, ngImport: i0, template: "@if (!newEmbass) {\n <div class=\"w-100 text-center mt-3\">\n <div class=\"d-flex align-items-center\">\n <div class=\"ms-auto col-xs-12\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"newEmbass = true\"\n id=\"btn-create\">\n <i class=\"fa fa-plus-circle me-2\" aria-hidden=\"true\"></i>Add Ambassadors\n </a>\n </div>\n </div>\n @if (!isLoaded) {\n <p-progressSpinner> </p-progressSpinner>\n }\n </div>\n <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n [class.hideTable]=\"totalUnfilteredCount === 0\">\n <p-table #dt\n [value]=\"allAgents\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"subscription-agents-list-search\"\n name=\"subscription-agents-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search Ambassadors...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Admin.Subscriptions.AgentName' | transloco }}</th>\n <th scope=\"true\">{{ 'Label.Email' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.Percentage' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.EndDate' | transloco }}</th>\n <th scope=\"true\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-agent>\n <tr>\n <td data-head=\"Agent Name\">\n {{ agent.user.first_name !== null ? agent.user.first_name : 'N/A' }}\n </td>\n <td data-head=\"Email\">\n {{ agent.user.email !== null ? agent.user.email : 'N/A' }}\n </td>\n <td data-head=\"Percentage\">{{ agent.percentage }}</td>\n <td data-head=\"End Date\">{{ agent.end_date | dateFormat }}</td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/admin/subscriptions/',\n agent.subscription_id,\n 'agent_details',\n agent.user_id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\"\n (keydown.enter)=\"onDelete(agent?.user_id)\"\n (click)=\"onDelete(agent?.user_id)\">\n <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n @if (totalRecords === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoAmbassadorsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n}\n@if (newEmbass) {\n <form [formGroup]=\"formEmbassador\"\n id=\"mainFrom\"\n class=\"mt-4\"\n (ngSubmit)=\"onAddEmbassador()\">\n <div class=\"row mb-2\">\n <div class=\"col-10 col-md-6 offset-md-3\">\n <div class=\"ui-fluid skills-modal\">\n <p-autoComplete appendTo=\"body\" [suggestions]=\"filteredUsers\"\n formControlName=\"email\"\n dataKey=\"id\"\n optionLabel=\"displayName\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n [dropdown]=\"true\"\n placeholder=\"Search ambassador\"\n [multiple]=\"true\">\n </p-autoComplete>\n </div>\n <div class=\"row mt-3\">\n <div class=\"col\">\n <input type=\"number\"\n formControlName=\"percentage\"\n class=\"form-control\"\n placeholder=\"Enter percentage\" id=\"input_percentage_2\" name=\"input_percentage_2\"/>\n </div>\n <div class=\"col\">\n <label for=\"subscription-agents-list-endDate\" class=\"visually-hidden\">End Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"subscription-agents-list-endDate\"\n name=\"endDate\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"endDate\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.open()\"\n [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n [maxDate]=\"{ day: 31, month: 12, year: 2050 }\" />\n <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"text-center mt-4\">\n <button type=\"button\"\n (click)=\"newEmbass = false\"\n class=\"btn btn-sm btn-outline-default me-2\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"submitted\"\n class=\"btn btn-sm btn-primary me-2\">Add Ambassador</button>\n </div>\n </form>\n}\n", styles: ["#mainFrom{padding-bottom:144px}.input-group>.form-control{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.input-group>.btn{border-top-left-radius:0;border-bottom-left-radius:0}\n"], dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: i4$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i6.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i2$1.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: i9.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i9.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: i9.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i10$1.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i11.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i9.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }] }); }
|
|
7160
7160
|
}
|
|
7161
7161
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SubscriptionAgentsListComponent, decorators: [{
|
|
7162
7162
|
type: Component,
|
|
7163
|
-
args: [{ selector: 'pw-subscription-agents-list', standalone: false, template: "@if (!newEmbass) {\n <div class=\"w-100 text-center mt-3\">\n <div class=\"d-flex align-items-center\">\n <div class=\"ms-auto col-xs-12\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"newEmbass = true\"\n id=\"btn-create\">\n <i class=\"fa fa-plus-circle me-2\" aria-hidden=\"true\"></i>Add Ambassadors\n </a>\n </div>\n </div>\n @if (!isLoaded) {\n <p-progressSpinner> </p-progressSpinner>\n }\n </div>\n <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n [class.hideTable]=\"totalUnfilteredCount === 0\">\n <p-table #dt\n [value]=\"allAgents\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"subscription-agents-list-search\"\n name=\"subscription-agents-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search Ambassadors...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Admin.Subscriptions.AgentName' | transloco }}</th>\n <th scope=\"true\">{{ 'Label.Email' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.Percentage' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.EndDate' | transloco }}</th>\n <th scope=\"true\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-agent>\n <tr>\n <td data-head=\"Agent Name\">\n {{ agent.user.first_name !== null ? agent.user.first_name : 'N/A' }}\n </td>\n <td data-head=\"Email\">\n {{ agent.user.email !== null ? agent.user.email : 'N/A' }}\n </td>\n <td data-head=\"Percentage\">{{ agent.percentage }}</td>\n <td data-head=\"End Date\">{{ agent.end_date | dateFormat }}</td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/admin/subscriptions/',\n agent.subscription_id,\n 'agent_details',\n agent.user_id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\"\n (keydown.enter)=\"onDelete(agent?.user_id)\"\n (click)=\"onDelete(agent?.user_id)\">\n <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n @if (totalRecords === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoAmbassadorsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n}\n@if (newEmbass) {\n <form [formGroup]=\"formEmbassador\"\n id=\"mainFrom\"\n (ngSubmit)=\"onAddEmbassador()\">\n <div class=\"row mb-2\">\n <div class=\"col-10 col-md-6 offset-md-3\">\n <div class=\"ui-fluid skills-modal\">\n <p-autoComplete appendTo=\"body\" [suggestions]=\"filteredUsers\"\n formControlName=\"email\"\n dataKey=\"id\"\n optionLabel=\"displayName\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n [dropdown]=\"true\"\n placeholder=\"Search ambassador\"\n [multiple]=\"true\">\n </p-autoComplete>\n </div>\n <div class=\"row mt-3\">\n <div class=\"col\">\n <input type=\"number\"\n formControlName=\"percentage\"\n class=\"form-control\"\n placeholder=\"Enter percentage\" id=\"input_percentage_2\" name=\"input_percentage_2\"/>\n </div>\n <div class=\"col\">\n <label for=\"subscription-agents-list-endDate\" class=\"visually-hidden\">End Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"subscription-agents-list-endDate\"\n name=\"endDate\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"endDate\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n [maxDate]=\"{ day: 31, month: 12, year: 2050 }\" />\n <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"text-center mt-
|
|
7163
|
+
args: [{ selector: 'pw-subscription-agents-list', standalone: false, template: "@if (!newEmbass) {\n <div class=\"w-100 text-center mt-3\">\n <div class=\"d-flex align-items-center\">\n <div class=\"ms-auto col-xs-12\">\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n (click)=\"newEmbass = true\"\n id=\"btn-create\">\n <i class=\"fa fa-plus-circle me-2\" aria-hidden=\"true\"></i>Add Ambassadors\n </a>\n </div>\n </div>\n @if (!isLoaded) {\n <p-progressSpinner> </p-progressSpinner>\n }\n </div>\n <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n [class.hideTable]=\"totalUnfilteredCount === 0\">\n <p-table #dt\n [value]=\"allAgents\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input type=\"text\"\n id=\"subscription-agents-list-search\"\n name=\"subscription-agents-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search Ambassadors...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Admin.Subscriptions.AgentName' | transloco }}</th>\n <th scope=\"true\">{{ 'Label.Email' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.Percentage' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.EndDate' | transloco }}</th>\n <th scope=\"true\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-agent>\n <tr>\n <td data-head=\"Agent Name\">\n {{ agent.user.first_name !== null ? agent.user.first_name : 'N/A' }}\n </td>\n <td data-head=\"Email\">\n {{ agent.user.email !== null ? agent.user.email : 'N/A' }}\n </td>\n <td data-head=\"Percentage\">{{ agent.percentage }}</td>\n <td data-head=\"End Date\">{{ agent.end_date | dateFormat }}</td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[\n '/admin/subscriptions/',\n agent.subscription_id,\n 'agent_details',\n agent.user_id\n ]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\"\n (keydown.enter)=\"onDelete(agent?.user_id)\"\n (click)=\"onDelete(agent?.user_id)\">\n <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n @if (totalRecords === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoAmbassadorsMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n}\n@if (newEmbass) {\n <form [formGroup]=\"formEmbassador\"\n id=\"mainFrom\"\n class=\"mt-4\"\n (ngSubmit)=\"onAddEmbassador()\">\n <div class=\"row mb-2\">\n <div class=\"col-10 col-md-6 offset-md-3\">\n <div class=\"ui-fluid skills-modal\">\n <p-autoComplete appendTo=\"body\" [suggestions]=\"filteredUsers\"\n formControlName=\"email\"\n dataKey=\"id\"\n optionLabel=\"displayName\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n [dropdown]=\"true\"\n placeholder=\"Search ambassador\"\n [multiple]=\"true\">\n </p-autoComplete>\n </div>\n <div class=\"row mt-3\">\n <div class=\"col\">\n <input type=\"number\"\n formControlName=\"percentage\"\n class=\"form-control\"\n placeholder=\"Enter percentage\" id=\"input_percentage_2\" name=\"input_percentage_2\"/>\n </div>\n <div class=\"col\">\n <label for=\"subscription-agents-list-endDate\" class=\"visually-hidden\">End Date</label>\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"subscription-agents-list-endDate\"\n name=\"endDate\"\n placeholder=\"dd-mmm-yyyy\"\n formControlName=\"endDate\"\n ngbDatepicker\n #d=\"ngbDatepicker\"\n (click)=\"d.open()\"\n [minDate]=\"{ day: 1, month: 1, year: 1950 }\"\n [maxDate]=\"{ day: 31, month: 12, year: 2050 }\" />\n <button class=\"btn btn-primary\"\n type=\"button\"\n aria-label=\"Open date picker\"\n (click)=\"d.toggle()\">\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"text-center mt-4\">\n <button type=\"button\"\n (click)=\"newEmbass = false\"\n class=\"btn btn-sm btn-outline-default me-2\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"submitted\"\n class=\"btn btn-sm btn-primary me-2\">Add Ambassador</button>\n </div>\n </form>\n}\n", styles: ["#mainFrom{padding-bottom:144px}.input-group>.form-control{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.input-group>.btn{border-top-left-radius:0;border-bottom-left-radius:0}\n"] }]
|
|
7164
7164
|
}], ctorParameters: () => [{ type: i1.AdminService }, { type: i2$1.NgbDateParserFormatter }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
|
|
7165
7165
|
|
|
7166
7166
|
class SubscriptionDetailsComponent extends AppBaseComponent {
|
|
@@ -7184,7 +7184,7 @@ class SubscriptionDetailsComponent extends AppBaseComponent {
|
|
|
7184
7184
|
this.organizationIndustries$ = this.commonService.getOrganizationIndustries().pipe(map(res => {
|
|
7185
7185
|
return {
|
|
7186
7186
|
organization_industries: [
|
|
7187
|
-
{ id: null, name: 'Select
|
|
7187
|
+
{ id: null, name: 'Select an organization industry' },
|
|
7188
7188
|
...(res?.organization_industries ?? [])
|
|
7189
7189
|
]
|
|
7190
7190
|
};
|
|
@@ -7192,7 +7192,7 @@ class SubscriptionDetailsComponent extends AppBaseComponent {
|
|
|
7192
7192
|
this.organizationTypes$ = this.commonService.getOrganizationTypes().pipe(map(res => {
|
|
7193
7193
|
return {
|
|
7194
7194
|
organization_types: [
|
|
7195
|
-
{ id: null, name: 'Select
|
|
7195
|
+
{ id: null, name: 'Select an organization type' },
|
|
7196
7196
|
...(res?.organization_types ?? [])
|
|
7197
7197
|
]
|
|
7198
7198
|
};
|
|
@@ -7200,7 +7200,7 @@ class SubscriptionDetailsComponent extends AppBaseComponent {
|
|
|
7200
7200
|
this.organizationSizes$ = this.commonService.getOrganizationSizes().pipe(map(res => {
|
|
7201
7201
|
return {
|
|
7202
7202
|
organization_sizes: [
|
|
7203
|
-
{ id: null, name: 'Select
|
|
7203
|
+
{ id: null, name: 'Select an organization size' },
|
|
7204
7204
|
...(res?.organization_sizes ?? [])
|
|
7205
7205
|
]
|
|
7206
7206
|
};
|
|
@@ -7352,11 +7352,11 @@ class SubscriptionDetailsComponent extends AppBaseComponent {
|
|
|
7352
7352
|
super.ngOnDestroy();
|
|
7353
7353
|
}
|
|
7354
7354
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SubscriptionDetailsComponent, deps: [{ token: i1$1.SubscriptionService }, { token: i1.AdminService }, { token: i3.DatePipe }, { token: i1$1.CommonService }, { token: i1$1.NgbDateCustomParserFormatter }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7355
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SubscriptionDetailsComponent, isStandalone: false, selector: "pw-subscription-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\"\n routerLink=\"/admin/subscriptions/list\"\n class=\"previous\">\n <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"m-subheader__title m-subheader__title--separator\">\n <span>Subscription Details</span>\n </h3>\n @if (currentSubscriber?.is_deleted) {\n <span class=\"badge rounded-pill bg-danger ms-2\"\n >Deleted</span>\n }\n </div>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!isLoading) {\n <div >\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Subscription</a>\n <ng-template ngbNavContent>\n <div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"mt-4\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"saveDetails()\">\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Organization' | transloco\"\n [label]=\"'Admin.Subscriptions.Organization' | transloco\"\n name=\"organisation\"\n controlId=\"sub-details-organisation\">\n <input type=\"text\"\n id=\"sub-details-organisation\"\n class=\"form-control\"\n formControlName=\"organisation\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactName' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactName' | transloco\"\n name=\"contact_name\"\n controlId=\"sub-details-contact_name\">\n <input type=\"text\"\n id=\"sub-details-contact_name\"\n class=\"form-control\"\n formControlName=\"contact_name\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactEmail' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactEmail' | transloco\"\n name=\"contact_email\"\n controlId=\"sub-details-contact_email\">\n <input type=\"text\"\n id=\"sub-details-contact_email\"\n class=\"form-control\"\n formControlName=\"contact_email\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactTel' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactTel' | transloco\"\n name=\"contact_tel\"\n controlId=\"sub-details-contact_tel\">\n <input type=\"text\"\n id=\"sub-details-contact_tel\"\n formControlName=\"contact_tel\"\n class=\"form-control\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [label]=\"'Tax Id'\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.TaxId' | transloco\"\n name=\"tax_id\"\n controlId=\"sub-details-tax_id\">\n <input type=\"text\"\n id=\"sub-details-tax_id\"\n class=\"form-control\"\n formControlName=\"tax_id\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <span class=\"pw-label-style info-circle\" id=\"subscription-details-roles-label\">{{ 'Admin.Subscriptions.AssignedRoles' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Admin.Subscriptions.Tooltip.AssignedRoles'\n | transloco\n }}</span>\n </span>\n <p-multiSelect inputId=\"subscription-details-roles\" [options]=\"allRoles\"\n formControlName=\"roles\"\n appendTo=\"body\"\n [ariaLabelledBy]=\"'subscription-details-roles-label'\"\n [ariaLabel]=\"'Admin.Subscriptions.AssignedRoles' | transloco\"></p-multiSelect>\n </div>\n @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\"\n [label]=\"'Organization.OrganizationType' | transloco\"\n name=\"organization_type_id\" controlId=\"subscription-organization_type_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_type_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n [options]=\"types['organization_types']\"\n formControlName=\"organization_type_id\"\n [placeholder]=\"'Select Organization Type'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\"\n [label]=\"'Organization.OrganizationIndustry' | transloco\"\n name=\"organization_industry_id\" controlId=\"subscription-organization_industry_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_industry_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n [options]=\"industries['organization_industries']\"\n formControlName=\"organization_industry_id\"\n [placeholder]=\"'Select Organization Industry'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationSizes$ | async; as sizes) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\"\n [label]=\"'Size' | transloco\"\n name=\"organization_size_id\" controlId=\"subscription-organization_size_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_size_id-label'\"\n [ariaLabel]=\"'Size' | transloco\"\n [options]=\"sizes['organization_sizes']\"\n formControlName=\"organization_size_id\"\n [placeholder]=\"'Select Organization Size'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CompanyUrl' | transloco\"\n [label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\"\n name=\"company_url\"\n controlId=\"sub-details-company_url\">\n <input type=\"text\"\n id=\"sub-details-company_url\"\n class=\"form-control\"\n formControlName=\"company_url\" />\n </pw-input-container>\n </div>\n <!-- Readonly Starts -->\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reference' | transloco\"\n [label]=\"'Admin.Subscriptions.Reference' | transloco\"\n name=\"reference_number\"\n controlId=\"sub-details-reference_number\">\n @if (form) {\n <input type=\"text\"\n id=\"sub-details-reference_number\"\n readonly\n class=\"form-control\"\n data-control=\"reference\"\n [value]=\"form.get('reference_number')?.value\" />\n }\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.UnitsInUse' | transloco\"\n [label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\"\n name=\"units_in_use\"\n controlId=\"sub-details-units_in_use\">\n <input type=\"text\"\n id=\"sub-details-units_in_use\"\n readonly\n class=\"form-control\"\n formControlName=\"units_in_use\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MaxUnits' | transloco\"\n [label]=\"'Admin.Subscriptions.MaxUnits' | transloco\"\n name=\"max_units\"\n controlId=\"sub-details-max_units\">\n <input type=\"text\"\n id=\"sub-details-max_units\"\n readonly\n class=\"form-control\"\n formControlName=\"max_units\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CalculatedPrice' | transloco\"\n [label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\"\n name=\"calculated_price\"\n controlId=\"sub-details-calculated_price\">\n <input type=\"text\"\n id=\"sub-details-calculated_price\"\n class=\"form-control\"\n readonly\n formControlName=\"calculated_price\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MainExpiryDate' | transloco\"\n [label]=\"\n 'Admin.Subscriptions.MainExpiryDate' | transloco\n \"\n name=\"expires_at\" controlId=\"sub-details-expires_at\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"sub-details-expires_at\"\n name=\"expires_at\"\n container=\"body\"\n placeholder=\"Expiry Date\"\n formControlName=\"expires_at\"\n [readonly]=\"true\"\n ngbDatepicker\n #c=\"ngbDatepicker\" />\n <button class=\"btn btn-primary\"\n type=\"button\"\n [disabled]=\"true\"\n aria-label=\"Open date picker\"\n (click)=\"c.toggle()\">\n <i\n class=\"fa fa-calendar\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SuperAdmin'\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.PurchasedSeats' | transloco\"\n [label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\"\n name=\"purchased_units\"\n controlId=\"sub-details-purchased_units\">\n <input type=\"number\"\n id=\"sub-details-purchased_units\"\n min=\"0\"\n readonly\n class=\"form-control\"\n formControlName=\"purchased_units\" />\n </pw-input-container>\n </div>\n <!-- Readonly Ends -->\n </div>\n <!-- social links -->\n <h3>Social Links</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Facebook' | transloco\"\n [label]=\"'Admin.Subscriptions.Facebook' | transloco\"\n name=\"facebook_handle\"\n controlId=\"sub-details-facebook_handle\">\n <input type=\"text\"\n id=\"sub-details-facebook_handle\"\n class=\"form-control\"\n formControlName=\"facebook_handle\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Twitter' | transloco\"\n [label]=\"'Admin.Subscriptions.Twitter' | transloco\"\n name=\"twitter_handle\"\n controlId=\"sub-details-twitter_handle\">\n <input type=\"text\"\n id=\"sub-details-twitter_handle\"\n class=\"form-control\"\n formControlName=\"twitter_handle\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Linkedin' | transloco\"\n [label]=\"'Admin.Subscriptions.LinkedIn' | transloco\"\n name=\"linkedin_handle\"\n controlId=\"sub-details-linkedin_handle\">\n <input type=\"text\"\n id=\"sub-details-linkedin_handle\"\n class=\"form-control\"\n formControlName=\"linkedin_handle\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reddit' | transloco\"\n [label]=\"'Admin.Subscriptions.Reddit' | transloco\"\n name=\"reddit_handle\"\n controlId=\"sub-details-reddit_handle\">\n <input type=\"text\"\n id=\"sub-details-reddit_handle\"\n class=\"form-control\"\n formControlName=\"reddit_handle\" />\n </pw-input-container>\n </div>\n </div>\n <ng-container *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <h3>Security</h3>\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Enforce2fa'| transloco\"\n label=\"Enforce 2FA\"\n name=\"enforce_2fa\" controlId=\"subscription-enforce_2fa\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch formControlName=\"enforce_2fa\"\n [attr.aria-labelledby]=\"'subscription-enforce_2fa-label'\"\n name=\"enforce_2fa\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </ng-container>\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"submitted\"\n class=\"btn btn-primary\"\n *rbacAllow=\"'Pages.Admin.Subscription.Edit'\">\n {{ 'Button.Save' | transloco }}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Products</a>\n <ng-template ngbNavContent>\n <pw-subscription-products></pw-subscription-products>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Members</a>\n <ng-template ngbNavContent>\n <pw-subscription-users></pw-subscription-users>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"4\"\n *rbacAllow=\"'SuperAdmin'\">\n <a ngbNavLink>Ambassadors</a>\n <ng-template ngbNavContent>\n <pw-subscription-agents-list></pw-subscription-agents-list>\n </ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n }\n </div>\n </div>\n </div>\n", styles: [".ui-autocomplete-multiple-container,.ui-fluid.skills-modal p-autocomplete{background:transparent}:host ::ng-deep .pw-label-style+p-multiselect{margin-top:6px}:host ::ng-deep .input-group .btn{min-height:36px;display:inline-flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6$2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i9.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i9.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: i9.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i9.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "component", type: i10.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i2$1.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$1.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$1.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$1.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$1.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$1.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$1.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10$1.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i11.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i11.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i9.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: SubscriptionProductsComponent, selector: "pw-subscription-products" }, { kind: "component", type: SubscriptionUsersComponent, selector: "pw-subscription-users" }, { kind: "component", type: SubscriptionAgentsListComponent, selector: "pw-subscription-agents-list" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
7355
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SubscriptionDetailsComponent, isStandalone: false, selector: "pw-subscription-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\"\n routerLink=\"/admin/subscriptions/list\"\n class=\"previous\">\n <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"m-subheader__title m-subheader__title--separator\">\n <span>Subscription Details</span>\n </h3>\n @if (currentSubscriber?.is_deleted) {\n <span class=\"badge rounded-pill bg-danger ms-2\"\n >Deleted</span>\n }\n </div>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!isLoading) {\n <div >\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Subscription</a>\n <ng-template ngbNavContent>\n <div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"mt-4\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"saveDetails()\">\n <h3>{{ 'Admin.Subscriptions.Section.IdentityContact' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Organization' | transloco\"\n [label]=\"'Admin.Subscriptions.Organization' | transloco\"\n name=\"organisation\"\n controlId=\"sub-details-organisation\">\n <input type=\"text\"\n id=\"sub-details-organisation\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n formControlName=\"organisation\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactName' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactName' | transloco\"\n name=\"contact_name\"\n controlId=\"sub-details-contact_name\">\n <input type=\"text\"\n id=\"sub-details-contact_name\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactName' | transloco\"\n formControlName=\"contact_name\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactEmail' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactEmail' | transloco\"\n name=\"contact_email\"\n controlId=\"sub-details-contact_email\">\n <input type=\"text\"\n id=\"sub-details-contact_email\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactEmail' | transloco\"\n formControlName=\"contact_email\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactTel' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactTel' | transloco\"\n name=\"contact_tel\"\n controlId=\"sub-details-contact_tel\">\n <input type=\"text\"\n id=\"sub-details-contact_tel\"\n formControlName=\"contact_tel\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactTel' | transloco\"\n class=\"form-control\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [label]=\"'Admin.Subscriptions.TaxId' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.TaxId' | transloco\"\n name=\"tax_id\"\n controlId=\"sub-details-tax_id\">\n <input type=\"text\"\n id=\"sub-details-tax_id\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.TaxId' | transloco\"\n formControlName=\"tax_id\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <span class=\"pw-label-style info-circle\" id=\"subscription-details-roles-label\">{{ 'Admin.Subscriptions.AssignedRoles' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Admin.Subscriptions.Tooltip.AssignedRoles'\n | transloco\n }}</span>\n </span>\n <p-multiSelect inputId=\"subscription-details-roles\" [options]=\"allRoles\"\n formControlName=\"roles\"\n appendTo=\"body\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.AssignedRoles' | transloco\"\n [ariaLabelledBy]=\"'subscription-details-roles-label'\"\n [ariaLabel]=\"'Admin.Subscriptions.AssignedRoles' | transloco\"></p-multiSelect>\n </div>\n @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\"\n [label]=\"'Organization.OrganizationType' | transloco\"\n name=\"organization_type_id\" controlId=\"subscription-organization_type_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_type_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n [options]=\"types['organization_types']\"\n formControlName=\"organization_type_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationType' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\"\n [label]=\"'Organization.OrganizationIndustry' | transloco\"\n name=\"organization_industry_id\" controlId=\"subscription-organization_industry_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_industry_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n [options]=\"industries['organization_industries']\"\n formControlName=\"organization_industry_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationIndustry' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationSizes$ | async; as sizes) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\"\n [label]=\"'Size' | transloco\"\n name=\"organization_size_id\" controlId=\"subscription-organization_size_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_size_id-label'\"\n [ariaLabel]=\"'Size' | transloco\"\n [options]=\"sizes['organization_sizes']\"\n formControlName=\"organization_size_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationSize' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CompanyUrl' | transloco\"\n [label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\"\n name=\"company_url\"\n controlId=\"sub-details-company_url\">\n <input type=\"text\"\n id=\"sub-details-company_url\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.CompanyUrl' | transloco\"\n formControlName=\"company_url\" />\n </pw-input-container>\n </div>\n </div>\n <h3>{{ 'Admin.Subscriptions.Section.PlanSeats' | transloco }}</h3>\n <div class=\"row\">\n <!-- Readonly Starts -->\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reference' | transloco\"\n [label]=\"'Admin.Subscriptions.Reference' | transloco\"\n name=\"reference_number\"\n controlId=\"sub-details-reference_number\">\n @if (form) {\n <input type=\"text\"\n id=\"sub-details-reference_number\"\n readonly\n class=\"form-control\"\n data-control=\"reference\"\n [value]=\"form.get('reference_number')?.value\" />\n }\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.UnitsInUse' | transloco\"\n [label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\"\n name=\"units_in_use\"\n controlId=\"sub-details-units_in_use\">\n <input type=\"text\"\n id=\"sub-details-units_in_use\"\n readonly\n class=\"form-control\"\n formControlName=\"units_in_use\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MaxUnits' | transloco\"\n [label]=\"'Admin.Subscriptions.MaxUnits' | transloco\"\n name=\"max_units\"\n controlId=\"sub-details-max_units\">\n <input type=\"text\"\n id=\"sub-details-max_units\"\n readonly\n class=\"form-control\"\n formControlName=\"max_units\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CalculatedPrice' | transloco\"\n [label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\"\n name=\"calculated_price\"\n controlId=\"sub-details-calculated_price\">\n <input type=\"text\"\n id=\"sub-details-calculated_price\"\n class=\"form-control\"\n readonly\n formControlName=\"calculated_price\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MainExpiryDate' | transloco\"\n [label]=\"\n 'Admin.Subscriptions.MainExpiryDate' | transloco\n \"\n name=\"expires_at\" controlId=\"sub-details-expires_at\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"sub-details-expires_at\"\n name=\"expires_at\"\n container=\"body\"\n formControlName=\"expires_at\"\n [readonly]=\"true\"\n ngbDatepicker\n #c=\"ngbDatepicker\" />\n <button class=\"btn btn-primary\"\n type=\"button\"\n [disabled]=\"true\"\n aria-label=\"Open date picker\"\n (click)=\"c.toggle()\">\n <i\n class=\"fa fa-calendar\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SuperAdmin'\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.PurchasedSeats' | transloco\"\n [label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\"\n name=\"purchased_units\"\n controlId=\"sub-details-purchased_units\">\n <input type=\"number\"\n id=\"sub-details-purchased_units\"\n min=\"0\"\n readonly\n class=\"form-control\"\n formControlName=\"purchased_units\" />\n </pw-input-container>\n </div>\n <!-- Readonly Ends -->\n </div>\n <!-- social links -->\n <h3>{{ 'Admin.Subscriptions.Section.SocialLinks' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Facebook' | transloco\"\n [label]=\"'Admin.Subscriptions.Facebook' | transloco\"\n name=\"facebook_handle\"\n controlId=\"sub-details-facebook_handle\">\n <input type=\"text\"\n id=\"sub-details-facebook_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Facebook' | transloco\"\n formControlName=\"facebook_handle\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Twitter' | transloco\"\n [label]=\"'Admin.Subscriptions.Twitter' | transloco\"\n name=\"twitter_handle\"\n controlId=\"sub-details-twitter_handle\">\n <input type=\"text\"\n id=\"sub-details-twitter_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Twitter' | transloco\"\n formControlName=\"twitter_handle\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Linkedin' | transloco\"\n [label]=\"'Admin.Subscriptions.LinkedIn' | transloco\"\n name=\"linkedin_handle\"\n controlId=\"sub-details-linkedin_handle\">\n <input type=\"text\"\n id=\"sub-details-linkedin_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.LinkedIn' | transloco\"\n formControlName=\"linkedin_handle\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reddit' | transloco\"\n [label]=\"'Admin.Subscriptions.Reddit' | transloco\"\n name=\"reddit_handle\"\n controlId=\"sub-details-reddit_handle\">\n <input type=\"text\"\n id=\"sub-details-reddit_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Reddit' | transloco\"\n formControlName=\"reddit_handle\" />\n </pw-input-container>\n </div>\n </div>\n <ng-container *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <h3>{{ 'Admin.Subscriptions.Section.Security' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Enforce2fa'| transloco\"\n label=\"Enforce 2FA\"\n name=\"enforce_2fa\" controlId=\"subscription-enforce_2fa\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch formControlName=\"enforce_2fa\"\n [attr.aria-labelledby]=\"'subscription-enforce_2fa-label'\"\n name=\"enforce_2fa\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </ng-container>\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"submitted\"\n class=\"btn btn-primary\"\n *rbacAllow=\"'Pages.Admin.Subscription.Edit'\">\n {{ 'Button.Save' | transloco }}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Products</a>\n <ng-template ngbNavContent>\n <pw-subscription-products></pw-subscription-products>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Members</a>\n <ng-template ngbNavContent>\n <pw-subscription-users></pw-subscription-users>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"4\"\n *rbacAllow=\"'SuperAdmin'\">\n <a ngbNavLink>Ambassadors</a>\n <ng-template ngbNavContent>\n <pw-subscription-agents-list></pw-subscription-agents-list>\n </ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n }\n </div>\n </div>\n </div>\n", styles: [".ui-autocomplete-multiple-container,.ui-fluid.skills-modal p-autocomplete{background:transparent}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}:host ::ng-deep .pw-label-style+p-multiselect{margin-top:6px}:host ::ng-deep .input-group .btn{min-height:36px;display:inline-flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6$2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i9.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i9.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: i9.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i9.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "component", type: i10.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i2$1.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2$1.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2$1.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2$1.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2$1.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2$1.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2$1.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10$1.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i11.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i11.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i9.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: SubscriptionProductsComponent, selector: "pw-subscription-products" }, { kind: "component", type: SubscriptionUsersComponent, selector: "pw-subscription-users" }, { kind: "component", type: SubscriptionAgentsListComponent, selector: "pw-subscription-agents-list" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
7356
7356
|
}
|
|
7357
7357
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SubscriptionDetailsComponent, decorators: [{
|
|
7358
7358
|
type: Component,
|
|
7359
|
-
args: [{ selector: 'pw-subscription-details', standalone: false, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\"\n routerLink=\"/admin/subscriptions/list\"\n class=\"previous\">\n <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"m-subheader__title m-subheader__title--separator\">\n <span>Subscription Details</span>\n </h3>\n @if (currentSubscriber?.is_deleted) {\n <span class=\"badge rounded-pill bg-danger ms-2\"\n >Deleted</span>\n }\n </div>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!isLoading) {\n <div >\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Subscription</a>\n <ng-template ngbNavContent>\n <div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"mt-4\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"saveDetails()\">\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Organization' | transloco\"\n [label]=\"'Admin.Subscriptions.Organization' | transloco\"\n name=\"organisation\"\n controlId=\"sub-details-organisation\">\n <input type=\"text\"\n id=\"sub-details-organisation\"\n class=\"form-control\"\n formControlName=\"organisation\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactName' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactName' | transloco\"\n name=\"contact_name\"\n controlId=\"sub-details-contact_name\">\n <input type=\"text\"\n id=\"sub-details-contact_name\"\n class=\"form-control\"\n formControlName=\"contact_name\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactEmail' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactEmail' | transloco\"\n name=\"contact_email\"\n controlId=\"sub-details-contact_email\">\n <input type=\"text\"\n id=\"sub-details-contact_email\"\n class=\"form-control\"\n formControlName=\"contact_email\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactTel' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactTel' | transloco\"\n name=\"contact_tel\"\n controlId=\"sub-details-contact_tel\">\n <input type=\"text\"\n id=\"sub-details-contact_tel\"\n formControlName=\"contact_tel\"\n class=\"form-control\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [label]=\"'Tax Id'\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.TaxId' | transloco\"\n name=\"tax_id\"\n controlId=\"sub-details-tax_id\">\n <input type=\"text\"\n id=\"sub-details-tax_id\"\n class=\"form-control\"\n formControlName=\"tax_id\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <span class=\"pw-label-style info-circle\" id=\"subscription-details-roles-label\">{{ 'Admin.Subscriptions.AssignedRoles' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Admin.Subscriptions.Tooltip.AssignedRoles'\n | transloco\n }}</span>\n </span>\n <p-multiSelect inputId=\"subscription-details-roles\" [options]=\"allRoles\"\n formControlName=\"roles\"\n appendTo=\"body\"\n [ariaLabelledBy]=\"'subscription-details-roles-label'\"\n [ariaLabel]=\"'Admin.Subscriptions.AssignedRoles' | transloco\"></p-multiSelect>\n </div>\n @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\"\n [label]=\"'Organization.OrganizationType' | transloco\"\n name=\"organization_type_id\" controlId=\"subscription-organization_type_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_type_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n [options]=\"types['organization_types']\"\n formControlName=\"organization_type_id\"\n [placeholder]=\"'Select Organization Type'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\"\n [label]=\"'Organization.OrganizationIndustry' | transloco\"\n name=\"organization_industry_id\" controlId=\"subscription-organization_industry_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_industry_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n [options]=\"industries['organization_industries']\"\n formControlName=\"organization_industry_id\"\n [placeholder]=\"'Select Organization Industry'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationSizes$ | async; as sizes) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\"\n [label]=\"'Size' | transloco\"\n name=\"organization_size_id\" controlId=\"subscription-organization_size_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_size_id-label'\"\n [ariaLabel]=\"'Size' | transloco\"\n [options]=\"sizes['organization_sizes']\"\n formControlName=\"organization_size_id\"\n [placeholder]=\"'Select Organization Size'\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CompanyUrl' | transloco\"\n [label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\"\n name=\"company_url\"\n controlId=\"sub-details-company_url\">\n <input type=\"text\"\n id=\"sub-details-company_url\"\n class=\"form-control\"\n formControlName=\"company_url\" />\n </pw-input-container>\n </div>\n <!-- Readonly Starts -->\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reference' | transloco\"\n [label]=\"'Admin.Subscriptions.Reference' | transloco\"\n name=\"reference_number\"\n controlId=\"sub-details-reference_number\">\n @if (form) {\n <input type=\"text\"\n id=\"sub-details-reference_number\"\n readonly\n class=\"form-control\"\n data-control=\"reference\"\n [value]=\"form.get('reference_number')?.value\" />\n }\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.UnitsInUse' | transloco\"\n [label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\"\n name=\"units_in_use\"\n controlId=\"sub-details-units_in_use\">\n <input type=\"text\"\n id=\"sub-details-units_in_use\"\n readonly\n class=\"form-control\"\n formControlName=\"units_in_use\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MaxUnits' | transloco\"\n [label]=\"'Admin.Subscriptions.MaxUnits' | transloco\"\n name=\"max_units\"\n controlId=\"sub-details-max_units\">\n <input type=\"text\"\n id=\"sub-details-max_units\"\n readonly\n class=\"form-control\"\n formControlName=\"max_units\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CalculatedPrice' | transloco\"\n [label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\"\n name=\"calculated_price\"\n controlId=\"sub-details-calculated_price\">\n <input type=\"text\"\n id=\"sub-details-calculated_price\"\n class=\"form-control\"\n readonly\n formControlName=\"calculated_price\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MainExpiryDate' | transloco\"\n [label]=\"\n 'Admin.Subscriptions.MainExpiryDate' | transloco\n \"\n name=\"expires_at\" controlId=\"sub-details-expires_at\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"sub-details-expires_at\"\n name=\"expires_at\"\n container=\"body\"\n placeholder=\"Expiry Date\"\n formControlName=\"expires_at\"\n [readonly]=\"true\"\n ngbDatepicker\n #c=\"ngbDatepicker\" />\n <button class=\"btn btn-primary\"\n type=\"button\"\n [disabled]=\"true\"\n aria-label=\"Open date picker\"\n (click)=\"c.toggle()\">\n <i\n class=\"fa fa-calendar\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SuperAdmin'\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.PurchasedSeats' | transloco\"\n [label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\"\n name=\"purchased_units\"\n controlId=\"sub-details-purchased_units\">\n <input type=\"number\"\n id=\"sub-details-purchased_units\"\n min=\"0\"\n readonly\n class=\"form-control\"\n formControlName=\"purchased_units\" />\n </pw-input-container>\n </div>\n <!-- Readonly Ends -->\n </div>\n <!-- social links -->\n <h3>Social Links</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Facebook' | transloco\"\n [label]=\"'Admin.Subscriptions.Facebook' | transloco\"\n name=\"facebook_handle\"\n controlId=\"sub-details-facebook_handle\">\n <input type=\"text\"\n id=\"sub-details-facebook_handle\"\n class=\"form-control\"\n formControlName=\"facebook_handle\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Twitter' | transloco\"\n [label]=\"'Admin.Subscriptions.Twitter' | transloco\"\n name=\"twitter_handle\"\n controlId=\"sub-details-twitter_handle\">\n <input type=\"text\"\n id=\"sub-details-twitter_handle\"\n class=\"form-control\"\n formControlName=\"twitter_handle\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Linkedin' | transloco\"\n [label]=\"'Admin.Subscriptions.LinkedIn' | transloco\"\n name=\"linkedin_handle\"\n controlId=\"sub-details-linkedin_handle\">\n <input type=\"text\"\n id=\"sub-details-linkedin_handle\"\n class=\"form-control\"\n formControlName=\"linkedin_handle\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reddit' | transloco\"\n [label]=\"'Admin.Subscriptions.Reddit' | transloco\"\n name=\"reddit_handle\"\n controlId=\"sub-details-reddit_handle\">\n <input type=\"text\"\n id=\"sub-details-reddit_handle\"\n class=\"form-control\"\n formControlName=\"reddit_handle\" />\n </pw-input-container>\n </div>\n </div>\n <ng-container *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <h3>Security</h3>\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Enforce2fa'| transloco\"\n label=\"Enforce 2FA\"\n name=\"enforce_2fa\" controlId=\"subscription-enforce_2fa\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch formControlName=\"enforce_2fa\"\n [attr.aria-labelledby]=\"'subscription-enforce_2fa-label'\"\n name=\"enforce_2fa\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </ng-container>\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"submitted\"\n class=\"btn btn-primary\"\n *rbacAllow=\"'Pages.Admin.Subscription.Edit'\">\n {{ 'Button.Save' | transloco }}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Products</a>\n <ng-template ngbNavContent>\n <pw-subscription-products></pw-subscription-products>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Members</a>\n <ng-template ngbNavContent>\n <pw-subscription-users></pw-subscription-users>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"4\"\n *rbacAllow=\"'SuperAdmin'\">\n <a ngbNavLink>Ambassadors</a>\n <ng-template ngbNavContent>\n <pw-subscription-agents-list></pw-subscription-agents-list>\n </ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n }\n </div>\n </div>\n </div>\n", styles: [".ui-autocomplete-multiple-container,.ui-fluid.skills-modal p-autocomplete{background:transparent}:host ::ng-deep .pw-label-style+p-multiselect{margin-top:6px}:host ::ng-deep .input-group .btn{min-height:36px;display:inline-flex;align-items:center;justify-content:center}\n"] }]
|
|
7359
|
+
args: [{ selector: 'pw-subscription-details', standalone: false, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\"\n routerLink=\"/admin/subscriptions/list\"\n class=\"previous\">\n <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"m-subheader__title m-subheader__title--separator\">\n <span>Subscription Details</span>\n </h3>\n @if (currentSubscriber?.is_deleted) {\n <span class=\"badge rounded-pill bg-danger ms-2\"\n >Deleted</span>\n }\n </div>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!isLoading) {\n <div >\n <ul ngbNav\n #nav=\"ngbNav\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Subscription</a>\n <ng-template ngbNavContent>\n <div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"mt-4\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"saveDetails()\">\n <h3>{{ 'Admin.Subscriptions.Section.IdentityContact' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Organization' | transloco\"\n [label]=\"'Admin.Subscriptions.Organization' | transloco\"\n name=\"organisation\"\n controlId=\"sub-details-organisation\">\n <input type=\"text\"\n id=\"sub-details-organisation\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n formControlName=\"organisation\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactName' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactName' | transloco\"\n name=\"contact_name\"\n controlId=\"sub-details-contact_name\">\n <input type=\"text\"\n id=\"sub-details-contact_name\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactName' | transloco\"\n formControlName=\"contact_name\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactEmail' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactEmail' | transloco\"\n name=\"contact_email\"\n controlId=\"sub-details-contact_email\">\n <input type=\"text\"\n id=\"sub-details-contact_email\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactEmail' | transloco\"\n formControlName=\"contact_email\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactTel' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactTel' | transloco\"\n name=\"contact_tel\"\n controlId=\"sub-details-contact_tel\">\n <input type=\"text\"\n id=\"sub-details-contact_tel\"\n formControlName=\"contact_tel\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactTel' | transloco\"\n class=\"form-control\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [label]=\"'Admin.Subscriptions.TaxId' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.TaxId' | transloco\"\n name=\"tax_id\"\n controlId=\"sub-details-tax_id\">\n <input type=\"text\"\n id=\"sub-details-tax_id\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.TaxId' | transloco\"\n formControlName=\"tax_id\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <span class=\"pw-label-style info-circle\" id=\"subscription-details-roles-label\">{{ 'Admin.Subscriptions.AssignedRoles' | transloco }}\n <span class=\"tooltiptext gradient-custom-branding\">{{\n 'Admin.Subscriptions.Tooltip.AssignedRoles'\n | transloco\n }}</span>\n </span>\n <p-multiSelect inputId=\"subscription-details-roles\" [options]=\"allRoles\"\n formControlName=\"roles\"\n appendTo=\"body\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.AssignedRoles' | transloco\"\n [ariaLabelledBy]=\"'subscription-details-roles-label'\"\n [ariaLabel]=\"'Admin.Subscriptions.AssignedRoles' | transloco\"></p-multiSelect>\n </div>\n @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\"\n [label]=\"'Organization.OrganizationType' | transloco\"\n name=\"organization_type_id\" controlId=\"subscription-organization_type_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_type_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n [options]=\"types['organization_types']\"\n formControlName=\"organization_type_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationType' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\"\n [label]=\"'Organization.OrganizationIndustry' | transloco\"\n name=\"organization_industry_id\" controlId=\"subscription-organization_industry_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_industry_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n [options]=\"industries['organization_industries']\"\n formControlName=\"organization_industry_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationIndustry' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationSizes$ | async; as sizes) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\"\n [label]=\"'Size' | transloco\"\n name=\"organization_size_id\" controlId=\"subscription-organization_size_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_size_id-label'\"\n [ariaLabel]=\"'Size' | transloco\"\n [options]=\"sizes['organization_sizes']\"\n formControlName=\"organization_size_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationSize' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CompanyUrl' | transloco\"\n [label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\"\n name=\"company_url\"\n controlId=\"sub-details-company_url\">\n <input type=\"text\"\n id=\"sub-details-company_url\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.CompanyUrl' | transloco\"\n formControlName=\"company_url\" />\n </pw-input-container>\n </div>\n </div>\n <h3>{{ 'Admin.Subscriptions.Section.PlanSeats' | transloco }}</h3>\n <div class=\"row\">\n <!-- Readonly Starts -->\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reference' | transloco\"\n [label]=\"'Admin.Subscriptions.Reference' | transloco\"\n name=\"reference_number\"\n controlId=\"sub-details-reference_number\">\n @if (form) {\n <input type=\"text\"\n id=\"sub-details-reference_number\"\n readonly\n class=\"form-control\"\n data-control=\"reference\"\n [value]=\"form.get('reference_number')?.value\" />\n }\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.UnitsInUse' | transloco\"\n [label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\"\n name=\"units_in_use\"\n controlId=\"sub-details-units_in_use\">\n <input type=\"text\"\n id=\"sub-details-units_in_use\"\n readonly\n class=\"form-control\"\n formControlName=\"units_in_use\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MaxUnits' | transloco\"\n [label]=\"'Admin.Subscriptions.MaxUnits' | transloco\"\n name=\"max_units\"\n controlId=\"sub-details-max_units\">\n <input type=\"text\"\n id=\"sub-details-max_units\"\n readonly\n class=\"form-control\"\n formControlName=\"max_units\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CalculatedPrice' | transloco\"\n [label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\"\n name=\"calculated_price\"\n controlId=\"sub-details-calculated_price\">\n <input type=\"text\"\n id=\"sub-details-calculated_price\"\n class=\"form-control\"\n readonly\n formControlName=\"calculated_price\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MainExpiryDate' | transloco\"\n [label]=\"\n 'Admin.Subscriptions.MainExpiryDate' | transloco\n \"\n name=\"expires_at\" controlId=\"sub-details-expires_at\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"sub-details-expires_at\"\n name=\"expires_at\"\n container=\"body\"\n formControlName=\"expires_at\"\n [readonly]=\"true\"\n ngbDatepicker\n #c=\"ngbDatepicker\" />\n <button class=\"btn btn-primary\"\n type=\"button\"\n [disabled]=\"true\"\n aria-label=\"Open date picker\"\n (click)=\"c.toggle()\">\n <i\n class=\"fa fa-calendar\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SuperAdmin'\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.PurchasedSeats' | transloco\"\n [label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\"\n name=\"purchased_units\"\n controlId=\"sub-details-purchased_units\">\n <input type=\"number\"\n id=\"sub-details-purchased_units\"\n min=\"0\"\n readonly\n class=\"form-control\"\n formControlName=\"purchased_units\" />\n </pw-input-container>\n </div>\n <!-- Readonly Ends -->\n </div>\n <!-- social links -->\n <h3>{{ 'Admin.Subscriptions.Section.SocialLinks' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Facebook' | transloco\"\n [label]=\"'Admin.Subscriptions.Facebook' | transloco\"\n name=\"facebook_handle\"\n controlId=\"sub-details-facebook_handle\">\n <input type=\"text\"\n id=\"sub-details-facebook_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Facebook' | transloco\"\n formControlName=\"facebook_handle\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Twitter' | transloco\"\n [label]=\"'Admin.Subscriptions.Twitter' | transloco\"\n name=\"twitter_handle\"\n controlId=\"sub-details-twitter_handle\">\n <input type=\"text\"\n id=\"sub-details-twitter_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Twitter' | transloco\"\n formControlName=\"twitter_handle\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Linkedin' | transloco\"\n [label]=\"'Admin.Subscriptions.LinkedIn' | transloco\"\n name=\"linkedin_handle\"\n controlId=\"sub-details-linkedin_handle\">\n <input type=\"text\"\n id=\"sub-details-linkedin_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.LinkedIn' | transloco\"\n formControlName=\"linkedin_handle\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reddit' | transloco\"\n [label]=\"'Admin.Subscriptions.Reddit' | transloco\"\n name=\"reddit_handle\"\n controlId=\"sub-details-reddit_handle\">\n <input type=\"text\"\n id=\"sub-details-reddit_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Reddit' | transloco\"\n formControlName=\"reddit_handle\" />\n </pw-input-container>\n </div>\n </div>\n <ng-container *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <h3>{{ 'Admin.Subscriptions.Section.Security' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Enforce2fa'| transloco\"\n label=\"Enforce 2FA\"\n name=\"enforce_2fa\" controlId=\"subscription-enforce_2fa\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch formControlName=\"enforce_2fa\"\n [attr.aria-labelledby]=\"'subscription-enforce_2fa-label'\"\n name=\"enforce_2fa\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </ng-container>\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"submitted\"\n class=\"btn btn-primary\"\n *rbacAllow=\"'Pages.Admin.Subscription.Edit'\">\n {{ 'Button.Save' | transloco }}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Products</a>\n <ng-template ngbNavContent>\n <pw-subscription-products></pw-subscription-products>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Members</a>\n <ng-template ngbNavContent>\n <pw-subscription-users></pw-subscription-users>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"4\"\n *rbacAllow=\"'SuperAdmin'\">\n <a ngbNavLink>Ambassadors</a>\n <ng-template ngbNavContent>\n <pw-subscription-agents-list></pw-subscription-agents-list>\n </ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n }\n </div>\n </div>\n </div>\n", styles: [".ui-autocomplete-multiple-container,.ui-fluid.skills-modal p-autocomplete{background:transparent}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}:host ::ng-deep .pw-label-style+p-multiselect{margin-top:6px}:host ::ng-deep .input-group .btn{min-height:36px;display:inline-flex;align-items:center;justify-content:center}\n"] }]
|
|
7360
7360
|
}], ctorParameters: () => [{ type: i1$1.SubscriptionService }, { type: i1.AdminService }, { type: i3.DatePipe }, { type: i1$1.CommonService }, { type: i1$1.NgbDateCustomParserFormatter }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
|
|
7361
7361
|
|
|
7362
7362
|
class SubscriptionProductDetailsComponent extends AppBaseComponent {
|
|
@@ -8466,11 +8466,11 @@ class SubscriptionsListComponent extends AppBaseComponent {
|
|
|
8466
8466
|
super.ngOnDestroy();
|
|
8467
8467
|
}
|
|
8468
8468
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SubscriptionsListComponent, deps: [{ token: i1$1.ProductService }, { token: i1.AdminService }, { token: i9.UntypedFormBuilder }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1$1.CommonService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8469
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SubscriptionsListComponent, isStandalone: false, selector: "pw-subscriptions-list", viewQueries: [{ propertyName: "refProduct", first: true, predicate: ["refProduct"], descendants: true }, { propertyName: "recoverSubscriptionPasswordModal", first: true, predicate: ["recoverSubscriptionPasswordModal"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div\n class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Subscriptions</h2>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n id=\"btn-create\"\n [routerLink]=\"[routers.inviteUsers]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Invite a User to a Trial\n </a>\n </div>\n</div>\n<div class=\"p-2 mt-2\">\n <div class=\"w-100 text-center\">\n @if (!isLoaded) {\n <p-progressSpinner> </p-progressSpinner>\n }\n </div>\n <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table #dt\n [value]=\"subscriptions\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n @if (subscriptionInsights) {\n <div class=\"row mb-4\">\n @for (temp of objectKeys(subscriptionInsights); track temp) {\n <div class=\"col-12 col-lg-3 summary\">\n <div class=\"card\">\n <div class=\"card-body\">\n @for (item of subscriptionInsights[temp]; track item) {\n @let k = item | kpiInsight;\n <div class=\"kpi\">\n <p class=\"kpi-label\">{{ k.name }}@if (item?.info) {<span [pTooltip]=\"item?.info\"><i class=\"far fa-info-circle text-muted\"></i></span>}</p>\n <div class=\"kpi-value\">{{ k.primary }}</div>\n @if (k.secondary) {<div class=\"kpi-comp\">{{ k.comp }} <b>{{ k.secondary }}</b></div>}\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n <div class=\"search-filter\">\n <div class=\"col-12 col-sm-4\">\n <p-multiSelect inputId=\"subscriptions-list-feature-keys\"\n placeholder=\"Select Feature Keys\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n [maxSelectedLabels]=\"2\"\n selectedItemsLabel=\"{0} feature keys selected\"\n [(ngModel)]=\"selectedFeatureKeys\"\n [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-12 col-sm-4\">\n <p-select\n inputId=\"subscriptions-list-status\"\n [options]=\"subscriptionStatus\"\n [placeholder]=\"'Select status'\"\n (onChange)=\"filterByStatus($event.value)\"\n [(ngModel)]=\"status\"\n appendTo=\"body\">\n </p-select>\n </div>\n <div class=\"text-end\">\n <label for=\"subscriptions-list-search\" class=\"visually-hidden\">Search Subscription</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=\"subscriptions-list-search\"\n name=\"subscriptions-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search Subscription...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"id\">\n {{ 'Admin.Subscriptions.Id' | transloco }}\n <p-sortIcon field=\"id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"organisation\">\n {{ 'Admin.Subscriptions.Organization' | transloco }}\n <p-sortIcon field=\"organisation\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"contact_name\">\n {{ 'Admin.Subscriptions.ContactName' | transloco }}\n <p-sortIcon field=\"contact_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"contact_email\">\n {{ 'Admin.Subscriptions.ContactEmail' | transloco }}\n <p-sortIcon field=\"contact_email\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.Product' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.Currency' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.PricePerMonth' | transloco }}</th>\n <th scope=\"true\"\n pSortableColumn=\"stripe_customer_id\">\n {{ 'Admin.Subscriptions.Paid' | transloco }}\n <p-sortIcon field=\"stripe_customer_id\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.Billing' | transloco }}</th>\n <th scope=\"true\"\n class=\"expires-at-width\">\n {{ 'Admin.Subscriptions.ExpiresAt' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"sessions_total\">\n {{ 'Admin.Subscriptions.SessionsTotal' | transloco }}\n <p-sortIcon field=\"sessions_total\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"sessions_last_month\">\n {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n <p-sortIcon field=\"sessions_last_month\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"deleted_at\">\n {{ 'Admin.Subscriptions.Deleted' | transloco }}\n <p-sortIcon field=\"deleted_at\"></p-sortIcon>\n </th>\n <th class=\"actions-list-two\"\n scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-item>\n <tr>\n <td data-head=\"id\">{{ item.id }}</td>\n <td data-head=\"Organization\">\n <span class=\"cursor-pointer custom-break-word\"\n [pTooltip]=\"item.organisation\"\n tooltipPosition=\"top\">{{ item.organisation | textTruncate: 20 }}</span>\n </td>\n <td data-head=\"ContactName\" class=\"custom-break-word\">\n <span [pTooltip]=\"item.contact_name\" tooltipPosition=\"top\">{{ item.contact_name | textTruncate: 20 }}</span>\n </td>\n <td data-head=\"ContactEmail\">\n <span [pTooltip]=\"item.contact_email\" tooltipPosition=\"top\">{{ item.contact_email | textTruncate: 20 }}</span>\n </td>\n <td data-head=\"Name\">\n <span class=\"cursor-pointer custom-break-word\"\n [pTooltip]=\"item.productName\"\n tooltipPosition=\"top\">{{ item.productName | textTruncate: 20 }}</span>\n </td>\n <td data-head=\"Currency\">\n <span [appDynamicBadge]=\"{ itemsArray: currency, item: item.currency }\"\n color=\"blue-grey\"\n class=\"badge\">{{ item.currency }}</span>\n </td>\n <td data-head=\"Price/M\">\n <span>{{ (item.price / 100).toFixed(2) | currency:item.currency }}\n @if (item?.discount && objectKeys(item?.discount)?.length) {\n <i\n class=\"far fa-info-circle text-muted\"\n aria-hidden=\"true\"\n [pTooltip]=\"item?.discount | json\"\n tooltipPosition=\"top\"\n ></i>\n }\n </span>\n </td>\n <td data-head=\"Paid\">\n @if (item?.unsubscribed_at) {\n <span class=\"badge bg-warning d-inline-flex align-items-center\">\n Unsub\n @if (item?.reason_to_cancel) {\n <i class=\"far fa-info-circle ms-2 text-muted\"\n [pTooltip]=\"item.reason_to_cancel\"\n tooltipPosition=\"top\"\n aria-hidden=\"true\"></i>\n }\n </span>\n }\n @if (!item?.unsubscribed_at) {\n @if ((item?.stripe_customer_id || item?.external_payment) && item?.signed_up_at) {\n <span class=\"badge bg-success\">Yes</span>\n } @else {\n <span class=\"badge bg-blue-grey\">No</span>\n }\n }\n @if (item?.pause_collection && objectKeys(item?.pause_collection)?.length) {\n <span\n class=\"ms-2\"\n [pTooltip]=\"item?.pause_collection | json\"\n tooltipPosition=\"top\">\n <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n </span>\n }\n </td>\n <td data-head=\"Billing\">\n <span class=\"badge\"\n [appDynamicBadge]=\"{\n itemsArray: billingFrequency,\n item: item?.billingFrequency\n }\"\n color=\"blue-grey\">{{ item.billingFrequency }}</span>\n </td>\n <td data-head=\"Expires\">\n <span [ngClass]=\"getExpiresAtColor(item)\">{{item?.expires_at | dateFormat}}</span>\n <span> ({{item?.created_at | sinceAgo:true}})</span>\n </td>\n <td data-head=\"S#\">{{ item?.sessions_total }}</td>\n <td data-head=\"S/m #\">\n <span [ngClass]=\"{\n 'text-danger fw-bold': item?.sessions_last_month < 3\n }\">{{ item?.sessions_last_month }}</span>\n </td>\n <td data-head=\"Deleted\">\n @if (item?.deleted_at) {\n <span\n class=\"badge bg-danger\">Yes</span>\n }\n @if (!item?.deleted_at) {\n <span\n class=\"badge bg-blue-grey\">No</span>\n }\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 [routerLink]=\"[routers.subscriptionDetails, item.id]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n @if (item.deleted) {\n <li ngbTooltip=\"Reactivate subscription\"\n class=\"me-2 me-sm-3\"\n *rbacAllow=\"'Pages.Alpha'\"\n (keydown.enter)=\"openRecoverSubscriptionModal(item)\"\n (click)=\"openRecoverSubscriptionModal(item)\">\n <i class=\"fa fa-trash delete-icon text-success\" aria-hidden=\"true\"></i>\n </li>\n } @else {\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\"\n *rbacAllow=\"'Pages.Admin.Subscription.Delete'\"\n (keydown.enter)=\"onDelete(item)\"\n (click)=\"onDelete(item)\">\n <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n }\n @if (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n</div>\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionMessage' | transloco\">\n </pw-no-data>\n}\n<pw-password-validation\n #recoverSubscriptionPasswordModal\n (successEvent)=\"onRecoverConfirmed()\">\n</pw-password-validation>\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)}.table-responsive td{padding:6px 10px!important;font-size:12px!important;line-height:1.35;vertical-align:top;word-break:break-word}.table-responsive th{font-size:12px!important;vertical-align:bottom}.table-responsive td[data-head=Organization],.table-responsive td[data-head=Name],.table-responsive td[data-head=ContactName],.table-responsive td[data-head=ContactEmail],.table-responsive td[data-head=id],.table-responsive td[data-head=\"Price/M\"],.table-responsive td[data-head=\"S#\"],.table-responsive td[data-head=\"S/m #\"]{white-space:nowrap}@media(max-width:1199.98px){.table-responsive td,.table-responsive th{white-space:nowrap;word-break:normal}}.expires-at-width{width:8%}.custom-break-word{word-break:break-word!important}.table-responsive td[data-head=id]{font-variant-numeric:tabular-nums;color:#7c8696}.table-responsive td[data-head=\"Price/M\"],.table-responsive td[data-head=\"S#\"],.table-responsive td[data-head=\"S/m #\"]{font-variant-numeric:tabular-nums;text-align:right}.table-responsive th:nth-child(7),.table-responsive th:nth-child(11),.table-responsive th:nth-child(12){text-align:right}.table-responsive .badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;letter-spacing:.01em}.table-responsive .badge[class*=bg-success]{background-color:#e6f4ec!important;color:#0f6b3a!important}.table-responsive .badge[class*=bg-danger]{background-color:#fbeae8!important;color:#c0392b!important}.table-responsive .badge[class*=bg-warning]{background-color:#fbf1e3!important;color:#8a5a00!important}.table-responsive .badge.bg-blue-grey{background-color:#eef0f3!important;color:#5a6473!important}.table-responsive .badge.bg-blue-grey-1{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-2{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-3{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-4{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-5{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-6{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-7{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-8{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-9{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-10{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-11{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-12{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-13{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-14{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-15{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-16{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-17{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-18{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-19{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-20{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-21{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-22{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-23{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-24{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge[class*=bg-success]:before,.table-responsive .badge[class*=bg-danger]:before,.table-responsive .badge[class*=bg-warning]:before{content:\"\";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background-color:currentColor;vertical-align:middle}.table-responsive tbody tr:hover{background-color:#f5f7fa}.table-responsive td[data-head=Organization] span,.table-responsive td[data-head=Name] span{font-weight:600;color:#1a1d21}.table-responsive td[data-head=Expires] span~span{font-weight:600}.table-responsive .list-action .edit-icon{color:#5a6473}.table-responsive .list-action .delete-icon{color:#c0392b!important}.table-responsive .list-action .delete-icon.text-success{color:#0f6b3a!important}.summary{display:flex}.summary .card{width:100%;margin-top:0;margin-bottom:0;padding-bottom:0!important;border:1px solid #e2e5ea;border-radius:8px;box-shadow:none!important;background-color:#fff;transition:background-color .12s ease,border-color .12s ease}.summary .card:hover{background-color:#fafbfc;border-color:#cfd4dc}.summary .card-body{display:flex;flex-direction:column;padding:2px 0}.summary .kpi{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline;padding:10px 16px}.summary .kpi+.kpi{border-top:1px solid #eef0f3}.summary .kpi-label{grid-column:1/-1;margin:0 0 4px;font-size:10px;font-weight:600;line-height:1.3;letter-spacing:.05em;text-transform:uppercase;color:#5a6473}.summary .kpi-label .fa-info-circle{margin-left:4px;font-size:15px;color:#a8afbc}.summary .kpi-value{grid-column:1;font-size:18px;font-weight:700;line-height:1.1;color:#1a1d21;font-variant-numeric:tabular-nums}.summary .kpi-comp{grid-column:2;text-align:right;font-size:12px;color:#7c8696;font-variant-numeric:tabular-nums;white-space:normal}.summary .kpi-comp:before{content:\"\\b7\";margin-right:4px;color:#a8afbc}.summary .kpi-comp b{font-weight:600;color:#5a6473}@media(min-width:320px)and (max-width:720px){.primeng-datatable-container .search-filter{display:flex;flex-direction:column;gap:.5rem;justify-content:space-between}}\n"], dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i6$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6$2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i6.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i2$1.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i9.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10$1.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage"], outputs: ["successEvent"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i10$1.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i11.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i11.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i3.JsonPipe, name: "json" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.SinceAgoPipe, name: "sinceAgo" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: KpiInsightPipe, name: "kpiInsight" }] }); }
|
|
8469
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SubscriptionsListComponent, isStandalone: false, selector: "pw-subscriptions-list", viewQueries: [{ propertyName: "refProduct", first: true, predicate: ["refProduct"], descendants: true }, { propertyName: "recoverSubscriptionPasswordModal", first: true, predicate: ["recoverSubscriptionPasswordModal"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div\n class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Subscriptions</h2>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n id=\"btn-create\"\n [routerLink]=\"[routers.inviteUsers]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Invite a User to a Trial\n </a>\n </div>\n</div>\n<div class=\"p-2 mt-2\">\n <div class=\"w-100 text-center\">\n @if (!isLoaded) {\n <p-progressSpinner> </p-progressSpinner>\n }\n </div>\n <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table #dt\n [value]=\"subscriptions\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n @if (subscriptionInsights) {\n <div class=\"row mb-4\">\n @for (temp of objectKeys(subscriptionInsights); track temp) {\n <div class=\"col-12 col-lg-3 summary\">\n <div class=\"card\">\n <div class=\"card-body\">\n @for (item of subscriptionInsights[temp]; track item) {\n @let k = item | kpiInsight;\n <div class=\"kpi\">\n <p class=\"kpi-label\">{{ k.name }}@if (item?.info) {<span [pTooltip]=\"item?.info\"><i class=\"far fa-info-circle text-muted\"></i></span>}</p>\n <div class=\"kpi-value\">{{ k.primary }}</div>\n @if (k.secondary) {<div class=\"kpi-comp\">{{ k.comp }} <b>{{ k.secondary }}</b></div>}\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n <div class=\"search-filter\">\n <div class=\"col-12 col-sm-4\">\n <p-multiSelect inputId=\"subscriptions-list-feature-keys\"\n placeholder=\"Select Feature Keys\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n [maxSelectedLabels]=\"2\"\n selectedItemsLabel=\"{0} feature keys selected\"\n [(ngModel)]=\"selectedFeatureKeys\"\n [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-12 col-sm-4\">\n <p-select\n inputId=\"subscriptions-list-status\"\n [options]=\"subscriptionStatus\"\n [placeholder]=\"'Select status'\"\n (onChange)=\"filterByStatus($event.value)\"\n [(ngModel)]=\"status\"\n appendTo=\"body\">\n </p-select>\n </div>\n <div class=\"text-end\">\n <label for=\"subscriptions-list-search\" class=\"visually-hidden\">Search Subscription</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=\"subscriptions-list-search\"\n name=\"subscriptions-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search Subscription...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"id\">\n {{ 'Admin.Subscriptions.Id' | transloco }}\n <p-sortIcon field=\"id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"organisation\">\n {{ 'Admin.Subscriptions.Organization' | transloco }}\n <p-sortIcon field=\"organisation\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"contact_name\">\n {{ 'Admin.Subscriptions.ContactName' | transloco }}\n <p-sortIcon field=\"contact_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"contact_email\">\n {{ 'Admin.Subscriptions.ContactEmail' | transloco }}\n <p-sortIcon field=\"contact_email\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.Product' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.Currency' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.PricePerMonth' | transloco }}</th>\n <th scope=\"true\"\n pSortableColumn=\"stripe_customer_id\">\n {{ 'Admin.Subscriptions.Paid' | transloco }}\n <p-sortIcon field=\"stripe_customer_id\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.Billing' | transloco }}</th>\n <th scope=\"true\"\n class=\"expires-at-width\">\n {{ 'Admin.Subscriptions.ExpiresAt' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"sessions_total\">\n {{ 'Admin.Subscriptions.SessionsTotal' | transloco }}\n <p-sortIcon field=\"sessions_total\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"sessions_last_month\">\n {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n <p-sortIcon field=\"sessions_last_month\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"deleted_at\">\n {{ 'Admin.Subscriptions.Deleted' | transloco }}\n <p-sortIcon field=\"deleted_at\"></p-sortIcon>\n </th>\n <th class=\"actions-list-two\"\n scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-item>\n <tr>\n <td data-head=\"id\">{{ item.id }}</td>\n <td data-head=\"Organization\">\n <span class=\"cursor-pointer custom-break-word\"\n [pTooltip]=\"item.organisation\"\n tooltipPosition=\"top\">{{ item.organisation | textTruncate: 20 }}</span>\n </td>\n <td data-head=\"ContactName\" class=\"custom-break-word\">\n <span [pTooltip]=\"item.contact_name\" tooltipPosition=\"top\">{{ item.contact_name | textTruncate: 20 }}</span>\n </td>\n <td data-head=\"ContactEmail\">\n <span [pTooltip]=\"item.contact_email\" tooltipPosition=\"top\">{{ item.contact_email | textTruncate: 20 }}</span>\n </td>\n <td data-head=\"Name\">\n <span class=\"cursor-pointer custom-break-word\"\n [pTooltip]=\"item.productName\"\n tooltipPosition=\"top\">{{ item.productName | textTruncate: 20 }}</span>\n </td>\n <td data-head=\"Currency\">\n <span [appDynamicBadge]=\"{ itemsArray: currency, item: item.currency }\"\n color=\"blue-grey\"\n class=\"badge\">{{ item.currency }}</span>\n </td>\n <td data-head=\"Price/M\">\n <span>{{ (item.price / 100).toFixed(2) | currency:item.currency }}\n @if (item?.discount && objectKeys(item?.discount)?.length) {\n <i\n class=\"far fa-info-circle text-muted\"\n aria-hidden=\"true\"\n [pTooltip]=\"item?.discount | json\"\n tooltipPosition=\"top\"\n ></i>\n }\n </span>\n </td>\n <td data-head=\"Paid\">\n @if (item?.unsubscribed_at) {\n <span class=\"badge bg-warning d-inline-flex align-items-center\">\n Unsub\n @if (item?.reason_to_cancel) {\n <i class=\"far fa-info-circle ms-2 text-muted\"\n [pTooltip]=\"item.reason_to_cancel\"\n tooltipPosition=\"top\"\n aria-hidden=\"true\"></i>\n }\n </span>\n }\n @if (!item?.unsubscribed_at) {\n @if ((item?.stripe_customer_id || item?.external_payment) && item?.signed_up_at) {\n <span class=\"badge bg-success\">Yes</span>\n } @else {\n <span class=\"badge bg-blue-grey\">No</span>\n }\n }\n @if (item?.pause_collection && objectKeys(item?.pause_collection)?.length) {\n <span\n class=\"ms-2\"\n [pTooltip]=\"item?.pause_collection | json\"\n tooltipPosition=\"top\">\n <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n </span>\n }\n </td>\n <td data-head=\"Billing\">\n <span class=\"badge\"\n [appDynamicBadge]=\"{\n itemsArray: billingFrequency,\n item: item?.billingFrequency\n }\"\n color=\"blue-grey\">{{ item.billingFrequency }}</span>\n </td>\n <td data-head=\"Expires\">\n <span [ngClass]=\"getExpiresAtColor(item)\">{{item?.expires_at | dateFormat}}</span>\n <span> ({{item?.created_at | sinceAgo:true}})</span>\n </td>\n <td data-head=\"S#\">{{ item?.sessions_total }}</td>\n <td data-head=\"S/m #\">\n <span [ngClass]=\"{\n 'text-danger fw-bold': item?.sessions_last_month < 3\n }\">{{ item?.sessions_last_month }}</span>\n </td>\n <td data-head=\"Deleted\">\n @if (item?.deleted_at) {\n <span\n class=\"badge bg-danger\">Yes</span>\n }\n @if (!item?.deleted_at) {\n <span\n class=\"badge bg-blue-grey\">No</span>\n }\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 [routerLink]=\"[routers.subscriptionDetails, item.id]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n @if (item.deleted) {\n <li ngbTooltip=\"Reactivate subscription\"\n class=\"me-2 me-sm-3\"\n *rbacAllow=\"'Pages.Alpha'\"\n (keydown.enter)=\"openRecoverSubscriptionModal(item)\"\n (click)=\"openRecoverSubscriptionModal(item)\">\n <i class=\"fa fa-trash delete-icon text-success\" aria-hidden=\"true\"></i>\n </li>\n } @else {\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\"\n *rbacAllow=\"'Pages.Admin.Subscription.Delete'\"\n (keydown.enter)=\"onDelete(item)\"\n (click)=\"onDelete(item)\">\n <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n }\n @if (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n</div>\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionMessage' | transloco\">\n </pw-no-data>\n}\n<pw-password-validation\n #recoverSubscriptionPasswordModal\n (successEvent)=\"onRecoverConfirmed()\">\n</pw-password-validation>\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)}.table-responsive td{padding:6px 10px!important;font-size:12px!important;line-height:1.35;vertical-align:top;word-break:break-word}.table-responsive th{font-size:12px!important;vertical-align:bottom}.table-responsive td[data-head=Organization],.table-responsive td[data-head=Name],.table-responsive td[data-head=ContactName],.table-responsive td[data-head=ContactEmail],.table-responsive td[data-head=id],.table-responsive td[data-head=\"Price/M\"],.table-responsive td[data-head=\"S#\"],.table-responsive td[data-head=\"S/m #\"]{white-space:nowrap}.table-responsive td[data-head=id]{font-variant-numeric:tabular-nums;color:#7c8696}.table-responsive td[data-head=\"Price/M\"],.table-responsive td[data-head=\"S#\"],.table-responsive td[data-head=\"S/m #\"]{font-variant-numeric:tabular-nums;text-align:right}.table-responsive th:nth-child(7),.table-responsive th:nth-child(11),.table-responsive th:nth-child(12){text-align:right}.table-responsive .badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;letter-spacing:.01em}.table-responsive .badge[class*=bg-success]{background-color:#e6f4ec!important;color:#0f6b3a!important}.table-responsive .badge[class*=bg-danger]{background-color:#fbeae8!important;color:#c0392b!important}.table-responsive .badge[class*=bg-warning]{background-color:#fbf1e3!important;color:#8a5a00!important}.table-responsive .badge.bg-blue-grey{background-color:#eef0f3!important;color:#5a6473!important}.table-responsive .badge.bg-blue-grey-1{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-2{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-3{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-4{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-5{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-6{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-7{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-8{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-9{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-10{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-11{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-12{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-13{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-14{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-15{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-16{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-17{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-18{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-19{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-20{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-21{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-22{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-23{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-24{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge[class*=bg-success]:before,.table-responsive .badge[class*=bg-danger]:before,.table-responsive .badge[class*=bg-warning]:before{content:\"\";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background-color:currentColor;vertical-align:middle}.table-responsive tbody tr:hover{background-color:#f5f7fa}.table-responsive td[data-head=Organization] span,.table-responsive td[data-head=Name] span{font-weight:600;color:#1a1d21}.table-responsive td[data-head=Expires] span~span{font-weight:600}.table-responsive .list-action .edit-icon{color:#5a6473}.table-responsive .list-action .delete-icon{color:#c0392b!important}.table-responsive .list-action .delete-icon.text-success{color:#0f6b3a!important}@media(max-width:1199.98px){.table-responsive td,.table-responsive th{white-space:nowrap;word-break:normal}}.expires-at-width{width:8%}.custom-break-word{word-break:break-word!important}.summary{display:flex}.summary .card{width:100%;margin-top:0;margin-bottom:0;padding-bottom:0!important;border:1px solid #e2e5ea;border-radius:8px;box-shadow:none!important;background-color:#fff;transition:background-color .12s ease,border-color .12s ease}.summary .card:hover{background-color:#fafbfc;border-color:#cfd4dc}.summary .card-body{display:flex;flex-direction:column;padding:2px 0}.summary .kpi{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline;padding:10px 16px}.summary .kpi+.kpi{border-top:1px solid #eef0f3}.summary .kpi-label{grid-column:1/-1;margin:0 0 4px;font-size:10px;font-weight:600;line-height:1.3;letter-spacing:.05em;text-transform:uppercase;color:#5a6473}.summary .kpi-label .fa-info-circle{margin-left:4px;font-size:15px;color:#a8afbc}.summary .kpi-value{grid-column:1;font-size:18px;font-weight:700;line-height:1.1;color:#1a1d21;font-variant-numeric:tabular-nums}.summary .kpi-comp{grid-column:2;text-align:right;font-size:12px;color:#7c8696;font-variant-numeric:tabular-nums;white-space:normal}.summary .kpi-comp:before{content:\"\\b7\";margin-right:4px;color:#a8afbc}.summary .kpi-comp b{font-weight:600;color:#5a6473}@media(min-width:320px)and (max-width:720px){.primeng-datatable-container .search-filter{display:flex;flex-direction:column;gap:.5rem;justify-content:space-between}}\n"], dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i6$1.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo", "ptTooltip", "pTooltipPT", "pTooltipUnstyled"] }, { kind: "component", type: i5.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i6$2.MultiSelect, selector: "p-multiSelect, p-multiselect, p-multi-select", inputs: ["id", "ariaLabel", "styleClass", "panelStyle", "panelStyleClass", "inputId", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "dataKey", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "chipIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "placeholder", "options", "filterValue", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus", "highlightOnSelect", "size", "variant", "fluid", "appendTo", "motionOptions"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i6.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i2$1.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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i9.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: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10$1.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage"], outputs: ["successEvent"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i10$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i10$1.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i11.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i11.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i3.JsonPipe, name: "json" }, { kind: "pipe", type: i3.CurrencyPipe, name: "currency" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.SinceAgoPipe, name: "sinceAgo" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }, { kind: "pipe", type: KpiInsightPipe, name: "kpiInsight" }] }); }
|
|
8470
8470
|
}
|
|
8471
8471
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SubscriptionsListComponent, decorators: [{
|
|
8472
8472
|
type: Component,
|
|
8473
|
-
args: [{ selector: 'pw-subscriptions-list', standalone: false, template: "<div class=\"row\">\n <div\n class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Subscriptions</h2>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n id=\"btn-create\"\n [routerLink]=\"[routers.inviteUsers]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Invite a User to a Trial\n </a>\n </div>\n</div>\n<div class=\"p-2 mt-2\">\n <div class=\"w-100 text-center\">\n @if (!isLoaded) {\n <p-progressSpinner> </p-progressSpinner>\n }\n </div>\n <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table #dt\n [value]=\"subscriptions\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n @if (subscriptionInsights) {\n <div class=\"row mb-4\">\n @for (temp of objectKeys(subscriptionInsights); track temp) {\n <div class=\"col-12 col-lg-3 summary\">\n <div class=\"card\">\n <div class=\"card-body\">\n @for (item of subscriptionInsights[temp]; track item) {\n @let k = item | kpiInsight;\n <div class=\"kpi\">\n <p class=\"kpi-label\">{{ k.name }}@if (item?.info) {<span [pTooltip]=\"item?.info\"><i class=\"far fa-info-circle text-muted\"></i></span>}</p>\n <div class=\"kpi-value\">{{ k.primary }}</div>\n @if (k.secondary) {<div class=\"kpi-comp\">{{ k.comp }} <b>{{ k.secondary }}</b></div>}\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n <div class=\"search-filter\">\n <div class=\"col-12 col-sm-4\">\n <p-multiSelect inputId=\"subscriptions-list-feature-keys\"\n placeholder=\"Select Feature Keys\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n [maxSelectedLabels]=\"2\"\n selectedItemsLabel=\"{0} feature keys selected\"\n [(ngModel)]=\"selectedFeatureKeys\"\n [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-12 col-sm-4\">\n <p-select\n inputId=\"subscriptions-list-status\"\n [options]=\"subscriptionStatus\"\n [placeholder]=\"'Select status'\"\n (onChange)=\"filterByStatus($event.value)\"\n [(ngModel)]=\"status\"\n appendTo=\"body\">\n </p-select>\n </div>\n <div class=\"text-end\">\n <label for=\"subscriptions-list-search\" class=\"visually-hidden\">Search Subscription</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=\"subscriptions-list-search\"\n name=\"subscriptions-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search Subscription...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"id\">\n {{ 'Admin.Subscriptions.Id' | transloco }}\n <p-sortIcon field=\"id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"organisation\">\n {{ 'Admin.Subscriptions.Organization' | transloco }}\n <p-sortIcon field=\"organisation\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"contact_name\">\n {{ 'Admin.Subscriptions.ContactName' | transloco }}\n <p-sortIcon field=\"contact_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"contact_email\">\n {{ 'Admin.Subscriptions.ContactEmail' | transloco }}\n <p-sortIcon field=\"contact_email\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.Product' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.Currency' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.PricePerMonth' | transloco }}</th>\n <th scope=\"true\"\n pSortableColumn=\"stripe_customer_id\">\n {{ 'Admin.Subscriptions.Paid' | transloco }}\n <p-sortIcon field=\"stripe_customer_id\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.Billing' | transloco }}</th>\n <th scope=\"true\"\n class=\"expires-at-width\">\n {{ 'Admin.Subscriptions.ExpiresAt' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"sessions_total\">\n {{ 'Admin.Subscriptions.SessionsTotal' | transloco }}\n <p-sortIcon field=\"sessions_total\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"sessions_last_month\">\n {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n <p-sortIcon field=\"sessions_last_month\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"deleted_at\">\n {{ 'Admin.Subscriptions.Deleted' | transloco }}\n <p-sortIcon field=\"deleted_at\"></p-sortIcon>\n </th>\n <th class=\"actions-list-two\"\n scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-item>\n <tr>\n <td data-head=\"id\">{{ item.id }}</td>\n <td data-head=\"Organization\">\n <span class=\"cursor-pointer custom-break-word\"\n [pTooltip]=\"item.organisation\"\n tooltipPosition=\"top\">{{ item.organisation | textTruncate: 20 }}</span>\n </td>\n <td data-head=\"ContactName\" class=\"custom-break-word\">\n <span [pTooltip]=\"item.contact_name\" tooltipPosition=\"top\">{{ item.contact_name | textTruncate: 20 }}</span>\n </td>\n <td data-head=\"ContactEmail\">\n <span [pTooltip]=\"item.contact_email\" tooltipPosition=\"top\">{{ item.contact_email | textTruncate: 20 }}</span>\n </td>\n <td data-head=\"Name\">\n <span class=\"cursor-pointer custom-break-word\"\n [pTooltip]=\"item.productName\"\n tooltipPosition=\"top\">{{ item.productName | textTruncate: 20 }}</span>\n </td>\n <td data-head=\"Currency\">\n <span [appDynamicBadge]=\"{ itemsArray: currency, item: item.currency }\"\n color=\"blue-grey\"\n class=\"badge\">{{ item.currency }}</span>\n </td>\n <td data-head=\"Price/M\">\n <span>{{ (item.price / 100).toFixed(2) | currency:item.currency }}\n @if (item?.discount && objectKeys(item?.discount)?.length) {\n <i\n class=\"far fa-info-circle text-muted\"\n aria-hidden=\"true\"\n [pTooltip]=\"item?.discount | json\"\n tooltipPosition=\"top\"\n ></i>\n }\n </span>\n </td>\n <td data-head=\"Paid\">\n @if (item?.unsubscribed_at) {\n <span class=\"badge bg-warning d-inline-flex align-items-center\">\n Unsub\n @if (item?.reason_to_cancel) {\n <i class=\"far fa-info-circle ms-2 text-muted\"\n [pTooltip]=\"item.reason_to_cancel\"\n tooltipPosition=\"top\"\n aria-hidden=\"true\"></i>\n }\n </span>\n }\n @if (!item?.unsubscribed_at) {\n @if ((item?.stripe_customer_id || item?.external_payment) && item?.signed_up_at) {\n <span class=\"badge bg-success\">Yes</span>\n } @else {\n <span class=\"badge bg-blue-grey\">No</span>\n }\n }\n @if (item?.pause_collection && objectKeys(item?.pause_collection)?.length) {\n <span\n class=\"ms-2\"\n [pTooltip]=\"item?.pause_collection | json\"\n tooltipPosition=\"top\">\n <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n </span>\n }\n </td>\n <td data-head=\"Billing\">\n <span class=\"badge\"\n [appDynamicBadge]=\"{\n itemsArray: billingFrequency,\n item: item?.billingFrequency\n }\"\n color=\"blue-grey\">{{ item.billingFrequency }}</span>\n </td>\n <td data-head=\"Expires\">\n <span [ngClass]=\"getExpiresAtColor(item)\">{{item?.expires_at | dateFormat}}</span>\n <span> ({{item?.created_at | sinceAgo:true}})</span>\n </td>\n <td data-head=\"S#\">{{ item?.sessions_total }}</td>\n <td data-head=\"S/m #\">\n <span [ngClass]=\"{\n 'text-danger fw-bold': item?.sessions_last_month < 3\n }\">{{ item?.sessions_last_month }}</span>\n </td>\n <td data-head=\"Deleted\">\n @if (item?.deleted_at) {\n <span\n class=\"badge bg-danger\">Yes</span>\n }\n @if (!item?.deleted_at) {\n <span\n class=\"badge bg-blue-grey\">No</span>\n }\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 [routerLink]=\"[routers.subscriptionDetails, item.id]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n @if (item.deleted) {\n <li ngbTooltip=\"Reactivate subscription\"\n class=\"me-2 me-sm-3\"\n *rbacAllow=\"'Pages.Alpha'\"\n (keydown.enter)=\"openRecoverSubscriptionModal(item)\"\n (click)=\"openRecoverSubscriptionModal(item)\">\n <i class=\"fa fa-trash delete-icon text-success\" aria-hidden=\"true\"></i>\n </li>\n } @else {\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\"\n *rbacAllow=\"'Pages.Admin.Subscription.Delete'\"\n (keydown.enter)=\"onDelete(item)\"\n (click)=\"onDelete(item)\">\n <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n }\n @if (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n</div>\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionMessage' | transloco\">\n </pw-no-data>\n}\n<pw-password-validation\n #recoverSubscriptionPasswordModal\n (successEvent)=\"onRecoverConfirmed()\">\n</pw-password-validation>\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)}.table-responsive td{padding:6px 10px!important;font-size:12px!important;line-height:1.35;vertical-align:top;word-break:break-word}.table-responsive th{font-size:12px!important;vertical-align:bottom}.table-responsive td[data-head=Organization],.table-responsive td[data-head=Name],.table-responsive td[data-head=ContactName],.table-responsive td[data-head=ContactEmail],.table-responsive td[data-head=id],.table-responsive td[data-head=\"Price/M\"],.table-responsive td[data-head=\"S#\"],.table-responsive td[data-head=\"S/m #\"]{white-space:nowrap}@media(max-width:1199.98px){.table-responsive td,.table-responsive th{white-space:nowrap;word-break:normal}}.expires-at-width{width:8%}.custom-break-word{word-break:break-word!important}.table-responsive td[data-head=id]{font-variant-numeric:tabular-nums;color:#7c8696}.table-responsive td[data-head=\"Price/M\"],.table-responsive td[data-head=\"S#\"],.table-responsive td[data-head=\"S/m #\"]{font-variant-numeric:tabular-nums;text-align:right}.table-responsive th:nth-child(7),.table-responsive th:nth-child(11),.table-responsive th:nth-child(12){text-align:right}.table-responsive .badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;letter-spacing:.01em}.table-responsive .badge[class*=bg-success]{background-color:#e6f4ec!important;color:#0f6b3a!important}.table-responsive .badge[class*=bg-danger]{background-color:#fbeae8!important;color:#c0392b!important}.table-responsive .badge[class*=bg-warning]{background-color:#fbf1e3!important;color:#8a5a00!important}.table-responsive .badge.bg-blue-grey{background-color:#eef0f3!important;color:#5a6473!important}.table-responsive .badge.bg-blue-grey-1{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-2{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-3{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-4{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-5{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-6{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-7{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-8{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-9{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-10{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-11{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-12{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-13{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-14{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-15{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-16{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-17{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-18{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-19{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-20{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-21{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-22{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-23{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-24{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge[class*=bg-success]:before,.table-responsive .badge[class*=bg-danger]:before,.table-responsive .badge[class*=bg-warning]:before{content:\"\";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background-color:currentColor;vertical-align:middle}.table-responsive tbody tr:hover{background-color:#f5f7fa}.table-responsive td[data-head=Organization] span,.table-responsive td[data-head=Name] span{font-weight:600;color:#1a1d21}.table-responsive td[data-head=Expires] span~span{font-weight:600}.table-responsive .list-action .edit-icon{color:#5a6473}.table-responsive .list-action .delete-icon{color:#c0392b!important}.table-responsive .list-action .delete-icon.text-success{color:#0f6b3a!important}.summary{display:flex}.summary .card{width:100%;margin-top:0;margin-bottom:0;padding-bottom:0!important;border:1px solid #e2e5ea;border-radius:8px;box-shadow:none!important;background-color:#fff;transition:background-color .12s ease,border-color .12s ease}.summary .card:hover{background-color:#fafbfc;border-color:#cfd4dc}.summary .card-body{display:flex;flex-direction:column;padding:2px 0}.summary .kpi{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline;padding:10px 16px}.summary .kpi+.kpi{border-top:1px solid #eef0f3}.summary .kpi-label{grid-column:1/-1;margin:0 0 4px;font-size:10px;font-weight:600;line-height:1.3;letter-spacing:.05em;text-transform:uppercase;color:#5a6473}.summary .kpi-label .fa-info-circle{margin-left:4px;font-size:15px;color:#a8afbc}.summary .kpi-value{grid-column:1;font-size:18px;font-weight:700;line-height:1.1;color:#1a1d21;font-variant-numeric:tabular-nums}.summary .kpi-comp{grid-column:2;text-align:right;font-size:12px;color:#7c8696;font-variant-numeric:tabular-nums;white-space:normal}.summary .kpi-comp:before{content:\"\\b7\";margin-right:4px;color:#a8afbc}.summary .kpi-comp b{font-weight:600;color:#5a6473}@media(min-width:320px)and (max-width:720px){.primeng-datatable-container .search-filter{display:flex;flex-direction:column;gap:.5rem;justify-content:space-between}}\n"] }]
|
|
8473
|
+
args: [{ selector: 'pw-subscriptions-list', standalone: false, template: "<div class=\"row\">\n <div\n class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Subscriptions</h2>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n id=\"btn-create\"\n [routerLink]=\"[routers.inviteUsers]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Invite a User to a Trial\n </a>\n </div>\n</div>\n<div class=\"p-2 mt-2\">\n <div class=\"w-100 text-center\">\n @if (!isLoaded) {\n <p-progressSpinner> </p-progressSpinner>\n }\n </div>\n <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table #dt\n [value]=\"subscriptions\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n @if (subscriptionInsights) {\n <div class=\"row mb-4\">\n @for (temp of objectKeys(subscriptionInsights); track temp) {\n <div class=\"col-12 col-lg-3 summary\">\n <div class=\"card\">\n <div class=\"card-body\">\n @for (item of subscriptionInsights[temp]; track item) {\n @let k = item | kpiInsight;\n <div class=\"kpi\">\n <p class=\"kpi-label\">{{ k.name }}@if (item?.info) {<span [pTooltip]=\"item?.info\"><i class=\"far fa-info-circle text-muted\"></i></span>}</p>\n <div class=\"kpi-value\">{{ k.primary }}</div>\n @if (k.secondary) {<div class=\"kpi-comp\">{{ k.comp }} <b>{{ k.secondary }}</b></div>}\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n <div class=\"search-filter\">\n <div class=\"col-12 col-sm-4\">\n <p-multiSelect inputId=\"subscriptions-list-feature-keys\"\n placeholder=\"Select Feature Keys\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n [maxSelectedLabels]=\"2\"\n selectedItemsLabel=\"{0} feature keys selected\"\n [(ngModel)]=\"selectedFeatureKeys\"\n [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-12 col-sm-4\">\n <p-select\n inputId=\"subscriptions-list-status\"\n [options]=\"subscriptionStatus\"\n [placeholder]=\"'Select status'\"\n (onChange)=\"filterByStatus($event.value)\"\n [(ngModel)]=\"status\"\n appendTo=\"body\">\n </p-select>\n </div>\n <div class=\"text-end\">\n <label for=\"subscriptions-list-search\" class=\"visually-hidden\">Search Subscription</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=\"subscriptions-list-search\"\n name=\"subscriptions-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search Subscription...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"id\">\n {{ 'Admin.Subscriptions.Id' | transloco }}\n <p-sortIcon field=\"id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"organisation\">\n {{ 'Admin.Subscriptions.Organization' | transloco }}\n <p-sortIcon field=\"organisation\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"contact_name\">\n {{ 'Admin.Subscriptions.ContactName' | transloco }}\n <p-sortIcon field=\"contact_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"contact_email\">\n {{ 'Admin.Subscriptions.ContactEmail' | transloco }}\n <p-sortIcon field=\"contact_email\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.Product' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.Currency' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.PricePerMonth' | transloco }}</th>\n <th scope=\"true\"\n pSortableColumn=\"stripe_customer_id\">\n {{ 'Admin.Subscriptions.Paid' | transloco }}\n <p-sortIcon field=\"stripe_customer_id\"></p-sortIcon>\n </th>\n <th scope=\"true\">{{ 'Admin.Subscriptions.Billing' | transloco }}</th>\n <th scope=\"true\"\n class=\"expires-at-width\">\n {{ 'Admin.Subscriptions.ExpiresAt' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"sessions_total\">\n {{ 'Admin.Subscriptions.SessionsTotal' | transloco }}\n <p-sortIcon field=\"sessions_total\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"sessions_last_month\">\n {{ 'Admin.Subscriptions.SessionsTotalLastMonth' | transloco }}\n <p-sortIcon field=\"sessions_last_month\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"deleted_at\">\n {{ 'Admin.Subscriptions.Deleted' | transloco }}\n <p-sortIcon field=\"deleted_at\"></p-sortIcon>\n </th>\n <th class=\"actions-list-two\"\n scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-item>\n <tr>\n <td data-head=\"id\">{{ item.id }}</td>\n <td data-head=\"Organization\">\n <span class=\"cursor-pointer custom-break-word\"\n [pTooltip]=\"item.organisation\"\n tooltipPosition=\"top\">{{ item.organisation | textTruncate: 20 }}</span>\n </td>\n <td data-head=\"ContactName\" class=\"custom-break-word\">\n <span [pTooltip]=\"item.contact_name\" tooltipPosition=\"top\">{{ item.contact_name | textTruncate: 20 }}</span>\n </td>\n <td data-head=\"ContactEmail\">\n <span [pTooltip]=\"item.contact_email\" tooltipPosition=\"top\">{{ item.contact_email | textTruncate: 20 }}</span>\n </td>\n <td data-head=\"Name\">\n <span class=\"cursor-pointer custom-break-word\"\n [pTooltip]=\"item.productName\"\n tooltipPosition=\"top\">{{ item.productName | textTruncate: 20 }}</span>\n </td>\n <td data-head=\"Currency\">\n <span [appDynamicBadge]=\"{ itemsArray: currency, item: item.currency }\"\n color=\"blue-grey\"\n class=\"badge\">{{ item.currency }}</span>\n </td>\n <td data-head=\"Price/M\">\n <span>{{ (item.price / 100).toFixed(2) | currency:item.currency }}\n @if (item?.discount && objectKeys(item?.discount)?.length) {\n <i\n class=\"far fa-info-circle text-muted\"\n aria-hidden=\"true\"\n [pTooltip]=\"item?.discount | json\"\n tooltipPosition=\"top\"\n ></i>\n }\n </span>\n </td>\n <td data-head=\"Paid\">\n @if (item?.unsubscribed_at) {\n <span class=\"badge bg-warning d-inline-flex align-items-center\">\n Unsub\n @if (item?.reason_to_cancel) {\n <i class=\"far fa-info-circle ms-2 text-muted\"\n [pTooltip]=\"item.reason_to_cancel\"\n tooltipPosition=\"top\"\n aria-hidden=\"true\"></i>\n }\n </span>\n }\n @if (!item?.unsubscribed_at) {\n @if ((item?.stripe_customer_id || item?.external_payment) && item?.signed_up_at) {\n <span class=\"badge bg-success\">Yes</span>\n } @else {\n <span class=\"badge bg-blue-grey\">No</span>\n }\n }\n @if (item?.pause_collection && objectKeys(item?.pause_collection)?.length) {\n <span\n class=\"ms-2\"\n [pTooltip]=\"item?.pause_collection | json\"\n tooltipPosition=\"top\">\n <i class=\"fas fa-exclamation-triangle text-warning\"></i>\n </span>\n }\n </td>\n <td data-head=\"Billing\">\n <span class=\"badge\"\n [appDynamicBadge]=\"{\n itemsArray: billingFrequency,\n item: item?.billingFrequency\n }\"\n color=\"blue-grey\">{{ item.billingFrequency }}</span>\n </td>\n <td data-head=\"Expires\">\n <span [ngClass]=\"getExpiresAtColor(item)\">{{item?.expires_at | dateFormat}}</span>\n <span> ({{item?.created_at | sinceAgo:true}})</span>\n </td>\n <td data-head=\"S#\">{{ item?.sessions_total }}</td>\n <td data-head=\"S/m #\">\n <span [ngClass]=\"{\n 'text-danger fw-bold': item?.sessions_last_month < 3\n }\">{{ item?.sessions_last_month }}</span>\n </td>\n <td data-head=\"Deleted\">\n @if (item?.deleted_at) {\n <span\n class=\"badge bg-danger\">Yes</span>\n }\n @if (!item?.deleted_at) {\n <span\n class=\"badge bg-blue-grey\">No</span>\n }\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 [routerLink]=\"[routers.subscriptionDetails, item.id]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n @if (item.deleted) {\n <li ngbTooltip=\"Reactivate subscription\"\n class=\"me-2 me-sm-3\"\n *rbacAllow=\"'Pages.Alpha'\"\n (keydown.enter)=\"openRecoverSubscriptionModal(item)\"\n (click)=\"openRecoverSubscriptionModal(item)\">\n <i class=\"fa fa-trash delete-icon text-success\" aria-hidden=\"true\"></i>\n </li>\n } @else {\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-3\"\n *rbacAllow=\"'Pages.Admin.Subscription.Delete'\"\n (keydown.enter)=\"onDelete(item)\"\n (click)=\"onDelete(item)\">\n <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords === 0 && totalRecordsUnFiltered !== 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n }\n @if (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n</div>\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionMessage' | transloco\">\n </pw-no-data>\n}\n<pw-password-validation\n #recoverSubscriptionPasswordModal\n (successEvent)=\"onRecoverConfirmed()\">\n</pw-password-validation>\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)}.table-responsive td{padding:6px 10px!important;font-size:12px!important;line-height:1.35;vertical-align:top;word-break:break-word}.table-responsive th{font-size:12px!important;vertical-align:bottom}.table-responsive td[data-head=Organization],.table-responsive td[data-head=Name],.table-responsive td[data-head=ContactName],.table-responsive td[data-head=ContactEmail],.table-responsive td[data-head=id],.table-responsive td[data-head=\"Price/M\"],.table-responsive td[data-head=\"S#\"],.table-responsive td[data-head=\"S/m #\"]{white-space:nowrap}.table-responsive td[data-head=id]{font-variant-numeric:tabular-nums;color:#7c8696}.table-responsive td[data-head=\"Price/M\"],.table-responsive td[data-head=\"S#\"],.table-responsive td[data-head=\"S/m #\"]{font-variant-numeric:tabular-nums;text-align:right}.table-responsive th:nth-child(7),.table-responsive th:nth-child(11),.table-responsive th:nth-child(12){text-align:right}.table-responsive .badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;letter-spacing:.01em}.table-responsive .badge[class*=bg-success]{background-color:#e6f4ec!important;color:#0f6b3a!important}.table-responsive .badge[class*=bg-danger]{background-color:#fbeae8!important;color:#c0392b!important}.table-responsive .badge[class*=bg-warning]{background-color:#fbf1e3!important;color:#8a5a00!important}.table-responsive .badge.bg-blue-grey{background-color:#eef0f3!important;color:#5a6473!important}.table-responsive .badge.bg-blue-grey-1{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-2{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-3{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-4{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-5{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-6{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-7{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-8{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-9{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-10{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-11{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-12{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-13{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-14{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-15{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge.bg-blue-grey-16{background-color:#e6efe9!important;color:#317247!important}.table-responsive .badge.bg-blue-grey-17{background-color:#e6efef!important;color:#317272!important}.table-responsive .badge.bg-blue-grey-18{background-color:#e6e9ef!important;color:#314772!important}.table-responsive .badge.bg-blue-grey-19{background-color:#e9e6ef!important;color:#473172!important}.table-responsive .badge.bg-blue-grey-20{background-color:#efe6ef!important;color:#723172!important}.table-responsive .badge.bg-blue-grey-21{background-color:#efe6e9!important;color:#723147!important}.table-responsive .badge.bg-blue-grey-22{background-color:#efe9e6!important;color:#724731!important}.table-responsive .badge.bg-blue-grey-23{background-color:#efefe6!important;color:#727231!important}.table-responsive .badge.bg-blue-grey-24{background-color:#e9efe6!important;color:#477231!important}.table-responsive .badge[class*=bg-success]:before,.table-responsive .badge[class*=bg-danger]:before,.table-responsive .badge[class*=bg-warning]:before{content:\"\";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;background-color:currentColor;vertical-align:middle}.table-responsive tbody tr:hover{background-color:#f5f7fa}.table-responsive td[data-head=Organization] span,.table-responsive td[data-head=Name] span{font-weight:600;color:#1a1d21}.table-responsive td[data-head=Expires] span~span{font-weight:600}.table-responsive .list-action .edit-icon{color:#5a6473}.table-responsive .list-action .delete-icon{color:#c0392b!important}.table-responsive .list-action .delete-icon.text-success{color:#0f6b3a!important}@media(max-width:1199.98px){.table-responsive td,.table-responsive th{white-space:nowrap;word-break:normal}}.expires-at-width{width:8%}.custom-break-word{word-break:break-word!important}.summary{display:flex}.summary .card{width:100%;margin-top:0;margin-bottom:0;padding-bottom:0!important;border:1px solid #e2e5ea;border-radius:8px;box-shadow:none!important;background-color:#fff;transition:background-color .12s ease,border-color .12s ease}.summary .card:hover{background-color:#fafbfc;border-color:#cfd4dc}.summary .card-body{display:flex;flex-direction:column;padding:2px 0}.summary .kpi{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline;padding:10px 16px}.summary .kpi+.kpi{border-top:1px solid #eef0f3}.summary .kpi-label{grid-column:1/-1;margin:0 0 4px;font-size:10px;font-weight:600;line-height:1.3;letter-spacing:.05em;text-transform:uppercase;color:#5a6473}.summary .kpi-label .fa-info-circle{margin-left:4px;font-size:15px;color:#a8afbc}.summary .kpi-value{grid-column:1;font-size:18px;font-weight:700;line-height:1.1;color:#1a1d21;font-variant-numeric:tabular-nums}.summary .kpi-comp{grid-column:2;text-align:right;font-size:12px;color:#7c8696;font-variant-numeric:tabular-nums;white-space:normal}.summary .kpi-comp:before{content:\"\\b7\";margin-right:4px;color:#a8afbc}.summary .kpi-comp b{font-weight:600;color:#5a6473}@media(min-width:320px)and (max-width:720px){.primeng-datatable-container .search-filter{display:flex;flex-direction:column;gap:.5rem;justify-content:space-between}}\n"] }]
|
|
8474
8474
|
}], ctorParameters: () => [{ type: i1$1.ProductService }, { type: i1.AdminService }, { type: i9.UntypedFormBuilder }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$1.CommonService }], propDecorators: { refProduct: [{
|
|
8475
8475
|
type: ViewChild,
|
|
8476
8476
|
args: ['refProduct']
|