@posiwise/admin-module 0.0.227 → 0.0.229
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.
|
@@ -9,6 +9,8 @@ import { NgxGpAutocompleteModule } from '@angular-magic/ngx-gp-autocomplete';
|
|
|
9
9
|
import * as i1 from '@posiwise/admin-module-utils';
|
|
10
10
|
import { AppAdmin, AdminService, AdminDataService } from '@posiwise/admin-module-utils';
|
|
11
11
|
import { AppConfigService } from '@posiwise/app-config-service';
|
|
12
|
+
import * as i5$2 from '@posiwise/app-loader';
|
|
13
|
+
import { AppLoaderModule } from '@posiwise/app-loader';
|
|
12
14
|
import * as i1$1 from '@posiwise/common-services';
|
|
13
15
|
import { PermissionService, ValidationService, FormHelperService, PrimeNgHelper, SubscriptionService } from '@posiwise/common-services';
|
|
14
16
|
import { CoreTranslocoModule } from '@posiwise/core-transloco';
|
|
@@ -147,6 +149,8 @@ const baseUrl = '/admin';
|
|
|
147
149
|
const ROUTERS = {
|
|
148
150
|
globalConfigDetails: `${baseUrl}/global-config/`,
|
|
149
151
|
adminCredentialsDetails: `${baseUrl}/credentials/`,
|
|
152
|
+
adminOauthClients: `${baseUrl}/oauth-clients/list`,
|
|
153
|
+
adminOauthClientsDetails: `${baseUrl}/oauth-clients/`,
|
|
150
154
|
subscriptionCredentialDetails: `${baseUrl}/credentials/subscription/`,
|
|
151
155
|
newsletter: `${baseUrl}/newsletter`,
|
|
152
156
|
mailerDetails: `${baseUrl}/mailers/`,
|
|
@@ -364,11 +368,11 @@ class ContactUsListComponent extends AppBaseComponent {
|
|
|
364
368
|
super.ngOnDestroy();
|
|
365
369
|
}
|
|
366
370
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ContactUsListComponent, deps: [{ token: i0.Injector }, { token: i1.AdminService }, { token: i0.ChangeDetectorRef }, { token: i3$1.ConfirmDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
367
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: ContactUsListComponent, isStandalone: false, selector: "pw-contact-us-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center text-end\">\n <h2 class=\"card-title p-0 float-start\">Contact Us</h2>\n </div>\n <div class=\"col-12 mb-3\">\n <p>The <strong>Contact US</strong> module shows all submissions from the contact forms embedded on select landing pages.<br/>\n It\u2019s your central hub to track and follow up with interested users or potential leads.</p>\n</div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #tt\n [value]=\"data.contact_request\"\n [paginator]=\"data.object_count !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [lazy]=\"true\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <!--sort order should be default empty when page load-->\n\n <!-- Caption Header, Search Bar -->\n <ng-template pTemplate=\"caption\">\n <div class=\"search-contact\">\n <div class=\"col-12 col-sm-3\">\n <p-select\n [options]=\"[\n { label: 'Filter by status', value: null },\n { label: 'Open', value: false },\n { label: 'Closed', value: true }\n ]\"\n placeholder=\"Filter by status\"\n (onChange)=\"filterClosed($event.value)\"\n appendTo=\"body\">\n </p-select>\n </div>\n <div class=\"text-end ms-auto\">\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=\"contact-us-list-search\"\n name=\"contact-us-list-search\"\n pInputText\n placeholder=\"Search messages...\"\n [(ngModel)]=\"searchText\"\n (input)=\"tt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n\n <!-- Column Header -->\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"created_at\">\n {{ 'Admin.ContactUs.CreatedAt' | transloco }}\n <p-sortIcon field=\"created_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"name\">\n {{ 'Label.Name' | transloco }}\n <p-sortIcon field=\"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=\"subject\">\n {{ 'Admin.ContactUs.Subject' | transloco }}\n <p-sortIcon field=\"subject\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"message\">\n {{ 'Admin.ContactUs.Message' | transloco }}\n <p-sortIcon field=\"message\"></p-sortIcon>\n </th>\n <th class=\"actions-list-two\"\n scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n\n <!-- Table Body -->\n <ng-template pTemplate=\"body\"\n let-item>\n <tr>\n <td data-head=\"created_at\">{{ item?.created_at | dateFormat }}</td>\n <td data-head=\"name\">{{ item?.name }}</td>\n <td data-head=\"email\">\n <a href=\"mailto:{{ item?.email }}\">{{ item?.email }}</a>\n </td>\n <td data-head=\"subject\">{{ item?.subject }}</td>\n <td data-head=\"message\">\n <span\n [ngbTooltip]=\"item?.message\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n {{ item?.message | textTruncate: 200 }}\n </span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n @if (!item.closed) {\n <li\n ngbTooltip=\"Close\"\n class=\"me-2 me-sm-3\"\n (keydown.enter)=\"toggleRecord(item.id, true)\"\n (click)=\"toggleRecord(item.id, true)\">\n <i class=\"fa fa-times delete-icon\" aria-hidden=\"true\"></i>\n </li>\n }\n @if (item.closed) {\n <li\n ngbTooltip=\"Re Open\"\n class=\"me-2 me-sm-3\"\n (keydown.enter)=\"onKeyDown($event, item.id)\"\n (click)=\"toggleRecord(item.id, false)\">\n <i class=\"fa fa-retweet edit-icon\" aria-hidden=\"true\"></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"tt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" message=\"No Contact Requests\"> </pw-no-data>\n </div>\n}\n", styles: [".search-contact{display:flex;justify-content:space-between}@media(min-width:320px)and (max-width:720px){.search-contact{display:block}}\n"], dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: "directive", type: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i2.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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$1.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }] }); }
|
|
371
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: ContactUsListComponent, isStandalone: false, selector: "pw-contact-us-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center text-end\">\n <h2 class=\"card-title p-0 float-start\">Contact Us</h2>\n </div>\n <div class=\"col-12 mb-3\">\n <p>The <strong>Contact US</strong> module shows all submissions from the contact forms embedded on select landing pages.<br/>\n It\u2019s your central hub to track and follow up with interested users or potential leads.</p>\n</div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #tt\n [value]=\"data.contact_request\"\n [paginator]=\"data.object_count !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [lazy]=\"true\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <!--sort order should be default empty when page load-->\n\n <!-- Caption Header, Search Bar -->\n <ng-template pTemplate=\"caption\">\n <div class=\"search-contact\">\n <div class=\"col-12 col-sm-3\">\n <p-select styleClass=\"pw-filter-select\"\n [options]=\"[\n { label: 'Filter by status', value: null },\n { label: 'Open', value: false },\n { label: 'Closed', value: true }\n ]\"\n placeholder=\"Filter by status\"\n (onChange)=\"filterClosed($event.value)\"\n appendTo=\"body\">\n </p-select>\n </div>\n <div class=\"text-end ms-auto\">\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=\"contact-us-list-search\"\n name=\"contact-us-list-search\"\n pInputText\n placeholder=\"Search messages...\"\n [(ngModel)]=\"searchText\"\n (input)=\"tt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n\n <!-- Column Header -->\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"created_at\">\n {{ 'Admin.ContactUs.CreatedAt' | transloco }}\n <p-sortIcon field=\"created_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"name\">\n {{ 'Label.Name' | transloco }}\n <p-sortIcon field=\"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=\"subject\">\n {{ 'Admin.ContactUs.Subject' | transloco }}\n <p-sortIcon field=\"subject\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"message\">\n {{ 'Admin.ContactUs.Message' | transloco }}\n <p-sortIcon field=\"message\"></p-sortIcon>\n </th>\n <th class=\"actions-list-two\"\n scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n\n <!-- Table Body -->\n <ng-template pTemplate=\"body\"\n let-item>\n <tr>\n <td data-head=\"created_at\">{{ item?.created_at | dateFormat }}</td>\n <td data-head=\"name\">{{ item?.name }}</td>\n <td data-head=\"email\">\n <a href=\"mailto:{{ item?.email }}\">{{ item?.email }}</a>\n </td>\n <td data-head=\"subject\">{{ item?.subject }}</td>\n <td data-head=\"message\">\n <span\n [ngbTooltip]=\"item?.message\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n {{ item?.message | textTruncate: 200 }}\n </span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n @if (!item.closed) {\n <li\n ngbTooltip=\"Close\"\n class=\"me-2 me-sm-3\"\n (keydown.enter)=\"toggleRecord(item.id, true)\"\n (click)=\"toggleRecord(item.id, true)\">\n <i class=\"fa fa-times delete-icon\" aria-hidden=\"true\"></i>\n </li>\n }\n @if (item.closed) {\n <li\n ngbTooltip=\"Re Open\"\n class=\"me-2 me-sm-3\"\n (keydown.enter)=\"onKeyDown($event, item.id)\"\n (click)=\"toggleRecord(item.id, false)\">\n <i class=\"fa fa-retweet edit-icon\" aria-hidden=\"true\"></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"tt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" message=\"No Contact Requests\"> </pw-no-data>\n </div>\n}\n", styles: [".search-contact{display:flex;justify-content:space-between}@media(min-width:320px)and (max-width:720px){.search-contact{display:block}}\n"], dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: "directive", type: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i2.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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$1.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }] }); }
|
|
368
372
|
}
|
|
369
373
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ContactUsListComponent, decorators: [{
|
|
370
374
|
type: Component,
|
|
371
|
-
args: [{ selector: 'pw-contact-us-list', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center text-end\">\n <h2 class=\"card-title p-0 float-start\">Contact Us</h2>\n </div>\n <div class=\"col-12 mb-3\">\n <p>The <strong>Contact US</strong> module shows all submissions from the contact forms embedded on select landing pages.<br/>\n It\u2019s your central hub to track and follow up with interested users or potential leads.</p>\n</div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #tt\n [value]=\"data.contact_request\"\n [paginator]=\"data.object_count !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [lazy]=\"true\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <!--sort order should be default empty when page load-->\n\n <!-- Caption Header, Search Bar -->\n <ng-template pTemplate=\"caption\">\n <div class=\"search-contact\">\n <div class=\"col-12 col-sm-3\">\n <p-select\n [options]=\"[\n { label: 'Filter by status', value: null },\n { label: 'Open', value: false },\n { label: 'Closed', value: true }\n ]\"\n placeholder=\"Filter by status\"\n (onChange)=\"filterClosed($event.value)\"\n appendTo=\"body\">\n </p-select>\n </div>\n <div class=\"text-end ms-auto\">\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=\"contact-us-list-search\"\n name=\"contact-us-list-search\"\n pInputText\n placeholder=\"Search messages...\"\n [(ngModel)]=\"searchText\"\n (input)=\"tt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n\n <!-- Column Header -->\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"created_at\">\n {{ 'Admin.ContactUs.CreatedAt' | transloco }}\n <p-sortIcon field=\"created_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"name\">\n {{ 'Label.Name' | transloco }}\n <p-sortIcon field=\"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=\"subject\">\n {{ 'Admin.ContactUs.Subject' | transloco }}\n <p-sortIcon field=\"subject\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"message\">\n {{ 'Admin.ContactUs.Message' | transloco }}\n <p-sortIcon field=\"message\"></p-sortIcon>\n </th>\n <th class=\"actions-list-two\"\n scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n\n <!-- Table Body -->\n <ng-template pTemplate=\"body\"\n let-item>\n <tr>\n <td data-head=\"created_at\">{{ item?.created_at | dateFormat }}</td>\n <td data-head=\"name\">{{ item?.name }}</td>\n <td data-head=\"email\">\n <a href=\"mailto:{{ item?.email }}\">{{ item?.email }}</a>\n </td>\n <td data-head=\"subject\">{{ item?.subject }}</td>\n <td data-head=\"message\">\n <span\n [ngbTooltip]=\"item?.message\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n {{ item?.message | textTruncate: 200 }}\n </span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n @if (!item.closed) {\n <li\n ngbTooltip=\"Close\"\n class=\"me-2 me-sm-3\"\n (keydown.enter)=\"toggleRecord(item.id, true)\"\n (click)=\"toggleRecord(item.id, true)\">\n <i class=\"fa fa-times delete-icon\" aria-hidden=\"true\"></i>\n </li>\n }\n @if (item.closed) {\n <li\n ngbTooltip=\"Re Open\"\n class=\"me-2 me-sm-3\"\n (keydown.enter)=\"onKeyDown($event, item.id)\"\n (click)=\"toggleRecord(item.id, false)\">\n <i class=\"fa fa-retweet edit-icon\" aria-hidden=\"true\"></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"tt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" message=\"No Contact Requests\"> </pw-no-data>\n </div>\n}\n", styles: [".search-contact{display:flex;justify-content:space-between}@media(min-width:320px)and (max-width:720px){.search-contact{display:block}}\n"] }]
|
|
375
|
+
args: [{ selector: 'pw-contact-us-list', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center text-end\">\n <h2 class=\"card-title p-0 float-start\">Contact Us</h2>\n </div>\n <div class=\"col-12 mb-3\">\n <p>The <strong>Contact US</strong> module shows all submissions from the contact forms embedded on select landing pages.<br/>\n It\u2019s your central hub to track and follow up with interested users or potential leads.</p>\n</div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #tt\n [value]=\"data.contact_request\"\n [paginator]=\"data.object_count !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [lazy]=\"true\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <!--sort order should be default empty when page load-->\n\n <!-- Caption Header, Search Bar -->\n <ng-template pTemplate=\"caption\">\n <div class=\"search-contact\">\n <div class=\"col-12 col-sm-3\">\n <p-select styleClass=\"pw-filter-select\"\n [options]=\"[\n { label: 'Filter by status', value: null },\n { label: 'Open', value: false },\n { label: 'Closed', value: true }\n ]\"\n placeholder=\"Filter by status\"\n (onChange)=\"filterClosed($event.value)\"\n appendTo=\"body\">\n </p-select>\n </div>\n <div class=\"text-end ms-auto\">\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=\"contact-us-list-search\"\n name=\"contact-us-list-search\"\n pInputText\n placeholder=\"Search messages...\"\n [(ngModel)]=\"searchText\"\n (input)=\"tt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n\n <!-- Column Header -->\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"created_at\">\n {{ 'Admin.ContactUs.CreatedAt' | transloco }}\n <p-sortIcon field=\"created_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"name\">\n {{ 'Label.Name' | transloco }}\n <p-sortIcon field=\"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=\"subject\">\n {{ 'Admin.ContactUs.Subject' | transloco }}\n <p-sortIcon field=\"subject\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"message\">\n {{ 'Admin.ContactUs.Message' | transloco }}\n <p-sortIcon field=\"message\"></p-sortIcon>\n </th>\n <th class=\"actions-list-two\"\n scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n\n <!-- Table Body -->\n <ng-template pTemplate=\"body\"\n let-item>\n <tr>\n <td data-head=\"created_at\">{{ item?.created_at | dateFormat }}</td>\n <td data-head=\"name\">{{ item?.name }}</td>\n <td data-head=\"email\">\n <a href=\"mailto:{{ item?.email }}\">{{ item?.email }}</a>\n </td>\n <td data-head=\"subject\">{{ item?.subject }}</td>\n <td data-head=\"message\">\n <span\n [ngbTooltip]=\"item?.message\"\n container=\"body\"\n tooltipClass=\"custom-tooltip\"\n placement=\"bottom\"\n >\n {{ item?.message | textTruncate: 200 }}\n </span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n @if (!item.closed) {\n <li\n ngbTooltip=\"Close\"\n class=\"me-2 me-sm-3\"\n (keydown.enter)=\"toggleRecord(item.id, true)\"\n (click)=\"toggleRecord(item.id, true)\">\n <i class=\"fa fa-times delete-icon\" aria-hidden=\"true\"></i>\n </li>\n }\n @if (item.closed) {\n <li\n ngbTooltip=\"Re Open\"\n class=\"me-2 me-sm-3\"\n (keydown.enter)=\"onKeyDown($event, item.id)\"\n (click)=\"toggleRecord(item.id, false)\">\n <i class=\"fa fa-retweet edit-icon\" aria-hidden=\"true\"></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"tt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" message=\"No Contact Requests\"> </pw-no-data>\n </div>\n}\n", styles: [".search-contact{display:flex;justify-content:space-between}@media(min-width:320px)and (max-width:720px){.search-contact{display:block}}\n"] }]
|
|
372
376
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.AdminService }, { type: i0.ChangeDetectorRef }, { type: i3$1.ConfirmDialogService }] });
|
|
373
377
|
|
|
374
378
|
class ContactUsTabsComponent {
|
|
@@ -674,11 +678,11 @@ class SubscriptionCredentialsComponent extends AppBaseComponent {
|
|
|
674
678
|
super.ngOnDestroy();
|
|
675
679
|
}
|
|
676
680
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SubscriptionCredentialsComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i3$1.ConfirmDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
677
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SubscriptionCredentialsComponent, isStandalone: false, selector: "pw-subscription-credentials", viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Subscription Credentials</h2>\n <button class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"create-subscription-credential\"\n [routerLink]=\"[routers.subscriptionCredentialDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Admin.SubscriptionCredentialMessages.CreateSubscriptionCredential' | transloco }}\n </button>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt\n [value]=\"data.subscription_credentials\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div class=\"col-12 col-sm-4\">\n <p-select\n inputId=\"subscription-credentials-subscription\"\n [options]=\"subscriptionOptions\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [filter]=\"true\"\n filterBy=\"label\"\n [showClear]=\"true\"\n [placeholder]=\"'Filter by subscription'\"\n [(ngModel)]=\"selectedSubscriptionId\"\n (onChange)=\"onSubscriptionFilterChange($event.value)\"\n appendTo=\"body\">\n </p-select>\n </div>\n <div class=\"text-end\">\n <label for=\"subscription-credentials-search\" class=\"visually-hidden\">Search credentials</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=\"subscription-credentials-search\"\n name=\"subscription-credentials-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search credentials...\"\n autocomplete=\"off\"\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=\"subscription_id\">\n {{ 'Admin.SubscriptionCredentialMessages.SubscriptionOwner' | transloco }}\n <p-sortIcon field=\"subscription_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"credential_id\">\n {{ 'Admin.SubscriptionCredentialMessages.Credential' | transloco }}\n <p-sortIcon field=\"credential_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"field\">\n {{ 'Admin.SubscriptionCredentialMessages.Field' | transloco }}\n <p-sortIcon field=\"field\"></p-sortIcon>\n </th>\n <th scope=\"true\">\n {{ 'Admin.SubscriptionCredentialMessages.Value' | transloco }}\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-credential>\n <tr>\n <td data-head=\"Name\">{{ credential?.subscription?.contact_name }}</td>\n <td data-head=\"Credential Name\">{{ credential?.credential?.name }}</td>\n <td data-head=\"Field\">{{ credential?.credential?.field }}</td>\n <td data-head=\"Value\">{{ credential.value }}</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.subscriptionCredentialDetails + credential.id]\">\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 <i\n (click)=\"onDelete(credential.id)\"\n (keydown.enter)=\"onDelete(credential.id)\"\n (keydown.space)=\"onDelete(credential.id)\"\n class=\"fa fa-trash delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Credentials.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n", dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: "directive", type: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i2.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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$1.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
681
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: SubscriptionCredentialsComponent, isStandalone: false, selector: "pw-subscription-credentials", viewQueries: [{ propertyName: "dt", first: true, predicate: ["dt"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Subscription Credentials</h2>\n <button class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"create-subscription-credential\"\n [routerLink]=\"[routers.subscriptionCredentialDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Admin.SubscriptionCredentialMessages.CreateSubscriptionCredential' | transloco }}\n </button>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt\n [value]=\"data.subscription_credentials\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div class=\"col-12 col-sm-4\">\n <p-select styleClass=\"pw-filter-select\"\n inputId=\"subscription-credentials-subscription\"\n [options]=\"subscriptionOptions\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [filter]=\"true\"\n filterBy=\"label\"\n [showClear]=\"true\"\n [placeholder]=\"'Filter by subscription'\"\n [(ngModel)]=\"selectedSubscriptionId\"\n (onChange)=\"onSubscriptionFilterChange($event.value)\"\n appendTo=\"body\">\n </p-select>\n </div>\n <div class=\"text-end\">\n <label for=\"subscription-credentials-search\" class=\"visually-hidden\">Search credentials</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=\"subscription-credentials-search\"\n name=\"subscription-credentials-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search credentials...\"\n autocomplete=\"off\"\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=\"subscription_id\">\n {{ 'Admin.SubscriptionCredentialMessages.SubscriptionOwner' | transloco }}\n <p-sortIcon field=\"subscription_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"credential_id\">\n {{ 'Admin.SubscriptionCredentialMessages.Credential' | transloco }}\n <p-sortIcon field=\"credential_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"field\">\n {{ 'Admin.SubscriptionCredentialMessages.Field' | transloco }}\n <p-sortIcon field=\"field\"></p-sortIcon>\n </th>\n <th scope=\"true\">\n {{ 'Admin.SubscriptionCredentialMessages.Value' | transloco }}\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-credential>\n <tr>\n <td data-head=\"Name\">{{ credential?.subscription?.contact_name }}</td>\n <td data-head=\"Credential Name\">{{ credential?.credential?.name }}</td>\n <td data-head=\"Field\">{{ credential?.credential?.field }}</td>\n <td data-head=\"Value\">{{ credential.value }}</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.subscriptionCredentialDetails + credential.id]\">\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 <i\n (click)=\"onDelete(credential.id)\"\n (keydown.enter)=\"onDelete(credential.id)\"\n (keydown.space)=\"onDelete(credential.id)\"\n class=\"fa fa-trash delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Credentials.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n", dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: "directive", type: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i2.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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$1.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
678
682
|
}
|
|
679
683
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SubscriptionCredentialsComponent, decorators: [{
|
|
680
684
|
type: Component,
|
|
681
|
-
args: [{ selector: 'pw-subscription-credentials', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Subscription Credentials</h2>\n <button class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"create-subscription-credential\"\n [routerLink]=\"[routers.subscriptionCredentialDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Admin.SubscriptionCredentialMessages.CreateSubscriptionCredential' | transloco }}\n </button>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt\n [value]=\"data.subscription_credentials\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div class=\"col-12 col-sm-4\">\n <p-select\n inputId=\"subscription-credentials-subscription\"\n [options]=\"subscriptionOptions\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [filter]=\"true\"\n filterBy=\"label\"\n [showClear]=\"true\"\n [placeholder]=\"'Filter by subscription'\"\n [(ngModel)]=\"selectedSubscriptionId\"\n (onChange)=\"onSubscriptionFilterChange($event.value)\"\n appendTo=\"body\">\n </p-select>\n </div>\n <div class=\"text-end\">\n <label for=\"subscription-credentials-search\" class=\"visually-hidden\">Search credentials</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=\"subscription-credentials-search\"\n name=\"subscription-credentials-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search credentials...\"\n autocomplete=\"off\"\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=\"subscription_id\">\n {{ 'Admin.SubscriptionCredentialMessages.SubscriptionOwner' | transloco }}\n <p-sortIcon field=\"subscription_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"credential_id\">\n {{ 'Admin.SubscriptionCredentialMessages.Credential' | transloco }}\n <p-sortIcon field=\"credential_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"field\">\n {{ 'Admin.SubscriptionCredentialMessages.Field' | transloco }}\n <p-sortIcon field=\"field\"></p-sortIcon>\n </th>\n <th scope=\"true\">\n {{ 'Admin.SubscriptionCredentialMessages.Value' | transloco }}\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-credential>\n <tr>\n <td data-head=\"Name\">{{ credential?.subscription?.contact_name }}</td>\n <td data-head=\"Credential Name\">{{ credential?.credential?.name }}</td>\n <td data-head=\"Field\">{{ credential?.credential?.field }}</td>\n <td data-head=\"Value\">{{ credential.value }}</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.subscriptionCredentialDetails + credential.id]\">\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 <i\n (click)=\"onDelete(credential.id)\"\n (keydown.enter)=\"onDelete(credential.id)\"\n (keydown.space)=\"onDelete(credential.id)\"\n class=\"fa fa-trash delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Credentials.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n" }]
|
|
685
|
+
args: [{ selector: 'pw-subscription-credentials', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Subscription Credentials</h2>\n <button class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"create-subscription-credential\"\n [routerLink]=\"[routers.subscriptionCredentialDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i>\n {{ 'Admin.SubscriptionCredentialMessages.CreateSubscriptionCredential' | transloco }}\n </button>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt\n [value]=\"data.subscription_credentials\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div class=\"col-12 col-sm-4\">\n <p-select styleClass=\"pw-filter-select\"\n inputId=\"subscription-credentials-subscription\"\n [options]=\"subscriptionOptions\"\n optionLabel=\"label\"\n optionValue=\"value\"\n [filter]=\"true\"\n filterBy=\"label\"\n [showClear]=\"true\"\n [placeholder]=\"'Filter by subscription'\"\n [(ngModel)]=\"selectedSubscriptionId\"\n (onChange)=\"onSubscriptionFilterChange($event.value)\"\n appendTo=\"body\">\n </p-select>\n </div>\n <div class=\"text-end\">\n <label for=\"subscription-credentials-search\" class=\"visually-hidden\">Search credentials</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=\"subscription-credentials-search\"\n name=\"subscription-credentials-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search credentials...\"\n autocomplete=\"off\"\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=\"subscription_id\">\n {{ 'Admin.SubscriptionCredentialMessages.SubscriptionOwner' | transloco }}\n <p-sortIcon field=\"subscription_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"credential_id\">\n {{ 'Admin.SubscriptionCredentialMessages.Credential' | transloco }}\n <p-sortIcon field=\"credential_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"field\">\n {{ 'Admin.SubscriptionCredentialMessages.Field' | transloco }}\n <p-sortIcon field=\"field\"></p-sortIcon>\n </th>\n <th scope=\"true\">\n {{ 'Admin.SubscriptionCredentialMessages.Value' | transloco }}\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-credential>\n <tr>\n <td data-head=\"Name\">{{ credential?.subscription?.contact_name }}</td>\n <td data-head=\"Credential Name\">{{ credential?.credential?.name }}</td>\n <td data-head=\"Field\">{{ credential?.credential?.field }}</td>\n <td data-head=\"Value\">{{ credential.value }}</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.subscriptionCredentialDetails + credential.id]\">\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 <i\n (click)=\"onDelete(credential.id)\"\n (keydown.enter)=\"onDelete(credential.id)\"\n (keydown.space)=\"onDelete(credential.id)\"\n class=\"fa fa-trash delete-icon\"\n aria-hidden=\"true\"\n ></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n</div>\n@if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Credentials.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n" }]
|
|
682
686
|
}], ctorParameters: () => [{ type: i1.AdminService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i3$1.ConfirmDialogService }], propDecorators: { dt: [{
|
|
683
687
|
type: ViewChild,
|
|
684
688
|
args: ['dt']
|
|
@@ -2735,11 +2739,11 @@ class FaqListComponent extends AppBaseComponent {
|
|
|
2735
2739
|
super.ngOnDestroy();
|
|
2736
2740
|
}
|
|
2737
2741
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FaqListComponent, deps: [{ token: i1$1.CommonService }, { token: i1.AdminService }, { token: i1$1.ProductService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i3$1.ConfirmDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2738
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FaqListComponent, isStandalone: false, selector: "pw-admin-faq-list", viewQueries: [{ propertyName: "editForm", first: true, predicate: ["editForm"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\" [class.custom-disable-wrapper]=\"buttonBusy\">\n @if (showList) {\n <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\"\n >\n <h2 class=\"card-title p-0 float-start\">Frequently Asked Questions</h2>\n <a aria-label=\"Navigate to Target\" [routerLink]=\"[routers.faqDetails + 'add']\"\n class=\"btn btn-sm btn-outline-primary float-end\" aria-expanded=\"false\"\n (keydown.enter)=\"$event.preventDefault()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Label.AddNew' | transloco }} FAQ </a>\n </div>\n }\n <div class=\"col-12 mb-3\">\n <p>The <strong>FAQ</strong> module enables you to provide clear, self-serve answers to common users questions - reducing support load.<br>\n It's ideal for covering things like <strong>pricing</strong>, <strong>troubleshooting</strong>, and <strong>onboarding steps</strong>.</p>\n </div>\n </div>\n\n @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n <div class=\"row faqlist primeng-datatable-container actions-collapsed mt-0\" [class.custom-disable-wrapper]=\"buttonBusy\" [class.hideTable]=\"totalRecordsUnFiltered === 0 || !showList\">\n <div class=\"col-12 px-0\">\n <p-table #dt\n [value]=\"faqs\"\n [paginator]=\"totalRecords !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div class=\"col-sm-4\">\n <p-multiSelect inputId=\"faqs-list-feature-keys\" [showToggleAll]=\"true\" [options]=\"featureKeysList\" (onChange)=\"onProductChange($event)\"\n placeholder=\"Filter by feature keys\" [showHeader]=\"true\" maxSelectedLabels=\"2\" appendTo=\"body\">\n </p-multiSelect>\n </div>\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=\"faqs-list-search\"\n name=\"faqs-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search FAQs...\"\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\">{{ 'Admin.Faq.Question' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Faq.Answer' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Faq.Position' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Faq.Category' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Faq.Visible' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Faq.Public' | transloco }}</th>\n <th scope=\"true\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-faq>\n <tr>\n <td data-head=\"Question\">{{ faq.question }} </td>\n <td data-head=\"Answer\">{{(faq.answer|removeHtml: 'quill')|textTruncate: 200}} </td>\n <td data-head=\"Position\">{{faq.position}}</td>\n <td data-head=\"Category\">\n <span [appDynamicBadge]=\"{ itemsArray: categoryForBadges, item: faq?.category }\" color=\"cyan\"\n class=\"badge ms-1\">\n <span [pTooltip]=\"faq?.feature_keys?.join(',')\" tooltipPosition=\"top\">{{ faqHashMap[faq?.category]?.name\n }}</span>\n </span>\n @if (faq.is_shared_faq || faq.is_admin_faq || faq.is_build_faq) {\n <span class=\"ms-1 badge bg-warning\">Super\n FAQ</span>\n }\n </td>\n <td data-head=\"Visible\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: faq?.visible }\" color=\"success-danger\"\n class=\"badge\">{{ faq?.visible }}</span>\n </td>\n <td data-head=\"Public\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: faq?.public }\" color=\"success-danger\"\n class=\"badge\">{{ faq?.public }}</span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-2\">\n <i class=\"fa fa-edit edit-icon\" (keydown.enter)=\"navigateToEdit(faq)\" (keydown.space)=\"navigateToEdit(faq)\" (click)=\"navigateToEdit(faq)\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-2\">\n <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(faq)\" (keydown.space)=\"onDelete(faq)\" (click)=\"onDelete(faq)\" aria-hidden=\"true\"></i>\n </li>\n @if (faq?.visible) {\n <li ngbTooltip=\"View faq\">\n <a [routerLink]=\"['/',slug,'faq',faq.id]\" target=\"_blank\" aria-label=\"View FAQ\">\n <i class=\"fa fa-eye fa-lg\" aria-hidden=\"true\"></i>\n </a>\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.Faq.NoDataMessage' | transloco\">\n </pw-no-data>\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);--public-btn-radius: 24px}.faq-item{background-color:#fff;border:1px dashed rgba(0,0,0,.1);border-radius:3px;margin-top:10px;transition:all .2s ease-in-out}.faq-item h5{padding:0 15px 0 0;position:relative}.faq-item h5 a:before{position:absolute;right:-24px;top:3px}input.warning{border-color:red}@media only screen and (max-width:1024px){.faq-item h5 a{font-size:16px}.faq-item button.btn{font-size:14px}.panel-collapse .card-block{font-size:14px;margin-bottom:20px;padding:0 8px}}.actions{min-width:80px}@media only screen and (max-width:768px){.faq-item h5 a{font-size:14px}.faq-item button.btn,.panel-collapse .card-block{font-size:12px}}.tooltip-wrap{vertical-align:top}.custom-dropdown,.custom-multiselect{position:absolute!important;width:inherit!important;z-index:9999!important}.p-dropdown-items-wrapper{max-height:142px}.fa-eye{font-size:15px}quill-editor,[_nghost-ng-c3617506782]{display:block!important}.quill-editor label{display:block}\n"], dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: 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: 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: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i2.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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$1.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i11.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }] }); }
|
|
2742
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FaqListComponent, isStandalone: false, selector: "pw-admin-faq-list", viewQueries: [{ propertyName: "editForm", first: true, predicate: ["editForm"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\" [class.custom-disable-wrapper]=\"buttonBusy\">\n @if (showList) {\n <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\"\n >\n <h2 class=\"card-title p-0 float-start\">Frequently Asked Questions</h2>\n <a aria-label=\"Navigate to Target\" [routerLink]=\"[routers.faqDetails + 'add']\"\n class=\"btn btn-sm btn-outline-primary float-end\" aria-expanded=\"false\"\n (keydown.enter)=\"$event.preventDefault()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Label.AddNew' | transloco }} FAQ </a>\n </div>\n }\n <div class=\"col-12 mb-3\">\n <p>The <strong>FAQ</strong> module enables you to provide clear, self-serve answers to common users questions - reducing support load.<br>\n It's ideal for covering things like <strong>pricing</strong>, <strong>troubleshooting</strong>, and <strong>onboarding steps</strong>.</p>\n </div>\n </div>\n\n @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n <div class=\"row faqlist primeng-datatable-container actions-collapsed mt-0\" [class.custom-disable-wrapper]=\"buttonBusy\" [class.hideTable]=\"totalRecordsUnFiltered === 0 || !showList\">\n <div class=\"col-12 px-0\">\n <p-table #dt\n [value]=\"faqs\"\n [paginator]=\"totalRecords !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div class=\"col-sm-4\">\n <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"faqs-list-feature-keys\" [showToggleAll]=\"true\" [options]=\"featureKeysList\" (onChange)=\"onProductChange($event)\"\n placeholder=\"Filter by feature keys\" [showHeader]=\"true\" maxSelectedLabels=\"2\" appendTo=\"body\">\n </p-multiSelect>\n </div>\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=\"faqs-list-search\"\n name=\"faqs-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search FAQs...\"\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\">{{ 'Admin.Faq.Question' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Faq.Answer' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Faq.Position' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Faq.Category' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Faq.Visible' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Faq.Public' | transloco }}</th>\n <th scope=\"true\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-faq>\n <tr>\n <td data-head=\"Question\">{{ faq.question }} </td>\n <td data-head=\"Answer\">{{(faq.answer|removeHtml: 'quill')|textTruncate: 200}} </td>\n <td data-head=\"Position\">{{faq.position}}</td>\n <td data-head=\"Category\">\n <span [appDynamicBadge]=\"{ itemsArray: categoryForBadges, item: faq?.category }\" color=\"cyan\"\n class=\"badge ms-1\">\n <span [pTooltip]=\"faq?.feature_keys?.join(',')\" tooltipPosition=\"top\">{{ faqHashMap[faq?.category]?.name\n }}</span>\n </span>\n @if (faq.is_shared_faq || faq.is_admin_faq || faq.is_build_faq) {\n <span class=\"ms-1 badge bg-warning\">Super\n FAQ</span>\n }\n </td>\n <td data-head=\"Visible\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: faq?.visible }\" color=\"success-danger\"\n class=\"badge\">{{ faq?.visible }}</span>\n </td>\n <td data-head=\"Public\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: faq?.public }\" color=\"success-danger\"\n class=\"badge\">{{ faq?.public }}</span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-2\">\n <i class=\"fa fa-edit edit-icon\" (keydown.enter)=\"navigateToEdit(faq)\" (keydown.space)=\"navigateToEdit(faq)\" (click)=\"navigateToEdit(faq)\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-2\">\n <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(faq)\" (keydown.space)=\"onDelete(faq)\" (click)=\"onDelete(faq)\" aria-hidden=\"true\"></i>\n </li>\n @if (faq?.visible) {\n <li ngbTooltip=\"View faq\">\n <a [routerLink]=\"['/',slug,'faq',faq.id]\" target=\"_blank\" aria-label=\"View FAQ\">\n <i class=\"fa fa-eye fa-lg\" aria-hidden=\"true\"></i>\n </a>\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.Faq.NoDataMessage' | transloco\">\n </pw-no-data>\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);--public-btn-radius: 24px}.faq-item{background-color:#fff;border:1px dashed rgba(0,0,0,.1);border-radius:3px;margin-top:10px;transition:all .2s ease-in-out}.faq-item h5{padding:0 15px 0 0;position:relative}.faq-item h5 a:before{position:absolute;right:-24px;top:3px}input.warning{border-color:red}@media only screen and (max-width:1024px){.faq-item h5 a{font-size:16px}.faq-item button.btn{font-size:14px}.panel-collapse .card-block{font-size:14px;margin-bottom:20px;padding:0 8px}}.actions{min-width:80px}@media only screen and (max-width:768px){.faq-item h5 a{font-size:14px}.faq-item button.btn,.panel-collapse .card-block{font-size:12px}}.tooltip-wrap{vertical-align:top}.custom-dropdown,.custom-multiselect{position:absolute!important;width:inherit!important;z-index:9999!important}.p-dropdown-items-wrapper{max-height:142px}.fa-eye{font-size:15px}quill-editor,[_nghost-ng-c3617506782]{display:block!important}.quill-editor label{display:block}\n"], dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: 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: 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: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i2.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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$1.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i11.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }] }); }
|
|
2739
2743
|
}
|
|
2740
2744
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FaqListComponent, decorators: [{
|
|
2741
2745
|
type: Component,
|
|
2742
|
-
args: [{ selector: 'pw-admin-faq-list', standalone: false, template: "<div class=\"row\" [class.custom-disable-wrapper]=\"buttonBusy\">\n @if (showList) {\n <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\"\n >\n <h2 class=\"card-title p-0 float-start\">Frequently Asked Questions</h2>\n <a aria-label=\"Navigate to Target\" [routerLink]=\"[routers.faqDetails + 'add']\"\n class=\"btn btn-sm btn-outline-primary float-end\" aria-expanded=\"false\"\n (keydown.enter)=\"$event.preventDefault()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Label.AddNew' | transloco }} FAQ </a>\n </div>\n }\n <div class=\"col-12 mb-3\">\n <p>The <strong>FAQ</strong> module enables you to provide clear, self-serve answers to common users questions - reducing support load.<br>\n It's ideal for covering things like <strong>pricing</strong>, <strong>troubleshooting</strong>, and <strong>onboarding steps</strong>.</p>\n </div>\n </div>\n\n @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n <div class=\"row faqlist primeng-datatable-container actions-collapsed mt-0\" [class.custom-disable-wrapper]=\"buttonBusy\" [class.hideTable]=\"totalRecordsUnFiltered === 0 || !showList\">\n <div class=\"col-12 px-0\">\n <p-table #dt\n [value]=\"faqs\"\n [paginator]=\"totalRecords !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div class=\"col-sm-4\">\n <p-multiSelect inputId=\"faqs-list-feature-keys\" [showToggleAll]=\"true\" [options]=\"featureKeysList\" (onChange)=\"onProductChange($event)\"\n placeholder=\"Filter by feature keys\" [showHeader]=\"true\" maxSelectedLabels=\"2\" appendTo=\"body\">\n </p-multiSelect>\n </div>\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=\"faqs-list-search\"\n name=\"faqs-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search FAQs...\"\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\">{{ 'Admin.Faq.Question' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Faq.Answer' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Faq.Position' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Faq.Category' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Faq.Visible' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Faq.Public' | transloco }}</th>\n <th scope=\"true\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-faq>\n <tr>\n <td data-head=\"Question\">{{ faq.question }} </td>\n <td data-head=\"Answer\">{{(faq.answer|removeHtml: 'quill')|textTruncate: 200}} </td>\n <td data-head=\"Position\">{{faq.position}}</td>\n <td data-head=\"Category\">\n <span [appDynamicBadge]=\"{ itemsArray: categoryForBadges, item: faq?.category }\" color=\"cyan\"\n class=\"badge ms-1\">\n <span [pTooltip]=\"faq?.feature_keys?.join(',')\" tooltipPosition=\"top\">{{ faqHashMap[faq?.category]?.name\n }}</span>\n </span>\n @if (faq.is_shared_faq || faq.is_admin_faq || faq.is_build_faq) {\n <span class=\"ms-1 badge bg-warning\">Super\n FAQ</span>\n }\n </td>\n <td data-head=\"Visible\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: faq?.visible }\" color=\"success-danger\"\n class=\"badge\">{{ faq?.visible }}</span>\n </td>\n <td data-head=\"Public\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: faq?.public }\" color=\"success-danger\"\n class=\"badge\">{{ faq?.public }}</span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-2\">\n <i class=\"fa fa-edit edit-icon\" (keydown.enter)=\"navigateToEdit(faq)\" (keydown.space)=\"navigateToEdit(faq)\" (click)=\"navigateToEdit(faq)\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-2\">\n <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(faq)\" (keydown.space)=\"onDelete(faq)\" (click)=\"onDelete(faq)\" aria-hidden=\"true\"></i>\n </li>\n @if (faq?.visible) {\n <li ngbTooltip=\"View faq\">\n <a [routerLink]=\"['/',slug,'faq',faq.id]\" target=\"_blank\" aria-label=\"View FAQ\">\n <i class=\"fa fa-eye fa-lg\" aria-hidden=\"true\"></i>\n </a>\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.Faq.NoDataMessage' | transloco\">\n </pw-no-data>\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);--public-btn-radius: 24px}.faq-item{background-color:#fff;border:1px dashed rgba(0,0,0,.1);border-radius:3px;margin-top:10px;transition:all .2s ease-in-out}.faq-item h5{padding:0 15px 0 0;position:relative}.faq-item h5 a:before{position:absolute;right:-24px;top:3px}input.warning{border-color:red}@media only screen and (max-width:1024px){.faq-item h5 a{font-size:16px}.faq-item button.btn{font-size:14px}.panel-collapse .card-block{font-size:14px;margin-bottom:20px;padding:0 8px}}.actions{min-width:80px}@media only screen and (max-width:768px){.faq-item h5 a{font-size:14px}.faq-item button.btn,.panel-collapse .card-block{font-size:12px}}.tooltip-wrap{vertical-align:top}.custom-dropdown,.custom-multiselect{position:absolute!important;width:inherit!important;z-index:9999!important}.p-dropdown-items-wrapper{max-height:142px}.fa-eye{font-size:15px}quill-editor,[_nghost-ng-c3617506782]{display:block!important}.quill-editor label{display:block}\n"] }]
|
|
2746
|
+
args: [{ selector: 'pw-admin-faq-list', standalone: false, template: "<div class=\"row\" [class.custom-disable-wrapper]=\"buttonBusy\">\n @if (showList) {\n <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\"\n >\n <h2 class=\"card-title p-0 float-start\">Frequently Asked Questions</h2>\n <a aria-label=\"Navigate to Target\" [routerLink]=\"[routers.faqDetails + 'add']\"\n class=\"btn btn-sm btn-outline-primary float-end\" aria-expanded=\"false\"\n (keydown.enter)=\"$event.preventDefault()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Label.AddNew' | transloco }} FAQ </a>\n </div>\n }\n <div class=\"col-12 mb-3\">\n <p>The <strong>FAQ</strong> module enables you to provide clear, self-serve answers to common users questions - reducing support load.<br>\n It's ideal for covering things like <strong>pricing</strong>, <strong>troubleshooting</strong>, and <strong>onboarding steps</strong>.</p>\n </div>\n </div>\n\n @if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n <div class=\"row faqlist primeng-datatable-container actions-collapsed mt-0\" [class.custom-disable-wrapper]=\"buttonBusy\" [class.hideTable]=\"totalRecordsUnFiltered === 0 || !showList\">\n <div class=\"col-12 px-0\">\n <p-table #dt\n [value]=\"faqs\"\n [paginator]=\"totalRecords !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div class=\"col-sm-4\">\n <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"faqs-list-feature-keys\" [showToggleAll]=\"true\" [options]=\"featureKeysList\" (onChange)=\"onProductChange($event)\"\n placeholder=\"Filter by feature keys\" [showHeader]=\"true\" maxSelectedLabels=\"2\" appendTo=\"body\">\n </p-multiSelect>\n </div>\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=\"faqs-list-search\"\n name=\"faqs-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search FAQs...\"\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\">{{ 'Admin.Faq.Question' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Faq.Answer' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Faq.Position' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Faq.Category' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Faq.Visible' | transloco }}</th>\n <th scope=\"true\">{{ 'Admin.Faq.Public' | transloco }}</th>\n <th scope=\"true\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-faq>\n <tr>\n <td data-head=\"Question\">{{ faq.question }} </td>\n <td data-head=\"Answer\">{{(faq.answer|removeHtml: 'quill')|textTruncate: 200}} </td>\n <td data-head=\"Position\">{{faq.position}}</td>\n <td data-head=\"Category\">\n <span [appDynamicBadge]=\"{ itemsArray: categoryForBadges, item: faq?.category }\" color=\"cyan\"\n class=\"badge ms-1\">\n <span [pTooltip]=\"faq?.feature_keys?.join(',')\" tooltipPosition=\"top\">{{ faqHashMap[faq?.category]?.name\n }}</span>\n </span>\n @if (faq.is_shared_faq || faq.is_admin_faq || faq.is_build_faq) {\n <span class=\"ms-1 badge bg-warning\">Super\n FAQ</span>\n }\n </td>\n <td data-head=\"Visible\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: faq?.visible }\" color=\"success-danger\"\n class=\"badge\">{{ faq?.visible }}</span>\n </td>\n <td data-head=\"Public\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: faq?.public }\" color=\"success-danger\"\n class=\"badge\">{{ faq?.public }}</span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Edit\" class=\"me-2 me-sm-2\">\n <i class=\"fa fa-edit edit-icon\" (keydown.enter)=\"navigateToEdit(faq)\" (keydown.space)=\"navigateToEdit(faq)\" (click)=\"navigateToEdit(faq)\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\" class=\"me-2 me-sm-2\">\n <i class=\"fa fa-trash delete-icon\" (keydown.enter)=\"onDelete(faq)\" (keydown.space)=\"onDelete(faq)\" (click)=\"onDelete(faq)\" aria-hidden=\"true\"></i>\n </li>\n @if (faq?.visible) {\n <li ngbTooltip=\"View faq\">\n <a [routerLink]=\"['/',slug,'faq',faq.id]\" target=\"_blank\" aria-label=\"View FAQ\">\n <i class=\"fa fa-eye fa-lg\" aria-hidden=\"true\"></i>\n </a>\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.Faq.NoDataMessage' | transloco\">\n </pw-no-data>\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);--public-btn-radius: 24px}.faq-item{background-color:#fff;border:1px dashed rgba(0,0,0,.1);border-radius:3px;margin-top:10px;transition:all .2s ease-in-out}.faq-item h5{padding:0 15px 0 0;position:relative}.faq-item h5 a:before{position:absolute;right:-24px;top:3px}input.warning{border-color:red}@media only screen and (max-width:1024px){.faq-item h5 a{font-size:16px}.faq-item button.btn{font-size:14px}.panel-collapse .card-block{font-size:14px;margin-bottom:20px;padding:0 8px}}.actions{min-width:80px}@media only screen and (max-width:768px){.faq-item h5 a{font-size:14px}.faq-item button.btn,.panel-collapse .card-block{font-size:12px}}.tooltip-wrap{vertical-align:top}.custom-dropdown,.custom-multiselect{position:absolute!important;width:inherit!important;z-index:9999!important}.p-dropdown-items-wrapper{max-height:142px}.fa-eye{font-size:15px}quill-editor,[_nghost-ng-c3617506782]{display:block!important}.quill-editor label{display:block}\n"] }]
|
|
2743
2747
|
}], ctorParameters: () => [{ type: i1$1.CommonService }, { type: i1.AdminService }, { type: i1$1.ProductService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i3$1.ConfirmDialogService }], propDecorators: { editForm: [{
|
|
2744
2748
|
type: ViewChild,
|
|
2745
2749
|
args: ['editForm', { static: false }]
|
|
@@ -4785,11 +4789,11 @@ class NewslettersItemsComponent extends AppBaseComponent {
|
|
|
4785
4789
|
super.ngOnDestroy();
|
|
4786
4790
|
}
|
|
4787
4791
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NewslettersItemsComponent, deps: [{ token: i1.AdminService }, { token: i1$1.AuthService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i3$1.ConfirmDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4788
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: NewslettersItemsComponent, isStandalone: false, selector: "pw-newsletters-items", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Newsletters Items</h2>\n <button *rbacAllow=\"'SubscriptionAdmin || Pages.Role.MarketingManager || Pages.Role.CustomerSuccessManager'\"\n class=\"btn btn-sm btn-outline-primary float-end m-0\"\n (click)=\"navigateToCreateNewsletterItem()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Newsletter Item\n </button>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <div class=\"row\">\n <div class=\"col-4\">\n <p-multiSelect inputId=\"newsletters-items-filter\" [options]=\"newsletters\"\n [(ngModel)]=\"selectedNewsletterIds\"\n (onChange)=\"onNewsletterChange($event)\"\n placeholder='Filter by newsletters'\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-8 d-flex justify-content-end\">\n <div>\n <label for=\"newsletters-items-search\" class=\"visually-hidden\">Search</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=\"newsletters-items-search\"\n name=\"newsletters-items-search\"\n [(ngModel)]=\"searchTextItems\"\n pInputText\n placeholder=\"Search...\"\n data-cy=\"user-search\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </div>\n\n </div>\n <p-table #dt\n [value]=\"newslettersItems\"\n [paginator]=\"newslettersItemsTotal !== 0\"\n [globalFilterFields]=\"['title']\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"newslettersItemsTotal\"\n [lazy]=\"true\"\n (onLazyLoad)=\"onLazyLoadNewsletterItems($event)\"\n [loading]=\"isLoading\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"title\">\n {{ 'Label.Title' | transloco }}\n <p-sortIcon field=\"title\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"body\">\n {{ 'Admin.NewsletterItem.Body' | transloco }}\n <p-sortIcon field=\"body\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"send_until\">\n {{ 'Admin.NewsletterItem.SendUntil' | transloco }}\n <p-sortIcon field=\"send_until\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"is_pushed\">\n {{ 'Admin.NewsletterItem.Pushed' | transloco }}\n <p-sortIcon field=\"is_pushed\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"is_sent\">\n {{ 'Admin.NewsletterItem.Sent' | transloco }}\n <p-sortIcon field=\"is_sent\"></p-sortIcon>\n </th>\n <th class=\"actions-list-four\"\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=\"Title\">\n <a target=\"_blank\" [routerLink]=\"[routers.newsletterItemView + 'info', item.id]\">{{\n item.title\n }}\n </a>\n @if (item?.location) {\n <i class=\"far fa-info-circle info-icon text-muted\"\n [ngbTooltip]=\"item?.location\"></i>\n }\n </td>\n <td data-head=\"Body\"\n class=\"custom-td\">\n {{ item.body | removeHtml: 'quill' | textTruncate: 200 }}\n </td>\n <td data-head=\"Send Until\">\n <span [ngClass]=\"getSendUntilColor(item?.send_until)\">{{\n item.send_until | dateFormat\n }}</span>\n </td>\n <td data-head=\"Is Pushed\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_pushed }\"\n color=\"success-danger\"\n class=\"badge\">{{ item?.is_pushed }}</span>\n </td>\n <td data-head=\"Is Sent\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_sent }\"\n color=\"success-danger\"\n class=\"badge\">{{ item?.is_sent }}</span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Send test email\"\n class=\"me-2 me-sm-2\">\n <i\n class=\"fa fa-comment-alt cta1-icon\"\n (click)=\"sendTestEmail(item)\"\n (keydown.enter)=\"sendTestEmail(item)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-2\"\n [routerLink]=\"[routers.newsletterItemDetails + item.id]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-2\"\n (keydown.enter)=\"onDelete(item)\"\n (click)=\"onDelete(item)\">\n <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"View Newsletter\"\n class=\"me-2 me-sm-2\">\n <a [routerLink]=\"[routers.newsletterItemView + 'info', item.id]\" target=\"_blank\" aria-label=\"Newsletter Item View\">\n <i class=\"fa fa-eye eye-icon\" aria-hidden=\"true\"></i>\n </a>\n </li>\n <li ngbTooltip=\"Newsletter recipients\"\n class=\"me-2 me-sm-2\"\n [routerLink]=\"[routers.newslettersUserList + item.id]\">\n <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (newslettersItemsTotal === 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 (newslettersItemsTotal !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"newslettersItemsTotal\" />\n }\n</div>\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.NewsletterItem.NewsletterItemsNoDataMessage' | transloco\">\n </pw-no-data>\n </div>\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);--public-btn-radius: 24px}.custom-td{max-width:400px;word-break:break-all}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}.list-action{width:max-content}.info-icon{vertical-align:middle;margin-left:5px}\n"], dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i2.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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$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: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }] }); }
|
|
4792
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: NewslettersItemsComponent, isStandalone: false, selector: "pw-newsletters-items", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Newsletters Items</h2>\n <button *rbacAllow=\"'SubscriptionAdmin || Pages.Role.MarketingManager || Pages.Role.CustomerSuccessManager'\"\n class=\"btn btn-sm btn-outline-primary float-end m-0\"\n (click)=\"navigateToCreateNewsletterItem()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Newsletter Item\n </button>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <div class=\"row\">\n <div class=\"col-4\">\n <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"newsletters-items-filter\" [options]=\"newsletters\"\n [(ngModel)]=\"selectedNewsletterIds\"\n (onChange)=\"onNewsletterChange($event)\"\n placeholder='Filter by newsletters'\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-8 d-flex justify-content-end\">\n <div>\n <label for=\"newsletters-items-search\" class=\"visually-hidden\">Search</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=\"newsletters-items-search\"\n name=\"newsletters-items-search\"\n [(ngModel)]=\"searchTextItems\"\n pInputText\n placeholder=\"Search...\"\n data-cy=\"user-search\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </div>\n\n </div>\n <p-table #dt\n [value]=\"newslettersItems\"\n [paginator]=\"newslettersItemsTotal !== 0\"\n [globalFilterFields]=\"['title']\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"newslettersItemsTotal\"\n [lazy]=\"true\"\n (onLazyLoad)=\"onLazyLoadNewsletterItems($event)\"\n [loading]=\"isLoading\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"title\">\n {{ 'Label.Title' | transloco }}\n <p-sortIcon field=\"title\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"body\">\n {{ 'Admin.NewsletterItem.Body' | transloco }}\n <p-sortIcon field=\"body\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"send_until\">\n {{ 'Admin.NewsletterItem.SendUntil' | transloco }}\n <p-sortIcon field=\"send_until\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"is_pushed\">\n {{ 'Admin.NewsletterItem.Pushed' | transloco }}\n <p-sortIcon field=\"is_pushed\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"is_sent\">\n {{ 'Admin.NewsletterItem.Sent' | transloco }}\n <p-sortIcon field=\"is_sent\"></p-sortIcon>\n </th>\n <th class=\"actions-list-four\"\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=\"Title\">\n <a target=\"_blank\" [routerLink]=\"[routers.newsletterItemView + 'info', item.id]\">{{\n item.title\n }}\n </a>\n @if (item?.location) {\n <i class=\"far fa-info-circle info-icon text-muted\"\n [ngbTooltip]=\"item?.location\"></i>\n }\n </td>\n <td data-head=\"Body\"\n class=\"custom-td\">\n {{ item.body | removeHtml: 'quill' | textTruncate: 200 }}\n </td>\n <td data-head=\"Send Until\">\n <span [ngClass]=\"getSendUntilColor(item?.send_until)\">{{\n item.send_until | dateFormat\n }}</span>\n </td>\n <td data-head=\"Is Pushed\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_pushed }\"\n color=\"success-danger\"\n class=\"badge\">{{ item?.is_pushed }}</span>\n </td>\n <td data-head=\"Is Sent\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_sent }\"\n color=\"success-danger\"\n class=\"badge\">{{ item?.is_sent }}</span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Send test email\"\n class=\"me-2 me-sm-2\">\n <i\n class=\"fa fa-comment-alt cta1-icon\"\n (click)=\"sendTestEmail(item)\"\n (keydown.enter)=\"sendTestEmail(item)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-2\"\n [routerLink]=\"[routers.newsletterItemDetails + item.id]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-2\"\n (keydown.enter)=\"onDelete(item)\"\n (click)=\"onDelete(item)\">\n <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"View Newsletter\"\n class=\"me-2 me-sm-2\">\n <a [routerLink]=\"[routers.newsletterItemView + 'info', item.id]\" target=\"_blank\" aria-label=\"Newsletter Item View\">\n <i class=\"fa fa-eye eye-icon\" aria-hidden=\"true\"></i>\n </a>\n </li>\n <li ngbTooltip=\"Newsletter recipients\"\n class=\"me-2 me-sm-2\"\n [routerLink]=\"[routers.newslettersUserList + item.id]\">\n <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (newslettersItemsTotal === 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 (newslettersItemsTotal !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"newslettersItemsTotal\" />\n }\n</div>\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.NewsletterItem.NewsletterItemsNoDataMessage' | transloco\">\n </pw-no-data>\n </div>\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);--public-btn-radius: 24px}.custom-td{max-width:400px;word-break:break-all}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}.list-action{width:max-content}.info-icon{vertical-align:middle;margin-left:5px}\n"], dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i2.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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$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: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }] }); }
|
|
4789
4793
|
}
|
|
4790
4794
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: NewslettersItemsComponent, decorators: [{
|
|
4791
4795
|
type: Component,
|
|
4792
|
-
args: [{ selector: 'pw-newsletters-items', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Newsletters Items</h2>\n <button *rbacAllow=\"'SubscriptionAdmin || Pages.Role.MarketingManager || Pages.Role.CustomerSuccessManager'\"\n class=\"btn btn-sm btn-outline-primary float-end m-0\"\n (click)=\"navigateToCreateNewsletterItem()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Newsletter Item\n </button>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <div class=\"row\">\n <div class=\"col-4\">\n <p-multiSelect inputId=\"newsletters-items-filter\" [options]=\"newsletters\"\n [(ngModel)]=\"selectedNewsletterIds\"\n (onChange)=\"onNewsletterChange($event)\"\n placeholder='Filter by newsletters'\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-8 d-flex justify-content-end\">\n <div>\n <label for=\"newsletters-items-search\" class=\"visually-hidden\">Search</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=\"newsletters-items-search\"\n name=\"newsletters-items-search\"\n [(ngModel)]=\"searchTextItems\"\n pInputText\n placeholder=\"Search...\"\n data-cy=\"user-search\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </div>\n\n </div>\n <p-table #dt\n [value]=\"newslettersItems\"\n [paginator]=\"newslettersItemsTotal !== 0\"\n [globalFilterFields]=\"['title']\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"newslettersItemsTotal\"\n [lazy]=\"true\"\n (onLazyLoad)=\"onLazyLoadNewsletterItems($event)\"\n [loading]=\"isLoading\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"title\">\n {{ 'Label.Title' | transloco }}\n <p-sortIcon field=\"title\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"body\">\n {{ 'Admin.NewsletterItem.Body' | transloco }}\n <p-sortIcon field=\"body\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"send_until\">\n {{ 'Admin.NewsletterItem.SendUntil' | transloco }}\n <p-sortIcon field=\"send_until\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"is_pushed\">\n {{ 'Admin.NewsletterItem.Pushed' | transloco }}\n <p-sortIcon field=\"is_pushed\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"is_sent\">\n {{ 'Admin.NewsletterItem.Sent' | transloco }}\n <p-sortIcon field=\"is_sent\"></p-sortIcon>\n </th>\n <th class=\"actions-list-four\"\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=\"Title\">\n <a target=\"_blank\" [routerLink]=\"[routers.newsletterItemView + 'info', item.id]\">{{\n item.title\n }}\n </a>\n @if (item?.location) {\n <i class=\"far fa-info-circle info-icon text-muted\"\n [ngbTooltip]=\"item?.location\"></i>\n }\n </td>\n <td data-head=\"Body\"\n class=\"custom-td\">\n {{ item.body | removeHtml: 'quill' | textTruncate: 200 }}\n </td>\n <td data-head=\"Send Until\">\n <span [ngClass]=\"getSendUntilColor(item?.send_until)\">{{\n item.send_until | dateFormat\n }}</span>\n </td>\n <td data-head=\"Is Pushed\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_pushed }\"\n color=\"success-danger\"\n class=\"badge\">{{ item?.is_pushed }}</span>\n </td>\n <td data-head=\"Is Sent\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_sent }\"\n color=\"success-danger\"\n class=\"badge\">{{ item?.is_sent }}</span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Send test email\"\n class=\"me-2 me-sm-2\">\n <i\n class=\"fa fa-comment-alt cta1-icon\"\n (click)=\"sendTestEmail(item)\"\n (keydown.enter)=\"sendTestEmail(item)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-2\"\n [routerLink]=\"[routers.newsletterItemDetails + item.id]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-2\"\n (keydown.enter)=\"onDelete(item)\"\n (click)=\"onDelete(item)\">\n <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"View Newsletter\"\n class=\"me-2 me-sm-2\">\n <a [routerLink]=\"[routers.newsletterItemView + 'info', item.id]\" target=\"_blank\" aria-label=\"Newsletter Item View\">\n <i class=\"fa fa-eye eye-icon\" aria-hidden=\"true\"></i>\n </a>\n </li>\n <li ngbTooltip=\"Newsletter recipients\"\n class=\"me-2 me-sm-2\"\n [routerLink]=\"[routers.newslettersUserList + item.id]\">\n <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (newslettersItemsTotal === 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 (newslettersItemsTotal !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"newslettersItemsTotal\" />\n }\n</div>\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.NewsletterItem.NewsletterItemsNoDataMessage' | transloco\">\n </pw-no-data>\n </div>\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);--public-btn-radius: 24px}.custom-td{max-width:400px;word-break:break-all}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}.list-action{width:max-content}.info-icon{vertical-align:middle;margin-left:5px}\n"] }]
|
|
4796
|
+
args: [{ selector: 'pw-newsletters-items', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Newsletters Items</h2>\n <button *rbacAllow=\"'SubscriptionAdmin || Pages.Role.MarketingManager || Pages.Role.CustomerSuccessManager'\"\n class=\"btn btn-sm btn-outline-primary float-end m-0\"\n (click)=\"navigateToCreateNewsletterItem()\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Newsletter Item\n </button>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <div class=\"row\">\n <div class=\"col-4\">\n <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"newsletters-items-filter\" [options]=\"newsletters\"\n [(ngModel)]=\"selectedNewsletterIds\"\n (onChange)=\"onNewsletterChange($event)\"\n placeholder='Filter by newsletters'\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"col-8 d-flex justify-content-end\">\n <div>\n <label for=\"newsletters-items-search\" class=\"visually-hidden\">Search</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=\"newsletters-items-search\"\n name=\"newsletters-items-search\"\n [(ngModel)]=\"searchTextItems\"\n pInputText\n placeholder=\"Search...\"\n data-cy=\"user-search\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\" />\n </p-iconfield>\n </div>\n </div>\n\n </div>\n <p-table #dt\n [value]=\"newslettersItems\"\n [paginator]=\"newslettersItemsTotal !== 0\"\n [globalFilterFields]=\"['title']\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"newslettersItemsTotal\"\n [lazy]=\"true\"\n (onLazyLoad)=\"onLazyLoadNewsletterItems($event)\"\n [loading]=\"isLoading\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"title\">\n {{ 'Label.Title' | transloco }}\n <p-sortIcon field=\"title\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"body\">\n {{ 'Admin.NewsletterItem.Body' | transloco }}\n <p-sortIcon field=\"body\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"send_until\">\n {{ 'Admin.NewsletterItem.SendUntil' | transloco }}\n <p-sortIcon field=\"send_until\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"is_pushed\">\n {{ 'Admin.NewsletterItem.Pushed' | transloco }}\n <p-sortIcon field=\"is_pushed\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"is_sent\">\n {{ 'Admin.NewsletterItem.Sent' | transloco }}\n <p-sortIcon field=\"is_sent\"></p-sortIcon>\n </th>\n <th class=\"actions-list-four\"\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=\"Title\">\n <a target=\"_blank\" [routerLink]=\"[routers.newsletterItemView + 'info', item.id]\">{{\n item.title\n }}\n </a>\n @if (item?.location) {\n <i class=\"far fa-info-circle info-icon text-muted\"\n [ngbTooltip]=\"item?.location\"></i>\n }\n </td>\n <td data-head=\"Body\"\n class=\"custom-td\">\n {{ item.body | removeHtml: 'quill' | textTruncate: 200 }}\n </td>\n <td data-head=\"Send Until\">\n <span [ngClass]=\"getSendUntilColor(item?.send_until)\">{{\n item.send_until | dateFormat\n }}</span>\n </td>\n <td data-head=\"Is Pushed\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_pushed }\"\n color=\"success-danger\"\n class=\"badge\">{{ item?.is_pushed }}</span>\n </td>\n <td data-head=\"Is Sent\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.is_sent }\"\n color=\"success-danger\"\n class=\"badge\">{{ item?.is_sent }}</span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Send test email\"\n class=\"me-2 me-sm-2\">\n <i\n class=\"fa fa-comment-alt cta1-icon\"\n (click)=\"sendTestEmail(item)\"\n (keydown.enter)=\"sendTestEmail(item)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n <li ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-2\"\n [routerLink]=\"[routers.newsletterItemDetails + item.id]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\"\n class=\"me-2 me-sm-2\"\n (keydown.enter)=\"onDelete(item)\"\n (click)=\"onDelete(item)\">\n <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"View Newsletter\"\n class=\"me-2 me-sm-2\">\n <a [routerLink]=\"[routers.newsletterItemView + 'info', item.id]\" target=\"_blank\" aria-label=\"Newsletter Item View\">\n <i class=\"fa fa-eye eye-icon\" aria-hidden=\"true\"></i>\n </a>\n </li>\n <li ngbTooltip=\"Newsletter recipients\"\n class=\"me-2 me-sm-2\"\n [routerLink]=\"[routers.newslettersUserList + item.id]\">\n <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (newslettersItemsTotal === 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 (newslettersItemsTotal !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"newslettersItemsTotal\" />\n }\n</div>\n@if (totalRecordsUnFiltered === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.NewsletterItem.NewsletterItemsNoDataMessage' | transloco\">\n </pw-no-data>\n </div>\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);--public-btn-radius: 24px}.custom-td{max-width:400px;word-break:break-all}.eye-icon{color:var(--first);font-size:18px;padding-left:3px;padding-right:3px}.list-action{width:max-content}.info-icon{vertical-align:middle;margin-left:5px}\n"] }]
|
|
4793
4797
|
}], ctorParameters: () => [{ type: i1.AdminService }, { type: i1$1.AuthService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i3$1.ConfirmDialogService }] });
|
|
4794
4798
|
|
|
4795
4799
|
class NewsLetterItemViewComponent extends AppBaseComponent {
|
|
@@ -4961,6 +4965,182 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
4961
4965
|
args: [{ selector: 'pw-newsletter', template: `<pw-tabs [items]="items"></pw-tabs>`, standalone: false, styles: [".text-truncate{max-width:150px}.card-body{min-height:65vh}\n"] }]
|
|
4962
4966
|
}], ctorParameters: () => [{ type: i0.Injector }] });
|
|
4963
4967
|
|
|
4968
|
+
class OauthClientsComponent extends AppBaseComponent {
|
|
4969
|
+
constructor(oauthClientService, injector, cdr, confirmDialog) {
|
|
4970
|
+
super(injector);
|
|
4971
|
+
this.oauthClientService = oauthClientService;
|
|
4972
|
+
this.cdr = cdr;
|
|
4973
|
+
this.confirmDialog = confirmDialog;
|
|
4974
|
+
this.clients = [];
|
|
4975
|
+
this.loading = true;
|
|
4976
|
+
this.isLoaded = false;
|
|
4977
|
+
this.routers = ROUTERS;
|
|
4978
|
+
}
|
|
4979
|
+
ngOnInit() {
|
|
4980
|
+
this.loadClients();
|
|
4981
|
+
}
|
|
4982
|
+
loadClients() {
|
|
4983
|
+
this.isLoaded = false;
|
|
4984
|
+
this.loading = true;
|
|
4985
|
+
this.oauthClientService
|
|
4986
|
+
.getAll()
|
|
4987
|
+
.subscribe((response) => {
|
|
4988
|
+
this.clients = response?.mcp_oauth_clients ?? [];
|
|
4989
|
+
})
|
|
4990
|
+
.add(() => {
|
|
4991
|
+
this.loading = false;
|
|
4992
|
+
this.isLoaded = true;
|
|
4993
|
+
this.cdr.markForCheck();
|
|
4994
|
+
});
|
|
4995
|
+
}
|
|
4996
|
+
onDelete(client) {
|
|
4997
|
+
this.confirmDialog
|
|
4998
|
+
.confirmDelete({
|
|
4999
|
+
textKey: 'Common.Confirm.Delete.Text',
|
|
5000
|
+
textParams: { name: client?.name }
|
|
5001
|
+
})
|
|
5002
|
+
.then(ok => {
|
|
5003
|
+
if (!ok) {
|
|
5004
|
+
return;
|
|
5005
|
+
}
|
|
5006
|
+
this.oauthClientService.delete(client.id).subscribe(() => {
|
|
5007
|
+
this.toast.success(this.translation.translate('Admin.OauthClients.DeletedMessage'));
|
|
5008
|
+
this.loadClients();
|
|
5009
|
+
});
|
|
5010
|
+
});
|
|
5011
|
+
}
|
|
5012
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: OauthClientsComponent, deps: [{ token: i1.McpOauthClientService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i3$1.ConfirmDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5013
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: OauthClientsComponent, isStandalone: false, selector: "pw-oauth-clients", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">{{ 'Admin.OauthClients.Title' | transloco }}</h2>\n <button class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-oauth-client\"\n [routerLink]=\"[routers.adminOauthClientsDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Admin.OauthClients.Add' | transloco }}\n </button>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n </div>\n}\n@if (isLoaded) {\n @if (clients.length > 0) {\n <div class=\"primeng-datatable-container mt table-responsive\">\n <p-table [value]=\"clients\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"col\">{{ 'Admin.OauthClients.Platform' | transloco }}</th>\n <th scope=\"col\">{{ 'Admin.OauthClients.ClientId' | transloco }}</th>\n <th scope=\"col\">{{ 'Admin.OauthClients.ClientSecret' | transloco }}</th>\n <th scope=\"col\">{{ 'Admin.OauthClients.RedirectUris' | transloco }}</th>\n <th scope=\"col\">{{ 'Admin.OauthClients.Scopes' | transloco }}</th>\n <th scope=\"col\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-client>\n <tr>\n <td data-head=\"Platform\">{{ client.name }}</td>\n <td data-head=\"Client ID\">{{ client.client_id }}</td>\n <td data-head=\"Client Secret\">{{ client.client_secret_masked }}</td>\n <td data-head=\"Redirect URIs\">{{ client.redirect_uris }}</td>\n <td data-head=\"Scopes\">{{ client.scopes }}</td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li [ngbTooltip]=\"'Admin.OauthClients.Edit' | transloco\"\n class=\"me-2 me-sm-3\"\n data-cy=\"edit-oauth-client\"\n [routerLink]=\"[routers.adminOauthClientsDetails + 'edit/' + client.id]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li [ngbTooltip]=\"'Admin.OauthClients.Delete' | transloco\" class=\"me-2 me-sm-3\">\n <i (click)=\"onDelete(client)\"\n (keydown.enter)=\"onDelete(client)\"\n (keydown.space)=\"onDelete(client)\"\n class=\"fa fa-trash delete-icon\"\n aria-hidden=\"true\"></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n </div>\n } @else {\n <pw-no-data [withImage]=\"true\"\n [message]=\"'Admin.OauthClients.NoDataMessage' | transloco\"></pw-no-data>\n }\n}\n", dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
5014
|
+
}
|
|
5015
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: OauthClientsComponent, decorators: [{
|
|
5016
|
+
type: Component,
|
|
5017
|
+
args: [{ selector: 'pw-oauth-clients', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">{{ 'Admin.OauthClients.Title' | transloco }}</h2>\n <button class=\"btn btn-sm btn-outline-primary float-end\"\n data-cy=\"add-oauth-client\"\n [routerLink]=\"[routers.adminOauthClientsDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{ 'Admin.OauthClients.Add' | transloco }}\n </button>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"></p-progressSpinner>\n </div>\n}\n@if (isLoaded) {\n @if (clients.length > 0) {\n <div class=\"primeng-datatable-container mt table-responsive\">\n <p-table [value]=\"clients\">\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"col\">{{ 'Admin.OauthClients.Platform' | transloco }}</th>\n <th scope=\"col\">{{ 'Admin.OauthClients.ClientId' | transloco }}</th>\n <th scope=\"col\">{{ 'Admin.OauthClients.ClientSecret' | transloco }}</th>\n <th scope=\"col\">{{ 'Admin.OauthClients.RedirectUris' | transloco }}</th>\n <th scope=\"col\">{{ 'Admin.OauthClients.Scopes' | transloco }}</th>\n <th scope=\"col\" class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\" let-client>\n <tr>\n <td data-head=\"Platform\">{{ client.name }}</td>\n <td data-head=\"Client ID\">{{ client.client_id }}</td>\n <td data-head=\"Client Secret\">{{ client.client_secret_masked }}</td>\n <td data-head=\"Redirect URIs\">{{ client.redirect_uris }}</td>\n <td data-head=\"Scopes\">{{ client.scopes }}</td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li [ngbTooltip]=\"'Admin.OauthClients.Edit' | transloco\"\n class=\"me-2 me-sm-3\"\n data-cy=\"edit-oauth-client\"\n [routerLink]=\"[routers.adminOauthClientsDetails + 'edit/' + client.id]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li [ngbTooltip]=\"'Admin.OauthClients.Delete' | transloco\" class=\"me-2 me-sm-3\">\n <i (click)=\"onDelete(client)\"\n (keydown.enter)=\"onDelete(client)\"\n (keydown.space)=\"onDelete(client)\"\n class=\"fa fa-trash delete-icon\"\n aria-hidden=\"true\"></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n </div>\n } @else {\n <pw-no-data [withImage]=\"true\"\n [message]=\"'Admin.OauthClients.NoDataMessage' | transloco\"></pw-no-data>\n }\n}\n" }]
|
|
5018
|
+
}], ctorParameters: () => [{ type: i1.McpOauthClientService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i3$1.ConfirmDialogService }] });
|
|
5019
|
+
|
|
5020
|
+
class OauthClientsDetailsComponent extends AppBaseComponent {
|
|
5021
|
+
constructor(fb, oauthClientService, injector, cdr) {
|
|
5022
|
+
super(injector);
|
|
5023
|
+
this.fb = fb;
|
|
5024
|
+
this.oauthClientService = oauthClientService;
|
|
5025
|
+
this.cdr = cdr;
|
|
5026
|
+
this.submitting = false;
|
|
5027
|
+
/** Set in edit mode — the record being edited. null while creating. */
|
|
5028
|
+
this.editId = null;
|
|
5029
|
+
/** Gates the form in edit mode until the client is fetched (AI54). */
|
|
5030
|
+
this.loading = false;
|
|
5031
|
+
/** Set once the client is created — the secret is shown ONCE here, never re-fetchable. */
|
|
5032
|
+
this.createdClient = null;
|
|
5033
|
+
this.routers = ROUTERS;
|
|
5034
|
+
this.form = this.fb.group({
|
|
5035
|
+
name: ['', Validators.required],
|
|
5036
|
+
redirect_uris: ['', Validators.required],
|
|
5037
|
+
scopes: ['mcp:read,mcp:write'],
|
|
5038
|
+
client_id: ['']
|
|
5039
|
+
});
|
|
5040
|
+
}
|
|
5041
|
+
ngOnInit() {
|
|
5042
|
+
const id = this.route.snapshot.paramMap.get('id');
|
|
5043
|
+
if (id) {
|
|
5044
|
+
this.editId = Number(id);
|
|
5045
|
+
this.loadClient(this.editId);
|
|
5046
|
+
}
|
|
5047
|
+
}
|
|
5048
|
+
/** In edit mode the client_id is immutable and is not part of the editable form. */
|
|
5049
|
+
loadClient(id) {
|
|
5050
|
+
this.loading = true;
|
|
5051
|
+
this.oauthClientService
|
|
5052
|
+
.getAll()
|
|
5053
|
+
.subscribe((response) => {
|
|
5054
|
+
const client = (response?.mcp_oauth_clients ?? []).find(c => c.id === id);
|
|
5055
|
+
if (!client) {
|
|
5056
|
+
this.toast.error(this.translation.translate('Admin.OauthClients.NotFound'));
|
|
5057
|
+
this.backToList();
|
|
5058
|
+
return;
|
|
5059
|
+
}
|
|
5060
|
+
this.form.patchValue({
|
|
5061
|
+
name: client.name,
|
|
5062
|
+
redirect_uris: client.redirect_uris,
|
|
5063
|
+
scopes: client.scopes
|
|
5064
|
+
});
|
|
5065
|
+
})
|
|
5066
|
+
.add(() => {
|
|
5067
|
+
this.loading = false;
|
|
5068
|
+
this.cdr.markForCheck();
|
|
5069
|
+
});
|
|
5070
|
+
}
|
|
5071
|
+
onSubmit() {
|
|
5072
|
+
if (this.form.invalid) {
|
|
5073
|
+
this.form.markAllAsTouched();
|
|
5074
|
+
return;
|
|
5075
|
+
}
|
|
5076
|
+
this.editId === null ? this.createClient() : this.updateClient(this.editId);
|
|
5077
|
+
}
|
|
5078
|
+
createClient() {
|
|
5079
|
+
this.submitting = true;
|
|
5080
|
+
this.oauthClientService
|
|
5081
|
+
.create(this.form.value)
|
|
5082
|
+
.subscribe((res) => {
|
|
5083
|
+
this.createdClient = res?.data ?? null;
|
|
5084
|
+
this.toast.success(this.translation.translate('Admin.OauthClients.CreatedMessage'));
|
|
5085
|
+
})
|
|
5086
|
+
.add(() => {
|
|
5087
|
+
this.submitting = false;
|
|
5088
|
+
this.cdr.markForCheck();
|
|
5089
|
+
});
|
|
5090
|
+
}
|
|
5091
|
+
updateClient(id) {
|
|
5092
|
+
this.submitting = true;
|
|
5093
|
+
const { name, redirect_uris, scopes } = this.form.value;
|
|
5094
|
+
this.oauthClientService
|
|
5095
|
+
.update(id, { name, redirect_uris, scopes })
|
|
5096
|
+
.subscribe(() => {
|
|
5097
|
+
this.toast.success(this.translation.translate('Admin.OauthClients.UpdatedMessage'));
|
|
5098
|
+
this.backToList();
|
|
5099
|
+
})
|
|
5100
|
+
.add(() => {
|
|
5101
|
+
this.submitting = false;
|
|
5102
|
+
this.cdr.markForCheck();
|
|
5103
|
+
});
|
|
5104
|
+
}
|
|
5105
|
+
copy(value) {
|
|
5106
|
+
navigator.clipboard?.writeText(value).then(() => {
|
|
5107
|
+
this.toast.success(this.translation.translate('Admin.OauthClients.Copied'));
|
|
5108
|
+
});
|
|
5109
|
+
}
|
|
5110
|
+
backToList() {
|
|
5111
|
+
this.router.navigate([this.routers.adminOauthClients]);
|
|
5112
|
+
}
|
|
5113
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: OauthClientsDetailsComponent, deps: [{ token: i9.FormBuilder }, { token: i1.McpOauthClientService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5114
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: OauthClientsDetailsComponent, isStandalone: false, selector: "pw-oauth-clients-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a [routerLink]=\"[routers.adminOauthClients]\" class=\"previous\" aria-label=\"Back to MCP OAuth Clients list\">\n <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i>\n </a>\n <h3 class=\"mt-3\">\n {{ (editId ? 'Admin.OauthClients.EditTitle' : 'Admin.OauthClients.AddTitle') | transloco }}\n </h3>\n </div>\n\n <pw-loader [isVisible]=\"loading\"></pw-loader>\n\n <div class=\"p-2 mt-3\">\n @if (!createdClient && !loading) {\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n <div class=\"row\">\n <div class=\"col-lg-6 mb-3\">\n <label for=\"oc-name\" class=\"form-label\">\n {{ 'Admin.OauthClients.Platform' | transloco }}\n <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.OauthClients.Tooltip.Platform' | transloco\" tooltipPosition=\"top\">\n <i class=\"far fa-info-circle text-muted\" aria-hidden=\"true\"></i>\n </span>\n </label>\n <input id=\"oc-name\" type=\"text\" class=\"form-control\" formControlName=\"name\" pInputText\n [placeholder]=\"'Admin.OauthClients.PlatformPlaceholder' | transloco\" />\n </div>\n <div class=\"col-lg-6 mb-3\">\n <label for=\"oc-redirect\" class=\"form-label\">\n {{ 'Admin.OauthClients.RedirectUris' | transloco }}\n <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.OauthClients.Tooltip.RedirectUris' | transloco\" tooltipPosition=\"top\">\n <i class=\"far fa-info-circle text-muted\" aria-hidden=\"true\"></i>\n </span>\n </label>\n <input id=\"oc-redirect\" type=\"text\" class=\"form-control\" formControlName=\"redirect_uris\" pInputText\n [placeholder]=\"'Admin.OauthClients.RedirectUrisPlaceholder' | transloco\" />\n </div>\n <div class=\"col-lg-6 mb-3\">\n <label for=\"oc-scopes\" class=\"form-label\">\n {{ 'Admin.OauthClients.Scopes' | transloco }}\n <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.OauthClients.Tooltip.Scopes' | transloco\" tooltipPosition=\"top\">\n <i class=\"far fa-info-circle text-muted\" aria-hidden=\"true\"></i>\n </span>\n </label>\n <input id=\"oc-scopes\" type=\"text\" class=\"form-control\" formControlName=\"scopes\" pInputText />\n </div>\n @if (!editId) {\n <div class=\"col-lg-6 mb-3\">\n <label for=\"oc-client-id\" class=\"form-label\">\n {{ 'Admin.OauthClients.ClientIdOptional' | transloco }}\n <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.OauthClients.Tooltip.ClientId' | transloco\" tooltipPosition=\"top\">\n <i class=\"far fa-info-circle text-muted\" aria-hidden=\"true\"></i>\n </span>\n </label>\n <input id=\"oc-client-id\" type=\"text\" class=\"form-control\" formControlName=\"client_id\" pInputText\n [placeholder]=\"'Admin.OauthClients.ClientIdPlaceholder' | transloco\" />\n </div>\n }\n </div>\n <div class=\"row\">\n <div class=\"col-12 mt-2\">\n <div class=\"mb-3 text-end\">\n <button type=\"button\" class=\"btn btn-outline-secondary me-2\" (click)=\"backToList()\">\n {{ 'Admin.OauthClients.Cancel' | transloco }}\n </button>\n <button type=\"submit\" class=\"btn btn-primary\" [disabled]=\"submitting\">\n {{ (editId ? 'Admin.OauthClients.Save' : 'Admin.OauthClients.Create') | transloco }}\n </button>\n </div>\n </div>\n </div>\n </form>\n } @else if (createdClient) {\n <div class=\"alert alert-warning\" role=\"alert\">\n {{ 'Admin.OauthClients.SecretOnceWarning' | transloco }}\n </div>\n <div class=\"row\">\n <div class=\"col-lg-6 mb-3\">\n <label class=\"form-label\">{{ 'Admin.OauthClients.ClientId' | transloco }}</label>\n <div class=\"input-group\">\n <input type=\"text\" class=\"form-control\" [value]=\"createdClient.client_id\" readonly />\n <button type=\"button\" class=\"btn btn-outline-primary\" (click)=\"copy(createdClient.client_id)\">\n <i class=\"fa fa-copy\" aria-hidden=\"true\"></i> {{ 'Admin.OauthClients.Copy' | transloco }}\n </button>\n </div>\n </div>\n <div class=\"col-lg-6 mb-3\">\n <label class=\"form-label\">{{ 'Admin.OauthClients.ClientSecret' | transloco }}</label>\n <div class=\"input-group\">\n <input type=\"text\" class=\"form-control\" [value]=\"createdClient.client_secret\" readonly />\n <button type=\"button\" class=\"btn btn-outline-primary\" (click)=\"copy(createdClient.client_secret)\">\n <i class=\"fa fa-copy\" aria-hidden=\"true\"></i> {{ 'Admin.OauthClients.Copy' | transloco }}\n </button>\n </div>\n </div>\n </div>\n <div class=\"text-end\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"backToList()\">\n {{ 'Admin.OauthClients.Done' | transloco }}\n </button>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n", dependencies: [{ 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: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i5$2.AppLoaderComponent, selector: "pw-loader", inputs: ["isVisible", "closeOnOutsideClick", "autoCloseTimeOut"] }, { 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: 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: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
5115
|
+
}
|
|
5116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: OauthClientsDetailsComponent, decorators: [{
|
|
5117
|
+
type: Component,
|
|
5118
|
+
args: [{ selector: 'pw-oauth-clients-details', standalone: false, template: "<div class=\"container-fluid pw-tab\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a [routerLink]=\"[routers.adminOauthClients]\" class=\"previous\" aria-label=\"Back to MCP OAuth Clients list\">\n <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i>\n </a>\n <h3 class=\"mt-3\">\n {{ (editId ? 'Admin.OauthClients.EditTitle' : 'Admin.OauthClients.AddTitle') | transloco }}\n </h3>\n </div>\n\n <pw-loader [isVisible]=\"loading\"></pw-loader>\n\n <div class=\"p-2 mt-3\">\n @if (!createdClient && !loading) {\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n <div class=\"row\">\n <div class=\"col-lg-6 mb-3\">\n <label for=\"oc-name\" class=\"form-label\">\n {{ 'Admin.OauthClients.Platform' | transloco }}\n <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.OauthClients.Tooltip.Platform' | transloco\" tooltipPosition=\"top\">\n <i class=\"far fa-info-circle text-muted\" aria-hidden=\"true\"></i>\n </span>\n </label>\n <input id=\"oc-name\" type=\"text\" class=\"form-control\" formControlName=\"name\" pInputText\n [placeholder]=\"'Admin.OauthClients.PlatformPlaceholder' | transloco\" />\n </div>\n <div class=\"col-lg-6 mb-3\">\n <label for=\"oc-redirect\" class=\"form-label\">\n {{ 'Admin.OauthClients.RedirectUris' | transloco }}\n <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.OauthClients.Tooltip.RedirectUris' | transloco\" tooltipPosition=\"top\">\n <i class=\"far fa-info-circle text-muted\" aria-hidden=\"true\"></i>\n </span>\n </label>\n <input id=\"oc-redirect\" type=\"text\" class=\"form-control\" formControlName=\"redirect_uris\" pInputText\n [placeholder]=\"'Admin.OauthClients.RedirectUrisPlaceholder' | transloco\" />\n </div>\n <div class=\"col-lg-6 mb-3\">\n <label for=\"oc-scopes\" class=\"form-label\">\n {{ 'Admin.OauthClients.Scopes' | transloco }}\n <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.OauthClients.Tooltip.Scopes' | transloco\" tooltipPosition=\"top\">\n <i class=\"far fa-info-circle text-muted\" aria-hidden=\"true\"></i>\n </span>\n </label>\n <input id=\"oc-scopes\" type=\"text\" class=\"form-control\" formControlName=\"scopes\" pInputText />\n </div>\n @if (!editId) {\n <div class=\"col-lg-6 mb-3\">\n <label for=\"oc-client-id\" class=\"form-label\">\n {{ 'Admin.OauthClients.ClientIdOptional' | transloco }}\n <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.OauthClients.Tooltip.ClientId' | transloco\" tooltipPosition=\"top\">\n <i class=\"far fa-info-circle text-muted\" aria-hidden=\"true\"></i>\n </span>\n </label>\n <input id=\"oc-client-id\" type=\"text\" class=\"form-control\" formControlName=\"client_id\" pInputText\n [placeholder]=\"'Admin.OauthClients.ClientIdPlaceholder' | transloco\" />\n </div>\n }\n </div>\n <div class=\"row\">\n <div class=\"col-12 mt-2\">\n <div class=\"mb-3 text-end\">\n <button type=\"button\" class=\"btn btn-outline-secondary me-2\" (click)=\"backToList()\">\n {{ 'Admin.OauthClients.Cancel' | transloco }}\n </button>\n <button type=\"submit\" class=\"btn btn-primary\" [disabled]=\"submitting\">\n {{ (editId ? 'Admin.OauthClients.Save' : 'Admin.OauthClients.Create') | transloco }}\n </button>\n </div>\n </div>\n </div>\n </form>\n } @else if (createdClient) {\n <div class=\"alert alert-warning\" role=\"alert\">\n {{ 'Admin.OauthClients.SecretOnceWarning' | transloco }}\n </div>\n <div class=\"row\">\n <div class=\"col-lg-6 mb-3\">\n <label class=\"form-label\">{{ 'Admin.OauthClients.ClientId' | transloco }}</label>\n <div class=\"input-group\">\n <input type=\"text\" class=\"form-control\" [value]=\"createdClient.client_id\" readonly />\n <button type=\"button\" class=\"btn btn-outline-primary\" (click)=\"copy(createdClient.client_id)\">\n <i class=\"fa fa-copy\" aria-hidden=\"true\"></i> {{ 'Admin.OauthClients.Copy' | transloco }}\n </button>\n </div>\n </div>\n <div class=\"col-lg-6 mb-3\">\n <label class=\"form-label\">{{ 'Admin.OauthClients.ClientSecret' | transloco }}</label>\n <div class=\"input-group\">\n <input type=\"text\" class=\"form-control\" [value]=\"createdClient.client_secret\" readonly />\n <button type=\"button\" class=\"btn btn-outline-primary\" (click)=\"copy(createdClient.client_secret)\">\n <i class=\"fa fa-copy\" aria-hidden=\"true\"></i> {{ 'Admin.OauthClients.Copy' | transloco }}\n </button>\n </div>\n </div>\n </div>\n <div class=\"text-end\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"backToList()\">\n {{ 'Admin.OauthClients.Done' | transloco }}\n </button>\n </div>\n }\n </div>\n </div>\n </div>\n</div>\n" }]
|
|
5119
|
+
}], ctorParameters: () => [{ type: i9.FormBuilder }, { type: i1.McpOauthClientService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
|
|
5120
|
+
|
|
5121
|
+
class OauthClientsTabsComponent {
|
|
5122
|
+
constructor() {
|
|
5123
|
+
this.items = [
|
|
5124
|
+
{
|
|
5125
|
+
id: 'oauth-clients',
|
|
5126
|
+
label: 'MCP OAuth Clients',
|
|
5127
|
+
icon: 'fas fa-robot',
|
|
5128
|
+
routerLink: ['/admin/oauth-clients/list']
|
|
5129
|
+
}
|
|
5130
|
+
];
|
|
5131
|
+
}
|
|
5132
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: OauthClientsTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5133
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", type: OauthClientsTabsComponent, isStandalone: false, selector: "pw-oauth-clients-tabs", ngImport: i0, template: `<pw-tabs [items]="items"></pw-tabs>`, isInline: true, dependencies: [{ kind: "component", type: i3$1.PwTabsComponent, selector: "pw-tabs", inputs: ["items", "withSubscription"] }] }); }
|
|
5134
|
+
}
|
|
5135
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: OauthClientsTabsComponent, decorators: [{
|
|
5136
|
+
type: Component,
|
|
5137
|
+
args: [{
|
|
5138
|
+
selector: 'pw-oauth-clients-tabs',
|
|
5139
|
+
template: `<pw-tabs [items]="items"></pw-tabs>`,
|
|
5140
|
+
standalone: false
|
|
5141
|
+
}]
|
|
5142
|
+
}] });
|
|
5143
|
+
|
|
4964
5144
|
class PermissionsDetailsComponent extends AppBaseComponent {
|
|
4965
5145
|
constructor(adminService, injector, cdr) {
|
|
4966
5146
|
super(injector);
|
|
@@ -5727,7 +5907,7 @@ class ProductDetailsComponent extends AppBaseComponent {
|
|
|
5727
5907
|
super.ngOnDestroy();
|
|
5728
5908
|
}
|
|
5729
5909
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ProductDetailsComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1$1.ProductService }, { token: i2.NgbModal }, { token: i1.AdminService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5730
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: ProductDetailsComponent, isStandalone: false, selector: "pw-product-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab product-form 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\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n aria-hidden=\"true\"></i></a>\n <h3 class=\"\">Product: {{ data?.name ? data?.name : 'Add New' }}</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 @if (!isLoading) {\n <div class=\"my-4\">\n <div class=\"mb-5\">\n <p-accordion class=\"pw-accordion-info\">\n <p-accordion-panel value=\"0\">\n <p-accordion-header>\n <i class=\"far fa-circle-info me-2 text-muted\"></i> How to configure a product\n </p-accordion-header>\n <p-accordion-content>\n <div class=\"row g-4 product-howto\">\n <div class=\"col-12 col-lg-7\">\n <h6 class=\"howto-title\">Product / feature binding</h6>\n <dl class=\"howto-defs\">\n <dt><code>category</code></dt>\n <dd>The product type \u2014 e.g. <code>seat_pricing</code> or <code>item_pricing</code>.</dd>\n <dt><code>feature_key</code></dt>\n <dd>Describes the main feature.</dd>\n <dt><code>permission_key</code></dt>\n <dd>A user can be subscribed to only one product per <code>permission_key</code>.</dd>\n <dt><code>product_key</code></dt>\n <dd>Unique per product; drives the frontend permission binding.</dd>\n </dl>\n <p class=\"howto-note\">\n Resulting permission key:\n <code>{{ 'Pages.Product.{permission_key}.{product_key}' }}</code>.\n For a feature tied to an existing product, set its <strong>dependency product</strong> accordingly.\n </p>\n </div>\n <div class=\"col-12 col-lg-5\">\n <h6 class=\"howto-title\">Setting up a free product</h6>\n <ul class=\"howto-list\">\n <li>Leave <code>Stripe Plan</code> empty.</li>\n <li>Set <code>Price per unit</code> to <code>0</code>.</li>\n <li>Set <code>Trial days</code> to a large value (e.g. <code>99999</code>).</li>\n <li>Turn <code>Visible</code> off.</li>\n </ul>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </p-accordion>\n </div>\n </div>\n <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n <h3>{{ 'Admin.Products.Section.Identity' | transloco }}</h3>\n @if (id) {\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"text-start mt-3\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.FullLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span>\n </h4>\n @if (fullLogo && !fullLogo.includes('no_image_uploaded') && !fullLogoBroken) {\n <img [src]=\"fullLogo\" alt=\"Demo Logo\" class=\"image full-logo\"\n role=\"presentation\" (error)=\"fullLogoBroken = true\" />\n <div class=\"overlay mt-2\" (click)=\"openModal(content)\" (keydown.enter)=\"openModal(content)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n } @else {\n <div class=\"logo-dropzone full-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload full logo\" (keydown.enter)=\"openModal(content)\" (click)=\"openModal(content)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a logo</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n </div>\n <div class=\"col-md-6\">\n <div class=\"text-start mt-3\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.SquaredLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span>\n </h4>\n @if (squaredLogo && !squaredLogo.includes('no_image_uploaded') && !squaredLogoBroken) {\n <img [src]=\"squaredLogo\" alt=\"Company Logo\" class=\"squared_logo\"\n role=\"presentation\" (error)=\"squaredLogoBroken = true\" />\n <div class=\"overlay mt-2\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n } @else {\n <div class=\"logo-dropzone squared-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload squared logo\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a logo</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n }\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Name' | transloco\"\n [label]=\"'Label.Name' | transloco\" name=\"name\" controlId=\"product-name\"\n [isLeftTooltip]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-name\" class=\"form-control\" formControlName=\"name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.NickName' | transloco\"\n [label]=\"'Admin.Products.NickName' | transloco\" name=\"nickname\" controlId=\"product-nickname\"\n [errorMsg]=\"'Admin.Products.Validation.NickName' | transloco\">\n <input type=\"text\" id=\"product-nickname\" class=\"form-control\" formControlName=\"nickname\"\n [ngClass]=\"{ 'is-invalid': submitted && f['nickname'].errors }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.DocumentationUrl' | transloco\"\n [label]=\"'Admin.Products.DocumentationUrl' | transloco\" name=\"documentation_url\" controlId=\"product-documentation_url\">\n <input type=\"text\" id=\"product-documentation_url\" class=\"form-control\" formControlName=\"documentation_url\"\n [placeholder]=\"'Admin.Products.Placeholder.DocumentationUrl' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['documentation_url'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12\" id=\"descriptionEditor\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n [label]=\"'Admin.Products.Description' | transloco\" name=\"description\" controlId=\"product-description\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n <quill-editor [attr.aria-labelledby]=\"'product-description-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"description\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'quill-container': true}\">\n </quill-editor>\n </pw-input-container>\n </div>\n </div>\n\n <!-- Section: Pricing & Billing -->\n <h3>{{ 'Admin.Products.Section.Pricing' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Price' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Price' | transloco\" name=\"price_per_unit\" controlId=\"product-price_per_unit\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-price_per_unit\" numbersOnly class=\"form-control\" formControlName=\"price_per_unit\"\n [placeholder]=\"'Admin.Products.Placeholder.Price' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['price_per_unit'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n @if (supportedCurrency$ | async; as currency) {\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\" controlId=\"product-currency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-currency-label'\"\n [options]=\"currency['regions']\"\n formControlName=\"currency\"\n [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\"\n [placeholder]=\"'Admin.Products.Placeholder.Currency' | transloco\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n }\n @if (supportedRegions$ | async; as region) {\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Region' | transloco\" name=\"region\" controlId=\"product-region\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-region-label'\"\n [options]=\"region['regions']\"\n formControlName=\"region\"\n [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\"\n [placeholder]=\"'Admin.Products.Placeholder.Region' | transloco\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n }\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.BillingFrequency' | transloco\"\n [label]=\"'Admin.Products.BillingFrequency' | transloco\" name=\"billing_frequency\" controlId=\"product-billing_frequency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.BillingFrequency' | transloco\">\n <p-select inputId=\"product-billing_frequency\"\n [options]=\"frequency\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-billing_frequency-label'\" formControlName=\"billing_frequency\"\n [placeholder]=\"'Admin.Products.Placeholder.BillingFrequency' | transloco\"\n [required]=\"true\" [ngClass]=\"{\n 'is-invalid': submitted && f['billing_frequency'].errors\n }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.MinUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MinUnits' | transloco\" name=\"min_units\" controlId=\"product-min_units\"\n [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n <input type=\"number\" id=\"product-min_units\" min=\"1\" class=\"form-control\" formControlName=\"min_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['min_units'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.MaxUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxUnits' | transloco\" name=\"max_units\" controlId=\"product-max_units\"\n [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n <input type=\"number\" id=\"product-max_units\" min=\"1\" class=\"form-control\" formControlName=\"max_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_units'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.StripePlan' | transloco\"\n [label]=\"'Admin.Products.StripePlan' | transloco\" name=\"stripe_plan_id\" controlId=\"product-stripe_plan_id\">\n <input type=\"text\" id=\"product-stripe_plan_id\" class=\"form-control\" formControlName=\"stripe_plan_id\"\n [placeholder]=\"'Admin.Products.Placeholder.StripePlan' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProrationBehavior' | transloco\"\n [label]=\"'Admin.Products.ProrationBehavior' | transloco\" name=\"proration_behavior\" controlId=\"product-proration_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-proration_behavior-label'\"\n [options]=\"prorationBehaviors\"\n formControlName=\"proration_behavior\"\n [placeholder]=\"'Admin.Products.Placeholder.ProrationBehavior' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.UnsubscribeStripeBehavior' | transloco\"\n [label]=\"'Admin.Products.UnsubscribeStripeBehavior' | transloco\" name=\"unsubscribe_stripe_behavior\" controlId=\"product-unsubscribe_stripe_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-unsubscribe_stripe_behavior-label'\"\n [options]=\"unsubscribeBehaviors\"\n formControlName=\"unsubscribe_stripe_behavior\"\n [placeholder]=\"'Admin.Products.Placeholder.UnsubscribeBehavior' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SecondPaymentRequired' | transloco\"\n [label]=\"'Admin.Products.SecondPaymentRequired' | transloco\" name=\"second_payment_required\" controlId=\"product-second_payment_required\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"second_payment_required\" name=\"second_payment_required\"\n [attr.aria-labelledby]=\"'product-second_payment_required-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['second_payment_required'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <!-- Section: Trial -->\n <h3>{{ 'Admin.Products.Section.Trial' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialDays' | transloco\"\n [label]=\"'Admin.Products.TrialDays' | transloco\" name=\"trial_days\" controlId=\"product-trial_days\"\n [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n <input type=\"number\" id=\"product-trial_days\" min=\"0\" class=\"form-control\" formControlName=\"trial_days\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_days'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxTrialHits' | transloco\"\n [label]=\"'Admin.Products.MaxTrialHits' | transloco\" name=\"max_hits_trial\" controlId=\"product-max_hits_trial\">\n <input type=\"number\" id=\"product-max_hits_trial\" min=\"0\" class=\"form-control\" formControlName=\"max_hits_trial\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_hits_trial'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialHits' | transloco\"\n [label]=\"'Admin.Products.TrialHits' | transloco\" name=\"max_hits\" controlId=\"product-max_hits\">\n <input type=\"number\" id=\"product-max_hits\" min=\"0\" class=\"form-control\" formControlName=\"max_hits\"\n [ngClass]=\"{ 'is-invalid': submitted && f['max_hits'].errors }\" />\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <!-- Section: Feature & Permission Binding -->\n <h3>{{ 'Admin.Products.Section.Binding' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.Category' | transloco\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n name=\"category\" controlId=\"product-category\" [useAriaLabelledbyOnly]=\"true\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n <p-select inputId=\"product-category\"\n [options]=\"categories\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-category-label'\" formControlName=\"category\"\n [placeholder]=\"'Admin.Products.Placeholder.Category' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.FeatureKey' | transloco\"\n [label]=\"'Admin.Products.FeatureKey' | transloco\" name=\"feature_key\" controlId=\"product-feature_key\"\n [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n <input type=\"text\" id=\"product-feature_key\" class=\"form-control\" [ngClass]=\"{\n 'is-invalid': submitted && f['feature_key'].errors\n }\" formControlName=\"feature_key\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n [label]=\"'Admin.Products.PermissionKey' | transloco\" name=\"permission_key\" controlId=\"product-permission_key\"\n [errorMsg]=\"'Admin.Products.Validation.PermissionKey' | transloco\">\n <input type=\"text\" id=\"product-permission_key\" class=\"form-control\" [ngClass]=\"{\n 'is-invalid': submitted && f['permission_key'].errors\n }\" formControlName=\"permission_key\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.ProductKey' | transloco\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n name=\"product_key\" controlId=\"product-product_key\"\n [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n <input type=\"text\" id=\"product-product_key\" class=\"form-control\" formControlName=\"product_key\" [ngClass]=\"{\n 'is-invalid': submitted && f['product_key'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle\" id=\"product-dependency_products-label\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<span\n class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.DependencyProducts' |\n transloco }}</span>\n </span>\n <p-multiSelect inputId=\"product-dependency_products\"\n [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n [placeholder]=\"'Admin.Products.Placeholder.DependencyProducts' | transloco\"\n [attr.aria-labelledby]=\"'product-dependency_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" (onChange)=\"onSearchCriteria($event)\" [showHeader]=\"false\"\n maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle\" id=\"product-roles-label\">{{ 'Admin.Products.AssignedRoles' | transloco }} <span\n class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Subscriptions.Tooltip.AssignedRoles' |\n transloco }}</span>\n </span>\n <p-multiSelect inputId=\"product-roles\" [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"\n [placeholder]=\"'Admin.Products.Placeholder.Roles' | transloco\"\n [attr.aria-labelledby]=\"'product-roles-label'\"></p-multiSelect>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MasterProduct' | transloco\"\n [label]=\"'Admin.Products.MasterProduct' | transloco\" name=\"master_product_id\" controlId=\"product-master_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-master_product_id-label'\"\n [options]=\"productsList\"\n formControlName=\"master_product_id\"\n [placeholder]=\"'Admin.Products.Placeholder.MasterProduct' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsMasterProduct' | transloco\"\n [label]=\"'Admin.Products.IsMasterProduct' | transloco\" name=\"is_master_product\" controlId=\"product-is_master_product\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\"\n [attr.aria-labelledby]=\"'product-is_master_product-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['is_master_product'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MultipleAllowed' | transloco\"\n [label]=\"'Admin.Products.MultipleAllowed' | transloco\" class=\"nowrap\" name=\"multiple_allowed\" controlId=\"product-multiple_allowed\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\"\n [attr.aria-labelledby]=\"'product-multiple_allowed-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['multiple_allowed'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <!-- Section: Onboarding & Signup -->\n <h3>{{ 'Admin.Products.Section.Signup' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12\" id=\"signupInstructionsEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\" controlId=\"product-signup_instructions\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instructions-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" class=\"quillEditor\" [modules]=\"editorConfig\" [ngClass]=\"{\n 'is-invalid': submitted && f['signup_instructions'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12\" id=\"signupEmployeesEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\" controlId=\"product-signup_instruction_employees\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instruction_employees-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" class=\"quillEditor\" [modules]=\"editorConfig\" [ngClass]=\"{\n 'is-invalid': submitted && f['signup_instruction_employees'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n </div>\n\n <!-- Section: Visibility, Support & Compliance -->\n <h3>{{ 'Admin.Products.Section.Visibility' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.IsActive' | transloco\"\n [label]=\"'Admin.Products.IsActive' | transloco\" name=\"active\" controlId=\"product-active\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n [attr.aria-labelledby]=\"'product-active-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsVisible' | transloco\"\n [label]=\"'Admin.Products.IsVisible' | transloco\" name=\"visible\" controlId=\"product-visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n [attr.aria-labelledby]=\"'product-visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MembersVisible' | transloco\"\n [label]=\"'Admin.Products.MembersVisible' | transloco\" name=\"members_visible\" controlId=\"product-members_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\"\n [attr.aria-labelledby]=\"'product-members_visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['members_visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ChatVisible' | transloco\"\n [label]=\"'Admin.Products.ChatVisible' | transloco\" name=\"chat_visible\" controlId=\"product-chat_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\"\n [attr.aria-labelledby]=\"'product-chat_visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['chat_visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\" controlId=\"product-product_privacy_service_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-product_privacy_service_id-label'\"\n [options]=\"allTos\"\n formControlName=\"product_privacy_service_id\"\n [placeholder]=\"'Admin.Products.Placeholder.PrivacyService' | transloco\"\n optionValue=\"id\"\n optionLabel=\"title\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.GitLabServiceDeskEmail' | transloco\"\n [label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" name=\"gitlab_service_desk_email\" controlId=\"product-gitlab_service_desk_email\">\n <input type=\"text\" id=\"product-gitlab_service_desk_email\" class=\"form-control\" formControlName=\"gitlab_service_desk_email\"\n [placeholder]=\"'Admin.Products.Placeholder.GitlabServiceDeskEmail' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PartnerProducts' | transloco\"\n [label]=\"'Admin.Products.PartnerProducts' | transloco\" name=\"partner_products\" controlId=\"product-partner_products\" [useAriaLabelledbyOnly]=\"true\">\n <p-multiSelect inputId=\"product-partner_products\"\n [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n [placeholder]=\"'Admin.Products.Placeholder.PartnerProducts' | transloco\"\n [attr.aria-labelledby]=\"'product-partner_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiSelect>\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' |\n transloco }} </button>\n <button type=\"submit\" [buttonBusy]=\"submitted\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n | transloco }} </button>\n </div>\n </div>\n </form>\n }\n </div>\n </div>\n</div>\n<ng-template #content let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"onImageSelection($event)\" aspectRatio=\"fullLogo\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n<ng-template #squaredLogoContent let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"uploadSquaredLogo($event)\" aspectRatio=\"auto\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n", styles: [".pw-label-style.info-circle{display:inline-block;line-height:1.5}.pw-label-style.info-circle:after{top:-7px}.nowrap{white-space:nowrap}textarea{height:180px}:host .full-logo,:host .squared_logo{background:#f7f8fa;border:1px solid #e2e5ea;border-radius:8px;object-fit:contain;padding:12px}:host .full-logo{height:120px;width:280px}:host .squared_logo{height:150px;width:150px}:host .overlay{cursor:pointer;margin-top:8px}:host .overlay-text a{color:var(--first, #1769e1);cursor:pointer;font-weight:600}:host .overlay-text a:hover{text-decoration:underline}:host .image-container>h4{color:var(--titles, #222);font-size:14px;font-weight:600}: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 .product-howto{font-size:.9rem}:host .howto-title{font-weight:700;margin-bottom:.85rem}:host .howto-defs{margin:0}:host .howto-defs dt{font-weight:600;margin-top:.55rem}:host .howto-defs dd{margin:.1rem 0 0;color:var(--bs-secondary-color, #6c757d)}:host .howto-list{margin:0;padding-left:1.1rem}:host .howto-list li{margin-bottom:.45rem}:host .howto-note{margin-top:1rem;color:var(--bs-secondary-color, #6c757d)}:host .product-howto code{background:#1769e114;color:var(--first, #1769e1);padding:.1rem .4rem;border-radius:4px;font-size:.85em}\n"], dependencies: [{ 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: i7$1.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "motionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i7$1.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i7$1.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i7$1.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { 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: 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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i9.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { 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: i3$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.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i11.LazyImgDirective, selector: "img" }, { kind: "directive", type: i11.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { 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: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
5910
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: ProductDetailsComponent, isStandalone: false, selector: "pw-product-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab product-form 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\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n aria-hidden=\"true\"></i></a>\n <h3 class=\"\">Product: {{ data?.name ? data?.name : 'Add New' }}</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 @if (!isLoading) {\n <div class=\"my-4\">\n <div class=\"mb-5\">\n <p-accordion class=\"pw-accordion-info\">\n <p-accordion-panel value=\"0\">\n <p-accordion-header>\n <i class=\"far fa-circle-info me-2 text-muted\"></i> How to configure a product\n </p-accordion-header>\n <p-accordion-content>\n <div class=\"row g-4 product-howto\">\n <div class=\"col-12 col-lg-7\">\n <h6 class=\"howto-title\">Product / feature binding</h6>\n <dl class=\"howto-defs\">\n <dt><code>category</code></dt>\n <dd>The product type \u2014 e.g. <code>seat_pricing</code> or <code>item_pricing</code>.</dd>\n <dt><code>feature_key</code></dt>\n <dd>Describes the main feature.</dd>\n <dt><code>permission_key</code></dt>\n <dd>A user can be subscribed to only one product per <code>permission_key</code>.</dd>\n <dt><code>product_key</code></dt>\n <dd>Unique per product; drives the frontend permission binding.</dd>\n </dl>\n <p class=\"howto-note\">\n Resulting permission key:\n <code>{{ 'Pages.Product.{permission_key}.{product_key}' }}</code>.\n For a feature tied to an existing product, set its <strong>dependency product</strong> accordingly.\n </p>\n </div>\n <div class=\"col-12 col-lg-5\">\n <h6 class=\"howto-title\">Setting up a free product</h6>\n <ul class=\"howto-list\">\n <li>Leave <code>Stripe Plan</code> empty.</li>\n <li>Set <code>Price per unit</code> to <code>0</code>.</li>\n <li>Set <code>Trial days</code> to a large value (e.g. <code>99999</code>).</li>\n <li>Turn <code>Visible</code> off.</li>\n </ul>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </p-accordion>\n </div>\n </div>\n <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n <h3>{{ 'Admin.Products.Section.Identity' | transloco }}</h3>\n @if (id) {\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"text-start mt-3\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.FullLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span>\n </h4>\n @if (fullLogo && !fullLogo.includes('no_image_uploaded') && !fullLogoBroken) {\n <img [src]=\"fullLogo\" alt=\"Demo Logo\" class=\"image full-logo\"\n role=\"presentation\" (error)=\"fullLogoBroken = true\" />\n <div class=\"overlay mt-2\" (click)=\"openModal(content)\" (keydown.enter)=\"openModal(content)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n } @else {\n <div class=\"logo-dropzone full-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload full logo\" (keydown.enter)=\"openModal(content)\" (click)=\"openModal(content)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a logo</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n </div>\n <div class=\"col-md-6\">\n <div class=\"text-start mt-3\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.SquaredLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span>\n </h4>\n @if (squaredLogo && !squaredLogo.includes('no_image_uploaded') && !squaredLogoBroken) {\n <img [src]=\"squaredLogo\" alt=\"Company Logo\" class=\"squared_logo\"\n role=\"presentation\" (error)=\"squaredLogoBroken = true\" />\n <div class=\"overlay mt-2\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n } @else {\n <div class=\"logo-dropzone squared-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload squared logo\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a logo</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n }\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Name' | transloco\"\n [label]=\"'Label.Name' | transloco\" name=\"name\" controlId=\"product-name\"\n [isLeftTooltip]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-name\" class=\"form-control\" formControlName=\"name\"\n [placeholder]=\"'Admin.Products.Placeholder.Name' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.NickName' | transloco\"\n [label]=\"'Admin.Products.NickName' | transloco\" name=\"nickname\" controlId=\"product-nickname\"\n [errorMsg]=\"'Admin.Products.Validation.NickName' | transloco\">\n <input type=\"text\" id=\"product-nickname\" class=\"form-control\" formControlName=\"nickname\"\n [placeholder]=\"'Admin.Products.Placeholder.NickName' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['nickname'].errors }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.DocumentationUrl' | transloco\"\n [label]=\"'Admin.Products.DocumentationUrl' | transloco\" name=\"documentation_url\" controlId=\"product-documentation_url\">\n <input type=\"text\" id=\"product-documentation_url\" class=\"form-control\" formControlName=\"documentation_url\"\n [placeholder]=\"'Admin.Products.Placeholder.DocumentationUrl' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['documentation_url'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12\" id=\"descriptionEditor\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n [label]=\"'Admin.Products.Description' | transloco\" name=\"description\" controlId=\"product-description\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n <quill-editor [attr.aria-labelledby]=\"'product-description-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"description\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [placeholder]=\"'Admin.Products.Placeholder.Description' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'quill-container': true}\">\n </quill-editor>\n </pw-input-container>\n </div>\n </div>\n\n <!-- Section: Pricing & Billing -->\n <h3>{{ 'Admin.Products.Section.Pricing' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Price' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Price' | transloco\" name=\"price_per_unit\" controlId=\"product-price_per_unit\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-price_per_unit\" numbersOnly class=\"form-control\" formControlName=\"price_per_unit\"\n [placeholder]=\"'Admin.Products.Placeholder.Price' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['price_per_unit'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n @if (supportedCurrency$ | async; as currency) {\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\" controlId=\"product-currency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-currency-label'\"\n [options]=\"currency['regions']\"\n formControlName=\"currency\"\n [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\"\n [placeholder]=\"'Admin.Products.Placeholder.Currency' | transloco\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n }\n @if (supportedRegions$ | async; as region) {\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Region' | transloco\" name=\"region\" controlId=\"product-region\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-region-label'\"\n [options]=\"region['regions']\"\n formControlName=\"region\"\n [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\"\n [placeholder]=\"'Admin.Products.Placeholder.Region' | transloco\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n }\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.BillingFrequency' | transloco\"\n [label]=\"'Admin.Products.BillingFrequency' | transloco\" name=\"billing_frequency\" controlId=\"product-billing_frequency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.BillingFrequency' | transloco\">\n <p-select inputId=\"product-billing_frequency\"\n [options]=\"frequency\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-billing_frequency-label'\" formControlName=\"billing_frequency\"\n [placeholder]=\"'Admin.Products.Placeholder.BillingFrequency' | transloco\"\n [required]=\"true\" [ngClass]=\"{\n 'is-invalid': submitted && f['billing_frequency'].errors\n }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.MinUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MinUnits' | transloco\" name=\"min_units\" controlId=\"product-min_units\"\n [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n <input type=\"number\" id=\"product-min_units\" min=\"1\" class=\"form-control\" formControlName=\"min_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['min_units'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.MaxUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxUnits' | transloco\" name=\"max_units\" controlId=\"product-max_units\"\n [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n <input type=\"number\" id=\"product-max_units\" min=\"1\" class=\"form-control\" formControlName=\"max_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_units'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.StripePlan' | transloco\"\n [label]=\"'Admin.Products.StripePlan' | transloco\" name=\"stripe_plan_id\" controlId=\"product-stripe_plan_id\">\n <input type=\"text\" id=\"product-stripe_plan_id\" class=\"form-control\" formControlName=\"stripe_plan_id\"\n [placeholder]=\"'Admin.Products.Placeholder.StripePlan' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProrationBehavior' | transloco\"\n [label]=\"'Admin.Products.ProrationBehavior' | transloco\" name=\"proration_behavior\" controlId=\"product-proration_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-proration_behavior-label'\"\n [options]=\"prorationBehaviors\"\n formControlName=\"proration_behavior\"\n [placeholder]=\"'Admin.Products.Placeholder.ProrationBehavior' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.UnsubscribeStripeBehavior' | transloco\"\n [label]=\"'Admin.Products.UnsubscribeStripeBehavior' | transloco\" name=\"unsubscribe_stripe_behavior\" controlId=\"product-unsubscribe_stripe_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-unsubscribe_stripe_behavior-label'\"\n [options]=\"unsubscribeBehaviors\"\n formControlName=\"unsubscribe_stripe_behavior\"\n [placeholder]=\"'Admin.Products.Placeholder.UnsubscribeBehavior' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SecondPaymentRequired' | transloco\"\n [label]=\"'Admin.Products.SecondPaymentRequired' | transloco\" name=\"second_payment_required\" controlId=\"product-second_payment_required\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"second_payment_required\" name=\"second_payment_required\"\n [attr.aria-labelledby]=\"'product-second_payment_required-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['second_payment_required'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <!-- Section: Trial -->\n <h3>{{ 'Admin.Products.Section.Trial' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialDays' | transloco\"\n [label]=\"'Admin.Products.TrialDays' | transloco\" name=\"trial_days\" controlId=\"product-trial_days\"\n [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n <input type=\"number\" id=\"product-trial_days\" min=\"0\" class=\"form-control\" formControlName=\"trial_days\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_days'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxTrialHits' | transloco\"\n [label]=\"'Admin.Products.MaxTrialHits' | transloco\" name=\"max_hits_trial\" controlId=\"product-max_hits_trial\">\n <input type=\"number\" id=\"product-max_hits_trial\" min=\"0\" class=\"form-control\" formControlName=\"max_hits_trial\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_hits_trial'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialHits' | transloco\"\n [label]=\"'Admin.Products.TrialHits' | transloco\" name=\"max_hits\" controlId=\"product-max_hits\">\n <input type=\"number\" id=\"product-max_hits\" min=\"0\" class=\"form-control\" formControlName=\"max_hits\"\n [ngClass]=\"{ 'is-invalid': submitted && f['max_hits'].errors }\" />\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <!-- Section: Feature & Permission Binding -->\n <h3>{{ 'Admin.Products.Section.Binding' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.Category' | transloco\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n name=\"category\" controlId=\"product-category\" [useAriaLabelledbyOnly]=\"true\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n <p-select inputId=\"product-category\"\n [options]=\"categories\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-category-label'\" formControlName=\"category\"\n [placeholder]=\"'Admin.Products.Placeholder.Category' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.FeatureKey' | transloco\"\n [label]=\"'Admin.Products.FeatureKey' | transloco\" name=\"feature_key\" controlId=\"product-feature_key\"\n [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n <input type=\"text\" id=\"product-feature_key\" class=\"form-control\"\n [placeholder]=\"'Admin.Products.Placeholder.FeatureKey' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['feature_key'].errors\n }\" formControlName=\"feature_key\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n [label]=\"'Admin.Products.PermissionKey' | transloco\" name=\"permission_key\" controlId=\"product-permission_key\"\n [errorMsg]=\"'Admin.Products.Validation.PermissionKey' | transloco\">\n <input type=\"text\" id=\"product-permission_key\" class=\"form-control\"\n [placeholder]=\"'Admin.Products.Placeholder.PermissionKey' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['permission_key'].errors\n }\" formControlName=\"permission_key\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.ProductKey' | transloco\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n name=\"product_key\" controlId=\"product-product_key\"\n [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n <input type=\"text\" id=\"product-product_key\" class=\"form-control\" formControlName=\"product_key\"\n [placeholder]=\"'Admin.Products.Placeholder.ProductKey' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['product_key'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle\" id=\"product-dependency_products-label\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<span\n class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.DependencyProducts' |\n transloco }}</span>\n </span>\n <p-multiSelect inputId=\"product-dependency_products\"\n [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n [placeholder]=\"'Admin.Products.Placeholder.DependencyProducts' | transloco\"\n [attr.aria-labelledby]=\"'product-dependency_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" (onChange)=\"onSearchCriteria($event)\" [showHeader]=\"false\"\n maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle\" id=\"product-roles-label\">{{ 'Admin.Products.AssignedRoles' | transloco }} <span\n class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Subscriptions.Tooltip.AssignedRoles' |\n transloco }}</span>\n </span>\n <p-multiSelect inputId=\"product-roles\" [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"\n [placeholder]=\"'Admin.Products.Placeholder.Roles' | transloco\"\n [attr.aria-labelledby]=\"'product-roles-label'\"></p-multiSelect>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MasterProduct' | transloco\"\n [label]=\"'Admin.Products.MasterProduct' | transloco\" name=\"master_product_id\" controlId=\"product-master_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-master_product_id-label'\"\n [options]=\"productsList\"\n formControlName=\"master_product_id\"\n [placeholder]=\"'Admin.Products.Placeholder.MasterProduct' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsMasterProduct' | transloco\"\n [label]=\"'Admin.Products.IsMasterProduct' | transloco\" name=\"is_master_product\" controlId=\"product-is_master_product\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\"\n [attr.aria-labelledby]=\"'product-is_master_product-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['is_master_product'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MultipleAllowed' | transloco\"\n [label]=\"'Admin.Products.MultipleAllowed' | transloco\" class=\"nowrap\" name=\"multiple_allowed\" controlId=\"product-multiple_allowed\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\"\n [attr.aria-labelledby]=\"'product-multiple_allowed-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['multiple_allowed'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <!-- Section: Onboarding & Signup -->\n <h3>{{ 'Admin.Products.Section.Signup' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12\" id=\"signupInstructionsEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\" controlId=\"product-signup_instructions\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instructions-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [placeholder]=\"'Admin.Products.Placeholder.SignupInstructions' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['signup_instructions'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12\" id=\"signupEmployeesEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\" controlId=\"product-signup_instruction_employees\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instruction_employees-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [placeholder]=\"'Admin.Products.Placeholder.SignupInstructionEmployees' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['signup_instruction_employees'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n </div>\n\n <!-- Section: Visibility, Support & Compliance -->\n <h3>{{ 'Admin.Products.Section.Visibility' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.IsActive' | transloco\"\n [label]=\"'Admin.Products.IsActive' | transloco\" name=\"active\" controlId=\"product-active\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n [attr.aria-labelledby]=\"'product-active-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsVisible' | transloco\"\n [label]=\"'Admin.Products.IsVisible' | transloco\" name=\"visible\" controlId=\"product-visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n [attr.aria-labelledby]=\"'product-visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MembersVisible' | transloco\"\n [label]=\"'Admin.Products.MembersVisible' | transloco\" name=\"members_visible\" controlId=\"product-members_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\"\n [attr.aria-labelledby]=\"'product-members_visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['members_visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ChatVisible' | transloco\"\n [label]=\"'Admin.Products.ChatVisible' | transloco\" name=\"chat_visible\" controlId=\"product-chat_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\"\n [attr.aria-labelledby]=\"'product-chat_visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['chat_visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\" controlId=\"product-product_privacy_service_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-product_privacy_service_id-label'\"\n [options]=\"allTos\"\n formControlName=\"product_privacy_service_id\"\n [placeholder]=\"'Admin.Products.Placeholder.PrivacyService' | transloco\"\n optionValue=\"id\"\n optionLabel=\"title\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.GitLabServiceDeskEmail' | transloco\"\n [label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" name=\"gitlab_service_desk_email\" controlId=\"product-gitlab_service_desk_email\">\n <input type=\"text\" id=\"product-gitlab_service_desk_email\" class=\"form-control\" formControlName=\"gitlab_service_desk_email\"\n [placeholder]=\"'Admin.Products.Placeholder.GitlabServiceDeskEmail' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PartnerProducts' | transloco\"\n [label]=\"'Admin.Products.PartnerProducts' | transloco\" name=\"partner_products\" controlId=\"product-partner_products\" [useAriaLabelledbyOnly]=\"true\">\n <p-multiSelect inputId=\"product-partner_products\"\n [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n [placeholder]=\"'Admin.Products.Placeholder.PartnerProducts' | transloco\"\n [attr.aria-labelledby]=\"'product-partner_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiSelect>\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' |\n transloco }} </button>\n <button type=\"submit\" [buttonBusy]=\"submitted\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n | transloco }} </button>\n </div>\n </div>\n </form>\n }\n </div>\n </div>\n</div>\n<ng-template #content let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"onImageSelection($event)\" aspectRatio=\"fullLogo\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n<ng-template #squaredLogoContent let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"uploadSquaredLogo($event)\" aspectRatio=\"auto\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n", styles: [".pw-label-style.info-circle{display:inline-block;line-height:1.5}.pw-label-style.info-circle:after{top:-7px}.nowrap{white-space:nowrap}textarea{height:180px}:host .full-logo,:host .squared_logo{background:#f7f8fa;border:1px solid #e2e5ea;border-radius:8px;object-fit:contain;padding:12px}:host .full-logo{height:120px;width:280px}:host .squared_logo{height:150px;width:150px}:host .overlay{cursor:pointer;margin-top:8px}:host .overlay-text a{color:var(--first, #1769e1);cursor:pointer;font-weight:600}:host .overlay-text a:hover{text-decoration:underline}:host .image-container>h4{color:var(--titles, #222);font-size:14px;font-weight:600}: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 .product-howto{font-size:.9rem}:host .howto-title{font-weight:700;margin-bottom:.85rem}:host .howto-defs{margin:0}:host .howto-defs dt{font-weight:600;margin-top:.55rem}:host .howto-defs dd{margin:.1rem 0 0;color:var(--bs-secondary-color, #6c757d)}:host .howto-list{margin:0;padding-left:1.1rem}:host .howto-list li{margin-bottom:.45rem}:host .howto-note{margin-top:1rem;color:var(--bs-secondary-color, #6c757d)}:host .product-howto code{background:#1769e114;color:var(--first, #1769e1);padding:.1rem .4rem;border-radius:4px;font-size:.85em}\n"], dependencies: [{ 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: i7$1.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "motionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i7$1.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i7$1.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i7$1.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { 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: 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.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.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i9.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { 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: i3$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.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i11.LazyImgDirective, selector: "img" }, { kind: "directive", type: i11.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { 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: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
5731
5911
|
}
|
|
5732
5912
|
__decorate([
|
|
5733
5913
|
ValidateForm('form'),
|
|
@@ -5737,7 +5917,7 @@ __decorate([
|
|
|
5737
5917
|
], ProductDetailsComponent.prototype, "onSave", null);
|
|
5738
5918
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ProductDetailsComponent, decorators: [{
|
|
5739
5919
|
type: Component,
|
|
5740
|
-
args: [{ selector: 'pw-product-details', standalone: false, template: "<div class=\"container-fluid pw-tab product-form 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\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n aria-hidden=\"true\"></i></a>\n <h3 class=\"\">Product: {{ data?.name ? data?.name : 'Add New' }}</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 @if (!isLoading) {\n <div class=\"my-4\">\n <div class=\"mb-5\">\n <p-accordion class=\"pw-accordion-info\">\n <p-accordion-panel value=\"0\">\n <p-accordion-header>\n <i class=\"far fa-circle-info me-2 text-muted\"></i> How to configure a product\n </p-accordion-header>\n <p-accordion-content>\n <div class=\"row g-4 product-howto\">\n <div class=\"col-12 col-lg-7\">\n <h6 class=\"howto-title\">Product / feature binding</h6>\n <dl class=\"howto-defs\">\n <dt><code>category</code></dt>\n <dd>The product type \u2014 e.g. <code>seat_pricing</code> or <code>item_pricing</code>.</dd>\n <dt><code>feature_key</code></dt>\n <dd>Describes the main feature.</dd>\n <dt><code>permission_key</code></dt>\n <dd>A user can be subscribed to only one product per <code>permission_key</code>.</dd>\n <dt><code>product_key</code></dt>\n <dd>Unique per product; drives the frontend permission binding.</dd>\n </dl>\n <p class=\"howto-note\">\n Resulting permission key:\n <code>{{ 'Pages.Product.{permission_key}.{product_key}' }}</code>.\n For a feature tied to an existing product, set its <strong>dependency product</strong> accordingly.\n </p>\n </div>\n <div class=\"col-12 col-lg-5\">\n <h6 class=\"howto-title\">Setting up a free product</h6>\n <ul class=\"howto-list\">\n <li>Leave <code>Stripe Plan</code> empty.</li>\n <li>Set <code>Price per unit</code> to <code>0</code>.</li>\n <li>Set <code>Trial days</code> to a large value (e.g. <code>99999</code>).</li>\n <li>Turn <code>Visible</code> off.</li>\n </ul>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </p-accordion>\n </div>\n </div>\n <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n <h3>{{ 'Admin.Products.Section.Identity' | transloco }}</h3>\n @if (id) {\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"text-start mt-3\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.FullLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span>\n </h4>\n @if (fullLogo && !fullLogo.includes('no_image_uploaded') && !fullLogoBroken) {\n <img [src]=\"fullLogo\" alt=\"Demo Logo\" class=\"image full-logo\"\n role=\"presentation\" (error)=\"fullLogoBroken = true\" />\n <div class=\"overlay mt-2\" (click)=\"openModal(content)\" (keydown.enter)=\"openModal(content)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n } @else {\n <div class=\"logo-dropzone full-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload full logo\" (keydown.enter)=\"openModal(content)\" (click)=\"openModal(content)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a logo</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n </div>\n <div class=\"col-md-6\">\n <div class=\"text-start mt-3\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.SquaredLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span>\n </h4>\n @if (squaredLogo && !squaredLogo.includes('no_image_uploaded') && !squaredLogoBroken) {\n <img [src]=\"squaredLogo\" alt=\"Company Logo\" class=\"squared_logo\"\n role=\"presentation\" (error)=\"squaredLogoBroken = true\" />\n <div class=\"overlay mt-2\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n } @else {\n <div class=\"logo-dropzone squared-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload squared logo\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a logo</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n }\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Name' | transloco\"\n [label]=\"'Label.Name' | transloco\" name=\"name\" controlId=\"product-name\"\n [isLeftTooltip]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-name\" class=\"form-control\" formControlName=\"name\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.NickName' | transloco\"\n [label]=\"'Admin.Products.NickName' | transloco\" name=\"nickname\" controlId=\"product-nickname\"\n [errorMsg]=\"'Admin.Products.Validation.NickName' | transloco\">\n <input type=\"text\" id=\"product-nickname\" class=\"form-control\" formControlName=\"nickname\"\n [ngClass]=\"{ 'is-invalid': submitted && f['nickname'].errors }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.DocumentationUrl' | transloco\"\n [label]=\"'Admin.Products.DocumentationUrl' | transloco\" name=\"documentation_url\" controlId=\"product-documentation_url\">\n <input type=\"text\" id=\"product-documentation_url\" class=\"form-control\" formControlName=\"documentation_url\"\n [placeholder]=\"'Admin.Products.Placeholder.DocumentationUrl' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['documentation_url'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12\" id=\"descriptionEditor\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n [label]=\"'Admin.Products.Description' | transloco\" name=\"description\" controlId=\"product-description\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n <quill-editor [attr.aria-labelledby]=\"'product-description-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"description\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'quill-container': true}\">\n </quill-editor>\n </pw-input-container>\n </div>\n </div>\n\n <!-- Section: Pricing & Billing -->\n <h3>{{ 'Admin.Products.Section.Pricing' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Price' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Price' | transloco\" name=\"price_per_unit\" controlId=\"product-price_per_unit\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-price_per_unit\" numbersOnly class=\"form-control\" formControlName=\"price_per_unit\"\n [placeholder]=\"'Admin.Products.Placeholder.Price' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['price_per_unit'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n @if (supportedCurrency$ | async; as currency) {\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\" controlId=\"product-currency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-currency-label'\"\n [options]=\"currency['regions']\"\n formControlName=\"currency\"\n [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\"\n [placeholder]=\"'Admin.Products.Placeholder.Currency' | transloco\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n }\n @if (supportedRegions$ | async; as region) {\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Region' | transloco\" name=\"region\" controlId=\"product-region\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-region-label'\"\n [options]=\"region['regions']\"\n formControlName=\"region\"\n [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\"\n [placeholder]=\"'Admin.Products.Placeholder.Region' | transloco\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n }\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.BillingFrequency' | transloco\"\n [label]=\"'Admin.Products.BillingFrequency' | transloco\" name=\"billing_frequency\" controlId=\"product-billing_frequency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.BillingFrequency' | transloco\">\n <p-select inputId=\"product-billing_frequency\"\n [options]=\"frequency\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-billing_frequency-label'\" formControlName=\"billing_frequency\"\n [placeholder]=\"'Admin.Products.Placeholder.BillingFrequency' | transloco\"\n [required]=\"true\" [ngClass]=\"{\n 'is-invalid': submitted && f['billing_frequency'].errors\n }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.MinUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MinUnits' | transloco\" name=\"min_units\" controlId=\"product-min_units\"\n [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n <input type=\"number\" id=\"product-min_units\" min=\"1\" class=\"form-control\" formControlName=\"min_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['min_units'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.MaxUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxUnits' | transloco\" name=\"max_units\" controlId=\"product-max_units\"\n [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n <input type=\"number\" id=\"product-max_units\" min=\"1\" class=\"form-control\" formControlName=\"max_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_units'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.StripePlan' | transloco\"\n [label]=\"'Admin.Products.StripePlan' | transloco\" name=\"stripe_plan_id\" controlId=\"product-stripe_plan_id\">\n <input type=\"text\" id=\"product-stripe_plan_id\" class=\"form-control\" formControlName=\"stripe_plan_id\"\n [placeholder]=\"'Admin.Products.Placeholder.StripePlan' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProrationBehavior' | transloco\"\n [label]=\"'Admin.Products.ProrationBehavior' | transloco\" name=\"proration_behavior\" controlId=\"product-proration_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-proration_behavior-label'\"\n [options]=\"prorationBehaviors\"\n formControlName=\"proration_behavior\"\n [placeholder]=\"'Admin.Products.Placeholder.ProrationBehavior' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.UnsubscribeStripeBehavior' | transloco\"\n [label]=\"'Admin.Products.UnsubscribeStripeBehavior' | transloco\" name=\"unsubscribe_stripe_behavior\" controlId=\"product-unsubscribe_stripe_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-unsubscribe_stripe_behavior-label'\"\n [options]=\"unsubscribeBehaviors\"\n formControlName=\"unsubscribe_stripe_behavior\"\n [placeholder]=\"'Admin.Products.Placeholder.UnsubscribeBehavior' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SecondPaymentRequired' | transloco\"\n [label]=\"'Admin.Products.SecondPaymentRequired' | transloco\" name=\"second_payment_required\" controlId=\"product-second_payment_required\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"second_payment_required\" name=\"second_payment_required\"\n [attr.aria-labelledby]=\"'product-second_payment_required-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['second_payment_required'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <!-- Section: Trial -->\n <h3>{{ 'Admin.Products.Section.Trial' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialDays' | transloco\"\n [label]=\"'Admin.Products.TrialDays' | transloco\" name=\"trial_days\" controlId=\"product-trial_days\"\n [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n <input type=\"number\" id=\"product-trial_days\" min=\"0\" class=\"form-control\" formControlName=\"trial_days\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_days'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxTrialHits' | transloco\"\n [label]=\"'Admin.Products.MaxTrialHits' | transloco\" name=\"max_hits_trial\" controlId=\"product-max_hits_trial\">\n <input type=\"number\" id=\"product-max_hits_trial\" min=\"0\" class=\"form-control\" formControlName=\"max_hits_trial\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_hits_trial'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialHits' | transloco\"\n [label]=\"'Admin.Products.TrialHits' | transloco\" name=\"max_hits\" controlId=\"product-max_hits\">\n <input type=\"number\" id=\"product-max_hits\" min=\"0\" class=\"form-control\" formControlName=\"max_hits\"\n [ngClass]=\"{ 'is-invalid': submitted && f['max_hits'].errors }\" />\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <!-- Section: Feature & Permission Binding -->\n <h3>{{ 'Admin.Products.Section.Binding' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.Category' | transloco\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n name=\"category\" controlId=\"product-category\" [useAriaLabelledbyOnly]=\"true\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n <p-select inputId=\"product-category\"\n [options]=\"categories\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-category-label'\" formControlName=\"category\"\n [placeholder]=\"'Admin.Products.Placeholder.Category' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.FeatureKey' | transloco\"\n [label]=\"'Admin.Products.FeatureKey' | transloco\" name=\"feature_key\" controlId=\"product-feature_key\"\n [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n <input type=\"text\" id=\"product-feature_key\" class=\"form-control\" [ngClass]=\"{\n 'is-invalid': submitted && f['feature_key'].errors\n }\" formControlName=\"feature_key\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n [label]=\"'Admin.Products.PermissionKey' | transloco\" name=\"permission_key\" controlId=\"product-permission_key\"\n [errorMsg]=\"'Admin.Products.Validation.PermissionKey' | transloco\">\n <input type=\"text\" id=\"product-permission_key\" class=\"form-control\" [ngClass]=\"{\n 'is-invalid': submitted && f['permission_key'].errors\n }\" formControlName=\"permission_key\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.ProductKey' | transloco\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n name=\"product_key\" controlId=\"product-product_key\"\n [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n <input type=\"text\" id=\"product-product_key\" class=\"form-control\" formControlName=\"product_key\" [ngClass]=\"{\n 'is-invalid': submitted && f['product_key'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle\" id=\"product-dependency_products-label\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<span\n class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.DependencyProducts' |\n transloco }}</span>\n </span>\n <p-multiSelect inputId=\"product-dependency_products\"\n [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n [placeholder]=\"'Admin.Products.Placeholder.DependencyProducts' | transloco\"\n [attr.aria-labelledby]=\"'product-dependency_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" (onChange)=\"onSearchCriteria($event)\" [showHeader]=\"false\"\n maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle\" id=\"product-roles-label\">{{ 'Admin.Products.AssignedRoles' | transloco }} <span\n class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Subscriptions.Tooltip.AssignedRoles' |\n transloco }}</span>\n </span>\n <p-multiSelect inputId=\"product-roles\" [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"\n [placeholder]=\"'Admin.Products.Placeholder.Roles' | transloco\"\n [attr.aria-labelledby]=\"'product-roles-label'\"></p-multiSelect>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MasterProduct' | transloco\"\n [label]=\"'Admin.Products.MasterProduct' | transloco\" name=\"master_product_id\" controlId=\"product-master_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-master_product_id-label'\"\n [options]=\"productsList\"\n formControlName=\"master_product_id\"\n [placeholder]=\"'Admin.Products.Placeholder.MasterProduct' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsMasterProduct' | transloco\"\n [label]=\"'Admin.Products.IsMasterProduct' | transloco\" name=\"is_master_product\" controlId=\"product-is_master_product\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\"\n [attr.aria-labelledby]=\"'product-is_master_product-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['is_master_product'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MultipleAllowed' | transloco\"\n [label]=\"'Admin.Products.MultipleAllowed' | transloco\" class=\"nowrap\" name=\"multiple_allowed\" controlId=\"product-multiple_allowed\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\"\n [attr.aria-labelledby]=\"'product-multiple_allowed-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['multiple_allowed'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <!-- Section: Onboarding & Signup -->\n <h3>{{ 'Admin.Products.Section.Signup' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12\" id=\"signupInstructionsEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\" controlId=\"product-signup_instructions\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instructions-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" class=\"quillEditor\" [modules]=\"editorConfig\" [ngClass]=\"{\n 'is-invalid': submitted && f['signup_instructions'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12\" id=\"signupEmployeesEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\" controlId=\"product-signup_instruction_employees\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instruction_employees-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" class=\"quillEditor\" [modules]=\"editorConfig\" [ngClass]=\"{\n 'is-invalid': submitted && f['signup_instruction_employees'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n </div>\n\n <!-- Section: Visibility, Support & Compliance -->\n <h3>{{ 'Admin.Products.Section.Visibility' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.IsActive' | transloco\"\n [label]=\"'Admin.Products.IsActive' | transloco\" name=\"active\" controlId=\"product-active\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n [attr.aria-labelledby]=\"'product-active-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsVisible' | transloco\"\n [label]=\"'Admin.Products.IsVisible' | transloco\" name=\"visible\" controlId=\"product-visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n [attr.aria-labelledby]=\"'product-visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MembersVisible' | transloco\"\n [label]=\"'Admin.Products.MembersVisible' | transloco\" name=\"members_visible\" controlId=\"product-members_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\"\n [attr.aria-labelledby]=\"'product-members_visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['members_visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ChatVisible' | transloco\"\n [label]=\"'Admin.Products.ChatVisible' | transloco\" name=\"chat_visible\" controlId=\"product-chat_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\"\n [attr.aria-labelledby]=\"'product-chat_visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['chat_visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\" controlId=\"product-product_privacy_service_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-product_privacy_service_id-label'\"\n [options]=\"allTos\"\n formControlName=\"product_privacy_service_id\"\n [placeholder]=\"'Admin.Products.Placeholder.PrivacyService' | transloco\"\n optionValue=\"id\"\n optionLabel=\"title\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.GitLabServiceDeskEmail' | transloco\"\n [label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" name=\"gitlab_service_desk_email\" controlId=\"product-gitlab_service_desk_email\">\n <input type=\"text\" id=\"product-gitlab_service_desk_email\" class=\"form-control\" formControlName=\"gitlab_service_desk_email\"\n [placeholder]=\"'Admin.Products.Placeholder.GitlabServiceDeskEmail' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PartnerProducts' | transloco\"\n [label]=\"'Admin.Products.PartnerProducts' | transloco\" name=\"partner_products\" controlId=\"product-partner_products\" [useAriaLabelledbyOnly]=\"true\">\n <p-multiSelect inputId=\"product-partner_products\"\n [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n [placeholder]=\"'Admin.Products.Placeholder.PartnerProducts' | transloco\"\n [attr.aria-labelledby]=\"'product-partner_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiSelect>\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' |\n transloco }} </button>\n <button type=\"submit\" [buttonBusy]=\"submitted\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n | transloco }} </button>\n </div>\n </div>\n </form>\n }\n </div>\n </div>\n</div>\n<ng-template #content let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"onImageSelection($event)\" aspectRatio=\"fullLogo\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n<ng-template #squaredLogoContent let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"uploadSquaredLogo($event)\" aspectRatio=\"auto\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n", styles: [".pw-label-style.info-circle{display:inline-block;line-height:1.5}.pw-label-style.info-circle:after{top:-7px}.nowrap{white-space:nowrap}textarea{height:180px}:host .full-logo,:host .squared_logo{background:#f7f8fa;border:1px solid #e2e5ea;border-radius:8px;object-fit:contain;padding:12px}:host .full-logo{height:120px;width:280px}:host .squared_logo{height:150px;width:150px}:host .overlay{cursor:pointer;margin-top:8px}:host .overlay-text a{color:var(--first, #1769e1);cursor:pointer;font-weight:600}:host .overlay-text a:hover{text-decoration:underline}:host .image-container>h4{color:var(--titles, #222);font-size:14px;font-weight:600}: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 .product-howto{font-size:.9rem}:host .howto-title{font-weight:700;margin-bottom:.85rem}:host .howto-defs{margin:0}:host .howto-defs dt{font-weight:600;margin-top:.55rem}:host .howto-defs dd{margin:.1rem 0 0;color:var(--bs-secondary-color, #6c757d)}:host .howto-list{margin:0;padding-left:1.1rem}:host .howto-list li{margin-bottom:.45rem}:host .howto-note{margin-top:1rem;color:var(--bs-secondary-color, #6c757d)}:host .product-howto code{background:#1769e114;color:var(--first, #1769e1);padding:.1rem .4rem;border-radius:4px;font-size:.85em}\n"] }]
|
|
5920
|
+
args: [{ selector: 'pw-product-details', standalone: false, template: "<div class=\"container-fluid pw-tab product-form 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\" (click)=\"back()\" class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\"\n aria-hidden=\"true\"></i></a>\n <h3 class=\"\">Product: {{ data?.name ? data?.name : 'Add New' }}</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 @if (!isLoading) {\n <div class=\"my-4\">\n <div class=\"mb-5\">\n <p-accordion class=\"pw-accordion-info\">\n <p-accordion-panel value=\"0\">\n <p-accordion-header>\n <i class=\"far fa-circle-info me-2 text-muted\"></i> How to configure a product\n </p-accordion-header>\n <p-accordion-content>\n <div class=\"row g-4 product-howto\">\n <div class=\"col-12 col-lg-7\">\n <h6 class=\"howto-title\">Product / feature binding</h6>\n <dl class=\"howto-defs\">\n <dt><code>category</code></dt>\n <dd>The product type \u2014 e.g. <code>seat_pricing</code> or <code>item_pricing</code>.</dd>\n <dt><code>feature_key</code></dt>\n <dd>Describes the main feature.</dd>\n <dt><code>permission_key</code></dt>\n <dd>A user can be subscribed to only one product per <code>permission_key</code>.</dd>\n <dt><code>product_key</code></dt>\n <dd>Unique per product; drives the frontend permission binding.</dd>\n </dl>\n <p class=\"howto-note\">\n Resulting permission key:\n <code>{{ 'Pages.Product.{permission_key}.{product_key}' }}</code>.\n For a feature tied to an existing product, set its <strong>dependency product</strong> accordingly.\n </p>\n </div>\n <div class=\"col-12 col-lg-5\">\n <h6 class=\"howto-title\">Setting up a free product</h6>\n <ul class=\"howto-list\">\n <li>Leave <code>Stripe Plan</code> empty.</li>\n <li>Set <code>Price per unit</code> to <code>0</code>.</li>\n <li>Set <code>Trial days</code> to a large value (e.g. <code>99999</code>).</li>\n <li>Turn <code>Visible</code> off.</li>\n </ul>\n </div>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n </p-accordion>\n </div>\n </div>\n <form [formGroup]=\"form\" (ngSubmit)=\"onSave()\">\n <h3>{{ 'Admin.Products.Section.Identity' | transloco }}</h3>\n @if (id) {\n <div class=\"row\">\n <div class=\"col-md-6\">\n <div class=\"text-start mt-3\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.FullLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.FullLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span>\n </h4>\n @if (fullLogo && !fullLogo.includes('no_image_uploaded') && !fullLogoBroken) {\n <img [src]=\"fullLogo\" alt=\"Demo Logo\" class=\"image full-logo\"\n role=\"presentation\" (error)=\"fullLogoBroken = true\" />\n <div class=\"overlay mt-2\" (click)=\"openModal(content)\" (keydown.enter)=\"openModal(content)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n } @else {\n <div class=\"logo-dropzone full-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload full logo\" (keydown.enter)=\"openModal(content)\" (click)=\"openModal(content)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a logo</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n </div>\n <div class=\"col-md-6\">\n <div class=\"text-start mt-3\">\n <div class=\"image-container\">\n <h4 class=\"mb-2\"> {{ 'User.Subscriptions.SquaredLogo' | transloco }} <span class=\"tooltip-wrap ms-1\"\n [pTooltip]=\"'User.Subscriptions.Tooltip.SquaredLogo'|transloco\" [appendTo]=\"'body'\"\n [tooltipPosition]=\"'top'\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span>\n </h4>\n @if (squaredLogo && !squaredLogo.includes('no_image_uploaded') && !squaredLogoBroken) {\n <img [src]=\"squaredLogo\" alt=\"Company Logo\" class=\"squared_logo\"\n role=\"presentation\" (error)=\"squaredLogoBroken = true\" />\n <div class=\"overlay mt-2\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n <div class=\"overlay-text\">\n <a aria-label=\"Navigate to Target\">{{ 'User.Profile.Change' | transloco }}</a>\n </div>\n </div>\n } @else {\n <div class=\"logo-dropzone squared-dropzone\" role=\"button\" tabindex=\"0\"\n aria-label=\"Upload squared logo\" (keydown.enter)=\"openModal(squaredLogoContent)\" (click)=\"openModal(squaredLogoContent)\">\n <i class=\"fas fa-upload\"></i>\n <span class=\"dropzone-title\">Upload a logo</span>\n <span class=\"dropzone-hint\">PNG or JPG</span>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n }\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Name' | transloco\"\n [label]=\"'Label.Name' | transloco\" name=\"name\" controlId=\"product-name\"\n [isLeftTooltip]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-name\" class=\"form-control\" formControlName=\"name\"\n [placeholder]=\"'Admin.Products.Placeholder.Name' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['name'].errors }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.NickName' | transloco\"\n [label]=\"'Admin.Products.NickName' | transloco\" name=\"nickname\" controlId=\"product-nickname\"\n [errorMsg]=\"'Admin.Products.Validation.NickName' | transloco\">\n <input type=\"text\" id=\"product-nickname\" class=\"form-control\" formControlName=\"nickname\"\n [placeholder]=\"'Admin.Products.Placeholder.NickName' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['nickname'].errors }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.DocumentationUrl' | transloco\"\n [label]=\"'Admin.Products.DocumentationUrl' | transloco\" name=\"documentation_url\" controlId=\"product-documentation_url\">\n <input type=\"text\" id=\"product-documentation_url\" class=\"form-control\" formControlName=\"documentation_url\"\n [placeholder]=\"'Admin.Products.Placeholder.DocumentationUrl' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['documentation_url'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12\" id=\"descriptionEditor\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Description' | transloco\"\n [label]=\"'Admin.Products.Description' | transloco\" name=\"description\" controlId=\"product-description\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Description' | transloco\">\n <quill-editor [attr.aria-labelledby]=\"'product-description-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"description\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [placeholder]=\"'Admin.Products.Placeholder.Description' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description'].errors, 'quill-container': true}\">\n </quill-editor>\n </pw-input-container>\n </div>\n </div>\n\n <!-- Section: Pricing & Billing -->\n <h3>{{ 'Admin.Products.Section.Pricing' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Price' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Price' | transloco\" name=\"price_per_unit\" controlId=\"product-price_per_unit\"\n [errorMsg]=\"'Admin.Products.Validation.Name' | transloco\">\n <input type=\"text\" id=\"product-price_per_unit\" numbersOnly class=\"form-control\" formControlName=\"price_per_unit\"\n [placeholder]=\"'Admin.Products.Placeholder.Price' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['price_per_unit'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n @if (supportedCurrency$ | async; as currency) {\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Currency' | transloco\"\n [label]=\"'Admin.Products.Currency' | transloco\" name=\"currency\" controlId=\"product-currency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Currency' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-currency-label'\"\n [options]=\"currency['regions']\"\n formControlName=\"currency\"\n [ngClass]=\"{ 'is-invalid': submitted && f['currency'].errors }\"\n [placeholder]=\"'Admin.Products.Placeholder.Currency' | transloco\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n }\n @if (supportedRegions$ | async; as region) {\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.Region' | transloco\"\n [isLeftTooltip]=\"true\"\n [label]=\"'Admin.Products.Region' | transloco\" name=\"region\" controlId=\"product-region\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.Region' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'product-region-label'\"\n [options]=\"region['regions']\"\n formControlName=\"region\"\n [ngClass]=\"{ 'is-invalid': submitted && f['region'].errors }\"\n [placeholder]=\"'Admin.Products.Placeholder.Region' | transloco\"\n [showClear]=\"false\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n }\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.BillingFrequency' | transloco\"\n [label]=\"'Admin.Products.BillingFrequency' | transloco\" name=\"billing_frequency\" controlId=\"product-billing_frequency\" [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Products.Validation.BillingFrequency' | transloco\">\n <p-select inputId=\"product-billing_frequency\"\n [options]=\"frequency\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-billing_frequency-label'\" formControlName=\"billing_frequency\"\n [placeholder]=\"'Admin.Products.Placeholder.BillingFrequency' | transloco\"\n [required]=\"true\" [ngClass]=\"{\n 'is-invalid': submitted && f['billing_frequency'].errors\n }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.MinUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MinUnits' | transloco\" name=\"min_units\" controlId=\"product-min_units\"\n [errorMsg]=\"'Admin.Products.Validation.MinUnit' | transloco\">\n <input type=\"number\" id=\"product-min_units\" min=\"1\" class=\"form-control\" formControlName=\"min_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['min_units'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.MaxUnit' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxUnits' | transloco\" name=\"max_units\" controlId=\"product-max_units\"\n [errorMsg]=\"'Admin.Products.Validation.MaxUnit' | transloco\">\n <input type=\"number\" id=\"product-max_units\" min=\"1\" class=\"form-control\" formControlName=\"max_units\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_units'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.StripePlan' | transloco\"\n [label]=\"'Admin.Products.StripePlan' | transloco\" name=\"stripe_plan_id\" controlId=\"product-stripe_plan_id\">\n <input type=\"text\" id=\"product-stripe_plan_id\" class=\"form-control\" formControlName=\"stripe_plan_id\"\n [placeholder]=\"'Admin.Products.Placeholder.StripePlan' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProrationBehavior' | transloco\"\n [label]=\"'Admin.Products.ProrationBehavior' | transloco\" name=\"proration_behavior\" controlId=\"product-proration_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-proration_behavior-label'\"\n [options]=\"prorationBehaviors\"\n formControlName=\"proration_behavior\"\n [placeholder]=\"'Admin.Products.Placeholder.ProrationBehavior' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.UnsubscribeStripeBehavior' | transloco\"\n [label]=\"'Admin.Products.UnsubscribeStripeBehavior' | transloco\" name=\"unsubscribe_stripe_behavior\" controlId=\"product-unsubscribe_stripe_behavior\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-unsubscribe_stripe_behavior-label'\"\n [options]=\"unsubscribeBehaviors\"\n formControlName=\"unsubscribe_stripe_behavior\"\n [placeholder]=\"'Admin.Products.Placeholder.UnsubscribeBehavior' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\"\n [showClear]=\"true\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SecondPaymentRequired' | transloco\"\n [label]=\"'Admin.Products.SecondPaymentRequired' | transloco\" name=\"second_payment_required\" controlId=\"product-second_payment_required\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"second_payment_required\" name=\"second_payment_required\"\n [attr.aria-labelledby]=\"'product-second_payment_required-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['second_payment_required'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <!-- Section: Trial -->\n <h3>{{ 'Admin.Products.Section.Trial' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialDays' | transloco\"\n [label]=\"'Admin.Products.TrialDays' | transloco\" name=\"trial_days\" controlId=\"product-trial_days\"\n [errorMsg]=\"'Admin.Products.Validation.TrialDays' | transloco\">\n <input type=\"number\" id=\"product-trial_days\" min=\"0\" class=\"form-control\" formControlName=\"trial_days\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_days'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MaxTrialHits' | transloco\"\n [label]=\"'Admin.Products.MaxTrialHits' | transloco\" name=\"max_hits_trial\" controlId=\"product-max_hits_trial\">\n <input type=\"number\" id=\"product-max_hits_trial\" min=\"0\" class=\"form-control\" formControlName=\"max_hits_trial\" [ngClass]=\"{\n 'is-invalid': submitted && f['max_hits_trial'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.TrialHits' | transloco\"\n [label]=\"'Admin.Products.TrialHits' | transloco\" name=\"max_hits\" controlId=\"product-max_hits\">\n <input type=\"number\" id=\"product-max_hits\" min=\"0\" class=\"form-control\" formControlName=\"max_hits\"\n [ngClass]=\"{ 'is-invalid': submitted && f['max_hits'].errors }\" />\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <!-- Section: Feature & Permission Binding -->\n <h3>{{ 'Admin.Products.Section.Binding' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.Category' | transloco\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n name=\"category\" controlId=\"product-category\" [useAriaLabelledbyOnly]=\"true\" [errorMsg]=\"'Admin.Products.Validation.Category' | transloco\">\n <p-select inputId=\"product-category\"\n [options]=\"categories\" class=\"dropdown-bg-transparent\" [attr.aria-labelledby]=\"'product-category-label'\" formControlName=\"category\"\n [placeholder]=\"'Admin.Products.Placeholder.Category' | transloco\"\n [ngClass]=\"{ 'is-invalid': submitted && f['category'].errors }\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.FeatureKey' | transloco\"\n [label]=\"'Admin.Products.FeatureKey' | transloco\" name=\"feature_key\" controlId=\"product-feature_key\"\n [errorMsg]=\"'Admin.Products.Validation.FeatureKey' | transloco\">\n <input type=\"text\" id=\"product-feature_key\" class=\"form-control\"\n [placeholder]=\"'Admin.Products.Placeholder.FeatureKey' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['feature_key'].errors\n }\" formControlName=\"feature_key\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n [label]=\"'Admin.Products.PermissionKey' | transloco\" name=\"permission_key\" controlId=\"product-permission_key\"\n [errorMsg]=\"'Admin.Products.Validation.PermissionKey' | transloco\">\n <input type=\"text\" id=\"product-permission_key\" class=\"form-control\"\n [placeholder]=\"'Admin.Products.Placeholder.PermissionKey' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['permission_key'].errors\n }\" formControlName=\"permission_key\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [label]=\"'Admin.Products.ProductKey' | transloco\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.PermissionKey' | transloco\"\n name=\"product_key\" controlId=\"product-product_key\"\n [errorMsg]=\"'Admin.Products.Validation.ProductKey' | transloco\">\n <input type=\"text\" id=\"product-product_key\" class=\"form-control\" formControlName=\"product_key\"\n [placeholder]=\"'Admin.Products.Placeholder.ProductKey' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['product_key'].errors\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle\" id=\"product-dependency_products-label\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<span\n class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Products.Tooltip.DependencyProducts' |\n transloco }}</span>\n </span>\n <p-multiSelect inputId=\"product-dependency_products\"\n [options]=\"productsList\" [(ngModel)]=\"selectedScopes\"\n [placeholder]=\"'Admin.Products.Placeholder.DependencyProducts' | transloco\"\n [attr.aria-labelledby]=\"'product-dependency_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" (onChange)=\"onSearchCriteria($event)\" [showHeader]=\"false\"\n maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiSelect>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <span class=\"pw-label-style info-circle\" id=\"product-roles-label\">{{ 'Admin.Products.AssignedRoles' | transloco }} <span\n class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.Subscriptions.Tooltip.AssignedRoles' |\n transloco }}</span>\n </span>\n <p-multiSelect inputId=\"product-roles\" [options]=\"allRoles\" formControlName=\"roles\" appendTo=\"body\"\n [placeholder]=\"'Admin.Products.Placeholder.Roles' | transloco\"\n [attr.aria-labelledby]=\"'product-roles-label'\"></p-multiSelect>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MasterProduct' | transloco\"\n [label]=\"'Admin.Products.MasterProduct' | transloco\" name=\"master_product_id\" controlId=\"product-master_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-master_product_id-label'\"\n [options]=\"productsList\"\n formControlName=\"master_product_id\"\n [placeholder]=\"'Admin.Products.Placeholder.MasterProduct' | transloco\"\n optionValue=\"value\"\n optionLabel=\"label\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsMasterProduct' | transloco\"\n [label]=\"'Admin.Products.IsMasterProduct' | transloco\" name=\"is_master_product\" controlId=\"product-is_master_product\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"is_master_product\" name=\"is_master_product\"\n [attr.aria-labelledby]=\"'product-is_master_product-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['is_master_product'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'SuperAdmin'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MultipleAllowed' | transloco\"\n [label]=\"'Admin.Products.MultipleAllowed' | transloco\" class=\"nowrap\" name=\"multiple_allowed\" controlId=\"product-multiple_allowed\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"multiple_allowed\" name=\"multiple_allowed\"\n [attr.aria-labelledby]=\"'product-multiple_allowed-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['multiple_allowed'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <!-- Section: Onboarding & Signup -->\n <h3>{{ 'Admin.Products.Section.Signup' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12\" id=\"signupInstructionsEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructions' | transloco\"\n [label]=\"'Admin.Products.SignupInstructions' | transloco\" name=\"signup_instructions\" controlId=\"product-signup_instructions\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instructions-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instructions\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [placeholder]=\"'Admin.Products.Placeholder.SignupInstructions' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['signup_instructions'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n <div class=\"col-12\" id=\"signupEmployeesEditor\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.SignupInstructionEmployees' | transloco\"\n [label]=\"'Admin.Products.SignupInstructionEmployees' | transloco\" name=\"signup_instruction_employees\" controlId=\"product-signup_instruction_employees\" [useAriaLabelledbyOnly]=\"true\">\n <quill-editor [attr.aria-labelledby]=\"'product-signup_instruction_employees-label'\" [styles]=\"{ height: '220px' }\" formControlName=\"signup_instruction_employees\" class=\"quillEditor\" [modules]=\"editorConfig\"\n [placeholder]=\"'Admin.Products.Placeholder.SignupInstructionEmployees' | transloco\" [ngClass]=\"{\n 'is-invalid': submitted && f['signup_instruction_employees'].errors, 'quill-container': true\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n </div>\n\n <!-- Section: Visibility, Support & Compliance -->\n <h3>{{ 'Admin.Products.Section.Visibility' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Admin.Products.Tooltip.IsActive' | transloco\"\n [label]=\"'Admin.Products.IsActive' | transloco\" name=\"active\" controlId=\"product-active\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"active\" name=\"active\"\n [attr.aria-labelledby]=\"'product-active-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.IsVisible' | transloco\"\n [label]=\"'Admin.Products.IsVisible' | transloco\" name=\"visible\" controlId=\"product-visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"visible\" name=\"visible\"\n [attr.aria-labelledby]=\"'product-visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.MembersVisible' | transloco\"\n [label]=\"'Admin.Products.MembersVisible' | transloco\" name=\"members_visible\" controlId=\"product-members_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"members_visible\" name=\"members_visible\"\n [attr.aria-labelledby]=\"'product-members_visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['members_visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-6 col-md-3\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ChatVisible' | transloco\"\n [label]=\"'Admin.Products.ChatVisible' | transloco\" name=\"chat_visible\" controlId=\"product-chat_visible\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch class=\"d-block\" formControlName=\"chat_visible\" name=\"chat_visible\"\n [attr.aria-labelledby]=\"'product-chat_visible-label'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['chat_visible'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.ProductPrivacyService' | transloco\"\n [label]=\"'Admin.Products.ProductPrivacyService' | transloco\" name=\"product_privacy_service_id\" controlId=\"product-product_privacy_service_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'product-product_privacy_service_id-label'\"\n [options]=\"allTos\"\n formControlName=\"product_privacy_service_id\"\n [placeholder]=\"'Admin.Products.Placeholder.PrivacyService' | transloco\"\n optionValue=\"id\"\n optionLabel=\"title\">\n </p-select>\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.GitLabServiceDeskEmail' | transloco\"\n [label]=\"'Admin.Products.GitLabServiceDeskEmail' | transloco\" name=\"gitlab_service_desk_email\" controlId=\"product-gitlab_service_desk_email\">\n <input type=\"text\" id=\"product-gitlab_service_desk_email\" class=\"form-control\" formControlName=\"gitlab_service_desk_email\"\n [placeholder]=\"'Admin.Products.Placeholder.GitlabServiceDeskEmail' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"col-12 col-md-4\" *rbacAllow=\"'Pages.Alpha'\">\n <div class=\"mb-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Products.Tooltip.PartnerProducts' | transloco\"\n [label]=\"'Admin.Products.PartnerProducts' | transloco\" name=\"partner_products\" controlId=\"product-partner_products\" [useAriaLabelledbyOnly]=\"true\">\n <p-multiSelect inputId=\"product-partner_products\"\n [options]=\"productsList\" (onChange)=\"onSearchPartnerProducts($event)\"\n [placeholder]=\"'Admin.Products.Placeholder.PartnerProducts' | transloco\"\n [attr.aria-labelledby]=\"'product-partner_products-label'\"\n [ngModelOptions]=\"{ standalone: true }\" [showToggleAll]=\"true\" [(ngModel)]=\"selectedPartnerProducts\"\n [showHeader]=\"true\" maxSelectedLabels=\"1\" appendTo=\"body\">\n </p-multiSelect>\n </pw-input-container>\n </div>\n </div>\n </div>\n\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\" class=\"btn btn-outline-default me-2\" (click)=\"back()\"> {{ 'Button.Cancel' |\n transloco }} </button>\n <button type=\"submit\" [buttonBusy]=\"submitted\" class=\"btn btn-primary\" *rbacAllow=\"'Pages.Admin.Product.Edit'\"> {{ 'Button.Submit'\n | transloco }} </button>\n </div>\n </div>\n </form>\n }\n </div>\n </div>\n</div>\n<ng-template #content let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.FullLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"onImageSelection($event)\" aspectRatio=\"fullLogo\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n<ng-template #squaredLogoContent let-modal>\n <div class=\"modal-header\">\n <h3 class=\"modal-title mb-0 p-0\">{{ 'User.Subscriptions.SquaredLogo' | transloco }}</h3>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\">\n </button>\n </div>\n <div class=\"modal-body\">\n <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n <pw-image-cropper #profile (imageSelectionEvent)=\"uploadSquaredLogo($event)\" aspectRatio=\"auto\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n", styles: [".pw-label-style.info-circle{display:inline-block;line-height:1.5}.pw-label-style.info-circle:after{top:-7px}.nowrap{white-space:nowrap}textarea{height:180px}:host .full-logo,:host .squared_logo{background:#f7f8fa;border:1px solid #e2e5ea;border-radius:8px;object-fit:contain;padding:12px}:host .full-logo{height:120px;width:280px}:host .squared_logo{height:150px;width:150px}:host .overlay{cursor:pointer;margin-top:8px}:host .overlay-text a{color:var(--first, #1769e1);cursor:pointer;font-weight:600}:host .overlay-text a:hover{text-decoration:underline}:host .image-container>h4{color:var(--titles, #222);font-size:14px;font-weight:600}: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 .product-howto{font-size:.9rem}:host .howto-title{font-weight:700;margin-bottom:.85rem}:host .howto-defs{margin:0}:host .howto-defs dt{font-weight:600;margin-top:.55rem}:host .howto-defs dd{margin:.1rem 0 0;color:var(--bs-secondary-color, #6c757d)}:host .howto-list{margin:0;padding-left:1.1rem}:host .howto-list li{margin-bottom:.45rem}:host .howto-note{margin-top:1rem;color:var(--bs-secondary-color, #6c757d)}:host .product-howto code{background:#1769e114;color:var(--first, #1769e1);padding:.1rem .4rem;border-radius:4px;font-size:.85em}\n"] }]
|
|
5741
5921
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$1.ProductService }, { type: i2.NgbModal }, { type: i1.AdminService }], propDecorators: { onSave: [] } });
|
|
5742
5922
|
|
|
5743
5923
|
class ProductInsightComponent extends AppBaseComponent {
|
|
@@ -5900,11 +6080,11 @@ class ProductsListComponent extends AppBaseComponent {
|
|
|
5900
6080
|
super.ngOnDestroy();
|
|
5901
6081
|
}
|
|
5902
6082
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ProductsListComponent, deps: [{ token: i1$1.ProductService }, { token: i1$1.AuthService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5903
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: ProductsListComponent, isStandalone: false, selector: "pw-admin-products-list", viewQueries: [{ propertyName: "passwordValidationModalForProductDelete", first: true, predicate: ["passwordValidationModalForProductDelete"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"col-xs-12 text-end d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Products</h2>\n <button *rbacAllow=\"'Pages.Admin.Product.Create'\"\n class=\"btn btn-sm btn-outline-primary\"\n [routerLink]=\"[routers.productDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Setup New Product\n </button>\n</div>\n@if (loading) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table #dt\n [value]=\"products\"\n [paginator]=\"totalRecords !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div class=\"col-12 col-sm-4\">\n <p-multiSelect inputId=\"products-list-feature-keys\" placeholder=\"Filter by feature keys\"\n [options]=\"featureKeysList\"\n (onChange)=\"onSearchOptionChange($event)\"\n [showHeader]=\"true\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"text-end\">\n <label for=\"products-list-search\" class=\"visually-hidden\">Search Product</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=\"products-list-search\"\n name=\"products-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search products...\"\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 class=\"head\">\n <th scope=\"true\"\n pSortableColumn=\"name\">\n {{ 'Label.Name' | transloco }}\n <p-sortIcon field=\"name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"stripe_plan_id\">\n {{ 'Admin.Products.StripePlan' | transloco }}\n <p-sortIcon field=\"stripe_plan_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"permission_key\">\n {{ 'Admin.Products.PermissionKey' | transloco }}\n <p-sortIcon field=\"permission_key\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"feature_key\">\n {{ 'Admin.Products.FeatureKey' | transloco }}\n <p-sortIcon field=\"feature_key\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"product_key\">\n {{ 'Admin.Products.ProductKey' | transloco }}\n <p-sortIcon field=\"product_key\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"category\">\n {{ 'Admin.Products.Category' | transloco }}\n <p-sortIcon field=\"category\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"region\">\n {{ 'Admin.Products.Region' | transloco }}\n <p-sortIcon field=\"region\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"currency\">\n {{ 'Admin.Products.Currency' | transloco }}\n <p-sortIcon field=\"currency\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"price_per_unit\">\n {{ 'Admin.Products.Price' | transloco }}\n <p-sortIcon field=\"price_per_unit\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"active\">\n {{ 'Label.IsActive' | transloco }}\n <p-sortIcon field=\"active\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"billing_frequency\">\n {{ 'Admin.Products.Billing' | transloco }}\n <p-sortIcon field=\"billing_frequency\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-item>\n <tr>\n <td data-head=\"Name\">{{ item.name }}</td>\n <td data-head=\"Stripe Plan\">{{ item.stripe_plan_id }}</td>\n <td data-head=\"Permission Key\">{{ item.permission_key }}</td>\n <td data-head=\"Feature Key\">{{ item.feature_key }}</td>\n <td data-head=\"Product Key\">{{ item.product_key }}</td>\n <td data-head=\"Category\">\n <span [appDynamicBadge]=\"{ itemsArray: categories, item: item.category }\"\n color=\"warning\"\n class=\"badge\">{{ item.category }}</span>\n </td>\n <td data-head=\"Region\">\n <span [appDynamicBadge]=\"{ itemsArray: regions, item: item.region }\"\n color=\"cyan\"\n class=\"badge\">{{ item.region }}</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\">{{ item.price_per_unit }}</td>\n <td data-head=\"Active\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.active }\"\n color=\"success-danger\"\n class=\"badge\">{{ item?.active ? 'Yes' : 'No' }}</span>\n </td>\n <td data-head=\"Billing\">\n <span class=\"badge\"\n [appDynamicBadge]=\"{\n itemsArray: billingFrequency,\n item: item?.billing_frequency\n }\"\n color=\"blue-grey\">{{ item.billing_frequency }}</span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline width-max-content\">\n <li ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n *rbacAllow=\"'Pages.Admin.Product.Edit'\"\n [routerLink]=\"[routers.productDetails + item.id]\">\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 *rbacAllow=\"'Pages.Admin.Product.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 <li ngbTooltip=\"Users List\"\n class=\"me-2 me-sm-3\"\n *rbacAllow=\"'Pages.Admin.Product.Edit'\"\n [routerLink]=\"[routers.productsUserList + item.id]\">\n <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Duplicate The Product\"\n class=\"me-sm-3\"\n [routerLink]=\"[routers.productDetails + 'add']\"\n [queryParams]=\"{ duplicate_product_id: item.id }\">\n <i class=\"fa fa-clone edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Feedback Questions\"\n container=\"body\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[routers.feedbackQuestions]\"\n [queryParams]=\"{ product_id: item.id }\">\n <i class=\"fa fa-comments edit-icon\" aria-hidden=\"true\"></i>\n </li>\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@if (!loading && totalRecordsUnFiltered === 0) {\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Products.NoDataMessage' | transloco\"> </pw-no-data>\n}\n<!-- password validation modal for delete product -->\n<pw-password-validation #passwordValidationModalForProductDelete\n [destructive]=\"true\"\n (successEvent)=\"deleteProduct($event)\">\n</pw-password-validation>\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);--public-btn-radius: 24px}.table-responsive td{padding:6px 10px!important;line-height:1.4;vertical-align:middle;word-break:break-word}.table-responsive th{vertical-align:bottom}.table-responsive td[data-head=Name]{font-weight:600;color:#1a1d21}.table-responsive td[data-head=\"Stripe Plan\"],.table-responsive td[data-head=\"Permission Key\"],.table-responsive td[data-head=\"Feature Key\"],.table-responsive td[data-head=\"Product Key\"]{color:#5a6473;font-variant-numeric:tabular-nums}.table-responsive td[data-head=Price]{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}.table-responsive th:nth-child(9){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.bg-warning{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-1{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-2{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-3{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-4{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-5{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-6{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-warning-7{background-color:#efe6ed!important;color:#723162!important}.table-responsive .badge.bg-warning-8{background-color:#efe6e7!important;color:#723136!important}.table-responsive .badge.bg-warning-9{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-10{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-11{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-12{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-13{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-14{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-15{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-warning-16{background-color:#efe6ed!important;color:#723162!important}.table-responsive .badge.bg-warning-17{background-color:#efe6e7!important;color:#723136!important}.table-responsive .badge.bg-warning-18{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-19{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-20{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-21{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-22{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-23{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-24{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-cyan{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-1{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-2{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-3{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-4{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-5{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-6{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-cyan-7{background-color:#e8efe6!important;color:#3c7231!important}.table-responsive .badge.bg-cyan-8{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-cyan-9{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-10{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-11{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-12{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-13{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-14{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-15{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-cyan-16{background-color:#e8efe6!important;color:#3c7231!important}.table-responsive .badge.bg-cyan-17{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-cyan-18{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-19{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-20{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-21{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-22{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-23{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-24{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-blue-grey{background-color:#e6e9ef!important;color:#314772!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.bg-cyan-default{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-default-change{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-success:before,.table-responsive .badge.bg-danger:before{content:\"\";display:inline-block;box-sizing:border-box;width:7px;height:7px;margin-right:6px;border-radius:50%;vertical-align:middle}.table-responsive .badge.bg-success:before{background-color:currentColor}.table-responsive .badge.bg-danger:before{background-color:transparent;border:1.5px solid currentColor}.width-max-content{width:max-content}\n"], dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i2.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: i3$1.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage", "destructive"], outputs: ["successEvent"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$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: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
6083
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: ProductsListComponent, isStandalone: false, selector: "pw-admin-products-list", viewQueries: [{ propertyName: "passwordValidationModalForProductDelete", first: true, predicate: ["passwordValidationModalForProductDelete"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"col-xs-12 text-end d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Products</h2>\n <button *rbacAllow=\"'Pages.Admin.Product.Create'\"\n class=\"btn btn-sm btn-outline-primary\"\n [routerLink]=\"[routers.productDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Setup New Product\n </button>\n</div>\n@if (loading) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table #dt\n [value]=\"products\"\n [paginator]=\"totalRecords !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div class=\"col-12 col-sm-4\">\n <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"products-list-feature-keys\" placeholder=\"Filter by feature keys\"\n [options]=\"featureKeysList\"\n (onChange)=\"onSearchOptionChange($event)\"\n [showHeader]=\"true\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"text-end\">\n <label for=\"products-list-search\" class=\"visually-hidden\">Search Product</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=\"products-list-search\"\n name=\"products-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search products...\"\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 class=\"head\">\n <th scope=\"true\"\n pSortableColumn=\"name\">\n {{ 'Label.Name' | transloco }}\n <p-sortIcon field=\"name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"stripe_plan_id\">\n {{ 'Admin.Products.StripePlan' | transloco }}\n <p-sortIcon field=\"stripe_plan_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"permission_key\">\n {{ 'Admin.Products.PermissionKey' | transloco }}\n <p-sortIcon field=\"permission_key\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"feature_key\">\n {{ 'Admin.Products.FeatureKey' | transloco }}\n <p-sortIcon field=\"feature_key\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"product_key\">\n {{ 'Admin.Products.ProductKey' | transloco }}\n <p-sortIcon field=\"product_key\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"category\">\n {{ 'Admin.Products.Category' | transloco }}\n <p-sortIcon field=\"category\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"region\">\n {{ 'Admin.Products.Region' | transloco }}\n <p-sortIcon field=\"region\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"currency\">\n {{ 'Admin.Products.Currency' | transloco }}\n <p-sortIcon field=\"currency\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"price_per_unit\">\n {{ 'Admin.Products.Price' | transloco }}\n <p-sortIcon field=\"price_per_unit\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"active\">\n {{ 'Label.IsActive' | transloco }}\n <p-sortIcon field=\"active\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"billing_frequency\">\n {{ 'Admin.Products.Billing' | transloco }}\n <p-sortIcon field=\"billing_frequency\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-item>\n <tr>\n <td data-head=\"Name\">{{ item.name }}</td>\n <td data-head=\"Stripe Plan\">{{ item.stripe_plan_id }}</td>\n <td data-head=\"Permission Key\">{{ item.permission_key }}</td>\n <td data-head=\"Feature Key\">{{ item.feature_key }}</td>\n <td data-head=\"Product Key\">{{ item.product_key }}</td>\n <td data-head=\"Category\">\n <span [appDynamicBadge]=\"{ itemsArray: categories, item: item.category }\"\n color=\"warning\"\n class=\"badge\">{{ item.category }}</span>\n </td>\n <td data-head=\"Region\">\n <span [appDynamicBadge]=\"{ itemsArray: regions, item: item.region }\"\n color=\"cyan\"\n class=\"badge\">{{ item.region }}</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\">{{ item.price_per_unit }}</td>\n <td data-head=\"Active\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.active }\"\n color=\"success-danger\"\n class=\"badge\">{{ item?.active ? 'Yes' : 'No' }}</span>\n </td>\n <td data-head=\"Billing\">\n <span class=\"badge\"\n [appDynamicBadge]=\"{\n itemsArray: billingFrequency,\n item: item?.billing_frequency\n }\"\n color=\"blue-grey\">{{ item.billing_frequency }}</span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline width-max-content\">\n <li ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n *rbacAllow=\"'Pages.Admin.Product.Edit'\"\n [routerLink]=\"[routers.productDetails + item.id]\">\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 *rbacAllow=\"'Pages.Admin.Product.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 <li ngbTooltip=\"Users List\"\n class=\"me-2 me-sm-3\"\n *rbacAllow=\"'Pages.Admin.Product.Edit'\"\n [routerLink]=\"[routers.productsUserList + item.id]\">\n <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Duplicate The Product\"\n class=\"me-sm-3\"\n [routerLink]=\"[routers.productDetails + 'add']\"\n [queryParams]=\"{ duplicate_product_id: item.id }\">\n <i class=\"fa fa-clone edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Feedback Questions\"\n container=\"body\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[routers.feedbackQuestions]\"\n [queryParams]=\"{ product_id: item.id }\">\n <i class=\"fa fa-comments edit-icon\" aria-hidden=\"true\"></i>\n </li>\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@if (!loading && totalRecordsUnFiltered === 0) {\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Products.NoDataMessage' | transloco\"> </pw-no-data>\n}\n<!-- password validation modal for delete product -->\n<pw-password-validation #passwordValidationModalForProductDelete\n [destructive]=\"true\"\n (successEvent)=\"deleteProduct($event)\">\n</pw-password-validation>\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);--public-btn-radius: 24px}.table-responsive td{padding:6px 10px!important;line-height:1.4;vertical-align:middle;word-break:break-word}.table-responsive th{vertical-align:bottom}.table-responsive td[data-head=Name]{font-weight:600;color:#1a1d21}.table-responsive td[data-head=\"Stripe Plan\"],.table-responsive td[data-head=\"Permission Key\"],.table-responsive td[data-head=\"Feature Key\"],.table-responsive td[data-head=\"Product Key\"]{color:#5a6473;font-variant-numeric:tabular-nums}.table-responsive td[data-head=Price]{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}.table-responsive th:nth-child(9){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.bg-warning{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-1{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-2{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-3{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-4{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-5{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-6{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-warning-7{background-color:#efe6ed!important;color:#723162!important}.table-responsive .badge.bg-warning-8{background-color:#efe6e7!important;color:#723136!important}.table-responsive .badge.bg-warning-9{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-10{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-11{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-12{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-13{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-14{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-15{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-warning-16{background-color:#efe6ed!important;color:#723162!important}.table-responsive .badge.bg-warning-17{background-color:#efe6e7!important;color:#723136!important}.table-responsive .badge.bg-warning-18{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-19{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-20{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-21{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-22{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-23{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-24{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-cyan{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-1{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-2{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-3{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-4{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-5{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-6{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-cyan-7{background-color:#e8efe6!important;color:#3c7231!important}.table-responsive .badge.bg-cyan-8{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-cyan-9{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-10{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-11{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-12{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-13{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-14{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-15{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-cyan-16{background-color:#e8efe6!important;color:#3c7231!important}.table-responsive .badge.bg-cyan-17{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-cyan-18{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-19{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-20{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-21{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-22{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-23{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-24{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-blue-grey{background-color:#e6e9ef!important;color:#314772!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.bg-cyan-default{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-default-change{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-success:before,.table-responsive .badge.bg-danger:before{content:\"\";display:inline-block;box-sizing:border-box;width:7px;height:7px;margin-right:6px;border-radius:50%;vertical-align:middle}.table-responsive .badge.bg-success:before{background-color:currentColor}.table-responsive .badge.bg-danger:before{background-color:transparent;border:1.5px solid currentColor}.width-max-content{width:max-content}\n"], dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i2.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: i3$1.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage", "destructive"], outputs: ["successEvent"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$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: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
5904
6084
|
}
|
|
5905
6085
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ProductsListComponent, decorators: [{
|
|
5906
6086
|
type: Component,
|
|
5907
|
-
args: [{ selector: 'pw-admin-products-list', standalone: false, template: "<div class=\"col-xs-12 text-end d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Products</h2>\n <button *rbacAllow=\"'Pages.Admin.Product.Create'\"\n class=\"btn btn-sm btn-outline-primary\"\n [routerLink]=\"[routers.productDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Setup New Product\n </button>\n</div>\n@if (loading) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table #dt\n [value]=\"products\"\n [paginator]=\"totalRecords !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div class=\"col-12 col-sm-4\">\n <p-multiSelect inputId=\"products-list-feature-keys\" placeholder=\"Filter by feature keys\"\n [options]=\"featureKeysList\"\n (onChange)=\"onSearchOptionChange($event)\"\n [showHeader]=\"true\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"text-end\">\n <label for=\"products-list-search\" class=\"visually-hidden\">Search Product</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=\"products-list-search\"\n name=\"products-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search products...\"\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 class=\"head\">\n <th scope=\"true\"\n pSortableColumn=\"name\">\n {{ 'Label.Name' | transloco }}\n <p-sortIcon field=\"name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"stripe_plan_id\">\n {{ 'Admin.Products.StripePlan' | transloco }}\n <p-sortIcon field=\"stripe_plan_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"permission_key\">\n {{ 'Admin.Products.PermissionKey' | transloco }}\n <p-sortIcon field=\"permission_key\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"feature_key\">\n {{ 'Admin.Products.FeatureKey' | transloco }}\n <p-sortIcon field=\"feature_key\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"product_key\">\n {{ 'Admin.Products.ProductKey' | transloco }}\n <p-sortIcon field=\"product_key\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"category\">\n {{ 'Admin.Products.Category' | transloco }}\n <p-sortIcon field=\"category\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"region\">\n {{ 'Admin.Products.Region' | transloco }}\n <p-sortIcon field=\"region\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"currency\">\n {{ 'Admin.Products.Currency' | transloco }}\n <p-sortIcon field=\"currency\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"price_per_unit\">\n {{ 'Admin.Products.Price' | transloco }}\n <p-sortIcon field=\"price_per_unit\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"active\">\n {{ 'Label.IsActive' | transloco }}\n <p-sortIcon field=\"active\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"billing_frequency\">\n {{ 'Admin.Products.Billing' | transloco }}\n <p-sortIcon field=\"billing_frequency\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-item>\n <tr>\n <td data-head=\"Name\">{{ item.name }}</td>\n <td data-head=\"Stripe Plan\">{{ item.stripe_plan_id }}</td>\n <td data-head=\"Permission Key\">{{ item.permission_key }}</td>\n <td data-head=\"Feature Key\">{{ item.feature_key }}</td>\n <td data-head=\"Product Key\">{{ item.product_key }}</td>\n <td data-head=\"Category\">\n <span [appDynamicBadge]=\"{ itemsArray: categories, item: item.category }\"\n color=\"warning\"\n class=\"badge\">{{ item.category }}</span>\n </td>\n <td data-head=\"Region\">\n <span [appDynamicBadge]=\"{ itemsArray: regions, item: item.region }\"\n color=\"cyan\"\n class=\"badge\">{{ item.region }}</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\">{{ item.price_per_unit }}</td>\n <td data-head=\"Active\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.active }\"\n color=\"success-danger\"\n class=\"badge\">{{ item?.active ? 'Yes' : 'No' }}</span>\n </td>\n <td data-head=\"Billing\">\n <span class=\"badge\"\n [appDynamicBadge]=\"{\n itemsArray: billingFrequency,\n item: item?.billing_frequency\n }\"\n color=\"blue-grey\">{{ item.billing_frequency }}</span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline width-max-content\">\n <li ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n *rbacAllow=\"'Pages.Admin.Product.Edit'\"\n [routerLink]=\"[routers.productDetails + item.id]\">\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 *rbacAllow=\"'Pages.Admin.Product.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 <li ngbTooltip=\"Users List\"\n class=\"me-2 me-sm-3\"\n *rbacAllow=\"'Pages.Admin.Product.Edit'\"\n [routerLink]=\"[routers.productsUserList + item.id]\">\n <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Duplicate The Product\"\n class=\"me-sm-3\"\n [routerLink]=\"[routers.productDetails + 'add']\"\n [queryParams]=\"{ duplicate_product_id: item.id }\">\n <i class=\"fa fa-clone edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Feedback Questions\"\n container=\"body\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[routers.feedbackQuestions]\"\n [queryParams]=\"{ product_id: item.id }\">\n <i class=\"fa fa-comments edit-icon\" aria-hidden=\"true\"></i>\n </li>\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@if (!loading && totalRecordsUnFiltered === 0) {\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Products.NoDataMessage' | transloco\"> </pw-no-data>\n}\n<!-- password validation modal for delete product -->\n<pw-password-validation #passwordValidationModalForProductDelete\n [destructive]=\"true\"\n (successEvent)=\"deleteProduct($event)\">\n</pw-password-validation>\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);--public-btn-radius: 24px}.table-responsive td{padding:6px 10px!important;line-height:1.4;vertical-align:middle;word-break:break-word}.table-responsive th{vertical-align:bottom}.table-responsive td[data-head=Name]{font-weight:600;color:#1a1d21}.table-responsive td[data-head=\"Stripe Plan\"],.table-responsive td[data-head=\"Permission Key\"],.table-responsive td[data-head=\"Feature Key\"],.table-responsive td[data-head=\"Product Key\"]{color:#5a6473;font-variant-numeric:tabular-nums}.table-responsive td[data-head=Price]{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}.table-responsive th:nth-child(9){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.bg-warning{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-1{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-2{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-3{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-4{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-5{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-6{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-warning-7{background-color:#efe6ed!important;color:#723162!important}.table-responsive .badge.bg-warning-8{background-color:#efe6e7!important;color:#723136!important}.table-responsive .badge.bg-warning-9{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-10{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-11{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-12{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-13{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-14{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-15{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-warning-16{background-color:#efe6ed!important;color:#723162!important}.table-responsive .badge.bg-warning-17{background-color:#efe6e7!important;color:#723136!important}.table-responsive .badge.bg-warning-18{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-19{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-20{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-21{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-22{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-23{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-24{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-cyan{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-1{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-2{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-3{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-4{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-5{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-6{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-cyan-7{background-color:#e8efe6!important;color:#3c7231!important}.table-responsive .badge.bg-cyan-8{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-cyan-9{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-10{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-11{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-12{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-13{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-14{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-15{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-cyan-16{background-color:#e8efe6!important;color:#3c7231!important}.table-responsive .badge.bg-cyan-17{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-cyan-18{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-19{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-20{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-21{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-22{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-23{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-24{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-blue-grey{background-color:#e6e9ef!important;color:#314772!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.bg-cyan-default{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-default-change{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-success:before,.table-responsive .badge.bg-danger:before{content:\"\";display:inline-block;box-sizing:border-box;width:7px;height:7px;margin-right:6px;border-radius:50%;vertical-align:middle}.table-responsive .badge.bg-success:before{background-color:currentColor}.table-responsive .badge.bg-danger:before{background-color:transparent;border:1.5px solid currentColor}.width-max-content{width:max-content}\n"] }]
|
|
6087
|
+
args: [{ selector: 'pw-admin-products-list', standalone: false, template: "<div class=\"col-xs-12 text-end d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Products</h2>\n <button *rbacAllow=\"'Pages.Admin.Product.Create'\"\n class=\"btn btn-sm btn-outline-primary\"\n [routerLink]=\"[routers.productDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Setup New Product\n </button>\n</div>\n@if (loading) {\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\"\n [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <p-table #dt\n [value]=\"products\"\n [paginator]=\"totalRecords !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div class=\"col-12 col-sm-4\">\n <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"products-list-feature-keys\" placeholder=\"Filter by feature keys\"\n [options]=\"featureKeysList\"\n (onChange)=\"onSearchOptionChange($event)\"\n [showHeader]=\"true\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"text-end\">\n <label for=\"products-list-search\" class=\"visually-hidden\">Search Product</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=\"products-list-search\"\n name=\"products-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search products...\"\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 class=\"head\">\n <th scope=\"true\"\n pSortableColumn=\"name\">\n {{ 'Label.Name' | transloco }}\n <p-sortIcon field=\"name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"stripe_plan_id\">\n {{ 'Admin.Products.StripePlan' | transloco }}\n <p-sortIcon field=\"stripe_plan_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"permission_key\">\n {{ 'Admin.Products.PermissionKey' | transloco }}\n <p-sortIcon field=\"permission_key\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"feature_key\">\n {{ 'Admin.Products.FeatureKey' | transloco }}\n <p-sortIcon field=\"feature_key\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"product_key\">\n {{ 'Admin.Products.ProductKey' | transloco }}\n <p-sortIcon field=\"product_key\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"category\">\n {{ 'Admin.Products.Category' | transloco }}\n <p-sortIcon field=\"category\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"region\">\n {{ 'Admin.Products.Region' | transloco }}\n <p-sortIcon field=\"region\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"currency\">\n {{ 'Admin.Products.Currency' | transloco }}\n <p-sortIcon field=\"currency\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"price_per_unit\">\n {{ 'Admin.Products.Price' | transloco }}\n <p-sortIcon field=\"price_per_unit\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"active\">\n {{ 'Label.IsActive' | transloco }}\n <p-sortIcon field=\"active\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"billing_frequency\">\n {{ 'Admin.Products.Billing' | transloco }}\n <p-sortIcon field=\"billing_frequency\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n class=\"actions-list-two\">{{ 'Label.Actions' | transloco }}</th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-item>\n <tr>\n <td data-head=\"Name\">{{ item.name }}</td>\n <td data-head=\"Stripe Plan\">{{ item.stripe_plan_id }}</td>\n <td data-head=\"Permission Key\">{{ item.permission_key }}</td>\n <td data-head=\"Feature Key\">{{ item.feature_key }}</td>\n <td data-head=\"Product Key\">{{ item.product_key }}</td>\n <td data-head=\"Category\">\n <span [appDynamicBadge]=\"{ itemsArray: categories, item: item.category }\"\n color=\"warning\"\n class=\"badge\">{{ item.category }}</span>\n </td>\n <td data-head=\"Region\">\n <span [appDynamicBadge]=\"{ itemsArray: regions, item: item.region }\"\n color=\"cyan\"\n class=\"badge\">{{ item.region }}</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\">{{ item.price_per_unit }}</td>\n <td data-head=\"Active\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.active }\"\n color=\"success-danger\"\n class=\"badge\">{{ item?.active ? 'Yes' : 'No' }}</span>\n </td>\n <td data-head=\"Billing\">\n <span class=\"badge\"\n [appDynamicBadge]=\"{\n itemsArray: billingFrequency,\n item: item?.billing_frequency\n }\"\n color=\"blue-grey\">{{ item.billing_frequency }}</span>\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline width-max-content\">\n <li ngbTooltip=\"Edit\"\n class=\"me-2 me-sm-3\"\n *rbacAllow=\"'Pages.Admin.Product.Edit'\"\n [routerLink]=\"[routers.productDetails + item.id]\">\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 *rbacAllow=\"'Pages.Admin.Product.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 <li ngbTooltip=\"Users List\"\n class=\"me-2 me-sm-3\"\n *rbacAllow=\"'Pages.Admin.Product.Edit'\"\n [routerLink]=\"[routers.productsUserList + item.id]\">\n <i class=\"fa fa-tasks cta1-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Duplicate The Product\"\n class=\"me-sm-3\"\n [routerLink]=\"[routers.productDetails + 'add']\"\n [queryParams]=\"{ duplicate_product_id: item.id }\">\n <i class=\"fa fa-clone edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Feedback Questions\"\n container=\"body\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[routers.feedbackQuestions]\"\n [queryParams]=\"{ product_id: item.id }\">\n <i class=\"fa fa-comments edit-icon\" aria-hidden=\"true\"></i>\n </li>\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@if (!loading && totalRecordsUnFiltered === 0) {\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Products.NoDataMessage' | transloco\"> </pw-no-data>\n}\n<!-- password validation modal for delete product -->\n<pw-password-validation #passwordValidationModalForProductDelete\n [destructive]=\"true\"\n (successEvent)=\"deleteProduct($event)\">\n</pw-password-validation>\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);--public-btn-radius: 24px}.table-responsive td{padding:6px 10px!important;line-height:1.4;vertical-align:middle;word-break:break-word}.table-responsive th{vertical-align:bottom}.table-responsive td[data-head=Name]{font-weight:600;color:#1a1d21}.table-responsive td[data-head=\"Stripe Plan\"],.table-responsive td[data-head=\"Permission Key\"],.table-responsive td[data-head=\"Feature Key\"],.table-responsive td[data-head=\"Product Key\"]{color:#5a6473;font-variant-numeric:tabular-nums}.table-responsive td[data-head=Price]{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}.table-responsive th:nth-child(9){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.bg-warning{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-1{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-2{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-3{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-4{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-5{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-6{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-warning-7{background-color:#efe6ed!important;color:#723162!important}.table-responsive .badge.bg-warning-8{background-color:#efe6e7!important;color:#723136!important}.table-responsive .badge.bg-warning-9{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-10{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-11{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-12{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-13{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-14{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-15{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-warning-16{background-color:#efe6ed!important;color:#723162!important}.table-responsive .badge.bg-warning-17{background-color:#efe6e7!important;color:#723136!important}.table-responsive .badge.bg-warning-18{background-color:#efebe6!important;color:#725731!important}.table-responsive .badge.bg-warning-19{background-color:#edefe6!important;color:#627231!important}.table-responsive .badge.bg-warning-20{background-color:#e7efe6!important;color:#367231!important}.table-responsive .badge.bg-warning-21{background-color:#e6efeb!important;color:#317257!important}.table-responsive .badge.bg-warning-22{background-color:#e6edef!important;color:#316272!important}.table-responsive .badge.bg-warning-23{background-color:#e6e7ef!important;color:#313672!important}.table-responsive .badge.bg-warning-24{background-color:#ebe6ef!important;color:#573172!important}.table-responsive .badge.bg-cyan{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-1{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-2{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-3{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-4{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-5{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-6{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-cyan-7{background-color:#e8efe6!important;color:#3c7231!important}.table-responsive .badge.bg-cyan-8{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-cyan-9{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-10{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-11{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-12{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-13{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-14{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-15{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-cyan-16{background-color:#e8efe6!important;color:#3c7231!important}.table-responsive .badge.bg-cyan-17{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-cyan-18{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-19{background-color:#e6e8ef!important;color:#313c72!important}.table-responsive .badge.bg-cyan-20{background-color:#ebe6ef!important;color:#523172!important}.table-responsive .badge.bg-cyan-21{background-color:#efe6ee!important;color:#723167!important}.table-responsive .badge.bg-cyan-22{background-color:#efe6e8!important;color:#72313c!important}.table-responsive .badge.bg-cyan-23{background-color:#efebe6!important;color:#725231!important}.table-responsive .badge.bg-cyan-24{background-color:#eeefe6!important;color:#677231!important}.table-responsive .badge.bg-blue-grey{background-color:#e6e9ef!important;color:#314772!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.bg-cyan-default{background-color:#e6eeef!important;color:#316772!important}.table-responsive .badge.bg-cyan-default-change{background-color:#e6efeb!important;color:#317252!important}.table-responsive .badge.bg-success:before,.table-responsive .badge.bg-danger:before{content:\"\";display:inline-block;box-sizing:border-box;width:7px;height:7px;margin-right:6px;border-radius:50%;vertical-align:middle}.table-responsive .badge.bg-success:before{background-color:currentColor}.table-responsive .badge.bg-danger:before{background-color:transparent;border:1.5px solid currentColor}.width-max-content{width:max-content}\n"] }]
|
|
5908
6088
|
}], ctorParameters: () => [{ type: i1$1.ProductService }, { type: i1$1.AuthService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }], propDecorators: { passwordValidationModalForProductDelete: [{
|
|
5909
6089
|
type: ViewChild,
|
|
5910
6090
|
args: ['passwordValidationModalForProductDelete', { static: false }]
|
|
@@ -6502,11 +6682,11 @@ class ResourcesIndexComponent extends AppBaseComponent {
|
|
|
6502
6682
|
super.ngOnDestroy();
|
|
6503
6683
|
}
|
|
6504
6684
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ResourcesIndexComponent, deps: [{ token: i1.AdminService }, { token: i1$1.TagService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i3$1.ConfirmDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6505
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: ResourcesIndexComponent, isStandalone: false, selector: "pw-resources-index", usesInheritance: true, ngImport: i0, template: "\n<div class=\"row\">\n <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">{{'Resource.Posts.Title' | transloco}}</h2>\n <button *rbacAllow=\"blogPermission\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n [routerLink]=\"['/' + routers.createResource]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{'Resource.Add' | transloco}}\n </button>\n </div>\n</div>\n<div class=\"col-12 mb-3\">\n <p [innerHTML]=\"'Resource.Description' | transloco\"></p>\n</div>\n\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt\n [value]=\"data.posts\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div class=\"col-sm-4\">\n <p-multiSelect inputId=\"resources-index-tags\"\n [showToggleAll]=\"true\"\n [options]=\"tagOptions\"\n [(ngModel)]=\"selectedTags\"\n (onChange)=\"onTagChange($event)\"\n placeholder=\"Filter by tags\"\n [showHeader]=\"true\"\n maxSelectedLabels=\"2\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"text-end\">\n <label for=\"resources-index-search\" class=\"visually-hidden\">Search Resources</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=\"resources-index-search\"\n name=\"resources-index-search\"\n [(ngModel)]=\"searchTextItems\"\n pInputText\n placeholder=\"Search resources...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"search-input\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Resource.Posts.Author' | transloco }}</th>\n <th scope=\"true\"\n pSortableColumn=\"title\">\n {{ 'Label.Title' | transloco }}\n <p-sortIcon field=\"title\"></p-sortIcon>\n </th>\n <th scope=\"true\">\n {{ 'Resource.Posts.Tags' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"showcase\">\n {{ 'Resource.Posts.Showcase' | transloco }}\n <p-sortIcon field=\"showcase\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"when\">\n {{ 'Resource.Posts.When' | transloco }}\n <p-sortIcon field=\"when\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"published_at\">\n {{ 'Resource.Posts.PublishedAt' | transloco }}\n <p-sortIcon field=\"published_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"accepted_at\">\n {{ 'Resource.Posts.AcceptedAt' | transloco }}\n <p-sortIcon field=\"accepted_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"view\">\n {{ 'Resource.Posts.View' | transloco }}\n <p-sortIcon field=\"view\"></p-sortIcon>\n </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-item>\n <tr>\n <td data-head=\"Title\">\n <a [routerLink]=\"['/members', item.author?.slug]\"\n class=\"d-flex align-items-center\">\n @if (item.author?.avatar) {\n <img\n [src]=\"item.author?.avatar[0].url\"\n alt=\"author\"\n width=\"25\"\n class=\"img-fluid\" />\n }\n @if (!item.author?.avatar) {\n <img\n src=\"assets/img/icons/male.png\"\n alt=\"author\"\n width=\"25\"\n class=\"img-fluid\" />\n }\n <span class=\"ms-2\">{{ item.author | ifNameNullShowEmail }}</span>\n </a>\n </td>\n <td data-head=\"Title\">\n <a [routerLink]=\"['/resources/view', item?.slug]\"\n target=\"_blank\">{{ item.title }}</a>\n </td>\n <td data-head=\"tags\">\n @for (tag of item?.tags?.slice(0, 3); track tag) {\n <span\n class=\"badge m-1\"\n [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n [colorByName]=\"true\"\n [dataName]=\"tag.name\"\n color=\"cyan\">{{ tag.name }}</span>\n }\n\n @if (item.expandedTags) {\n <span>\n @for (tag of item?.tags?.slice(3); track tag) {\n <span\n class=\"badge m-1\"\n [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n [colorByName]=\"true\"\n [dataName]=\"tag.name\"\n color=\"cyan\" >{{ tag.name }}</span>\n }\n </span>\n }\n\n @if (item?.tags?.length > 3) {\n <span class=\"fw-bold\">\n <a (click)=\"item.expandedTags = !item.expandedTags\">\n <span>...</span>\n </a>\n </span>\n }\n </td>\n\n <td data-head=\"showcase\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.showcase }\"\n [ngClass]=\"item?.showcase ? 'bg-success' : 'bg-secondary'\"\n class=\"badge\">{{ !!item?.showcase }}</span>\n </td>\n <td data-head=\"when\">{{ item.when | dateFormat }}</td>\n <td data-head=\"Published At\">{{ item.published_at | dateFormat }}</td>\n <td data-head=\"Accepted At\">{{ item.accepted_at | dateFormat }}</td>\n <td data-head=\"View\">{{ item.view }}</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 *rbacAllow=\"blogPermission\"\n (keydown.enter)=\"navigateToResourceDetails(item)\"\n (click)=\"navigateToResourceDetails(item)\">\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 *rbacAllow=\"blogPermission\"\n (keydown.enter)=\"onDeletePost(item)\"\n (click)=\"onDeletePost(item)\">\n <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Insight\"\n class=\"me-2 me-sm-3\"\n *rbacAllow=\"isBlogAdmin\"\n [routerLink]=\"[\n '/' + routers.resourcesList + item.id + '/insight'\n ]\"\n [queryParams]=\"{ insight_name: item?.title }\">\n <i class=\"fa fa-fw fa-list fa-lg\" aria-hidden=\"true\"></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n @if (data.object_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n }\n</div>\n<div class=\"col-12 text-center\">\n @if (data.unfiltered_count === 0 && isLoaded) {\n <pw-no-data [withImage]=\"true\" [message]=\"'Resource.Posts.NoDataMessage' | transloco\"\n >\n </pw-no-data>\n }\n</div>\n", styles: [".search-input{max-width:90%}\n"], dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i2.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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$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.LazyImgDirective, selector: "img" }, { 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: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }] }); }
|
|
6685
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: ResourcesIndexComponent, isStandalone: false, selector: "pw-resources-index", usesInheritance: true, ngImport: i0, template: "\n<div class=\"row\">\n <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">{{'Resource.Posts.Title' | transloco}}</h2>\n <button *rbacAllow=\"blogPermission\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n [routerLink]=\"['/' + routers.createResource]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{'Resource.Add' | transloco}}\n </button>\n </div>\n</div>\n<div class=\"col-12 mb-3\">\n <p [innerHTML]=\"'Resource.Description' | transloco\"></p>\n</div>\n\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt\n [value]=\"data.posts\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div class=\"col-sm-4\">\n <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"resources-index-tags\"\n [showToggleAll]=\"true\"\n [options]=\"tagOptions\"\n [(ngModel)]=\"selectedTags\"\n (onChange)=\"onTagChange($event)\"\n placeholder=\"Filter by tags\"\n [showHeader]=\"true\"\n maxSelectedLabels=\"2\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"text-end\">\n <label for=\"resources-index-search\" class=\"visually-hidden\">Search Resources</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=\"resources-index-search\"\n name=\"resources-index-search\"\n [(ngModel)]=\"searchTextItems\"\n pInputText\n placeholder=\"Search resources...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"search-input\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Resource.Posts.Author' | transloco }}</th>\n <th scope=\"true\"\n pSortableColumn=\"title\">\n {{ 'Label.Title' | transloco }}\n <p-sortIcon field=\"title\"></p-sortIcon>\n </th>\n <th scope=\"true\">\n {{ 'Resource.Posts.Tags' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"showcase\">\n {{ 'Resource.Posts.Showcase' | transloco }}\n <p-sortIcon field=\"showcase\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"when\">\n {{ 'Resource.Posts.When' | transloco }}\n <p-sortIcon field=\"when\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"published_at\">\n {{ 'Resource.Posts.PublishedAt' | transloco }}\n <p-sortIcon field=\"published_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"accepted_at\">\n {{ 'Resource.Posts.AcceptedAt' | transloco }}\n <p-sortIcon field=\"accepted_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"view\">\n {{ 'Resource.Posts.View' | transloco }}\n <p-sortIcon field=\"view\"></p-sortIcon>\n </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-item>\n <tr>\n <td data-head=\"Title\">\n <a [routerLink]=\"['/members', item.author?.slug]\"\n class=\"d-flex align-items-center\">\n @if (item.author?.avatar) {\n <img\n [src]=\"item.author?.avatar[0].url\"\n alt=\"author\"\n width=\"25\"\n class=\"img-fluid\" />\n }\n @if (!item.author?.avatar) {\n <img\n src=\"assets/img/icons/male.png\"\n alt=\"author\"\n width=\"25\"\n class=\"img-fluid\" />\n }\n <span class=\"ms-2\">{{ item.author | ifNameNullShowEmail }}</span>\n </a>\n </td>\n <td data-head=\"Title\">\n <a [routerLink]=\"['/resources/view', item?.slug]\"\n target=\"_blank\">{{ item.title }}</a>\n </td>\n <td data-head=\"tags\">\n @for (tag of item?.tags?.slice(0, 3); track tag) {\n <span\n class=\"badge m-1\"\n [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n [colorByName]=\"true\"\n [dataName]=\"tag.name\"\n color=\"cyan\">{{ tag.name }}</span>\n }\n\n @if (item.expandedTags) {\n <span>\n @for (tag of item?.tags?.slice(3); track tag) {\n <span\n class=\"badge m-1\"\n [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n [colorByName]=\"true\"\n [dataName]=\"tag.name\"\n color=\"cyan\" >{{ tag.name }}</span>\n }\n </span>\n }\n\n @if (item?.tags?.length > 3) {\n <span class=\"fw-bold\">\n <a (click)=\"item.expandedTags = !item.expandedTags\">\n <span>...</span>\n </a>\n </span>\n }\n </td>\n\n <td data-head=\"showcase\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.showcase }\"\n [ngClass]=\"item?.showcase ? 'bg-success' : 'bg-secondary'\"\n class=\"badge\">{{ !!item?.showcase }}</span>\n </td>\n <td data-head=\"when\">{{ item.when | dateFormat }}</td>\n <td data-head=\"Published At\">{{ item.published_at | dateFormat }}</td>\n <td data-head=\"Accepted At\">{{ item.accepted_at | dateFormat }}</td>\n <td data-head=\"View\">{{ item.view }}</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 *rbacAllow=\"blogPermission\"\n (keydown.enter)=\"navigateToResourceDetails(item)\"\n (click)=\"navigateToResourceDetails(item)\">\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 *rbacAllow=\"blogPermission\"\n (keydown.enter)=\"onDeletePost(item)\"\n (click)=\"onDeletePost(item)\">\n <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Insight\"\n class=\"me-2 me-sm-3\"\n *rbacAllow=\"isBlogAdmin\"\n [routerLink]=\"[\n '/' + routers.resourcesList + item.id + '/insight'\n ]\"\n [queryParams]=\"{ insight_name: item?.title }\">\n <i class=\"fa fa-fw fa-list fa-lg\" aria-hidden=\"true\"></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n @if (data.object_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n }\n</div>\n<div class=\"col-12 text-center\">\n @if (data.unfiltered_count === 0 && isLoaded) {\n <pw-no-data [withImage]=\"true\" [message]=\"'Resource.Posts.NoDataMessage' | transloco\"\n >\n </pw-no-data>\n }\n</div>\n", styles: [".search-input{max-width:90%}\n"], dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i2.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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$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.LazyImgDirective, selector: "img" }, { 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: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }] }); }
|
|
6506
6686
|
}
|
|
6507
6687
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: ResourcesIndexComponent, decorators: [{
|
|
6508
6688
|
type: Component,
|
|
6509
|
-
args: [{ selector: 'pw-resources-index', standalone: false, template: "\n<div class=\"row\">\n <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">{{'Resource.Posts.Title' | transloco}}</h2>\n <button *rbacAllow=\"blogPermission\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n [routerLink]=\"['/' + routers.createResource]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{'Resource.Add' | transloco}}\n </button>\n </div>\n</div>\n<div class=\"col-12 mb-3\">\n <p [innerHTML]=\"'Resource.Description' | transloco\"></p>\n</div>\n\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt\n [value]=\"data.posts\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div class=\"col-sm-4\">\n <p-multiSelect inputId=\"resources-index-tags\"\n [showToggleAll]=\"true\"\n [options]=\"tagOptions\"\n [(ngModel)]=\"selectedTags\"\n (onChange)=\"onTagChange($event)\"\n placeholder=\"Filter by tags\"\n [showHeader]=\"true\"\n maxSelectedLabels=\"2\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"text-end\">\n <label for=\"resources-index-search\" class=\"visually-hidden\">Search Resources</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=\"resources-index-search\"\n name=\"resources-index-search\"\n [(ngModel)]=\"searchTextItems\"\n pInputText\n placeholder=\"Search resources...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"search-input\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Resource.Posts.Author' | transloco }}</th>\n <th scope=\"true\"\n pSortableColumn=\"title\">\n {{ 'Label.Title' | transloco }}\n <p-sortIcon field=\"title\"></p-sortIcon>\n </th>\n <th scope=\"true\">\n {{ 'Resource.Posts.Tags' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"showcase\">\n {{ 'Resource.Posts.Showcase' | transloco }}\n <p-sortIcon field=\"showcase\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"when\">\n {{ 'Resource.Posts.When' | transloco }}\n <p-sortIcon field=\"when\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"published_at\">\n {{ 'Resource.Posts.PublishedAt' | transloco }}\n <p-sortIcon field=\"published_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"accepted_at\">\n {{ 'Resource.Posts.AcceptedAt' | transloco }}\n <p-sortIcon field=\"accepted_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"view\">\n {{ 'Resource.Posts.View' | transloco }}\n <p-sortIcon field=\"view\"></p-sortIcon>\n </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-item>\n <tr>\n <td data-head=\"Title\">\n <a [routerLink]=\"['/members', item.author?.slug]\"\n class=\"d-flex align-items-center\">\n @if (item.author?.avatar) {\n <img\n [src]=\"item.author?.avatar[0].url\"\n alt=\"author\"\n width=\"25\"\n class=\"img-fluid\" />\n }\n @if (!item.author?.avatar) {\n <img\n src=\"assets/img/icons/male.png\"\n alt=\"author\"\n width=\"25\"\n class=\"img-fluid\" />\n }\n <span class=\"ms-2\">{{ item.author | ifNameNullShowEmail }}</span>\n </a>\n </td>\n <td data-head=\"Title\">\n <a [routerLink]=\"['/resources/view', item?.slug]\"\n target=\"_blank\">{{ item.title }}</a>\n </td>\n <td data-head=\"tags\">\n @for (tag of item?.tags?.slice(0, 3); track tag) {\n <span\n class=\"badge m-1\"\n [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n [colorByName]=\"true\"\n [dataName]=\"tag.name\"\n color=\"cyan\">{{ tag.name }}</span>\n }\n\n @if (item.expandedTags) {\n <span>\n @for (tag of item?.tags?.slice(3); track tag) {\n <span\n class=\"badge m-1\"\n [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n [colorByName]=\"true\"\n [dataName]=\"tag.name\"\n color=\"cyan\" >{{ tag.name }}</span>\n }\n </span>\n }\n\n @if (item?.tags?.length > 3) {\n <span class=\"fw-bold\">\n <a (click)=\"item.expandedTags = !item.expandedTags\">\n <span>...</span>\n </a>\n </span>\n }\n </td>\n\n <td data-head=\"showcase\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.showcase }\"\n [ngClass]=\"item?.showcase ? 'bg-success' : 'bg-secondary'\"\n class=\"badge\">{{ !!item?.showcase }}</span>\n </td>\n <td data-head=\"when\">{{ item.when | dateFormat }}</td>\n <td data-head=\"Published At\">{{ item.published_at | dateFormat }}</td>\n <td data-head=\"Accepted At\">{{ item.accepted_at | dateFormat }}</td>\n <td data-head=\"View\">{{ item.view }}</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 *rbacAllow=\"blogPermission\"\n (keydown.enter)=\"navigateToResourceDetails(item)\"\n (click)=\"navigateToResourceDetails(item)\">\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 *rbacAllow=\"blogPermission\"\n (keydown.enter)=\"onDeletePost(item)\"\n (click)=\"onDeletePost(item)\">\n <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Insight\"\n class=\"me-2 me-sm-3\"\n *rbacAllow=\"isBlogAdmin\"\n [routerLink]=\"[\n '/' + routers.resourcesList + item.id + '/insight'\n ]\"\n [queryParams]=\"{ insight_name: item?.title }\">\n <i class=\"fa fa-fw fa-list fa-lg\" aria-hidden=\"true\"></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n @if (data.object_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n }\n</div>\n<div class=\"col-12 text-center\">\n @if (data.unfiltered_count === 0 && isLoaded) {\n <pw-no-data [withImage]=\"true\" [message]=\"'Resource.Posts.NoDataMessage' | transloco\"\n >\n </pw-no-data>\n }\n</div>\n", styles: [".search-input{max-width:90%}\n"] }]
|
|
6689
|
+
args: [{ selector: 'pw-resources-index', standalone: false, template: "\n<div class=\"row\">\n <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">{{'Resource.Posts.Title' | transloco}}</h2>\n <button *rbacAllow=\"blogPermission\"\n class=\"btn btn-sm btn-outline-primary float-end\"\n [routerLink]=\"['/' + routers.createResource]\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{'Resource.Add' | transloco}}\n </button>\n </div>\n</div>\n<div class=\"col-12 mb-3\">\n <p [innerHTML]=\"'Resource.Description' | transloco\"></p>\n</div>\n\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt\n [value]=\"data.posts\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div class=\"col-sm-4\">\n <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"resources-index-tags\"\n [showToggleAll]=\"true\"\n [options]=\"tagOptions\"\n [(ngModel)]=\"selectedTags\"\n (onChange)=\"onTagChange($event)\"\n placeholder=\"Filter by tags\"\n [showHeader]=\"true\"\n maxSelectedLabels=\"2\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n <div class=\"text-end\">\n <label for=\"resources-index-search\" class=\"visually-hidden\">Search Resources</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=\"resources-index-search\"\n name=\"resources-index-search\"\n [(ngModel)]=\"searchTextItems\"\n pInputText\n placeholder=\"Search resources...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"search-input\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\">{{ 'Resource.Posts.Author' | transloco }}</th>\n <th scope=\"true\"\n pSortableColumn=\"title\">\n {{ 'Label.Title' | transloco }}\n <p-sortIcon field=\"title\"></p-sortIcon>\n </th>\n <th scope=\"true\">\n {{ 'Resource.Posts.Tags' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"showcase\">\n {{ 'Resource.Posts.Showcase' | transloco }}\n <p-sortIcon field=\"showcase\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"when\">\n {{ 'Resource.Posts.When' | transloco }}\n <p-sortIcon field=\"when\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"published_at\">\n {{ 'Resource.Posts.PublishedAt' | transloco }}\n <p-sortIcon field=\"published_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"accepted_at\">\n {{ 'Resource.Posts.AcceptedAt' | transloco }}\n <p-sortIcon field=\"accepted_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"view\">\n {{ 'Resource.Posts.View' | transloco }}\n <p-sortIcon field=\"view\"></p-sortIcon>\n </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-item>\n <tr>\n <td data-head=\"Title\">\n <a [routerLink]=\"['/members', item.author?.slug]\"\n class=\"d-flex align-items-center\">\n @if (item.author?.avatar) {\n <img\n [src]=\"item.author?.avatar[0].url\"\n alt=\"author\"\n width=\"25\"\n class=\"img-fluid\" />\n }\n @if (!item.author?.avatar) {\n <img\n src=\"assets/img/icons/male.png\"\n alt=\"author\"\n width=\"25\"\n class=\"img-fluid\" />\n }\n <span class=\"ms-2\">{{ item.author | ifNameNullShowEmail }}</span>\n </a>\n </td>\n <td data-head=\"Title\">\n <a [routerLink]=\"['/resources/view', item?.slug]\"\n target=\"_blank\">{{ item.title }}</a>\n </td>\n <td data-head=\"tags\">\n @for (tag of item?.tags?.slice(0, 3); track tag) {\n <span\n class=\"badge m-1\"\n [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n [colorByName]=\"true\"\n [dataName]=\"tag.name\"\n color=\"cyan\">{{ tag.name }}</span>\n }\n\n @if (item.expandedTags) {\n <span>\n @for (tag of item?.tags?.slice(3); track tag) {\n <span\n class=\"badge m-1\"\n [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n [colorByName]=\"true\"\n [dataName]=\"tag.name\"\n color=\"cyan\" >{{ tag.name }}</span>\n }\n </span>\n }\n\n @if (item?.tags?.length > 3) {\n <span class=\"fw-bold\">\n <a (click)=\"item.expandedTags = !item.expandedTags\">\n <span>...</span>\n </a>\n </span>\n }\n </td>\n\n <td data-head=\"showcase\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.showcase }\"\n [ngClass]=\"item?.showcase ? 'bg-success' : 'bg-secondary'\"\n class=\"badge\">{{ !!item?.showcase }}</span>\n </td>\n <td data-head=\"when\">{{ item.when | dateFormat }}</td>\n <td data-head=\"Published At\">{{ item.published_at | dateFormat }}</td>\n <td data-head=\"Accepted At\">{{ item.accepted_at | dateFormat }}</td>\n <td data-head=\"View\">{{ item.view }}</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 *rbacAllow=\"blogPermission\"\n (keydown.enter)=\"navigateToResourceDetails(item)\"\n (click)=\"navigateToResourceDetails(item)\">\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 *rbacAllow=\"blogPermission\"\n (keydown.enter)=\"onDeletePost(item)\"\n (click)=\"onDeletePost(item)\">\n <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Insight\"\n class=\"me-2 me-sm-3\"\n *rbacAllow=\"isBlogAdmin\"\n [routerLink]=\"[\n '/' + routers.resourcesList + item.id + '/insight'\n ]\"\n [queryParams]=\"{ insight_name: item?.title }\">\n <i class=\"fa fa-fw fa-list fa-lg\" aria-hidden=\"true\"></i>\n </li>\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n @if (data.object_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n }\n</div>\n<div class=\"col-12 text-center\">\n @if (data.unfiltered_count === 0 && isLoaded) {\n <pw-no-data [withImage]=\"true\" [message]=\"'Resource.Posts.NoDataMessage' | transloco\"\n >\n </pw-no-data>\n }\n</div>\n", styles: [".search-input{max-width:90%}\n"] }]
|
|
6510
6690
|
}], ctorParameters: () => [{ type: i1.AdminService }, { type: i1$1.TagService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i3$1.ConfirmDialogService }] });
|
|
6511
6691
|
|
|
6512
6692
|
class ResourcesInsightComponent extends AppBaseComponent {
|
|
@@ -8255,11 +8435,11 @@ class InviteUsersComponent extends AppBaseComponent {
|
|
|
8255
8435
|
super.ngOnDestroy();
|
|
8256
8436
|
}
|
|
8257
8437
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: InviteUsersComponent, deps: [{ token: i9.UntypedFormBuilder }, { token: i1.AdminService }, { token: i1$1.ProductService }, { token: i0.Injector }, { token: i1$1.CommonService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8258
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: InviteUsersComponent, isStandalone: false, selector: "pw-invite-users", viewQueries: [{ propertyName: "refProduct", first: true, predicate: ["refProduct"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard user-details\">\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)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"\">Invite New User</h3>\n <p>Here you can send an invitation to a new user to try any of our products</p>\n </div>\n\n <div class=\"p-2 mt-3\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"mb-3 col-sm-4\">\n <pw-input-container [label]=\"'Label.FirstName' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.FirstName' | transloco\"\n class=\"col-md-6 p-0\"\n name=\"first_name\"\n controlId=\"invite-first_name\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.FirstName' | transloco\">\n <input type=\"text\"\n id=\"invite-first_name\"\n class=\"form-control\"\n formControlName=\"first_name\"\n [ngClass]=\"{\n 'is-invalid':\n form.get('first_name').touched && form.get('first_name').invalid\n }\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-sm-4\">\n <pw-input-container [label]=\"'Label.LastName' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.LastName' | transloco\"\n class=\"col-md-6 p-0\"\n name=\"last_name\"\n controlId=\"invite-last_name\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.LastName' | transloco\">\n <input type=\"text\"\n id=\"invite-last_name\"\n class=\"form-control\"\n formControlName=\"last_name\"\n [ngClass]=\"{\n 'is-invalid': form.get('last_name').touched && form.get('last_name').invalid\n }\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-sm-4\">\n <pw-input-container [label]=\"'Label.Email' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Email' | transloco\"\n class=\"col-md-6 p-0\"\n name=\"email\"\n controlId=\"invite-email\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.Email' | transloco\">\n <input type=\"text\"\n id=\"invite-email\"\n class=\"form-control\"\n formControlName=\"email\"\n [ngClass]=\"{\n 'is-invalid': form.get('email').touched && form.get('email').invalid\n }\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-sm-4\">\n <pw-input-container [label]=\"'Label.Product' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.SubscriptionProduct' | transloco\"\n name=\"product_id\"\n controlId=\"invite-product_id\"\n [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.Product' | transloco\">\n <p-autoComplete appendTo=\"body\" #refProduct\n [suggestions]=\"filteredProducts\"\n [ariaLabelledBy]=\"'invite-product_id-label'\"\n [ariaLabel]=\"'Label.Product' | transloco\"\n formControlName=\"product_id\"\n dataKey=\"id\"\n optionLabel=\"label\"\n [dropdown]=\"true\"\n [delay]=\"1000\"\n [type]=\"'search'\"\n (completeMethod)=\"searchProduct($event)\"\n (onSelect)=\"onProductChange($event)\"\n (onClear)=\"onProductClear($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search products...\"\n [inputStyle]=\"\n form.get('product_id').touched && form.get('product_id').invalid\n ? { border: '1px solid #ff586b' }\n : {}\n \"\n [multiple]=\"false\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-sm-4\">\n <pw-input-container label=\"{{'Label.Seats' | transloco}}{{unitsText}}\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Units' | transloco\"\n class=\"col-md-6 p-0\"\n name=\"units\"\n controlId=\"invite-units\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.Units' | transloco\">\n <input type=\"number\"\n id=\"invite-units\"\n class=\"form-control\"\n formControlName=\"units\"\n [ngClass]=\"{\n 'is-invalid': form.get('units').touched && form.get('units').invalid\n }\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-sm-4\">\n <pw-input-container [label]=\"'Admin.Subscriptions.MinUnits' | transloco\"\n [showTooltip]=\"true\"\n name=\"min_units\"\n controlId=\"invite-min_units\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.MinUnits' | transloco\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MinUnits' | transloco\">\n <input type=\"number\"\n id=\"invite-min_units\"\n min=\"0\"\n [max]=\"form.get('units').value\"\n class=\"form-control\"\n formControlName=\"min_units\" />\n </pw-input-container>\n </div>\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3 col-sm-4\"\n >\n <pw-input-container [label]=\"'Organization.OrganizationIndustry' | transloco\"\n name=\"organization_industry_id\" controlId=\"invite-organization_industry_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry'| transloco\">\n <p-select\n [ariaLabelledBy]=\"'invite-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-4\"\n >\n <pw-input-container [label]=\"'Organization.OrganizationSize' | transloco\"\n name=\"organization_size_id\" controlId=\"invite-organization_size_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize'| transloco\">\n <p-select\n [ariaLabelledBy]=\"'invite-organization_size_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationSize' | 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 @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3 col-sm-4\"\n >\n <pw-input-container [label]=\"'Organization.OrganizationType' | transloco\"\n name=\"organization_type_id\" controlId=\"invite-organization_type_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType'| transloco\">\n <p-select\n [ariaLabelledBy]=\"'invite-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 <div class=\"mb-3 col-sm-4\">\n <pw-input-container [label]=\"'Organization.OrganizationName' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationName'| transloco\"\n class=\"col-md-6 p-0\"\n name=\"name\" controlId=\"invite-organization-name\">\n <input type=\"text\"\n id=\"invite-organization-name\"\n class=\"form-control\"\n formControlName=\"name\"\n [ngClass]=\"{\n 'is-invalid': form.get('name').touched && form.get('name').invalid\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12 text-end\">\n <input type=\"button\"\n class=\"btn btn-secondary me-3\"\n value=\"Cancel\"\n (click)=\"form.reset(); totalRecordsUnFiltered = 0; back()\" />\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonBusy\"\n class=\"btn btn-primary\">Invite</button>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>", 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);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i4$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: 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: "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.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: "directive", type: i9.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "component", type: i3$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: i9.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
8438
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: InviteUsersComponent, isStandalone: false, selector: "pw-invite-users", viewQueries: [{ propertyName: "refProduct", first: true, predicate: ["refProduct"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard user-details\">\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)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"\">{{ 'Admin.Subscriptions.InviteNewUser' | transloco }}</h3>\n <p>{{ 'Admin.Subscriptions.InviteNewUserDescription' | transloco }}</p>\n </div>\n\n <div class=\"p-2 mt-3\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n\n <h3>{{ 'Admin.Subscriptions.Section.UserDetails' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-12 col-md-4\">\n <pw-input-container [label]=\"'Label.FirstName' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.FirstName' | transloco\"\n name=\"first_name\"\n controlId=\"invite-first_name\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.FirstName' | transloco\">\n <input type=\"text\"\n id=\"invite-first_name\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.InviteFirstName' | transloco\"\n formControlName=\"first_name\"\n [ngClass]=\"{\n 'is-invalid': form.get('first_name').touched && form.get('first_name').invalid\n }\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <pw-input-container [label]=\"'Label.LastName' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.LastName' | transloco\"\n name=\"last_name\"\n controlId=\"invite-last_name\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.LastName' | transloco\">\n <input type=\"text\"\n id=\"invite-last_name\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.InviteLastName' | transloco\"\n formControlName=\"last_name\"\n [ngClass]=\"{\n 'is-invalid': form.get('last_name').touched && form.get('last_name').invalid\n }\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <pw-input-container [label]=\"'Label.Email' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Email' | transloco\"\n name=\"email\"\n controlId=\"invite-email\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.Email' | transloco\">\n <input type=\"text\"\n id=\"invite-email\"\n class=\"form-control\"\n [placeholder]=\"'Label.EmailPlaceholder' | transloco\"\n formControlName=\"email\"\n [ngClass]=\"{\n 'is-invalid': form.get('email').touched && form.get('email').invalid\n }\" />\n </pw-input-container>\n </div>\n </div>\n\n <h3>{{ 'Admin.Subscriptions.Section.ProductSeats' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-12 col-md-4\">\n <pw-input-container [label]=\"'Label.Product' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.SubscriptionProduct' | transloco\"\n name=\"product_id\"\n controlId=\"invite-product_id\"\n [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.Product' | transloco\">\n <p-autoComplete appendTo=\"body\" #refProduct\n [suggestions]=\"filteredProducts\"\n [ariaLabelledBy]=\"'invite-product_id-label'\"\n [ariaLabel]=\"'Label.Product' | transloco\"\n formControlName=\"product_id\"\n dataKey=\"id\"\n optionLabel=\"label\"\n [dropdown]=\"true\"\n [delay]=\"1000\"\n [type]=\"'search'\"\n (completeMethod)=\"searchProduct($event)\"\n (onSelect)=\"onProductChange($event)\"\n (onClear)=\"onProductClear($event)\"\n styleClass=\"w-100\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.SearchProducts' | transloco\"\n [inputStyleClass]=\"form.get('product_id').touched && form.get('product_id').invalid ? 'is-invalid' : ''\"\n [multiple]=\"false\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <pw-input-container label=\"{{'Label.Seats' | transloco}}{{unitsText}}\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Units' | transloco\"\n name=\"units\"\n controlId=\"invite-units\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.Units' | transloco\">\n <input type=\"number\"\n id=\"invite-units\"\n class=\"form-control\"\n formControlName=\"units\"\n [ngClass]=\"{\n 'is-invalid': form.get('units').touched && form.get('units').invalid\n }\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <pw-input-container [label]=\"'Admin.Subscriptions.MinUnits' | transloco\"\n [showTooltip]=\"true\"\n name=\"min_units\"\n controlId=\"invite-min_units\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.MinUnits' | transloco\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MinUnits' | transloco\">\n <input type=\"number\"\n id=\"invite-min_units\"\n min=\"0\"\n [max]=\"form.get('units').value\"\n class=\"form-control\"\n formControlName=\"min_units\" />\n </pw-input-container>\n </div>\n </div>\n\n <h3>{{ 'Admin.Subscriptions.Section.Organization' | transloco }}</h3>\n <div class=\"row\">\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3 col-12 col-md-4\">\n <pw-input-container [label]=\"'Organization.OrganizationIndustry' | transloco\"\n name=\"organization_industry_id\"\n controlId=\"invite-organization_industry_id\"\n [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\">\n <p-select\n [ariaLabelledBy]=\"'invite-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-12 col-md-4\">\n <pw-input-container [label]=\"'Organization.OrganizationSize' | transloco\"\n name=\"organization_size_id\"\n controlId=\"invite-organization_size_id\"\n [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\">\n <p-select\n [ariaLabelledBy]=\"'invite-organization_size_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationSize' | 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 @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3 col-12 col-md-4\">\n <pw-input-container [label]=\"'Organization.OrganizationType' | transloco\"\n name=\"organization_type_id\"\n controlId=\"invite-organization_type_id\"\n [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\">\n <p-select\n [ariaLabelledBy]=\"'invite-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 <div class=\"mb-3 col-12 col-md-4\">\n <pw-input-container [label]=\"'Organization.OrganizationName' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationName' | transloco\"\n name=\"name\"\n controlId=\"invite-organization-name\">\n <input type=\"text\"\n id=\"invite-organization-name\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n formControlName=\"name\"\n [ngClass]=\"{\n 'is-invalid': form.get('name').touched && form.get('name').invalid\n }\" />\n </pw-input-container>\n </div>\n </div>\n\n <div class=\"row\">\n <div class=\"col-12 text-end\">\n <button type=\"button\"\n class=\"btn btn-secondary me-3\"\n (click)=\"form.reset(); totalRecordsUnFiltered = 0; back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonBusy\"\n class=\"btn btn-primary\">\n {{ 'Button.Invite' | transloco }}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n</div>\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);--public-btn-radius: 24px}: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}\n"], dependencies: [{ kind: "component", type: i4$2.AutoComplete, selector: "p-autoComplete, p-autocomplete, p-auto-complete", inputs: ["minLength", "minQueryLength", "delay", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "addOnTab", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "typeahead", "addOnBlur", "separator", "appendTo", "motionOptions"], outputs: ["completeMethod", "onSelect", "onUnselect", "onAdd", "onFocus", "onBlur", "onDropdownClick", "onClear", "onInputKeydown", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: 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: "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.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: "directive", type: i9.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "component", type: i3$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: i9.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
8259
8439
|
}
|
|
8260
8440
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: InviteUsersComponent, decorators: [{
|
|
8261
8441
|
type: Component,
|
|
8262
|
-
args: [{ selector: 'pw-invite-users', standalone: false, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard user-details\">\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)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"\">Invite New User</h3>\n <p>Here you can send an invitation to a new user to try any of our products</p>\n </div>\n\n <div class=\"p-2 mt-3\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"mb-3 col-sm-4\">\n <pw-input-container [label]=\"'Label.FirstName' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.FirstName' | transloco\"\n class=\"col-md-6 p-0\"\n name=\"first_name\"\n controlId=\"invite-first_name\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.FirstName' | transloco\">\n <input type=\"text\"\n id=\"invite-first_name\"\n class=\"form-control\"\n formControlName=\"first_name\"\n [ngClass]=\"{\n 'is-invalid':\n form.get('first_name').touched && form.get('first_name').invalid\n }\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-sm-4\">\n <pw-input-container [label]=\"'Label.LastName' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.LastName' | transloco\"\n class=\"col-md-6 p-0\"\n name=\"last_name\"\n controlId=\"invite-last_name\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.LastName' | transloco\">\n <input type=\"text\"\n id=\"invite-last_name\"\n class=\"form-control\"\n formControlName=\"last_name\"\n [ngClass]=\"{\n 'is-invalid': form.get('last_name').touched && form.get('last_name').invalid\n }\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-sm-4\">\n <pw-input-container [label]=\"'Label.Email' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Email' | transloco\"\n class=\"col-md-6 p-0\"\n name=\"email\"\n controlId=\"invite-email\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.Email' | transloco\">\n <input type=\"text\"\n id=\"invite-email\"\n class=\"form-control\"\n formControlName=\"email\"\n [ngClass]=\"{\n 'is-invalid': form.get('email').touched && form.get('email').invalid\n }\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-sm-4\">\n <pw-input-container [label]=\"'Label.Product' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.SubscriptionProduct' | transloco\"\n name=\"product_id\"\n controlId=\"invite-product_id\"\n [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.Product' | transloco\">\n <p-autoComplete appendTo=\"body\" #refProduct\n [suggestions]=\"filteredProducts\"\n [ariaLabelledBy]=\"'invite-product_id-label'\"\n [ariaLabel]=\"'Label.Product' | transloco\"\n formControlName=\"product_id\"\n dataKey=\"id\"\n optionLabel=\"label\"\n [dropdown]=\"true\"\n [delay]=\"1000\"\n [type]=\"'search'\"\n (completeMethod)=\"searchProduct($event)\"\n (onSelect)=\"onProductChange($event)\"\n (onClear)=\"onProductClear($event)\"\n styleClass=\"w-100\"\n placeholder=\"Search products...\"\n [inputStyle]=\"\n form.get('product_id').touched && form.get('product_id').invalid\n ? { border: '1px solid #ff586b' }\n : {}\n \"\n [multiple]=\"false\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-sm-4\">\n <pw-input-container label=\"{{'Label.Seats' | transloco}}{{unitsText}}\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Units' | transloco\"\n class=\"col-md-6 p-0\"\n name=\"units\"\n controlId=\"invite-units\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.Units' | transloco\">\n <input type=\"number\"\n id=\"invite-units\"\n class=\"form-control\"\n formControlName=\"units\"\n [ngClass]=\"{\n 'is-invalid': form.get('units').touched && form.get('units').invalid\n }\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-sm-4\">\n <pw-input-container [label]=\"'Admin.Subscriptions.MinUnits' | transloco\"\n [showTooltip]=\"true\"\n name=\"min_units\"\n controlId=\"invite-min_units\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.MinUnits' | transloco\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MinUnits' | transloco\">\n <input type=\"number\"\n id=\"invite-min_units\"\n min=\"0\"\n [max]=\"form.get('units').value\"\n class=\"form-control\"\n formControlName=\"min_units\" />\n </pw-input-container>\n </div>\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3 col-sm-4\"\n >\n <pw-input-container [label]=\"'Organization.OrganizationIndustry' | transloco\"\n name=\"organization_industry_id\" controlId=\"invite-organization_industry_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry'| transloco\">\n <p-select\n [ariaLabelledBy]=\"'invite-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-4\"\n >\n <pw-input-container [label]=\"'Organization.OrganizationSize' | transloco\"\n name=\"organization_size_id\" controlId=\"invite-organization_size_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize'| transloco\">\n <p-select\n [ariaLabelledBy]=\"'invite-organization_size_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationSize' | 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 @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3 col-sm-4\"\n >\n <pw-input-container [label]=\"'Organization.OrganizationType' | transloco\"\n name=\"organization_type_id\" controlId=\"invite-organization_type_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType'| transloco\">\n <p-select\n [ariaLabelledBy]=\"'invite-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 <div class=\"mb-3 col-sm-4\">\n <pw-input-container [label]=\"'Organization.OrganizationName' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationName'| transloco\"\n class=\"col-md-6 p-0\"\n name=\"name\" controlId=\"invite-organization-name\">\n <input type=\"text\"\n id=\"invite-organization-name\"\n class=\"form-control\"\n formControlName=\"name\"\n [ngClass]=\"{\n 'is-invalid': form.get('name').touched && form.get('name').invalid\n }\" />\n </pw-input-container>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"col-12 text-end\">\n <input type=\"button\"\n class=\"btn btn-secondary me-3\"\n value=\"Cancel\"\n (click)=\"form.reset(); totalRecordsUnFiltered = 0; back()\" />\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonBusy\"\n class=\"btn btn-primary\">Invite</button>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>", 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);--public-btn-radius: 24px}\n"] }]
|
|
8442
|
+
args: [{ selector: 'pw-invite-users', standalone: false, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard user-details\">\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)=\"back()\"\n class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"\">{{ 'Admin.Subscriptions.InviteNewUser' | transloco }}</h3>\n <p>{{ 'Admin.Subscriptions.InviteNewUserDescription' | transloco }}</p>\n </div>\n\n <div class=\"p-2 mt-3\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n\n <h3>{{ 'Admin.Subscriptions.Section.UserDetails' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-12 col-md-4\">\n <pw-input-container [label]=\"'Label.FirstName' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.FirstName' | transloco\"\n name=\"first_name\"\n controlId=\"invite-first_name\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.FirstName' | transloco\">\n <input type=\"text\"\n id=\"invite-first_name\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.InviteFirstName' | transloco\"\n formControlName=\"first_name\"\n [ngClass]=\"{\n 'is-invalid': form.get('first_name').touched && form.get('first_name').invalid\n }\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <pw-input-container [label]=\"'Label.LastName' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.LastName' | transloco\"\n name=\"last_name\"\n controlId=\"invite-last_name\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.LastName' | transloco\">\n <input type=\"text\"\n id=\"invite-last_name\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.InviteLastName' | transloco\"\n formControlName=\"last_name\"\n [ngClass]=\"{\n 'is-invalid': form.get('last_name').touched && form.get('last_name').invalid\n }\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <pw-input-container [label]=\"'Label.Email' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Email' | transloco\"\n name=\"email\"\n controlId=\"invite-email\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.Email' | transloco\">\n <input type=\"text\"\n id=\"invite-email\"\n class=\"form-control\"\n [placeholder]=\"'Label.EmailPlaceholder' | transloco\"\n formControlName=\"email\"\n [ngClass]=\"{\n 'is-invalid': form.get('email').touched && form.get('email').invalid\n }\" />\n </pw-input-container>\n </div>\n </div>\n\n <h3>{{ 'Admin.Subscriptions.Section.ProductSeats' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-12 col-md-4\">\n <pw-input-container [label]=\"'Label.Product' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.SubscriptionProduct' | transloco\"\n name=\"product_id\"\n controlId=\"invite-product_id\"\n [useAriaLabelledbyOnly]=\"true\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.Product' | transloco\">\n <p-autoComplete appendTo=\"body\" #refProduct\n [suggestions]=\"filteredProducts\"\n [ariaLabelledBy]=\"'invite-product_id-label'\"\n [ariaLabel]=\"'Label.Product' | transloco\"\n formControlName=\"product_id\"\n dataKey=\"id\"\n optionLabel=\"label\"\n [dropdown]=\"true\"\n [delay]=\"1000\"\n [type]=\"'search'\"\n (completeMethod)=\"searchProduct($event)\"\n (onSelect)=\"onProductChange($event)\"\n (onClear)=\"onProductClear($event)\"\n styleClass=\"w-100\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.SearchProducts' | transloco\"\n [inputStyleClass]=\"form.get('product_id').touched && form.get('product_id').invalid ? 'is-invalid' : ''\"\n [multiple]=\"false\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <pw-input-container label=\"{{'Label.Seats' | transloco}}{{unitsText}}\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Units' | transloco\"\n name=\"units\"\n controlId=\"invite-units\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.Units' | transloco\">\n <input type=\"number\"\n id=\"invite-units\"\n class=\"form-control\"\n formControlName=\"units\"\n [ngClass]=\"{\n 'is-invalid': form.get('units').touched && form.get('units').invalid\n }\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-12 col-md-4\">\n <pw-input-container [label]=\"'Admin.Subscriptions.MinUnits' | transloco\"\n [showTooltip]=\"true\"\n name=\"min_units\"\n controlId=\"invite-min_units\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.MinUnits' | transloco\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MinUnits' | transloco\">\n <input type=\"number\"\n id=\"invite-min_units\"\n min=\"0\"\n [max]=\"form.get('units').value\"\n class=\"form-control\"\n formControlName=\"min_units\" />\n </pw-input-container>\n </div>\n </div>\n\n <h3>{{ 'Admin.Subscriptions.Section.Organization' | transloco }}</h3>\n <div class=\"row\">\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3 col-12 col-md-4\">\n <pw-input-container [label]=\"'Organization.OrganizationIndustry' | transloco\"\n name=\"organization_industry_id\"\n controlId=\"invite-organization_industry_id\"\n [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\">\n <p-select\n [ariaLabelledBy]=\"'invite-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-12 col-md-4\">\n <pw-input-container [label]=\"'Organization.OrganizationSize' | transloco\"\n name=\"organization_size_id\"\n controlId=\"invite-organization_size_id\"\n [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\">\n <p-select\n [ariaLabelledBy]=\"'invite-organization_size_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationSize' | 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 @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3 col-12 col-md-4\">\n <pw-input-container [label]=\"'Organization.OrganizationType' | transloco\"\n name=\"organization_type_id\"\n controlId=\"invite-organization_type_id\"\n [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\">\n <p-select\n [ariaLabelledBy]=\"'invite-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 <div class=\"mb-3 col-12 col-md-4\">\n <pw-input-container [label]=\"'Organization.OrganizationName' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationName' | transloco\"\n name=\"name\"\n controlId=\"invite-organization-name\">\n <input type=\"text\"\n id=\"invite-organization-name\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n formControlName=\"name\"\n [ngClass]=\"{\n 'is-invalid': form.get('name').touched && form.get('name').invalid\n }\" />\n </pw-input-container>\n </div>\n </div>\n\n <div class=\"row\">\n <div class=\"col-12 text-end\">\n <button type=\"button\"\n class=\"btn btn-secondary me-3\"\n (click)=\"form.reset(); totalRecordsUnFiltered = 0; back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n [disabled]=\"buttonBusy\"\n class=\"btn btn-primary\">\n {{ 'Button.Invite' | transloco }}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n</div>\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);--public-btn-radius: 24px}: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}\n"] }]
|
|
8263
8443
|
}], ctorParameters: () => [{ type: i9.UntypedFormBuilder }, { type: i1.AdminService }, { type: i1$1.ProductService }, { type: i0.Injector }, { type: i1$1.CommonService }, { type: i0.ChangeDetectorRef }], propDecorators: { refProduct: [{
|
|
8264
8444
|
type: ViewChild,
|
|
8265
8445
|
args: ['refProduct']
|
|
@@ -8582,11 +8762,11 @@ class SubscriptionsListComponent extends AppBaseComponent {
|
|
|
8582
8762
|
super.ngOnDestroy();
|
|
8583
8763
|
}
|
|
8584
8764
|
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 }, { token: i3$1.ConfirmDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8585
|
-
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=\"Filter by 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]=\"'Filter by 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 subscriptions...\"\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);--public-btn-radius: 24px}.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: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.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: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i2.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: i3$1.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage", "destructive"], outputs: ["successEvent"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$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" }] }); }
|
|
8765
|
+
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 styleClass=\"pw-filter-select\"\n placeholder=\"Filter by 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 styleClass=\"pw-filter-select\"\n inputId=\"subscriptions-list-status\"\n [options]=\"subscriptionStatus\"\n [placeholder]=\"'Filter by 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 subscriptions...\"\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);--public-btn-radius: 24px}.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;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: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.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: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i2.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: i3$1.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage", "destructive"], outputs: ["successEvent"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$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" }] }); }
|
|
8586
8766
|
}
|
|
8587
8767
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: SubscriptionsListComponent, decorators: [{
|
|
8588
8768
|
type: Component,
|
|
8589
|
-
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=\"Filter by 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]=\"'Filter by 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 subscriptions...\"\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);--public-btn-radius: 24px}.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"] }]
|
|
8769
|
+
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 styleClass=\"pw-filter-select\"\n placeholder=\"Filter by 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 styleClass=\"pw-filter-select\"\n inputId=\"subscriptions-list-status\"\n [options]=\"subscriptionStatus\"\n [placeholder]=\"'Filter by 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 subscriptions...\"\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);--public-btn-radius: 24px}.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;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"] }]
|
|
8590
8770
|
}], ctorParameters: () => [{ type: i1$1.ProductService }, { type: i1.AdminService }, { type: i9.UntypedFormBuilder }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$1.CommonService }, { type: i3$1.ConfirmDialogService }], propDecorators: { refProduct: [{
|
|
8591
8771
|
type: ViewChild,
|
|
8592
8772
|
args: ['refProduct']
|
|
@@ -9560,11 +9740,11 @@ class AhoyEventsComponent extends AppBaseComponent {
|
|
|
9560
9740
|
}
|
|
9561
9741
|
}
|
|
9562
9742
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: AhoyEventsComponent, deps: [{ token: i0.Injector }, { token: i2.NgbModal }, { token: i1$1.AhoyService }, { token: i1.AdminDataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9563
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: AhoyEventsComponent, isStandalone: false, selector: "pw-ahoy-events", viewQueries: [{ propertyName: "multiSelector", first: true, predicate: ["multiSelector"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Ahoy Events</h2>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"data.events\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [sortField]=\"defaultSortField\"\n [sortOrder]=\"defaultSortOrder\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div *rbacAllow=\"'SuperAdmin'\"\n class=\"col-sm-2 mb-2 mb-md-0\">\n <p-select\n [options]=\"microServices\"\n (onChange)=\"onServiceChange($event.value)\"\n appendTo=\"body\"\n styleClass=\"tracking-service-select\"\n panelStyleClass=\"tracking-service-select-panel\"\n scrollHeight=\"220px\"\n [placeholder]=\"'Filter by service'\"\n optionLabel=\"name\"\n optionValue=\"name\">\n </p-select>\n </div>\n <div class=\"col-sm-2\">\n <p-multiSelect inputId=\"ahoy-events-filter-users\" #multiSelector [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter by users\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\"\n [lazy]=\"true\"\n (scroll)=\"onScroll($event)\"\n (onPanelShow)=\"onPanelShow()\"\n [loading]=\"userLoading\"\n (onFilter)=\"handleFilter($event)\"\n >\n </p-multiSelect>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker inputId=\"ahoy-events-start-date\" [showTime]=\"true\"\n [appendTo]=\"'body'\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'Start Date'\"\n [(ngModel)]=\"startDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker inputId=\"ahoy-events-end-date\" [appendTo]=\"'body'\"\n [showTime]=\"true\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'End Date'\"\n [(ngModel)]=\"endDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col d-flex align-items-center\">\n <label for=\"ahoy-events-search\" class=\"visually-hidden\">Search Events</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=\"ahoy-events-search\"\n name=\"ahoy-events-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search events...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control bg-white\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"name\">\n {{ 'Label.Name' | transloco }}\n <p-sortIcon field=\"name\"></p-sortIcon>\n </th>\n <th scope=\"true\">\n {{ 'Admin.Tracking.Properties' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"time\">\n {{ 'Admin.Tracking.Time' | transloco }}\n <p-sortIcon field=\"time\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"user_id\">\n {{ 'Admin.Tracking.User' | transloco }}\n <p-sortIcon field=\"user_id\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-event>\n <tr [class.d-none]=\"loading\">\n <td data-head=\"Name\">{{ event.name }}</td>\n <td data-head=\"Properties\">\n @if ((event?.properties | json) !== '{}') {\n <span class=\"badge bg-info cursor-pointer\"\n (click)=\"revealProp(objModal,event?.properties)\" (keydown.enter)=\"revealProp(objModal,event?.properties)\">Reveal properties</span>\n }</td>\n <td data-head=\"Time\">{{ event.time | dateFormat: 'datetime'}}</td>\n <td data-head=\"User\">\n @if (event?.user_id) {\n <span>\n @if (event?.user) {\n <span><a [routerLink]=\"['/members', event?.user?.slug]\">{{ event?.user?.first_name }} {{ event?.user?.last_name }}</a></span>\n }\n @if (!event?.user) {\n <span>{{ event?.user_id }}</span>\n }\n </span>\n }\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if ( data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n @if (!loading && data.unfiltered_count === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoEventsDataMessage' | transloco\"> </pw-no-data>\n </div>\n }\n <!-- Object Modal -->\n <ng-template #objModal\n let-modal>\n <div class=\"modal-header\">\n <h4 class=\"modal-title\">{{ 'Admin.Tracking.Properties' | transloco }}</h4>\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 @if (activeObject) {\n <div>\n <ngx-json-viewer [json]=\"activeObject\"\n [expanded]=\"false\"></ngx-json-viewer>\n </div>\n }\n </div>\n </ng-template>\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);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i11$1.NgxJsonViewerComponent, selector: "ngx-json-viewer", inputs: ["json", "expanded", "depth", "_currentDepth"] }, { kind: "component", type: i10$1.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: 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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$1.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { 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: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }] }); }
|
|
9743
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: AhoyEventsComponent, isStandalone: false, selector: "pw-ahoy-events", viewQueries: [{ propertyName: "multiSelector", first: true, predicate: ["multiSelector"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Ahoy Events</h2>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"data.events\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [sortField]=\"defaultSortField\"\n [sortOrder]=\"defaultSortOrder\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div *rbacAllow=\"'SuperAdmin'\"\n class=\"col-sm-2 mb-2 mb-md-0\">\n <p-select\n [options]=\"microServices\"\n (onChange)=\"onServiceChange($event.value)\"\n appendTo=\"body\"\n styleClass=\"tracking-service-select pw-filter-select\"\n panelStyleClass=\"tracking-service-select-panel\"\n scrollHeight=\"220px\"\n [placeholder]=\"'Filter by service'\"\n optionLabel=\"name\"\n optionValue=\"name\">\n </p-select>\n </div>\n <div class=\"col-sm-2\">\n <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"ahoy-events-filter-users\" #multiSelector [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter by users\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\"\n [lazy]=\"true\"\n (scroll)=\"onScroll($event)\"\n (onPanelShow)=\"onPanelShow()\"\n [loading]=\"userLoading\"\n (onFilter)=\"handleFilter($event)\"\n >\n </p-multiSelect>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker inputId=\"ahoy-events-start-date\" [showTime]=\"true\"\n [appendTo]=\"'body'\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'Start Date'\"\n [(ngModel)]=\"startDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker inputId=\"ahoy-events-end-date\" [appendTo]=\"'body'\"\n [showTime]=\"true\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'End Date'\"\n [(ngModel)]=\"endDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col d-flex align-items-center\">\n <label for=\"ahoy-events-search\" class=\"visually-hidden\">Search Events</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=\"ahoy-events-search\"\n name=\"ahoy-events-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search events...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control bg-white\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"name\">\n {{ 'Label.Name' | transloco }}\n <p-sortIcon field=\"name\"></p-sortIcon>\n </th>\n <th scope=\"true\">\n {{ 'Admin.Tracking.Properties' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"time\">\n {{ 'Admin.Tracking.Time' | transloco }}\n <p-sortIcon field=\"time\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"user_id\">\n {{ 'Admin.Tracking.User' | transloco }}\n <p-sortIcon field=\"user_id\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-event>\n <tr [class.d-none]=\"loading\">\n <td data-head=\"Name\">{{ event.name }}</td>\n <td data-head=\"Properties\">\n @if ((event?.properties | json) !== '{}') {\n <span class=\"badge bg-info cursor-pointer\"\n (click)=\"revealProp(objModal,event?.properties)\" (keydown.enter)=\"revealProp(objModal,event?.properties)\">Reveal properties</span>\n }</td>\n <td data-head=\"Time\">{{ event.time | dateFormat: 'datetime'}}</td>\n <td data-head=\"User\">\n @if (event?.user_id) {\n <span>\n @if (event?.user) {\n <span><a [routerLink]=\"['/members', event?.user?.slug]\">{{ event?.user?.first_name }} {{ event?.user?.last_name }}</a></span>\n }\n @if (!event?.user) {\n <span>{{ event?.user_id }}</span>\n }\n </span>\n }\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if ( data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n @if (!loading && data.unfiltered_count === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoEventsDataMessage' | transloco\"> </pw-no-data>\n </div>\n }\n <!-- Object Modal -->\n <ng-template #objModal\n let-modal>\n <div class=\"modal-header\">\n <h4 class=\"modal-title\">{{ 'Admin.Tracking.Properties' | transloco }}</h4>\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 @if (activeObject) {\n <div>\n <ngx-json-viewer [json]=\"activeObject\"\n [expanded]=\"false\"></ngx-json-viewer>\n </div>\n }\n </div>\n </ng-template>\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);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i11$1.NgxJsonViewerComponent, selector: "ngx-json-viewer", inputs: ["json", "expanded", "depth", "_currentDepth"] }, { kind: "component", type: i10$1.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: 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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$1.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { 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: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }] }); }
|
|
9564
9744
|
}
|
|
9565
9745
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: AhoyEventsComponent, decorators: [{
|
|
9566
9746
|
type: Component,
|
|
9567
|
-
args: [{ selector: 'pw-ahoy-events', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Ahoy Events</h2>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"data.events\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [sortField]=\"defaultSortField\"\n [sortOrder]=\"defaultSortOrder\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div *rbacAllow=\"'SuperAdmin'\"\n class=\"col-sm-2 mb-2 mb-md-0\">\n <p-select\n [options]=\"microServices\"\n (onChange)=\"onServiceChange($event.value)\"\n appendTo=\"body\"\n styleClass=\"tracking-service-select\"\n panelStyleClass=\"tracking-service-select-panel\"\n scrollHeight=\"220px\"\n [placeholder]=\"'Filter by service'\"\n optionLabel=\"name\"\n optionValue=\"name\">\n </p-select>\n </div>\n <div class=\"col-sm-2\">\n <p-multiSelect inputId=\"ahoy-events-filter-users\" #multiSelector [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter by users\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\"\n [lazy]=\"true\"\n (scroll)=\"onScroll($event)\"\n (onPanelShow)=\"onPanelShow()\"\n [loading]=\"userLoading\"\n (onFilter)=\"handleFilter($event)\"\n >\n </p-multiSelect>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker inputId=\"ahoy-events-start-date\" [showTime]=\"true\"\n [appendTo]=\"'body'\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'Start Date'\"\n [(ngModel)]=\"startDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker inputId=\"ahoy-events-end-date\" [appendTo]=\"'body'\"\n [showTime]=\"true\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'End Date'\"\n [(ngModel)]=\"endDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col d-flex align-items-center\">\n <label for=\"ahoy-events-search\" class=\"visually-hidden\">Search Events</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=\"ahoy-events-search\"\n name=\"ahoy-events-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search events...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control bg-white\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"name\">\n {{ 'Label.Name' | transloco }}\n <p-sortIcon field=\"name\"></p-sortIcon>\n </th>\n <th scope=\"true\">\n {{ 'Admin.Tracking.Properties' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"time\">\n {{ 'Admin.Tracking.Time' | transloco }}\n <p-sortIcon field=\"time\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"user_id\">\n {{ 'Admin.Tracking.User' | transloco }}\n <p-sortIcon field=\"user_id\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-event>\n <tr [class.d-none]=\"loading\">\n <td data-head=\"Name\">{{ event.name }}</td>\n <td data-head=\"Properties\">\n @if ((event?.properties | json) !== '{}') {\n <span class=\"badge bg-info cursor-pointer\"\n (click)=\"revealProp(objModal,event?.properties)\" (keydown.enter)=\"revealProp(objModal,event?.properties)\">Reveal properties</span>\n }</td>\n <td data-head=\"Time\">{{ event.time | dateFormat: 'datetime'}}</td>\n <td data-head=\"User\">\n @if (event?.user_id) {\n <span>\n @if (event?.user) {\n <span><a [routerLink]=\"['/members', event?.user?.slug]\">{{ event?.user?.first_name }} {{ event?.user?.last_name }}</a></span>\n }\n @if (!event?.user) {\n <span>{{ event?.user_id }}</span>\n }\n </span>\n }\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if ( data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n @if (!loading && data.unfiltered_count === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoEventsDataMessage' | transloco\"> </pw-no-data>\n </div>\n }\n <!-- Object Modal -->\n <ng-template #objModal\n let-modal>\n <div class=\"modal-header\">\n <h4 class=\"modal-title\">{{ 'Admin.Tracking.Properties' | transloco }}</h4>\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 @if (activeObject) {\n <div>\n <ngx-json-viewer [json]=\"activeObject\"\n [expanded]=\"false\"></ngx-json-viewer>\n </div>\n }\n </div>\n </ng-template>\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);--public-btn-radius: 24px}\n"] }]
|
|
9747
|
+
args: [{ selector: 'pw-ahoy-events', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Ahoy Events</h2>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"data.events\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [sortField]=\"defaultSortField\"\n [sortOrder]=\"defaultSortOrder\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div *rbacAllow=\"'SuperAdmin'\"\n class=\"col-sm-2 mb-2 mb-md-0\">\n <p-select\n [options]=\"microServices\"\n (onChange)=\"onServiceChange($event.value)\"\n appendTo=\"body\"\n styleClass=\"tracking-service-select pw-filter-select\"\n panelStyleClass=\"tracking-service-select-panel\"\n scrollHeight=\"220px\"\n [placeholder]=\"'Filter by service'\"\n optionLabel=\"name\"\n optionValue=\"name\">\n </p-select>\n </div>\n <div class=\"col-sm-2\">\n <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"ahoy-events-filter-users\" #multiSelector [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter by users\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\"\n [lazy]=\"true\"\n (scroll)=\"onScroll($event)\"\n (onPanelShow)=\"onPanelShow()\"\n [loading]=\"userLoading\"\n (onFilter)=\"handleFilter($event)\"\n >\n </p-multiSelect>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker inputId=\"ahoy-events-start-date\" [showTime]=\"true\"\n [appendTo]=\"'body'\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'Start Date'\"\n [(ngModel)]=\"startDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker inputId=\"ahoy-events-end-date\" [appendTo]=\"'body'\"\n [showTime]=\"true\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'End Date'\"\n [(ngModel)]=\"endDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col d-flex align-items-center\">\n <label for=\"ahoy-events-search\" class=\"visually-hidden\">Search Events</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=\"ahoy-events-search\"\n name=\"ahoy-events-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search events...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control bg-white\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"name\">\n {{ 'Label.Name' | transloco }}\n <p-sortIcon field=\"name\"></p-sortIcon>\n </th>\n <th scope=\"true\">\n {{ 'Admin.Tracking.Properties' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"time\">\n {{ 'Admin.Tracking.Time' | transloco }}\n <p-sortIcon field=\"time\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"user_id\">\n {{ 'Admin.Tracking.User' | transloco }}\n <p-sortIcon field=\"user_id\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-event>\n <tr [class.d-none]=\"loading\">\n <td data-head=\"Name\">{{ event.name }}</td>\n <td data-head=\"Properties\">\n @if ((event?.properties | json) !== '{}') {\n <span class=\"badge bg-info cursor-pointer\"\n (click)=\"revealProp(objModal,event?.properties)\" (keydown.enter)=\"revealProp(objModal,event?.properties)\">Reveal properties</span>\n }</td>\n <td data-head=\"Time\">{{ event.time | dateFormat: 'datetime'}}</td>\n <td data-head=\"User\">\n @if (event?.user_id) {\n <span>\n @if (event?.user) {\n <span><a [routerLink]=\"['/members', event?.user?.slug]\">{{ event?.user?.first_name }} {{ event?.user?.last_name }}</a></span>\n }\n @if (!event?.user) {\n <span>{{ event?.user_id }}</span>\n }\n </span>\n }\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if ( data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n @if (!loading && data.unfiltered_count === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoEventsDataMessage' | transloco\"> </pw-no-data>\n </div>\n }\n <!-- Object Modal -->\n <ng-template #objModal\n let-modal>\n <div class=\"modal-header\">\n <h4 class=\"modal-title\">{{ 'Admin.Tracking.Properties' | transloco }}</h4>\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 @if (activeObject) {\n <div>\n <ngx-json-viewer [json]=\"activeObject\"\n [expanded]=\"false\"></ngx-json-viewer>\n </div>\n }\n </div>\n </ng-template>\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);--public-btn-radius: 24px}\n"] }]
|
|
9568
9748
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i2.NgbModal }, { type: i1$1.AhoyService }, { type: i1.AdminDataService }, { type: i0.ChangeDetectorRef }], propDecorators: { multiSelector: [{
|
|
9569
9749
|
type: ViewChild,
|
|
9570
9750
|
args: ['multiSelector']
|
|
@@ -9735,11 +9915,11 @@ class AhoyMessagesComponent extends AppBaseComponent {
|
|
|
9735
9915
|
}
|
|
9736
9916
|
}
|
|
9737
9917
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: AhoyMessagesComponent, deps: [{ token: i0.Injector }, { token: i1$1.AhoyService }, { token: i0.ChangeDetectorRef }, { token: i1.AdminDataService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9738
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: AhoyMessagesComponent, isStandalone: false, selector: "pw-ahoy-messages", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Ahoy Messages</h2>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"data.messages\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [sortField]=\"'sent_at'\"\n [sortOrder]=\"-1\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div *rbacAllow=\"'SuperAdmin'\"\n class=\"col-sm-2 mb-2 mb-md-0\">\n <p-select\n [options]=\"microServices\"\n (onChange)=\"onServiceChange($event.value)\"\n appendTo=\"body\"\n styleClass=\"tracking-service-select\"\n panelStyleClass=\"tracking-service-select-panel\"\n scrollHeight=\"220px\"\n [placeholder]=\"'Filter by service'\"\n optionLabel=\"name\"\n optionValue=\"name\">\n </p-select>\n </div>\n <div class=\"col-sm-2\">\n <p-multiSelect inputId=\"ahoy-messages-filter-users\" #multiSelector [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter by users\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\"\n [lazy]=\"true\"\n (scroll)=\"onScroll($event)\"\n (onPanelShow)=\"onPanelShow()\"\n [loading]=\"userLoading\"\n (onFilter)=\"handleFilter($event)\"\n >\n </p-multiSelect>\n </div>\n <div class=\"col-sm-2 mx-3\">\n <p-datepicker inputId=\"ahoy-messages-start-date\" [showTime]=\"true\"\n [appendTo]=\"'body'\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'Start Date'\"\n [(ngModel)]=\"startDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker inputId=\"ahoy-messages-end-date\" [appendTo]=\"'body'\"\n [showTime]=\"true\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'End Date'\"\n [(ngModel)]=\"endDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col d-flex align-items-center\">\n <label for=\"ahoy-messages-search\" class=\"visually-hidden\">Search Messages</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=\"ahoy-messages-search\"\n name=\"ahoy-messages-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search messages...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control bg-white\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"mailer\">\n {{ 'Admin.Tracking.Mailer' | transloco }}\n <p-sortIcon field=\"mailer\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"sent_at\">\n {{ 'Admin.Tracking.SentAt' | transloco }}\n <p-sortIcon field=\"sent_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"subject\">\n {{ 'Admin.Tracking.Subject' | transloco }}\n <p-sortIcon field=\"subject\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"to\">\n {{ 'Admin.Tracking.To' | transloco }}\n <p-sortIcon field=\"to\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"user_id\">\n {{ 'Admin.Tracking.User' | transloco }}\n <p-sortIcon field=\"user_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"clicked_at\">\n {{ 'Admin.Tracking.LastClickedAt' | transloco }}\n <p-sortIcon field=\"clicked_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"opened_at\">\n {{ 'Admin.Tracking.LastOpenedAt' | transloco }}\n <p-sortIcon field=\"opened_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"click_count\">\n {{ 'Admin.Tracking.ClickCount' | transloco }}\n <p-sortIcon field=\"click_count\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"open_count\">\n {{ 'Admin.Tracking.OpenCount' | transloco }}\n <p-sortIcon field=\"open_count\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-messages>\n <tr [class.d-none]=\"loading\">\n <td data-head=\"Mailer\">{{ messages.mailer }}</td>\n <td data-head=\"Sent At\">{{ messages.sent_at | dateFormat: 'datetime' }}</td>\n <td data-head=\"Subject\">{{ messages.subject | textTruncate: 30 }}</td>\n <td data-head=\"To\">{{ messages.to }}</td>\n <td data-head=\"User\">\n @if (messages?.user_id) {\n <span>\n @if (messages?.user) {\n <span><a [routerLink]=\"['/members', messages?.user?.slug]\">{{ messages?.user?.first_name }} {{ messages?.user?.last_name }}</a></span>\n }\n @if (!messages?.user) {\n <span>{{ messages?.user_id }}</span>\n }\n </span>\n }\n </td>\n <td data-head=\"Last Clicked At\">\n {{ messages?.clicked_at | dateFormat: 'datetime' }}\n </td>\n <td data-head=\"Last Opened At\">\n {{ messages?.opened_at | dateFormat: 'datetime' }}\n </td>\n <td data-head=\"Click Count\">{{ messages?.click_count }}</td>\n <td data-head=\"Open Count\">{{ messages?.open_count }}</td>\n </tr>\n </ng-template>\n </p-table>\n @if ( data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoMessagesDataMessage' | transloco\"> </pw-no-data>\n </div>\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);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i10$1.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: 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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$1.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { 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: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }] }); }
|
|
9918
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: AhoyMessagesComponent, isStandalone: false, selector: "pw-ahoy-messages", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Ahoy Messages</h2>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"data.messages\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [sortField]=\"'sent_at'\"\n [sortOrder]=\"-1\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div *rbacAllow=\"'SuperAdmin'\"\n class=\"col-sm-2 mb-2 mb-md-0\">\n <p-select\n [options]=\"microServices\"\n (onChange)=\"onServiceChange($event.value)\"\n appendTo=\"body\"\n styleClass=\"tracking-service-select pw-filter-select\"\n panelStyleClass=\"tracking-service-select-panel\"\n scrollHeight=\"220px\"\n [placeholder]=\"'Filter by service'\"\n optionLabel=\"name\"\n optionValue=\"name\">\n </p-select>\n </div>\n <div class=\"col-sm-2\">\n <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"ahoy-messages-filter-users\" #multiSelector [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter by users\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\"\n [lazy]=\"true\"\n (scroll)=\"onScroll($event)\"\n (onPanelShow)=\"onPanelShow()\"\n [loading]=\"userLoading\"\n (onFilter)=\"handleFilter($event)\"\n >\n </p-multiSelect>\n </div>\n <div class=\"col-sm-2 mx-3\">\n <p-datepicker inputId=\"ahoy-messages-start-date\" [showTime]=\"true\"\n [appendTo]=\"'body'\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'Start Date'\"\n [(ngModel)]=\"startDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker inputId=\"ahoy-messages-end-date\" [appendTo]=\"'body'\"\n [showTime]=\"true\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'End Date'\"\n [(ngModel)]=\"endDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col d-flex align-items-center\">\n <label for=\"ahoy-messages-search\" class=\"visually-hidden\">Search Messages</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=\"ahoy-messages-search\"\n name=\"ahoy-messages-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search messages...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control bg-white\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"mailer\">\n {{ 'Admin.Tracking.Mailer' | transloco }}\n <p-sortIcon field=\"mailer\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"sent_at\">\n {{ 'Admin.Tracking.SentAt' | transloco }}\n <p-sortIcon field=\"sent_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"subject\">\n {{ 'Admin.Tracking.Subject' | transloco }}\n <p-sortIcon field=\"subject\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"to\">\n {{ 'Admin.Tracking.To' | transloco }}\n <p-sortIcon field=\"to\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"user_id\">\n {{ 'Admin.Tracking.User' | transloco }}\n <p-sortIcon field=\"user_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"clicked_at\">\n {{ 'Admin.Tracking.LastClickedAt' | transloco }}\n <p-sortIcon field=\"clicked_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"opened_at\">\n {{ 'Admin.Tracking.LastOpenedAt' | transloco }}\n <p-sortIcon field=\"opened_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"click_count\">\n {{ 'Admin.Tracking.ClickCount' | transloco }}\n <p-sortIcon field=\"click_count\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"open_count\">\n {{ 'Admin.Tracking.OpenCount' | transloco }}\n <p-sortIcon field=\"open_count\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-messages>\n <tr [class.d-none]=\"loading\">\n <td data-head=\"Mailer\">{{ messages.mailer }}</td>\n <td data-head=\"Sent At\">{{ messages.sent_at | dateFormat: 'datetime' }}</td>\n <td data-head=\"Subject\">{{ messages.subject | textTruncate: 30 }}</td>\n <td data-head=\"To\">{{ messages.to }}</td>\n <td data-head=\"User\">\n @if (messages?.user_id) {\n <span>\n @if (messages?.user) {\n <span><a [routerLink]=\"['/members', messages?.user?.slug]\">{{ messages?.user?.first_name }} {{ messages?.user?.last_name }}</a></span>\n }\n @if (!messages?.user) {\n <span>{{ messages?.user_id }}</span>\n }\n </span>\n }\n </td>\n <td data-head=\"Last Clicked At\">\n {{ messages?.clicked_at | dateFormat: 'datetime' }}\n </td>\n <td data-head=\"Last Opened At\">\n {{ messages?.opened_at | dateFormat: 'datetime' }}\n </td>\n <td data-head=\"Click Count\">{{ messages?.click_count }}</td>\n <td data-head=\"Open Count\">{{ messages?.open_count }}</td>\n </tr>\n </ng-template>\n </p-table>\n @if ( data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoMessagesDataMessage' | transloco\"> </pw-no-data>\n </div>\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);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i10$1.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: 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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$1.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { 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: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }] }); }
|
|
9739
9919
|
}
|
|
9740
9920
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: AhoyMessagesComponent, decorators: [{
|
|
9741
9921
|
type: Component,
|
|
9742
|
-
args: [{ selector: 'pw-ahoy-messages', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Ahoy Messages</h2>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"data.messages\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [sortField]=\"'sent_at'\"\n [sortOrder]=\"-1\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div *rbacAllow=\"'SuperAdmin'\"\n class=\"col-sm-2 mb-2 mb-md-0\">\n <p-select\n [options]=\"microServices\"\n (onChange)=\"onServiceChange($event.value)\"\n appendTo=\"body\"\n styleClass=\"tracking-service-select\"\n panelStyleClass=\"tracking-service-select-panel\"\n scrollHeight=\"220px\"\n [placeholder]=\"'Filter by service'\"\n optionLabel=\"name\"\n optionValue=\"name\">\n </p-select>\n </div>\n <div class=\"col-sm-2\">\n <p-multiSelect inputId=\"ahoy-messages-filter-users\" #multiSelector [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter by users\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\"\n [lazy]=\"true\"\n (scroll)=\"onScroll($event)\"\n (onPanelShow)=\"onPanelShow()\"\n [loading]=\"userLoading\"\n (onFilter)=\"handleFilter($event)\"\n >\n </p-multiSelect>\n </div>\n <div class=\"col-sm-2 mx-3\">\n <p-datepicker inputId=\"ahoy-messages-start-date\" [showTime]=\"true\"\n [appendTo]=\"'body'\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'Start Date'\"\n [(ngModel)]=\"startDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker inputId=\"ahoy-messages-end-date\" [appendTo]=\"'body'\"\n [showTime]=\"true\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'End Date'\"\n [(ngModel)]=\"endDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col d-flex align-items-center\">\n <label for=\"ahoy-messages-search\" class=\"visually-hidden\">Search Messages</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=\"ahoy-messages-search\"\n name=\"ahoy-messages-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search messages...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control bg-white\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"mailer\">\n {{ 'Admin.Tracking.Mailer' | transloco }}\n <p-sortIcon field=\"mailer\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"sent_at\">\n {{ 'Admin.Tracking.SentAt' | transloco }}\n <p-sortIcon field=\"sent_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"subject\">\n {{ 'Admin.Tracking.Subject' | transloco }}\n <p-sortIcon field=\"subject\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"to\">\n {{ 'Admin.Tracking.To' | transloco }}\n <p-sortIcon field=\"to\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"user_id\">\n {{ 'Admin.Tracking.User' | transloco }}\n <p-sortIcon field=\"user_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"clicked_at\">\n {{ 'Admin.Tracking.LastClickedAt' | transloco }}\n <p-sortIcon field=\"clicked_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"opened_at\">\n {{ 'Admin.Tracking.LastOpenedAt' | transloco }}\n <p-sortIcon field=\"opened_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"click_count\">\n {{ 'Admin.Tracking.ClickCount' | transloco }}\n <p-sortIcon field=\"click_count\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"open_count\">\n {{ 'Admin.Tracking.OpenCount' | transloco }}\n <p-sortIcon field=\"open_count\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-messages>\n <tr [class.d-none]=\"loading\">\n <td data-head=\"Mailer\">{{ messages.mailer }}</td>\n <td data-head=\"Sent At\">{{ messages.sent_at | dateFormat: 'datetime' }}</td>\n <td data-head=\"Subject\">{{ messages.subject | textTruncate: 30 }}</td>\n <td data-head=\"To\">{{ messages.to }}</td>\n <td data-head=\"User\">\n @if (messages?.user_id) {\n <span>\n @if (messages?.user) {\n <span><a [routerLink]=\"['/members', messages?.user?.slug]\">{{ messages?.user?.first_name }} {{ messages?.user?.last_name }}</a></span>\n }\n @if (!messages?.user) {\n <span>{{ messages?.user_id }}</span>\n }\n </span>\n }\n </td>\n <td data-head=\"Last Clicked At\">\n {{ messages?.clicked_at | dateFormat: 'datetime' }}\n </td>\n <td data-head=\"Last Opened At\">\n {{ messages?.opened_at | dateFormat: 'datetime' }}\n </td>\n <td data-head=\"Click Count\">{{ messages?.click_count }}</td>\n <td data-head=\"Open Count\">{{ messages?.open_count }}</td>\n </tr>\n </ng-template>\n </p-table>\n @if ( data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoMessagesDataMessage' | transloco\"> </pw-no-data>\n </div>\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);--public-btn-radius: 24px}\n"] }]
|
|
9922
|
+
args: [{ selector: 'pw-ahoy-messages', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Ahoy Messages</h2>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"data.messages\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [sortField]=\"'sent_at'\"\n [sortOrder]=\"-1\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div *rbacAllow=\"'SuperAdmin'\"\n class=\"col-sm-2 mb-2 mb-md-0\">\n <p-select\n [options]=\"microServices\"\n (onChange)=\"onServiceChange($event.value)\"\n appendTo=\"body\"\n styleClass=\"tracking-service-select pw-filter-select\"\n panelStyleClass=\"tracking-service-select-panel\"\n scrollHeight=\"220px\"\n [placeholder]=\"'Filter by service'\"\n optionLabel=\"name\"\n optionValue=\"name\">\n </p-select>\n </div>\n <div class=\"col-sm-2\">\n <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"ahoy-messages-filter-users\" #multiSelector [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter by users\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\"\n [lazy]=\"true\"\n (scroll)=\"onScroll($event)\"\n (onPanelShow)=\"onPanelShow()\"\n [loading]=\"userLoading\"\n (onFilter)=\"handleFilter($event)\"\n >\n </p-multiSelect>\n </div>\n <div class=\"col-sm-2 mx-3\">\n <p-datepicker inputId=\"ahoy-messages-start-date\" [showTime]=\"true\"\n [appendTo]=\"'body'\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'Start Date'\"\n [(ngModel)]=\"startDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker inputId=\"ahoy-messages-end-date\" [appendTo]=\"'body'\"\n [showTime]=\"true\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'End Date'\"\n [(ngModel)]=\"endDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col d-flex align-items-center\">\n <label for=\"ahoy-messages-search\" class=\"visually-hidden\">Search Messages</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=\"ahoy-messages-search\"\n name=\"ahoy-messages-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search messages...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control bg-white\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"mailer\">\n {{ 'Admin.Tracking.Mailer' | transloco }}\n <p-sortIcon field=\"mailer\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"sent_at\">\n {{ 'Admin.Tracking.SentAt' | transloco }}\n <p-sortIcon field=\"sent_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"subject\">\n {{ 'Admin.Tracking.Subject' | transloco }}\n <p-sortIcon field=\"subject\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"to\">\n {{ 'Admin.Tracking.To' | transloco }}\n <p-sortIcon field=\"to\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"user_id\">\n {{ 'Admin.Tracking.User' | transloco }}\n <p-sortIcon field=\"user_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"clicked_at\">\n {{ 'Admin.Tracking.LastClickedAt' | transloco }}\n <p-sortIcon field=\"clicked_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"opened_at\">\n {{ 'Admin.Tracking.LastOpenedAt' | transloco }}\n <p-sortIcon field=\"opened_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"click_count\">\n {{ 'Admin.Tracking.ClickCount' | transloco }}\n <p-sortIcon field=\"click_count\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"open_count\">\n {{ 'Admin.Tracking.OpenCount' | transloco }}\n <p-sortIcon field=\"open_count\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-messages>\n <tr [class.d-none]=\"loading\">\n <td data-head=\"Mailer\">{{ messages.mailer }}</td>\n <td data-head=\"Sent At\">{{ messages.sent_at | dateFormat: 'datetime' }}</td>\n <td data-head=\"Subject\">{{ messages.subject | textTruncate: 30 }}</td>\n <td data-head=\"To\">{{ messages.to }}</td>\n <td data-head=\"User\">\n @if (messages?.user_id) {\n <span>\n @if (messages?.user) {\n <span><a [routerLink]=\"['/members', messages?.user?.slug]\">{{ messages?.user?.first_name }} {{ messages?.user?.last_name }}</a></span>\n }\n @if (!messages?.user) {\n <span>{{ messages?.user_id }}</span>\n }\n </span>\n }\n </td>\n <td data-head=\"Last Clicked At\">\n {{ messages?.clicked_at | dateFormat: 'datetime' }}\n </td>\n <td data-head=\"Last Opened At\">\n {{ messages?.opened_at | dateFormat: 'datetime' }}\n </td>\n <td data-head=\"Click Count\">{{ messages?.click_count }}</td>\n <td data-head=\"Open Count\">{{ messages?.open_count }}</td>\n </tr>\n </ng-template>\n </p-table>\n @if ( data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoMessagesDataMessage' | transloco\"> </pw-no-data>\n </div>\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);--public-btn-radius: 24px}\n"] }]
|
|
9743
9923
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1$1.AhoyService }, { type: i0.ChangeDetectorRef }, { type: i1.AdminDataService }] });
|
|
9744
9924
|
|
|
9745
9925
|
class AhoyVisitsComponent extends AppBaseComponent {
|
|
@@ -9904,11 +10084,11 @@ class AhoyVisitsComponent extends AppBaseComponent {
|
|
|
9904
10084
|
}
|
|
9905
10085
|
}
|
|
9906
10086
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: AhoyVisitsComponent, deps: [{ token: i0.Injector }, { token: i1$1.AhoyService }, { token: i1.AdminDataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9907
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: AhoyVisitsComponent, isStandalone: false, selector: "pw-ahoy-visits", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Ahoy Visits</h2>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"data.visits\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [sortField]=\"'started_at'\"\n [sortOrder]=\"-1\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div *rbacAllow=\"'SuperAdmin'\"\n class=\"col-sm-2 mb-2 mb-md-0\">\n <p-select\n [options]=\"microServices\"\n (onChange)=\"onServiceChange($event.value)\"\n appendTo=\"body\"\n [placeholder]=\"'Filter by service'\"\n styleClass=\"tracking-service-select\"\n panelStyleClass=\"tracking-service-select-panel\"\n scrollHeight=\"220px\"\n optionLabel=\"name\"\n optionValue=\"name\">\n </p-select>\n </div>\n <div class=\"col-sm-2\">\n <p-multiSelect inputId=\"ahoy-visits-filter-users\"\n #multiSelector [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter by users\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\"\n [lazy]=\"true\"\n (scroll)=\"onScroll($event)\"\n (onPanelShow)=\"onPanelShow()\"\n [loading]=\"userLoading\"\n (onFilter)=\"handleFilter($event)\"\n >\n </p-multiSelect>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker [showTime]=\"true\"\n [appendTo]=\"'body'\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'Start Date'\"\n [(ngModel)]=\"startDate\"\n [showIcon]=\"true\"\n dateFormat=\"yy-M-dd\"\n >\n </p-datepicker>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker [appendTo]=\"'body'\"\n [showTime]=\"true\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'End Date'\"\n [(ngModel)]=\"endDate\"\n [showIcon]=\"true\"\n dateFormat=\"yy-M-dd\">\n </p-datepicker>\n </div>\n <div class=\"col d-flex align-items-center\">\n <label for=\"ahoy-visits-search\" class=\"visually-hidden\">Search Visits</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=\"ahoy-visits-search\"\n name=\"ahoy-visits-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search visits...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control bg-white\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"browser\">\n {{ 'Admin.Tracking.Browser' | transloco }}\n <p-sortIcon field=\"browser\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"device_type\">\n {{ 'Admin.Tracking.DeviceType' | transloco }}\n <p-sortIcon field=\"device_type\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"ip\">\n {{ 'Admin.Tracking.Ip' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"referring_domain\">\n {{ 'Admin.Tracking.Domain' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"landing_page\">\n {{ 'Admin.Tracking.LandingPage' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"country\">\n {{ 'Admin.Tracking.Country' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"region\">\n {{ 'Admin.Tracking.Region' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"city\">\n {{ 'Admin.Tracking.City' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"os\">\n {{ 'Admin.Tracking.Os' | transloco }}\n <p-sortIcon field=\"os\"></p-sortIcon>\n </th>\n <th scope=\"true\">\n {{ 'Admin.Tracking.User' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"started_at\">\n {{ 'Admin.Tracking.StartedAt' | transloco }}\n <p-sortIcon field=\"started_at\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-visits>\n <tr [class.d-none]=\"loading\">\n <td data-head=\"Browser\">{{ visits.browser }}</td>\n <td data-head=\"Device Type\">{{ visits.device_type }}</td>\n <td data-head=\"IP\">{{ visits.ip }}</td>\n <td data-head=\"referring_domain\">\n <span [ngbTooltip]=\"visits.referring_domain\"\n tooltipClass=\"custom-tooltip\"\n placement=\"top\" container=\"body\"> {{ visits.referring_domain | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"landing_page\">\n <span [ngbTooltip]=\"visits.landing_page\"\n tooltipClass=\"custom-tooltip\"\n placement=\"top\" container=\"body\"> {{ visits.landing_page | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"country\">\n <span [ngbTooltip]=\"visits.country\"\n tooltipClass=\"custom-tooltip\"\n placement=\"top\" container=\"body\"> {{ visits.country | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"region\">\n <span [ngbTooltip]=\"visits.region\"\n tooltipClass=\"custom-tooltip\"\n placement=\"top\" container=\"body\"> {{ visits.region | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"city\">\n <span [ngbTooltip]=\"visits.city\"\n tooltipClass=\"custom-tooltip\"\n placement=\"top\" container=\"body\"> {{ visits.city | textTruncate: 20 }}\n </span></td>\n <td data-head=\"OS\">{{ visits.os }}</td>\n <td data-head=\"User\">\n @if (visits?.user_id) {\n <span>\n @if (visits?.user) {\n <span><a [routerLink]=\"['/members', visits?.user?.slug]\">{{ visits?.user?.first_name }} {{ visits?.user?.last_name }}</a></span>\n }\n @if (!visits?.user) {\n <span>{{ visits?.user_id }}</span>\n }\n </span>\n }\n </td>\n <td data-head=\"Started At\">{{ visits.started_at | dateFormat : 'datetime' }}</td>\n </tr>\n </ng-template>\n </p-table>\n @if ( data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n @if (!loading && data.unfiltered_count === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoVistitsDataMessage' | transloco\"> </pw-no-data>\n </div>\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);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i10$1.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: i2.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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$1.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { 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: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }] }); }
|
|
10087
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: AhoyVisitsComponent, isStandalone: false, selector: "pw-ahoy-visits", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Ahoy Visits</h2>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"data.visits\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [sortField]=\"'started_at'\"\n [sortOrder]=\"-1\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div *rbacAllow=\"'SuperAdmin'\"\n class=\"col-sm-2 mb-2 mb-md-0\">\n <p-select\n [options]=\"microServices\"\n (onChange)=\"onServiceChange($event.value)\"\n appendTo=\"body\"\n [placeholder]=\"'Filter by service'\"\n styleClass=\"tracking-service-select pw-filter-select\"\n panelStyleClass=\"tracking-service-select-panel\"\n scrollHeight=\"220px\"\n optionLabel=\"name\"\n optionValue=\"name\">\n </p-select>\n </div>\n <div class=\"col-sm-2\">\n <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"ahoy-visits-filter-users\"\n #multiSelector [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter by users\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\"\n [lazy]=\"true\"\n (scroll)=\"onScroll($event)\"\n (onPanelShow)=\"onPanelShow()\"\n [loading]=\"userLoading\"\n (onFilter)=\"handleFilter($event)\"\n >\n </p-multiSelect>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker [showTime]=\"true\"\n [appendTo]=\"'body'\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'Start Date'\"\n [(ngModel)]=\"startDate\"\n [showIcon]=\"true\"\n dateFormat=\"yy-M-dd\"\n >\n </p-datepicker>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker [appendTo]=\"'body'\"\n [showTime]=\"true\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'End Date'\"\n [(ngModel)]=\"endDate\"\n [showIcon]=\"true\"\n dateFormat=\"yy-M-dd\">\n </p-datepicker>\n </div>\n <div class=\"col d-flex align-items-center\">\n <label for=\"ahoy-visits-search\" class=\"visually-hidden\">Search Visits</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=\"ahoy-visits-search\"\n name=\"ahoy-visits-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search visits...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control bg-white\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"browser\">\n {{ 'Admin.Tracking.Browser' | transloco }}\n <p-sortIcon field=\"browser\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"device_type\">\n {{ 'Admin.Tracking.DeviceType' | transloco }}\n <p-sortIcon field=\"device_type\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"ip\">\n {{ 'Admin.Tracking.Ip' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"referring_domain\">\n {{ 'Admin.Tracking.Domain' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"landing_page\">\n {{ 'Admin.Tracking.LandingPage' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"country\">\n {{ 'Admin.Tracking.Country' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"region\">\n {{ 'Admin.Tracking.Region' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"city\">\n {{ 'Admin.Tracking.City' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"os\">\n {{ 'Admin.Tracking.Os' | transloco }}\n <p-sortIcon field=\"os\"></p-sortIcon>\n </th>\n <th scope=\"true\">\n {{ 'Admin.Tracking.User' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"started_at\">\n {{ 'Admin.Tracking.StartedAt' | transloco }}\n <p-sortIcon field=\"started_at\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-visits>\n <tr [class.d-none]=\"loading\">\n <td data-head=\"Browser\">{{ visits.browser }}</td>\n <td data-head=\"Device Type\">{{ visits.device_type }}</td>\n <td data-head=\"IP\">{{ visits.ip }}</td>\n <td data-head=\"referring_domain\">\n <span [ngbTooltip]=\"visits.referring_domain\"\n tooltipClass=\"custom-tooltip\"\n placement=\"top\" container=\"body\"> {{ visits.referring_domain | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"landing_page\">\n <span [ngbTooltip]=\"visits.landing_page\"\n tooltipClass=\"custom-tooltip\"\n placement=\"top\" container=\"body\"> {{ visits.landing_page | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"country\">\n <span [ngbTooltip]=\"visits.country\"\n tooltipClass=\"custom-tooltip\"\n placement=\"top\" container=\"body\"> {{ visits.country | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"region\">\n <span [ngbTooltip]=\"visits.region\"\n tooltipClass=\"custom-tooltip\"\n placement=\"top\" container=\"body\"> {{ visits.region | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"city\">\n <span [ngbTooltip]=\"visits.city\"\n tooltipClass=\"custom-tooltip\"\n placement=\"top\" container=\"body\"> {{ visits.city | textTruncate: 20 }}\n </span></td>\n <td data-head=\"OS\">{{ visits.os }}</td>\n <td data-head=\"User\">\n @if (visits?.user_id) {\n <span>\n @if (visits?.user) {\n <span><a [routerLink]=\"['/members', visits?.user?.slug]\">{{ visits?.user?.first_name }} {{ visits?.user?.last_name }}</a></span>\n }\n @if (!visits?.user) {\n <span>{{ visits?.user_id }}</span>\n }\n </span>\n }\n </td>\n <td data-head=\"Started At\">{{ visits.started_at | dateFormat : 'datetime' }}</td>\n </tr>\n </ng-template>\n </p-table>\n @if ( data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n @if (!loading && data.unfiltered_count === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoVistitsDataMessage' | transloco\"> </pw-no-data>\n </div>\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);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i10$1.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: i2.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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$1.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { 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: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.TextTruncatePipe, name: "textTruncate" }] }); }
|
|
9908
10088
|
}
|
|
9909
10089
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: AhoyVisitsComponent, decorators: [{
|
|
9910
10090
|
type: Component,
|
|
9911
|
-
args: [{ selector: 'pw-ahoy-visits', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Ahoy Visits</h2>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"data.visits\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [sortField]=\"'started_at'\"\n [sortOrder]=\"-1\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div *rbacAllow=\"'SuperAdmin'\"\n class=\"col-sm-2 mb-2 mb-md-0\">\n <p-select\n [options]=\"microServices\"\n (onChange)=\"onServiceChange($event.value)\"\n appendTo=\"body\"\n [placeholder]=\"'Filter by service'\"\n styleClass=\"tracking-service-select\"\n panelStyleClass=\"tracking-service-select-panel\"\n scrollHeight=\"220px\"\n optionLabel=\"name\"\n optionValue=\"name\">\n </p-select>\n </div>\n <div class=\"col-sm-2\">\n <p-multiSelect inputId=\"ahoy-visits-filter-users\"\n #multiSelector [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter by users\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\"\n [lazy]=\"true\"\n (scroll)=\"onScroll($event)\"\n (onPanelShow)=\"onPanelShow()\"\n [loading]=\"userLoading\"\n (onFilter)=\"handleFilter($event)\"\n >\n </p-multiSelect>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker [showTime]=\"true\"\n [appendTo]=\"'body'\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'Start Date'\"\n [(ngModel)]=\"startDate\"\n [showIcon]=\"true\"\n dateFormat=\"yy-M-dd\"\n >\n </p-datepicker>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker [appendTo]=\"'body'\"\n [showTime]=\"true\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'End Date'\"\n [(ngModel)]=\"endDate\"\n [showIcon]=\"true\"\n dateFormat=\"yy-M-dd\">\n </p-datepicker>\n </div>\n <div class=\"col d-flex align-items-center\">\n <label for=\"ahoy-visits-search\" class=\"visually-hidden\">Search Visits</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=\"ahoy-visits-search\"\n name=\"ahoy-visits-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search visits...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control bg-white\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"browser\">\n {{ 'Admin.Tracking.Browser' | transloco }}\n <p-sortIcon field=\"browser\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"device_type\">\n {{ 'Admin.Tracking.DeviceType' | transloco }}\n <p-sortIcon field=\"device_type\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"ip\">\n {{ 'Admin.Tracking.Ip' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"referring_domain\">\n {{ 'Admin.Tracking.Domain' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"landing_page\">\n {{ 'Admin.Tracking.LandingPage' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"country\">\n {{ 'Admin.Tracking.Country' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"region\">\n {{ 'Admin.Tracking.Region' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"city\">\n {{ 'Admin.Tracking.City' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"os\">\n {{ 'Admin.Tracking.Os' | transloco }}\n <p-sortIcon field=\"os\"></p-sortIcon>\n </th>\n <th scope=\"true\">\n {{ 'Admin.Tracking.User' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"started_at\">\n {{ 'Admin.Tracking.StartedAt' | transloco }}\n <p-sortIcon field=\"started_at\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-visits>\n <tr [class.d-none]=\"loading\">\n <td data-head=\"Browser\">{{ visits.browser }}</td>\n <td data-head=\"Device Type\">{{ visits.device_type }}</td>\n <td data-head=\"IP\">{{ visits.ip }}</td>\n <td data-head=\"referring_domain\">\n <span [ngbTooltip]=\"visits.referring_domain\"\n tooltipClass=\"custom-tooltip\"\n placement=\"top\" container=\"body\"> {{ visits.referring_domain | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"landing_page\">\n <span [ngbTooltip]=\"visits.landing_page\"\n tooltipClass=\"custom-tooltip\"\n placement=\"top\" container=\"body\"> {{ visits.landing_page | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"country\">\n <span [ngbTooltip]=\"visits.country\"\n tooltipClass=\"custom-tooltip\"\n placement=\"top\" container=\"body\"> {{ visits.country | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"region\">\n <span [ngbTooltip]=\"visits.region\"\n tooltipClass=\"custom-tooltip\"\n placement=\"top\" container=\"body\"> {{ visits.region | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"city\">\n <span [ngbTooltip]=\"visits.city\"\n tooltipClass=\"custom-tooltip\"\n placement=\"top\" container=\"body\"> {{ visits.city | textTruncate: 20 }}\n </span></td>\n <td data-head=\"OS\">{{ visits.os }}</td>\n <td data-head=\"User\">\n @if (visits?.user_id) {\n <span>\n @if (visits?.user) {\n <span><a [routerLink]=\"['/members', visits?.user?.slug]\">{{ visits?.user?.first_name }} {{ visits?.user?.last_name }}</a></span>\n }\n @if (!visits?.user) {\n <span>{{ visits?.user_id }}</span>\n }\n </span>\n }\n </td>\n <td data-head=\"Started At\">{{ visits.started_at | dateFormat : 'datetime' }}</td>\n </tr>\n </ng-template>\n </p-table>\n @if ( data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n @if (!loading && data.unfiltered_count === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoVistitsDataMessage' | transloco\"> </pw-no-data>\n </div>\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);--public-btn-radius: 24px}\n"] }]
|
|
10091
|
+
args: [{ selector: 'pw-ahoy-visits', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Ahoy Visits</h2>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"data.visits\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [sortField]=\"'started_at'\"\n [sortOrder]=\"-1\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div *rbacAllow=\"'SuperAdmin'\"\n class=\"col-sm-2 mb-2 mb-md-0\">\n <p-select\n [options]=\"microServices\"\n (onChange)=\"onServiceChange($event.value)\"\n appendTo=\"body\"\n [placeholder]=\"'Filter by service'\"\n styleClass=\"tracking-service-select pw-filter-select\"\n panelStyleClass=\"tracking-service-select-panel\"\n scrollHeight=\"220px\"\n optionLabel=\"name\"\n optionValue=\"name\">\n </p-select>\n </div>\n <div class=\"col-sm-2\">\n <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"ahoy-visits-filter-users\"\n #multiSelector [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter by users\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\"\n [lazy]=\"true\"\n (scroll)=\"onScroll($event)\"\n (onPanelShow)=\"onPanelShow()\"\n [loading]=\"userLoading\"\n (onFilter)=\"handleFilter($event)\"\n >\n </p-multiSelect>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker [showTime]=\"true\"\n [appendTo]=\"'body'\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'Start Date'\"\n [(ngModel)]=\"startDate\"\n [showIcon]=\"true\"\n dateFormat=\"yy-M-dd\"\n >\n </p-datepicker>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker [appendTo]=\"'body'\"\n [showTime]=\"true\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'End Date'\"\n [(ngModel)]=\"endDate\"\n [showIcon]=\"true\"\n dateFormat=\"yy-M-dd\">\n </p-datepicker>\n </div>\n <div class=\"col d-flex align-items-center\">\n <label for=\"ahoy-visits-search\" class=\"visually-hidden\">Search Visits</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=\"ahoy-visits-search\"\n name=\"ahoy-visits-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search visits...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control bg-white\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"browser\">\n {{ 'Admin.Tracking.Browser' | transloco }}\n <p-sortIcon field=\"browser\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"device_type\">\n {{ 'Admin.Tracking.DeviceType' | transloco }}\n <p-sortIcon field=\"device_type\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"ip\">\n {{ 'Admin.Tracking.Ip' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"referring_domain\">\n {{ 'Admin.Tracking.Domain' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"landing_page\">\n {{ 'Admin.Tracking.LandingPage' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"country\">\n {{ 'Admin.Tracking.Country' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"region\">\n {{ 'Admin.Tracking.Region' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"city\">\n {{ 'Admin.Tracking.City' | transloco }}\n <p-sortIcon field=\"ip\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"os\">\n {{ 'Admin.Tracking.Os' | transloco }}\n <p-sortIcon field=\"os\"></p-sortIcon>\n </th>\n <th scope=\"true\">\n {{ 'Admin.Tracking.User' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"started_at\">\n {{ 'Admin.Tracking.StartedAt' | transloco }}\n <p-sortIcon field=\"started_at\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-visits>\n <tr [class.d-none]=\"loading\">\n <td data-head=\"Browser\">{{ visits.browser }}</td>\n <td data-head=\"Device Type\">{{ visits.device_type }}</td>\n <td data-head=\"IP\">{{ visits.ip }}</td>\n <td data-head=\"referring_domain\">\n <span [ngbTooltip]=\"visits.referring_domain\"\n tooltipClass=\"custom-tooltip\"\n placement=\"top\" container=\"body\"> {{ visits.referring_domain | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"landing_page\">\n <span [ngbTooltip]=\"visits.landing_page\"\n tooltipClass=\"custom-tooltip\"\n placement=\"top\" container=\"body\"> {{ visits.landing_page | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"country\">\n <span [ngbTooltip]=\"visits.country\"\n tooltipClass=\"custom-tooltip\"\n placement=\"top\" container=\"body\"> {{ visits.country | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"region\">\n <span [ngbTooltip]=\"visits.region\"\n tooltipClass=\"custom-tooltip\"\n placement=\"top\" container=\"body\"> {{ visits.region | textTruncate: 20 }}\n </span>\n </td>\n <td data-head=\"city\">\n <span [ngbTooltip]=\"visits.city\"\n tooltipClass=\"custom-tooltip\"\n placement=\"top\" container=\"body\"> {{ visits.city | textTruncate: 20 }}\n </span></td>\n <td data-head=\"OS\">{{ visits.os }}</td>\n <td data-head=\"User\">\n @if (visits?.user_id) {\n <span>\n @if (visits?.user) {\n <span><a [routerLink]=\"['/members', visits?.user?.slug]\">{{ visits?.user?.first_name }} {{ visits?.user?.last_name }}</a></span>\n }\n @if (!visits?.user) {\n <span>{{ visits?.user_id }}</span>\n }\n </span>\n }\n </td>\n <td data-head=\"Started At\">{{ visits.started_at | dateFormat : 'datetime' }}</td>\n </tr>\n </ng-template>\n </p-table>\n @if ( data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n </div>\n @if (!loading && data.unfiltered_count === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoVistitsDataMessage' | transloco\"> </pw-no-data>\n </div>\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);--public-btn-radius: 24px}\n"] }]
|
|
9912
10092
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1$1.AhoyService }, { type: i1.AdminDataService }, { type: i0.ChangeDetectorRef }] });
|
|
9913
10093
|
|
|
9914
10094
|
class EventsComponent extends AppBaseComponent {
|
|
@@ -10074,11 +10254,11 @@ class EventsComponent extends AppBaseComponent {
|
|
|
10074
10254
|
}
|
|
10075
10255
|
}
|
|
10076
10256
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: EventsComponent, deps: [{ token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1$1.AhoyService }, { token: i1.AdminDataService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10077
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: EventsComponent, isStandalone: false, selector: "pw-events", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Events</h2>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"data.events\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div *rbacAllow=\"'SuperAdmin'\">\n <p-select\n [options]=\"microServices\"\n (onChange)=\"onServiceChange($event.value)\"\n appendTo=\"body\"\n styleClass=\"tracking-service-select\"\n panelStyleClass=\"tracking-service-select-panel\"\n scrollHeight=\"220px\"\n [placeholder]=\"'Filter by service'\"\n optionLabel=\"name\"\n optionValue=\"name\">\n </p-select>\n </div>\n <div>\n <p-multiSelect inputId=\"events-filter-users\" #multiSelector [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter by users\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\"\n [lazy]=\"true\"\n (scroll)=\"onScroll($event)\"\n (onPanelShow)=\"onPanelShow()\"\n [loading]=\"userLoading\"\n (onFilter)=\"handleFilter($event)\"\n >\n </p-multiSelect>\n </div>\n <div>\n <p-datepicker inputId=\"events-start-date\" [showTime]=\"true\"\n [appendTo]=\"'body'\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'Start Date'\"\n [(ngModel)]=\"startDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div>\n <p-datepicker inputId=\"events-end-date\" [appendTo]=\"'body'\"\n [showTime]=\"true\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'End Date'\"\n [(ngModel)]=\"endDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div>\n <label for=\"events-search\" class=\"visually-hidden\">Search Events</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=\"events-search\"\n name=\"events-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search events...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control bg-white\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"created_at\">\n {{ 'Admin.Tracking.CreatedAt' | transloco }}\n <p-sortIcon field=\"created_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"event_type\">\n {{ 'Admin.Tracking.EventType' | transloco }}\n <p-sortIcon field=\"event_type\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"related_entity_type\">\n {{ 'Admin.Tracking.EntityType' | transloco }}\n <p-sortIcon field=\"related_entity_type\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"updated_at\">\n {{ 'Admin.Tracking.UpdatedAt' | transloco }}\n <p-sortIcon field=\"updated_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"user_id\">\n {{ 'Admin.Tracking.User' | transloco }}\n <p-sortIcon field=\"user_id\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-events>\n <tr [class.d-none]=\"loading\">\n <td data-head=\"Created At\">{{ events.created_at | dateFormat: 'datetime' }}</td>\n <td data-head=\"Event Type\">{{ events.event_type }}</td>\n <td data-head=\"Entity Type\">{{ events.related_entity_type }}</td>\n <td data-head=\"Updated At\">{{ events.updated_at | dateFormat : 'datetime'}}</td>\n <td data-head=\"User\">\n @if (events?.user_id) {\n <span>\n @if (events?.user) {\n <span><a [routerLink]=\"['/members', events?.user?.slug]\">{{ events?.user?.first_name }} {{ events?.user?.last_name }}</a></span>\n }\n @if (!events?.user) {\n <span>{{ events?.user_id }}</span>\n }\n </span>\n }\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if ( data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoEventDataMessage' | transloco\"> </pw-no-data>\n </div>\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);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i10$1.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: 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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$1.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { 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: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }] }); }
|
|
10257
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: EventsComponent, isStandalone: false, selector: "pw-events", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Events</h2>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"data.events\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div *rbacAllow=\"'SuperAdmin'\">\n <p-select\n [options]=\"microServices\"\n (onChange)=\"onServiceChange($event.value)\"\n appendTo=\"body\"\n styleClass=\"tracking-service-select pw-filter-select\"\n panelStyleClass=\"tracking-service-select-panel\"\n scrollHeight=\"220px\"\n [placeholder]=\"'Filter by service'\"\n optionLabel=\"name\"\n optionValue=\"name\">\n </p-select>\n </div>\n <div>\n <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"events-filter-users\" #multiSelector [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter by users\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\"\n [lazy]=\"true\"\n (scroll)=\"onScroll($event)\"\n (onPanelShow)=\"onPanelShow()\"\n [loading]=\"userLoading\"\n (onFilter)=\"handleFilter($event)\"\n >\n </p-multiSelect>\n </div>\n <div>\n <p-datepicker inputId=\"events-start-date\" [showTime]=\"true\"\n [appendTo]=\"'body'\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'Start Date'\"\n [(ngModel)]=\"startDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div>\n <p-datepicker inputId=\"events-end-date\" [appendTo]=\"'body'\"\n [showTime]=\"true\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'End Date'\"\n [(ngModel)]=\"endDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div>\n <label for=\"events-search\" class=\"visually-hidden\">Search Events</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=\"events-search\"\n name=\"events-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search events...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control bg-white\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"created_at\">\n {{ 'Admin.Tracking.CreatedAt' | transloco }}\n <p-sortIcon field=\"created_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"event_type\">\n {{ 'Admin.Tracking.EventType' | transloco }}\n <p-sortIcon field=\"event_type\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"related_entity_type\">\n {{ 'Admin.Tracking.EntityType' | transloco }}\n <p-sortIcon field=\"related_entity_type\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"updated_at\">\n {{ 'Admin.Tracking.UpdatedAt' | transloco }}\n <p-sortIcon field=\"updated_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"user_id\">\n {{ 'Admin.Tracking.User' | transloco }}\n <p-sortIcon field=\"user_id\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-events>\n <tr [class.d-none]=\"loading\">\n <td data-head=\"Created At\">{{ events.created_at | dateFormat: 'datetime' }}</td>\n <td data-head=\"Event Type\">{{ events.event_type }}</td>\n <td data-head=\"Entity Type\">{{ events.related_entity_type }}</td>\n <td data-head=\"Updated At\">{{ events.updated_at | dateFormat : 'datetime'}}</td>\n <td data-head=\"User\">\n @if (events?.user_id) {\n <span>\n @if (events?.user) {\n <span><a [routerLink]=\"['/members', events?.user?.slug]\">{{ events?.user?.first_name }} {{ events?.user?.last_name }}</a></span>\n }\n @if (!events?.user) {\n <span>{{ events?.user_id }}</span>\n }\n </span>\n }\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if ( data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoEventDataMessage' | transloco\"> </pw-no-data>\n </div>\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);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i10$1.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: 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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$1.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { 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: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }] }); }
|
|
10078
10258
|
}
|
|
10079
10259
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: EventsComponent, decorators: [{
|
|
10080
10260
|
type: Component,
|
|
10081
|
-
args: [{ selector: 'pw-events', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Events</h2>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"data.events\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div *rbacAllow=\"'SuperAdmin'\">\n <p-select\n [options]=\"microServices\"\n (onChange)=\"onServiceChange($event.value)\"\n appendTo=\"body\"\n styleClass=\"tracking-service-select\"\n panelStyleClass=\"tracking-service-select-panel\"\n scrollHeight=\"220px\"\n [placeholder]=\"'Filter by service'\"\n optionLabel=\"name\"\n optionValue=\"name\">\n </p-select>\n </div>\n <div>\n <p-multiSelect inputId=\"events-filter-users\" #multiSelector [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter by users\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\"\n [lazy]=\"true\"\n (scroll)=\"onScroll($event)\"\n (onPanelShow)=\"onPanelShow()\"\n [loading]=\"userLoading\"\n (onFilter)=\"handleFilter($event)\"\n >\n </p-multiSelect>\n </div>\n <div>\n <p-datepicker inputId=\"events-start-date\" [showTime]=\"true\"\n [appendTo]=\"'body'\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'Start Date'\"\n [(ngModel)]=\"startDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div>\n <p-datepicker inputId=\"events-end-date\" [appendTo]=\"'body'\"\n [showTime]=\"true\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'End Date'\"\n [(ngModel)]=\"endDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div>\n <label for=\"events-search\" class=\"visually-hidden\">Search Events</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=\"events-search\"\n name=\"events-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search events...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control bg-white\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"created_at\">\n {{ 'Admin.Tracking.CreatedAt' | transloco }}\n <p-sortIcon field=\"created_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"event_type\">\n {{ 'Admin.Tracking.EventType' | transloco }}\n <p-sortIcon field=\"event_type\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"related_entity_type\">\n {{ 'Admin.Tracking.EntityType' | transloco }}\n <p-sortIcon field=\"related_entity_type\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"updated_at\">\n {{ 'Admin.Tracking.UpdatedAt' | transloco }}\n <p-sortIcon field=\"updated_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"user_id\">\n {{ 'Admin.Tracking.User' | transloco }}\n <p-sortIcon field=\"user_id\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-events>\n <tr [class.d-none]=\"loading\">\n <td data-head=\"Created At\">{{ events.created_at | dateFormat: 'datetime' }}</td>\n <td data-head=\"Event Type\">{{ events.event_type }}</td>\n <td data-head=\"Entity Type\">{{ events.related_entity_type }}</td>\n <td data-head=\"Updated At\">{{ events.updated_at | dateFormat : 'datetime'}}</td>\n <td data-head=\"User\">\n @if (events?.user_id) {\n <span>\n @if (events?.user) {\n <span><a [routerLink]=\"['/members', events?.user?.slug]\">{{ events?.user?.first_name }} {{ events?.user?.last_name }}</a></span>\n }\n @if (!events?.user) {\n <span>{{ events?.user_id }}</span>\n }\n </span>\n }\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if ( data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoEventDataMessage' | transloco\"> </pw-no-data>\n </div>\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);--public-btn-radius: 24px}\n"] }]
|
|
10261
|
+
args: [{ selector: 'pw-events', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Events</h2>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"data.events\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div *rbacAllow=\"'SuperAdmin'\">\n <p-select\n [options]=\"microServices\"\n (onChange)=\"onServiceChange($event.value)\"\n appendTo=\"body\"\n styleClass=\"tracking-service-select pw-filter-select\"\n panelStyleClass=\"tracking-service-select-panel\"\n scrollHeight=\"220px\"\n [placeholder]=\"'Filter by service'\"\n optionLabel=\"name\"\n optionValue=\"name\">\n </p-select>\n </div>\n <div>\n <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"events-filter-users\" #multiSelector [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter by users\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\"\n [lazy]=\"true\"\n (scroll)=\"onScroll($event)\"\n (onPanelShow)=\"onPanelShow()\"\n [loading]=\"userLoading\"\n (onFilter)=\"handleFilter($event)\"\n >\n </p-multiSelect>\n </div>\n <div>\n <p-datepicker inputId=\"events-start-date\" [showTime]=\"true\"\n [appendTo]=\"'body'\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'Start Date'\"\n [(ngModel)]=\"startDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div>\n <p-datepicker inputId=\"events-end-date\" [appendTo]=\"'body'\"\n [showTime]=\"true\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'End Date'\"\n [(ngModel)]=\"endDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div>\n <label for=\"events-search\" class=\"visually-hidden\">Search Events</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=\"events-search\"\n name=\"events-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search events...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control bg-white\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"created_at\">\n {{ 'Admin.Tracking.CreatedAt' | transloco }}\n <p-sortIcon field=\"created_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"event_type\">\n {{ 'Admin.Tracking.EventType' | transloco }}\n <p-sortIcon field=\"event_type\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"related_entity_type\">\n {{ 'Admin.Tracking.EntityType' | transloco }}\n <p-sortIcon field=\"related_entity_type\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"updated_at\">\n {{ 'Admin.Tracking.UpdatedAt' | transloco }}\n <p-sortIcon field=\"updated_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"user_id\">\n {{ 'Admin.Tracking.User' | transloco }}\n <p-sortIcon field=\"user_id\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-events>\n <tr [class.d-none]=\"loading\">\n <td data-head=\"Created At\">{{ events.created_at | dateFormat: 'datetime' }}</td>\n <td data-head=\"Event Type\">{{ events.event_type }}</td>\n <td data-head=\"Entity Type\">{{ events.related_entity_type }}</td>\n <td data-head=\"Updated At\">{{ events.updated_at | dateFormat : 'datetime'}}</td>\n <td data-head=\"User\">\n @if (events?.user_id) {\n <span>\n @if (events?.user) {\n <span><a [routerLink]=\"['/members', events?.user?.slug]\">{{ events?.user?.first_name }} {{ events?.user?.last_name }}</a></span>\n }\n @if (!events?.user) {\n <span>{{ events?.user_id }}</span>\n }\n </span>\n }\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if ( data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoEventDataMessage' | transloco\"> </pw-no-data>\n </div>\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);--public-btn-radius: 24px}\n"] }]
|
|
10082
10262
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$1.AhoyService }, { type: i1.AdminDataService }] });
|
|
10083
10263
|
|
|
10084
10264
|
class TrackingComponent {
|
|
@@ -10299,11 +10479,11 @@ class VersionsComponent extends AppBaseComponent {
|
|
|
10299
10479
|
}
|
|
10300
10480
|
}
|
|
10301
10481
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: VersionsComponent, deps: [{ token: i0.Injector }, { token: i1$1.AhoyService }, { token: i2.NgbModal }, { token: i1.AdminDataService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10302
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: VersionsComponent, isStandalone: false, selector: "pw-versions", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Versions</h2>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"data.versions\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div *rbacAllow=\"'SuperAdmin'\"\n class=\"col-sm-2 mb-2 mb-md-0\">\n <p-select\n [options]=\"microServices\"\n (onChange)=\"onServiceChange($event.value)\"\n appendTo=\"body\"\n styleClass=\"tracking-service-select\"\n panelStyleClass=\"tracking-service-select-panel\"\n scrollHeight=\"220px\"\n [placeholder]=\"'Filter by service'\"\n optionLabel=\"name\"\n optionValue=\"name\">\n </p-select>\n </div>\n <div class=\"col-sm-2\">\n <p-multiSelect inputId=\"versions-filter-users\" #multiSelector [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter by users\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\"\n [lazy]=\"true\"\n (scroll)=\"onScroll($event)\"\n (onPanelShow)=\"onPanelShow()\"\n [loading]=\"userLoading\"\n (onFilter)=\"handleFilter($event)\"\n >\n </p-multiSelect>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker inputId=\"versions-start-date\" [showTime]=\"true\"\n [appendTo]=\"'body'\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'Start Date'\"\n [(ngModel)]=\"startDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col-sm-2 \">\n <p-datepicker inputId=\"versions-end-date\" [appendTo]=\"'body'\"\n [showTime]=\"true\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'End Date'\"\n [(ngModel)]=\"endDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col d-flex align-items-center\">\n <label for=\"versions-search\" class=\"visually-hidden\">Search Versions</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=\"versions-search\"\n name=\"versions-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search versions...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control bg-white\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"author\">\n {{ 'Admin.Tracking.User' | transloco }}\n <p-sortIcon field=\"author\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"created_at\">\n {{ 'Admin.Tracking.CreatedAt' | transloco }}\n <p-sortIcon field=\"created_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"event\">\n {{ 'Admin.Tracking.Event' | transloco }}\n <p-sortIcon field=\"event\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"item_type\">\n {{ 'Admin.Tracking.ItemType' | transloco }}\n <p-sortIcon field=\"item_type\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"item_id\">\n {{ 'Admin.Tracking.ItemId' | transloco }}\n <p-sortIcon field=\"item_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"object\">\n {{ 'Admin.Tracking.Object' | transloco }}\n <p-sortIcon field=\"object\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"updated_at\">\n {{ 'Admin.Tracking.UpdatedAt' | transloco }}\n <p-sortIcon field=\"updated_at\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-version>\n <tr [class.d-none]=\"loading\">\n <td data-head=\"User\">\n @if (version?.author) {\n <span><a [routerLink]=\"['/members', version?.author?.slug]\">{{ version?.author?.first_name }}\n {{ version?.author?.last_name }}</a></span>\n }\n @if (!version?.author && version?.whoDoneIt) {\n <span>{{\n version?.whoDoneIt\n }}</span>\n }\n </td>\n <td data-head=\"Created At\">{{ version.created_at | dateFormat: 'datetime' }}</td>\n <td data-head=\"Event\">\n <span class=\"badge\"\n color=\"warning\"\n [appDynamicBadge]=\"{\n itemsArray: events,\n item: version?.event\n }\">{{version?.event}}</span>\n </td>\n <td data-head=\"Item Type\">{{ version.item_type }}</td>\n <td data-head=\"Item Id\">{{ version.item_id }}</td>\n <td data-head=\"Object\">\n <span (click)=\"openObjectModal(objModal, version?.object)\"\n (keydown.enter)=\"openObjectModal(objModal, version?.object)\"\n class=\"badge bg-info cursor-pointer\">Open Object</span>\n </td>\n <td data-head=\"Updated At\">{{ version.updated_at | dateFormat: 'datetime' }}</td>\n </tr>\n </ng-template>\n </p-table>\n @if ( data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoVersionsDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n<!-- Object Modal -->\n<ng-template #objModal\n let-modal>\n <div class=\"modal-header\">\n <h4 class=\"modal-title\">{{ 'Admin.Tracking.Object' | transloco }}</h4>\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 @if (activeObject) {\n <div>\n <ngx-json-viewer [json]=\"activeObject\"\n [expanded]=\"false\"></ngx-json-viewer>\n </div>\n }\n </div>\n</ng-template>\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);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i11$1.NgxJsonViewerComponent, selector: "ngx-json-viewer", inputs: ["json", "expanded", "depth", "_currentDepth"] }, { kind: "component", type: i10$1.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: 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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$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: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }] }); }
|
|
10482
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: VersionsComponent, isStandalone: false, selector: "pw-versions", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Versions</h2>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"data.versions\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div *rbacAllow=\"'SuperAdmin'\"\n class=\"col-sm-2 mb-2 mb-md-0\">\n <p-select\n [options]=\"microServices\"\n (onChange)=\"onServiceChange($event.value)\"\n appendTo=\"body\"\n styleClass=\"tracking-service-select pw-filter-select\"\n panelStyleClass=\"tracking-service-select-panel\"\n scrollHeight=\"220px\"\n [placeholder]=\"'Filter by service'\"\n optionLabel=\"name\"\n optionValue=\"name\">\n </p-select>\n </div>\n <div class=\"col-sm-2\">\n <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"versions-filter-users\" #multiSelector [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter by users\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\"\n [lazy]=\"true\"\n (scroll)=\"onScroll($event)\"\n (onPanelShow)=\"onPanelShow()\"\n [loading]=\"userLoading\"\n (onFilter)=\"handleFilter($event)\"\n >\n </p-multiSelect>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker inputId=\"versions-start-date\" [showTime]=\"true\"\n [appendTo]=\"'body'\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'Start Date'\"\n [(ngModel)]=\"startDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col-sm-2 \">\n <p-datepicker inputId=\"versions-end-date\" [appendTo]=\"'body'\"\n [showTime]=\"true\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'End Date'\"\n [(ngModel)]=\"endDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col d-flex align-items-center\">\n <label for=\"versions-search\" class=\"visually-hidden\">Search Versions</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=\"versions-search\"\n name=\"versions-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search versions...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control bg-white\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"author\">\n {{ 'Admin.Tracking.User' | transloco }}\n <p-sortIcon field=\"author\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"created_at\">\n {{ 'Admin.Tracking.CreatedAt' | transloco }}\n <p-sortIcon field=\"created_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"event\">\n {{ 'Admin.Tracking.Event' | transloco }}\n <p-sortIcon field=\"event\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"item_type\">\n {{ 'Admin.Tracking.ItemType' | transloco }}\n <p-sortIcon field=\"item_type\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"item_id\">\n {{ 'Admin.Tracking.ItemId' | transloco }}\n <p-sortIcon field=\"item_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"object\">\n {{ 'Admin.Tracking.Object' | transloco }}\n <p-sortIcon field=\"object\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"updated_at\">\n {{ 'Admin.Tracking.UpdatedAt' | transloco }}\n <p-sortIcon field=\"updated_at\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-version>\n <tr [class.d-none]=\"loading\">\n <td data-head=\"User\">\n @if (version?.author) {\n <span><a [routerLink]=\"['/members', version?.author?.slug]\">{{ version?.author?.first_name }}\n {{ version?.author?.last_name }}</a></span>\n }\n @if (!version?.author && version?.whoDoneIt) {\n <span>{{\n version?.whoDoneIt\n }}</span>\n }\n </td>\n <td data-head=\"Created At\">{{ version.created_at | dateFormat: 'datetime' }}</td>\n <td data-head=\"Event\">\n <span class=\"badge\"\n color=\"warning\"\n [appDynamicBadge]=\"{\n itemsArray: events,\n item: version?.event\n }\">{{version?.event}}</span>\n </td>\n <td data-head=\"Item Type\">{{ version.item_type }}</td>\n <td data-head=\"Item Id\">{{ version.item_id }}</td>\n <td data-head=\"Object\">\n <span (click)=\"openObjectModal(objModal, version?.object)\"\n (keydown.enter)=\"openObjectModal(objModal, version?.object)\"\n class=\"badge bg-info cursor-pointer\">Open Object</span>\n </td>\n <td data-head=\"Updated At\">{{ version.updated_at | dateFormat: 'datetime' }}</td>\n </tr>\n </ng-template>\n </p-table>\n @if ( data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoVersionsDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n<!-- Object Modal -->\n<ng-template #objModal\n let-modal>\n <div class=\"modal-header\">\n <h4 class=\"modal-title\">{{ 'Admin.Tracking.Object' | transloco }}</h4>\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 @if (activeObject) {\n <div>\n <ngx-json-viewer [json]=\"activeObject\"\n [expanded]=\"false\"></ngx-json-viewer>\n </div>\n }\n </div>\n</ng-template>\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);--public-btn-radius: 24px}\n"], dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { 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: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "component", type: i11$1.NgxJsonViewerComponent, selector: "ngx-json-viewer", inputs: ["json", "expanded", "depth", "_currentDepth"] }, { kind: "component", type: i10$1.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: 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: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$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: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }] }); }
|
|
10303
10483
|
}
|
|
10304
10484
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: VersionsComponent, decorators: [{
|
|
10305
10485
|
type: Component,
|
|
10306
|
-
args: [{ selector: 'pw-versions', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Versions</h2>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"data.versions\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div *rbacAllow=\"'SuperAdmin'\"\n class=\"col-sm-2 mb-2 mb-md-0\">\n <p-select\n [options]=\"microServices\"\n (onChange)=\"onServiceChange($event.value)\"\n appendTo=\"body\"\n styleClass=\"tracking-service-select\"\n panelStyleClass=\"tracking-service-select-panel\"\n scrollHeight=\"220px\"\n [placeholder]=\"'Filter by service'\"\n optionLabel=\"name\"\n optionValue=\"name\">\n </p-select>\n </div>\n <div class=\"col-sm-2\">\n <p-multiSelect inputId=\"versions-filter-users\" #multiSelector [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter by users\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\"\n [lazy]=\"true\"\n (scroll)=\"onScroll($event)\"\n (onPanelShow)=\"onPanelShow()\"\n [loading]=\"userLoading\"\n (onFilter)=\"handleFilter($event)\"\n >\n </p-multiSelect>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker inputId=\"versions-start-date\" [showTime]=\"true\"\n [appendTo]=\"'body'\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'Start Date'\"\n [(ngModel)]=\"startDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col-sm-2 \">\n <p-datepicker inputId=\"versions-end-date\" [appendTo]=\"'body'\"\n [showTime]=\"true\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'End Date'\"\n [(ngModel)]=\"endDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col d-flex align-items-center\">\n <label for=\"versions-search\" class=\"visually-hidden\">Search Versions</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=\"versions-search\"\n name=\"versions-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search versions...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control bg-white\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"author\">\n {{ 'Admin.Tracking.User' | transloco }}\n <p-sortIcon field=\"author\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"created_at\">\n {{ 'Admin.Tracking.CreatedAt' | transloco }}\n <p-sortIcon field=\"created_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"event\">\n {{ 'Admin.Tracking.Event' | transloco }}\n <p-sortIcon field=\"event\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"item_type\">\n {{ 'Admin.Tracking.ItemType' | transloco }}\n <p-sortIcon field=\"item_type\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"item_id\">\n {{ 'Admin.Tracking.ItemId' | transloco }}\n <p-sortIcon field=\"item_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"object\">\n {{ 'Admin.Tracking.Object' | transloco }}\n <p-sortIcon field=\"object\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"updated_at\">\n {{ 'Admin.Tracking.UpdatedAt' | transloco }}\n <p-sortIcon field=\"updated_at\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-version>\n <tr [class.d-none]=\"loading\">\n <td data-head=\"User\">\n @if (version?.author) {\n <span><a [routerLink]=\"['/members', version?.author?.slug]\">{{ version?.author?.first_name }}\n {{ version?.author?.last_name }}</a></span>\n }\n @if (!version?.author && version?.whoDoneIt) {\n <span>{{\n version?.whoDoneIt\n }}</span>\n }\n </td>\n <td data-head=\"Created At\">{{ version.created_at | dateFormat: 'datetime' }}</td>\n <td data-head=\"Event\">\n <span class=\"badge\"\n color=\"warning\"\n [appDynamicBadge]=\"{\n itemsArray: events,\n item: version?.event\n }\">{{version?.event}}</span>\n </td>\n <td data-head=\"Item Type\">{{ version.item_type }}</td>\n <td data-head=\"Item Id\">{{ version.item_id }}</td>\n <td data-head=\"Object\">\n <span (click)=\"openObjectModal(objModal, version?.object)\"\n (keydown.enter)=\"openObjectModal(objModal, version?.object)\"\n class=\"badge bg-info cursor-pointer\">Open Object</span>\n </td>\n <td data-head=\"Updated At\">{{ version.updated_at | dateFormat: 'datetime' }}</td>\n </tr>\n </ng-template>\n </p-table>\n @if ( data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoVersionsDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n<!-- Object Modal -->\n<ng-template #objModal\n let-modal>\n <div class=\"modal-header\">\n <h4 class=\"modal-title\">{{ 'Admin.Tracking.Object' | transloco }}</h4>\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 @if (activeObject) {\n <div>\n <ngx-json-viewer [json]=\"activeObject\"\n [expanded]=\"false\"></ngx-json-viewer>\n </div>\n }\n </div>\n</ng-template>\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);--public-btn-radius: 24px}\n"] }]
|
|
10486
|
+
args: [{ selector: 'pw-versions', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Versions</h2>\n </div>\n</div>\n@if (!isLoaded) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n}\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"data.unfiltered_count === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"data.versions\"\n [paginator]=\"data.object_count !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"data.object_count\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"row\">\n <div *rbacAllow=\"'SuperAdmin'\"\n class=\"col-sm-2 mb-2 mb-md-0\">\n <p-select\n [options]=\"microServices\"\n (onChange)=\"onServiceChange($event.value)\"\n appendTo=\"body\"\n styleClass=\"tracking-service-select pw-filter-select\"\n panelStyleClass=\"tracking-service-select-panel\"\n scrollHeight=\"220px\"\n [placeholder]=\"'Filter by service'\"\n optionLabel=\"name\"\n optionValue=\"name\">\n </p-select>\n </div>\n <div class=\"col-sm-2\">\n <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"versions-filter-users\" #multiSelector [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter by users\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\"\n [lazy]=\"true\"\n (scroll)=\"onScroll($event)\"\n (onPanelShow)=\"onPanelShow()\"\n [loading]=\"userLoading\"\n (onFilter)=\"handleFilter($event)\"\n >\n </p-multiSelect>\n </div>\n <div class=\"col-sm-2\">\n <p-datepicker inputId=\"versions-start-date\" [showTime]=\"true\"\n [appendTo]=\"'body'\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'Start Date'\"\n [(ngModel)]=\"startDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col-sm-2 \">\n <p-datepicker inputId=\"versions-end-date\" [appendTo]=\"'body'\"\n [showTime]=\"true\"\n (onSelect)=\"onDateSelection()\"\n [placeholder]=\"'End Date'\"\n [(ngModel)]=\"endDate\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\">\n </p-datepicker>\n </div>\n <div class=\"col d-flex align-items-center\">\n <label for=\"versions-search\" class=\"visually-hidden\">Search Versions</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=\"versions-search\"\n name=\"versions-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search versions...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"form-control bg-white\" />\n </p-iconfield>\n </div>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"author\">\n {{ 'Admin.Tracking.User' | transloco }}\n <p-sortIcon field=\"author\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"created_at\">\n {{ 'Admin.Tracking.CreatedAt' | transloco }}\n <p-sortIcon field=\"created_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"event\">\n {{ 'Admin.Tracking.Event' | transloco }}\n <p-sortIcon field=\"event\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"item_type\">\n {{ 'Admin.Tracking.ItemType' | transloco }}\n <p-sortIcon field=\"item_type\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"item_id\">\n {{ 'Admin.Tracking.ItemId' | transloco }}\n <p-sortIcon field=\"item_id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"object\">\n {{ 'Admin.Tracking.Object' | transloco }}\n <p-sortIcon field=\"object\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"updated_at\">\n {{ 'Admin.Tracking.UpdatedAt' | transloco }}\n <p-sortIcon field=\"updated_at\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-version>\n <tr [class.d-none]=\"loading\">\n <td data-head=\"User\">\n @if (version?.author) {\n <span><a [routerLink]=\"['/members', version?.author?.slug]\">{{ version?.author?.first_name }}\n {{ version?.author?.last_name }}</a></span>\n }\n @if (!version?.author && version?.whoDoneIt) {\n <span>{{\n version?.whoDoneIt\n }}</span>\n }\n </td>\n <td data-head=\"Created At\">{{ version.created_at | dateFormat: 'datetime' }}</td>\n <td data-head=\"Event\">\n <span class=\"badge\"\n color=\"warning\"\n [appDynamicBadge]=\"{\n itemsArray: events,\n item: version?.event\n }\">{{version?.event}}</span>\n </td>\n <td data-head=\"Item Type\">{{ version.item_type }}</td>\n <td data-head=\"Item Id\">{{ version.item_id }}</td>\n <td data-head=\"Object\">\n <span (click)=\"openObjectModal(objModal, version?.object)\"\n (keydown.enter)=\"openObjectModal(objModal, version?.object)\"\n class=\"badge bg-info cursor-pointer\">Open Object</span>\n </td>\n <td data-head=\"Updated At\">{{ version.updated_at | dateFormat: 'datetime' }}</td>\n </tr>\n </ng-template>\n </p-table>\n @if ( data.object_count === 0 && data.unfiltered_count !== 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 (data.object_count !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"data.object_count\" />\n }\n </div>\n</div>\n@if (!loading && data.unfiltered_count === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Ahoy.NoVersionsDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n<!-- Object Modal -->\n<ng-template #objModal\n let-modal>\n <div class=\"modal-header\">\n <h4 class=\"modal-title\">{{ 'Admin.Tracking.Object' | transloco }}</h4>\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 @if (activeObject) {\n <div>\n <ngx-json-viewer [json]=\"activeObject\"\n [expanded]=\"false\"></ngx-json-viewer>\n </div>\n }\n </div>\n</ng-template>\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);--public-btn-radius: 24px}\n"] }]
|
|
10307
10487
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1$1.AhoyService }, { type: i2.NgbModal }, { type: i1.AdminDataService }, { type: i0.ChangeDetectorRef }] });
|
|
10308
10488
|
|
|
10309
10489
|
class UserDetailsComponent extends AppBaseComponent {
|
|
@@ -10815,11 +10995,11 @@ class UserListComponent extends UsersListBaseComponent {
|
|
|
10815
10995
|
this.adminService.remove2fa(this.remove2faUserId, this.subscriptionId).subscribe();
|
|
10816
10996
|
}
|
|
10817
10997
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: UserListComponent, deps: [{ token: i1.AdminService }, { token: i1$1.CustomToastService }, { token: i1$1.ProductService }, { token: i0.Injector }, { token: i1$1.AuthService }, { token: i0.ChangeDetectorRef }, { token: i1$1.WindowService }, { token: i3$1.CollapsibleSidebarService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10818
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: UserListComponent, isStandalone: false, selector: "pw-admin-user-list", viewQueries: [{ propertyName: "passwordValidationModalForUserDelete", first: true, predicate: ["passwordValidationModalForUserDelete"], descendants: true }, { propertyName: "passwordValidationModalForImpersonate", first: true, predicate: ["passwordValidationModalForImpersonate"], descendants: true }, { propertyName: "passwordValidationModalForRemove2fa", first: true, predicate: ["passwordValidationModalForRemove2fa"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Users</h2>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n id=\"btn-create\"\n *rbacAllow=\"'SuperAdmin'\"\n [routerLink]=\"[routers.usersDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add User\n </a>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\">\n @if (!isLoaded) {\n <p-progressSpinner> </p-progressSpinner>\n }\n</div>\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"users\"\n [paginator]=\"totalRecords !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div class=\"col-sm-4\">\n <p-multiSelect inputId=\"users-list-filter-role-product\"\n [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter users by role, product, or feature\"\n [selectionLimit]=\"1\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n @if (selectedOption) {\n <div class=\"col-4\"\n >\n <p-multiSelect inputId=\"users-list-filter-criteria\"\n [options]=\"searchDataSource\"\n (onChange)=\"onSearchCriteria($event)\"\n [showToggleAll]=\"true\"\n [(ngModel)]=\"criteria\"\n [showHeader]=\"true\"\n placeholder=\"Filter by {{ selectedOption.value }}s\"\n maxSelectedLabels=\"2\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n }\n <div class=\"text-end\">\n <label for=\"users-list-search\" class=\"visually-hidden\">Search User</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=\"users-list-search\"\n name=\"users-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search users...\"\n data-cy=\"user-search\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"wd-90\" />\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.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 <p-sortIcon field=\"first_name\"></p-sortIcon>\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.Users.Slug' | transloco }}\n <p-sortIcon field=\"slug\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"encrypted_password\">\n {{ 'Admin.Users.EmailConfirm' | transloco }}\n <p-sortIcon field=\"encrypted_password\"></p-sortIcon>\n </th>\n\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=\"last_sign_in_at\">\n {{ 'Admin.Users.LastLogin' | transloco }}\n <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"signed_up_at\">\n {{ 'Admin.Users.RegisteredOn' | transloco }}\n <p-sortIcon field=\"signed_up_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n class=\"actions-list-four\">\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\"><a [routerLink]=\"['/members', user.slug]\">{{ user.first_name }}</a></td>\n <td data-head=\"Last Name\">{{ 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 class=\"ms-2\"\n [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n tooltipPosition=\"top\">\n <i class=\"fa-regular fa-square-b alpha-beta text-primary\" ></i>\n </span>\n }\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=\"Slug\">{{ user.slug }}</td>\n <td data-head=\"Email Confirm\">\n <span [appDynamicBadge]=\"{\n itemsArray: [true, false],\n item: user?.has_password\n }\"\n color=\"success-danger\"\n class=\"badge\">{{ user?.has_password ? 'Yes' : 'No' }}</span>\n @if (user?.blocked) {\n <span class=\"ms-2\" [pTooltip]=\"'This user has been blocked'\" tooltipPosition=\"top\">\n <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n </span>\n }\n </td>\n <td data-head=\"S/m #\">\n <span [ngClass]=\"{\n 'text-danger fw-bold': user?.sessions_last_month < 3\n }\">{{ user?.sessions_last_month }}</span>\n </td>\n <td data-head=\"Last Login\">\n @if (user?.current_sign_in_at) {\n <span>\n {{ user.current_sign_in_at | dateFormat }}\n </span>\n } @else {\n {{ user.last_sign_in_at | dateFormat }}\n }\n </td>\n <td data-head=\"Registered On\">{{ user.signed_up_at | dateFormat }}</td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Impersonate this user\"\n *rbacAllow=\"'Pages.Alpha'\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fas fa-people-arrows fa-lg\"\n (click)=\"onImpersonate(user)\"\n (keydown.enter)=\"onImpersonate(user)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n @if (user?.enable_two_factor_authenticator) {\n <li ngbTooltip=\"Disable 2FA\"\n (click)=\"disable2fa(user?.id)\"\n (keydown.enter)=\"disable2fa(user?.id)\"\n *rbacAllow=\"'Pages.Alpha'\"\n class=\"me-2 me-sm-3\">\n <i class=\"fa fa-lock fa-lg success\" aria-hidden=\"true\"></i>\n </li>\n }\n @if (currentUser && user.id !== currentUser.id) {\n <li ngbTooltip=\"Message\"\n *rbacAllow=\"chatPermission\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"['/message']\"\n [fragment]=\"user.slug\">\n <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n </li>\n }\n <li ngbTooltip=\"Edit\"\n *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[routers.usersDetails + user.id]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\"\n *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(user)\"\n (keydown.space)=\"onDelete(user)\"\n (click)=\"onDelete(user)\"\n aria-hidden=\"true\"\n ></i>\n </li>\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 (!loading && totalRecordsUnFiltered === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Users.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n [destructive]=\"true\"\n (successEvent)=\"deleteUser($event)\">\n</pw-password-validation>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\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);--public-btn-radius: 24px}.search-input input{width:100%}.w-150{width:150px}.table-responsive td[data-head=id]{font-variant-numeric:tabular-nums;color:#7c8696}.hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}\n"], dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.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: 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: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i2.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: i3$1.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage", "destructive"], outputs: ["successEvent"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$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: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }] }); }
|
|
10998
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: UserListComponent, isStandalone: false, selector: "pw-admin-user-list", viewQueries: [{ propertyName: "passwordValidationModalForUserDelete", first: true, predicate: ["passwordValidationModalForUserDelete"], descendants: true }, { propertyName: "passwordValidationModalForImpersonate", first: true, predicate: ["passwordValidationModalForImpersonate"], descendants: true }, { propertyName: "passwordValidationModalForRemove2fa", first: true, predicate: ["passwordValidationModalForRemove2fa"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Users</h2>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n id=\"btn-create\"\n *rbacAllow=\"'SuperAdmin'\"\n [routerLink]=\"[routers.usersDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add User\n </a>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\">\n @if (!isLoaded) {\n <p-progressSpinner> </p-progressSpinner>\n }\n</div>\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"users\"\n [paginator]=\"totalRecords !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div class=\"col-sm-4\">\n <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"users-list-filter-role-product\"\n [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter users by role, product, or feature\"\n [selectionLimit]=\"1\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n @if (selectedOption) {\n <div class=\"col-4\"\n >\n <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"users-list-filter-criteria\"\n [options]=\"searchDataSource\"\n (onChange)=\"onSearchCriteria($event)\"\n [showToggleAll]=\"true\"\n [(ngModel)]=\"criteria\"\n [showHeader]=\"true\"\n placeholder=\"Filter by {{ selectedOption.value }}s\"\n maxSelectedLabels=\"2\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n }\n <div class=\"text-end\">\n <label for=\"users-list-search\" class=\"visually-hidden\">Search User</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=\"users-list-search\"\n name=\"users-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search users...\"\n data-cy=\"user-search\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"wd-90\" />\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.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 <p-sortIcon field=\"first_name\"></p-sortIcon>\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.Users.Slug' | transloco }}\n <p-sortIcon field=\"slug\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"encrypted_password\">\n {{ 'Admin.Users.EmailConfirm' | transloco }}\n <p-sortIcon field=\"encrypted_password\"></p-sortIcon>\n </th>\n\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=\"last_sign_in_at\">\n {{ 'Admin.Users.LastLogin' | transloco }}\n <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"signed_up_at\">\n {{ 'Admin.Users.RegisteredOn' | transloco }}\n <p-sortIcon field=\"signed_up_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n class=\"actions-list-four\">\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\"><a [routerLink]=\"['/members', user.slug]\">{{ user.first_name }}</a></td>\n <td data-head=\"Last Name\">{{ 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 class=\"ms-2\"\n [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n tooltipPosition=\"top\">\n <i class=\"fa-regular fa-square-b alpha-beta text-primary\" ></i>\n </span>\n }\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=\"Slug\">{{ user.slug }}</td>\n <td data-head=\"Email Confirm\">\n <span [appDynamicBadge]=\"{\n itemsArray: [true, false],\n item: user?.has_password\n }\"\n color=\"success-danger\"\n class=\"badge\">{{ user?.has_password ? 'Yes' : 'No' }}</span>\n @if (user?.blocked) {\n <span class=\"ms-2\" [pTooltip]=\"'This user has been blocked'\" tooltipPosition=\"top\">\n <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n </span>\n }\n </td>\n <td data-head=\"S/m #\">\n <span [ngClass]=\"{\n 'text-danger fw-bold': user?.sessions_last_month < 3\n }\">{{ user?.sessions_last_month }}</span>\n </td>\n <td data-head=\"Last Login\">\n @if (user?.current_sign_in_at) {\n <span>\n {{ user.current_sign_in_at | dateFormat }}\n </span>\n } @else {\n {{ user.last_sign_in_at | dateFormat }}\n }\n </td>\n <td data-head=\"Registered On\">{{ user.signed_up_at | dateFormat }}</td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Impersonate this user\"\n *rbacAllow=\"'Pages.Alpha'\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fas fa-people-arrows fa-lg\"\n (click)=\"onImpersonate(user)\"\n (keydown.enter)=\"onImpersonate(user)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n @if (user?.enable_two_factor_authenticator) {\n <li ngbTooltip=\"Disable 2FA\"\n (click)=\"disable2fa(user?.id)\"\n (keydown.enter)=\"disable2fa(user?.id)\"\n *rbacAllow=\"'Pages.Alpha'\"\n class=\"me-2 me-sm-3\">\n <i class=\"fa fa-lock fa-lg success\" aria-hidden=\"true\"></i>\n </li>\n }\n @if (currentUser && user.id !== currentUser.id) {\n <li ngbTooltip=\"Message\"\n *rbacAllow=\"chatPermission\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"['/message']\"\n [fragment]=\"user.slug\">\n <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n </li>\n }\n <li ngbTooltip=\"Edit\"\n *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[routers.usersDetails + user.id]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\"\n *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(user)\"\n (keydown.space)=\"onDelete(user)\"\n (click)=\"onDelete(user)\"\n aria-hidden=\"true\"\n ></i>\n </li>\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 (!loading && totalRecordsUnFiltered === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Users.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n [destructive]=\"true\"\n (successEvent)=\"deleteUser($event)\">\n</pw-password-validation>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\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);--public-btn-radius: 24px}.search-input input{width:100%}.w-150{width:150px}.table-responsive td[data-head=id]{font-variant-numeric:tabular-nums;color:#7c8696}.hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}\n"], dependencies: [{ kind: "component", type: i3$2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "size", "showGridlines", "stripedRows", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i4$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3$2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3$2.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: 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: i5$1.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i6.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i7.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i2.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: i3$1.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage", "destructive"], outputs: ["successEvent"] }, { kind: "component", type: i4.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$1.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$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: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }] }); }
|
|
10819
10999
|
}
|
|
10820
11000
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: UserListComponent, decorators: [{
|
|
10821
11001
|
type: Component,
|
|
10822
|
-
args: [{ selector: 'pw-admin-user-list', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Users</h2>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n id=\"btn-create\"\n *rbacAllow=\"'SuperAdmin'\"\n [routerLink]=\"[routers.usersDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add User\n </a>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\">\n @if (!isLoaded) {\n <p-progressSpinner> </p-progressSpinner>\n }\n</div>\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"users\"\n [paginator]=\"totalRecords !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div class=\"col-sm-4\">\n <p-multiSelect inputId=\"users-list-filter-role-product\"\n [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter users by role, product, or feature\"\n [selectionLimit]=\"1\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n @if (selectedOption) {\n <div class=\"col-4\"\n >\n <p-multiSelect inputId=\"users-list-filter-criteria\"\n [options]=\"searchDataSource\"\n (onChange)=\"onSearchCriteria($event)\"\n [showToggleAll]=\"true\"\n [(ngModel)]=\"criteria\"\n [showHeader]=\"true\"\n placeholder=\"Filter by {{ selectedOption.value }}s\"\n maxSelectedLabels=\"2\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n }\n <div class=\"text-end\">\n <label for=\"users-list-search\" class=\"visually-hidden\">Search User</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=\"users-list-search\"\n name=\"users-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search users...\"\n data-cy=\"user-search\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"wd-90\" />\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.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 <p-sortIcon field=\"first_name\"></p-sortIcon>\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.Users.Slug' | transloco }}\n <p-sortIcon field=\"slug\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"encrypted_password\">\n {{ 'Admin.Users.EmailConfirm' | transloco }}\n <p-sortIcon field=\"encrypted_password\"></p-sortIcon>\n </th>\n\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=\"last_sign_in_at\">\n {{ 'Admin.Users.LastLogin' | transloco }}\n <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"signed_up_at\">\n {{ 'Admin.Users.RegisteredOn' | transloco }}\n <p-sortIcon field=\"signed_up_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n class=\"actions-list-four\">\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\"><a [routerLink]=\"['/members', user.slug]\">{{ user.first_name }}</a></td>\n <td data-head=\"Last Name\">{{ 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 class=\"ms-2\"\n [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n tooltipPosition=\"top\">\n <i class=\"fa-regular fa-square-b alpha-beta text-primary\" ></i>\n </span>\n }\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=\"Slug\">{{ user.slug }}</td>\n <td data-head=\"Email Confirm\">\n <span [appDynamicBadge]=\"{\n itemsArray: [true, false],\n item: user?.has_password\n }\"\n color=\"success-danger\"\n class=\"badge\">{{ user?.has_password ? 'Yes' : 'No' }}</span>\n @if (user?.blocked) {\n <span class=\"ms-2\" [pTooltip]=\"'This user has been blocked'\" tooltipPosition=\"top\">\n <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n </span>\n }\n </td>\n <td data-head=\"S/m #\">\n <span [ngClass]=\"{\n 'text-danger fw-bold': user?.sessions_last_month < 3\n }\">{{ user?.sessions_last_month }}</span>\n </td>\n <td data-head=\"Last Login\">\n @if (user?.current_sign_in_at) {\n <span>\n {{ user.current_sign_in_at | dateFormat }}\n </span>\n } @else {\n {{ user.last_sign_in_at | dateFormat }}\n }\n </td>\n <td data-head=\"Registered On\">{{ user.signed_up_at | dateFormat }}</td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Impersonate this user\"\n *rbacAllow=\"'Pages.Alpha'\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fas fa-people-arrows fa-lg\"\n (click)=\"onImpersonate(user)\"\n (keydown.enter)=\"onImpersonate(user)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n @if (user?.enable_two_factor_authenticator) {\n <li ngbTooltip=\"Disable 2FA\"\n (click)=\"disable2fa(user?.id)\"\n (keydown.enter)=\"disable2fa(user?.id)\"\n *rbacAllow=\"'Pages.Alpha'\"\n class=\"me-2 me-sm-3\">\n <i class=\"fa fa-lock fa-lg success\" aria-hidden=\"true\"></i>\n </li>\n }\n @if (currentUser && user.id !== currentUser.id) {\n <li ngbTooltip=\"Message\"\n *rbacAllow=\"chatPermission\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"['/message']\"\n [fragment]=\"user.slug\">\n <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n </li>\n }\n <li ngbTooltip=\"Edit\"\n *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[routers.usersDetails + user.id]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\"\n *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(user)\"\n (keydown.space)=\"onDelete(user)\"\n (click)=\"onDelete(user)\"\n aria-hidden=\"true\"\n ></i>\n </li>\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 (!loading && totalRecordsUnFiltered === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Users.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n [destructive]=\"true\"\n (successEvent)=\"deleteUser($event)\">\n</pw-password-validation>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\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);--public-btn-radius: 24px}.search-input input{width:100%}.w-150{width:150px}.table-responsive td[data-head=id]{font-variant-numeric:tabular-nums;color:#7c8696}.hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}\n"] }]
|
|
11002
|
+
args: [{ selector: 'pw-admin-user-list', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex justify-content-between align-items-center\">\n <h2 class=\"card-title p-0 float-start\">Users</h2>\n <a class=\"btn btn-sm btn-outline-primary float-end\"\n id=\"btn-create\"\n *rbacAllow=\"'SuperAdmin'\"\n [routerLink]=\"[routers.usersDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add User\n </a>\n </div>\n</div>\n<div class=\"w-100 text-center mt-3\">\n @if (!isLoaded) {\n <p-progressSpinner> </p-progressSpinner>\n }\n</div>\n<div class=\"primeng-datatable-container actions-collapsed mt-0\" [class.hideTable]=\"totalRecordsUnFiltered === 0\">\n <div class=\"user-management-table table-responsive\">\n <p-table #dt\n [value]=\"users\"\n [paginator]=\"totalRecords !== 0\"\n [lazy]=\"true\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n (onLazyLoad)=\"onLazyLoad($event)\"\n [customSort]=\"true\">\n <ng-template pTemplate=\"caption\">\n <div class=\"search-filter\">\n <div class=\"col-sm-4\">\n <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"users-list-filter-role-product\"\n [options]=\"searchOptions\"\n (onChange)=\"onSearchOptionChange($event)\"\n placeholder=\"Filter users by role, product, or feature\"\n [selectionLimit]=\"1\"\n [(ngModel)]=\"filterSource\"\n [showToggleAll]=\"true\"\n [showHeader]=\"true\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n @if (selectedOption) {\n <div class=\"col-4\"\n >\n <p-multiSelect styleClass=\"pw-filter-select\" inputId=\"users-list-filter-criteria\"\n [options]=\"searchDataSource\"\n (onChange)=\"onSearchCriteria($event)\"\n [showToggleAll]=\"true\"\n [(ngModel)]=\"criteria\"\n [showHeader]=\"true\"\n placeholder=\"Filter by {{ selectedOption.value }}s\"\n maxSelectedLabels=\"2\"\n appendTo=\"body\">\n </p-multiSelect>\n </div>\n }\n <div class=\"text-end\">\n <label for=\"users-list-search\" class=\"visually-hidden\">Search User</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=\"users-list-search\"\n name=\"users-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search users...\"\n data-cy=\"user-search\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n class=\"wd-90\" />\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.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 <p-sortIcon field=\"first_name\"></p-sortIcon>\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.Users.Slug' | transloco }}\n <p-sortIcon field=\"slug\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"encrypted_password\">\n {{ 'Admin.Users.EmailConfirm' | transloco }}\n <p-sortIcon field=\"encrypted_password\"></p-sortIcon>\n </th>\n\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=\"last_sign_in_at\">\n {{ 'Admin.Users.LastLogin' | transloco }}\n <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"signed_up_at\">\n {{ 'Admin.Users.RegisteredOn' | transloco }}\n <p-sortIcon field=\"signed_up_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n class=\"actions-list-four\">\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\"><a [routerLink]=\"['/members', user.slug]\">{{ user.first_name }}</a></td>\n <td data-head=\"Last Name\">{{ 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 class=\"ms-2\"\n [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n tooltipPosition=\"top\">\n <i class=\"fa-regular fa-square-b alpha-beta text-primary\" ></i>\n </span>\n }\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=\"Slug\">{{ user.slug }}</td>\n <td data-head=\"Email Confirm\">\n <span [appDynamicBadge]=\"{\n itemsArray: [true, false],\n item: user?.has_password\n }\"\n color=\"success-danger\"\n class=\"badge\">{{ user?.has_password ? 'Yes' : 'No' }}</span>\n @if (user?.blocked) {\n <span class=\"ms-2\" [pTooltip]=\"'This user has been blocked'\" tooltipPosition=\"top\">\n <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n </span>\n }\n </td>\n <td data-head=\"S/m #\">\n <span [ngClass]=\"{\n 'text-danger fw-bold': user?.sessions_last_month < 3\n }\">{{ user?.sessions_last_month }}</span>\n </td>\n <td data-head=\"Last Login\">\n @if (user?.current_sign_in_at) {\n <span>\n {{ user.current_sign_in_at | dateFormat }}\n </span>\n } @else {\n {{ user.last_sign_in_at | dateFormat }}\n }\n </td>\n <td data-head=\"Registered On\">{{ user.signed_up_at | dateFormat }}</td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li ngbTooltip=\"Impersonate this user\"\n *rbacAllow=\"'Pages.Alpha'\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fas fa-people-arrows fa-lg\"\n (click)=\"onImpersonate(user)\"\n (keydown.enter)=\"onImpersonate(user)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n @if (user?.enable_two_factor_authenticator) {\n <li ngbTooltip=\"Disable 2FA\"\n (click)=\"disable2fa(user?.id)\"\n (keydown.enter)=\"disable2fa(user?.id)\"\n *rbacAllow=\"'Pages.Alpha'\"\n class=\"me-2 me-sm-3\">\n <i class=\"fa fa-lock fa-lg success\" aria-hidden=\"true\"></i>\n </li>\n }\n @if (currentUser && user.id !== currentUser.id) {\n <li ngbTooltip=\"Message\"\n *rbacAllow=\"chatPermission\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"['/message']\"\n [fragment]=\"user.slug\">\n <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n </li>\n }\n <li ngbTooltip=\"Edit\"\n *rbacAllow=\"'Pages.Admin.Users.Edit'\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[routers.usersDetails + user.id]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li ngbTooltip=\"Delete\"\n *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n class=\"me-2 me-sm-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (keydown.enter)=\"onDelete(user)\"\n (keydown.space)=\"onDelete(user)\"\n (click)=\"onDelete(user)\"\n aria-hidden=\"true\"\n ></i>\n </li>\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 (!loading && totalRecordsUnFiltered === 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Users.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n}\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n [destructive]=\"true\"\n (successEvent)=\"deleteUser($event)\">\n</pw-password-validation>\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\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);--public-btn-radius: 24px}.search-input input{width:100%}.w-150{width:150px}.table-responsive td[data-head=id]{font-variant-numeric:tabular-nums;color:#7c8696}.hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}\n"] }]
|
|
10823
11003
|
}], ctorParameters: () => [{ type: i1.AdminService }, { type: i1$1.CustomToastService }, { type: i1$1.ProductService }, { type: i0.Injector }, { type: i1$1.AuthService }, { type: i0.ChangeDetectorRef }, { type: i1$1.WindowService }, { type: i3$1.CollapsibleSidebarService }], propDecorators: { passwordValidationModalForUserDelete: [{
|
|
10824
11004
|
type: ViewChild,
|
|
10825
11005
|
args: ['passwordValidationModalForUserDelete', { static: false }]
|
|
@@ -11658,6 +11838,46 @@ const routes = [
|
|
|
11658
11838
|
}
|
|
11659
11839
|
]
|
|
11660
11840
|
},
|
|
11841
|
+
{
|
|
11842
|
+
path: 'oauth-clients',
|
|
11843
|
+
data: {
|
|
11844
|
+
title: 'MCP OAuth Clients',
|
|
11845
|
+
permission: 'Pages.Admin'
|
|
11846
|
+
},
|
|
11847
|
+
children: [
|
|
11848
|
+
{
|
|
11849
|
+
path: '',
|
|
11850
|
+
component: OauthClientsTabsComponent,
|
|
11851
|
+
children: [
|
|
11852
|
+
{
|
|
11853
|
+
path: '',
|
|
11854
|
+
redirectTo: 'list',
|
|
11855
|
+
pathMatch: 'full'
|
|
11856
|
+
},
|
|
11857
|
+
{
|
|
11858
|
+
path: 'list',
|
|
11859
|
+
component: OauthClientsComponent
|
|
11860
|
+
}
|
|
11861
|
+
]
|
|
11862
|
+
},
|
|
11863
|
+
{
|
|
11864
|
+
path: 'add',
|
|
11865
|
+
component: OauthClientsDetailsComponent,
|
|
11866
|
+
data: {
|
|
11867
|
+
title: 'Add MCP OAuth Client',
|
|
11868
|
+
permission: 'Pages.Admin'
|
|
11869
|
+
}
|
|
11870
|
+
},
|
|
11871
|
+
{
|
|
11872
|
+
path: 'edit/:id',
|
|
11873
|
+
component: OauthClientsDetailsComponent,
|
|
11874
|
+
data: {
|
|
11875
|
+
title: 'Edit MCP OAuth Client',
|
|
11876
|
+
permission: 'Pages.Admin'
|
|
11877
|
+
}
|
|
11878
|
+
}
|
|
11879
|
+
]
|
|
11880
|
+
},
|
|
11661
11881
|
{
|
|
11662
11882
|
path: 'tracking',
|
|
11663
11883
|
component: TrackingComponent,
|
|
@@ -11839,6 +12059,9 @@ class AdminModule {
|
|
|
11839
12059
|
SubscriptionCredentialsDetailsComponent,
|
|
11840
12060
|
CredentialsDetailsComponent,
|
|
11841
12061
|
CredentialsTabComponent,
|
|
12062
|
+
OauthClientsTabsComponent,
|
|
12063
|
+
OauthClientsComponent,
|
|
12064
|
+
OauthClientsDetailsComponent,
|
|
11842
12065
|
AhoyEventsComponent,
|
|
11843
12066
|
TrackingComponent,
|
|
11844
12067
|
AhoyMessagesComponent,
|
|
@@ -11868,7 +12091,7 @@ class AdminModule {
|
|
|
11868
12091
|
MultiSelectModule,
|
|
11869
12092
|
InputTextModule,
|
|
11870
12093
|
IconFieldModule,
|
|
11871
|
-
InputIconModule, i1$2.NgxDaterangepickerMd, NgxJsonViewerModule,
|
|
12094
|
+
InputIconModule, AppLoaderModule, i1$2.NgxDaterangepickerMd, NgxJsonViewerModule,
|
|
11872
12095
|
DatePickerModule,
|
|
11873
12096
|
PlotlyViaCDNModule,
|
|
11874
12097
|
FileUploadModule,
|
|
@@ -11906,7 +12129,8 @@ class AdminModule {
|
|
|
11906
12129
|
},
|
|
11907
12130
|
deps: [AppConfigService]
|
|
11908
12131
|
}
|
|
11909
|
-
], imports: [primeNgModules,
|
|
12132
|
+
], imports: [primeNgModules, AppLoaderModule,
|
|
12133
|
+
NgxDaterangepickerMd.forRoot(),
|
|
11910
12134
|
NgxJsonViewerModule,
|
|
11911
12135
|
DatePickerModule,
|
|
11912
12136
|
PlotlyViaCDNModule,
|
|
@@ -12024,6 +12248,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
12024
12248
|
SubscriptionCredentialsDetailsComponent,
|
|
12025
12249
|
CredentialsDetailsComponent,
|
|
12026
12250
|
CredentialsTabComponent,
|
|
12251
|
+
OauthClientsTabsComponent,
|
|
12252
|
+
OauthClientsComponent,
|
|
12253
|
+
OauthClientsDetailsComponent,
|
|
12027
12254
|
AhoyEventsComponent,
|
|
12028
12255
|
TrackingComponent,
|
|
12029
12256
|
AhoyMessagesComponent,
|
|
@@ -12049,6 +12276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImpor
|
|
|
12049
12276
|
],
|
|
12050
12277
|
imports: [
|
|
12051
12278
|
...primeNgModules,
|
|
12279
|
+
AppLoaderModule,
|
|
12052
12280
|
NgxDaterangepickerMd.forRoot(),
|
|
12053
12281
|
NgxJsonViewerModule,
|
|
12054
12282
|
DatePickerModule,
|