@posiwise/admin-module 0.0.245 → 0.0.247
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.
|
@@ -743,11 +743,11 @@ class CredentialsComponent extends AppBaseComponent {
|
|
|
743
743
|
super.ngOnDestroy();
|
|
744
744
|
}
|
|
745
745
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CredentialsComponent, deps: [{ token: i1.AdminService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i3$2.ConfirmDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
746
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: CredentialsComponent, isStandalone: false, selector: "pw-credentials", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n <h2 class=\"card-title p-0\">Credentials</h2>\n <button class=\"btn btn-sm btn-outline-primary\"\n data-cy=\"create-role\"\n [routerLink]=\"[routers.adminCredentialsDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Credential\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.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=\"text-end\">\n <label for=\"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=\"credentials-search\"\n name=\"credentials-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n autocomplete=\"off\"\n placeholder=\"Search credentials...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n aria-label=\"Search credentials...\" />\n </p-iconfield>\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 pSortableColumn=\"field\">\n {{ 'Admin.Credentials.Field' | transloco }}\n <p-sortIcon field=\"field\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"is_required\">\n {{ 'Admin.Credentials.Required' | transloco }}\n <p-sortIcon field=\"is_required\"></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=\"is_visible\">\n {{ 'Label.IsVisible' | transloco }}\n <p-sortIcon field=\"is_visible\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"subscription_credentials_count\">\n {{ 'Admin.Credentials.UsageCount' | transloco }}\n <p-sortIcon field=\"subscription_credentials_count\"></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-credential>\n <tr>\n <td data-head=\"Name\">{{ credential.name }}</td>\n <td data-head=\"Field\">\n @if (credential?.description) {\n <span [pTooltip]=\"credential.description\" tooltipPosition=\"top\" appendTo=\"body\">{{ credential.field\n }} <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i></span>\n } @else {\n {{ credential.field }}\n }\n </td>\n <td data-head=\"Required\">\n <span [appDynamicBadge]=\"{\n itemsArray: [true, false],\n item: credential?.is_required\n }\"\n color=\"success-danger\"\n class=\"badge\">\n {{ !!credential?.is_required }}\n </span>\n </td>\n <td data-head=\"Is Active\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: credential?.active }\"\n color=\"success-danger\"\n class=\"badge\">{{ credential?.active ? 'Yes' : 'No' }}</span>\n </td>\n <td data-head=\"Is Visible\">\n <span [appDynamicBadge]=\"{\n itemsArray: [true, false],\n item: credential?.is_visible\n }\"\n color=\"success-danger\"\n class=\"badge\">{{ credential?.is_visible ? 'Yes' : 'No' }}</span>\n </td>\n <td data-head=\"Usage Count\">{{ credential?.subscription_credentials_count ?? 0 }}</td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[routers.adminCredentialsDetails + credential.id]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n class=\"me-2 me-sm-3\">\n <i\n (click)=\"onDelete(credential)\"\n (keydown.enter)=\"onDelete(credential)\"\n (keydown.space)=\"onDelete(credential)\"\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.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.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.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: i6.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { 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$1.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i14.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" }] }); }
|
|
746
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: CredentialsComponent, isStandalone: false, selector: "pw-credentials", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n <h2 class=\"card-title p-0\">Credentials</h2>\n <button class=\"btn btn-sm btn-outline-primary\"\n data-cy=\"create-role\"\n [routerLink]=\"[routers.adminCredentialsDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Credential\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.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=\"text-end\">\n <label for=\"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=\"credentials-search\"\n name=\"credentials-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n autocomplete=\"off\"\n placeholder=\"Search credentials...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n aria-label=\"Search credentials...\" />\n </p-iconfield>\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 pSortableColumn=\"field\">\n {{ 'Admin.Credentials.Field' | transloco }}\n <p-sortIcon field=\"field\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"is_required\">\n {{ 'Admin.Credentials.Required' | transloco }}\n <p-sortIcon field=\"is_required\"></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=\"is_visible\">\n {{ 'Label.IsVisible' | transloco }}\n <p-sortIcon field=\"is_visible\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"subscription_credentials_count\">\n {{ 'Admin.Credentials.UsageCount' | transloco }}\n <p-sortIcon field=\"subscription_credentials_count\"></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-credential>\n <tr>\n <td data-head=\"Name\">{{ credential.name }}</td>\n <td data-head=\"Field\">\n @if (credential?.description) {\n <span [pTooltip]=\"credential.description\" tooltipPosition=\"top\" appendTo=\"body\">{{ credential.field\n }} <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i></span>\n } @else {\n {{ credential.field }}\n }\n </td>\n <td data-head=\"Required\">\n <span [appDynamicBadge]=\"{\n itemsArray: [true, false],\n item: credential?.is_required\n }\"\n color=\"success-danger\"\n class=\"badge\">\n {{ !!credential?.is_required }}\n </span>\n </td>\n <td data-head=\"Is Active\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: credential?.active }\"\n color=\"success-danger\"\n class=\"badge\">{{ credential?.active ? 'Yes' : 'No' }}</span>\n </td>\n <td data-head=\"Is Visible\">\n <span [appDynamicBadge]=\"{\n itemsArray: [true, false],\n item: credential?.is_visible\n }\"\n color=\"success-danger\"\n class=\"badge\">{{ credential?.is_visible ? 'Yes' : 'No' }}</span>\n </td>\n <td data-head=\"Usage Count\">{{ credential?.subscription_credentials_count ?? 0 }}</td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[routers.adminCredentialsDetails + credential.id]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n class=\"me-2 me-sm-3\">\n <i\n (click)=\"onDelete(credential)\"\n (keydown.enter)=\"onDelete(credential)\"\n (keydown.space)=\"onDelete(credential)\"\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.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.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.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: i6.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { 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$1.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i14.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" }] }); }
|
|
747
747
|
}
|
|
748
748
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: CredentialsComponent, decorators: [{
|
|
749
749
|
type: Component,
|
|
750
|
-
args: [{ selector: 'pw-credentials', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n <h2 class=\"card-title p-0\">Credentials</h2>\n <button class=\"btn btn-sm btn-outline-primary\"\n data-cy=\"create-role\"\n [routerLink]=\"[routers.adminCredentialsDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Credential\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.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=\"text-end\">\n <label for=\"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=\"credentials-search\"\n name=\"credentials-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n autocomplete=\"off\"\n placeholder=\"Search credentials...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n aria-label=\"Search credentials...\" />\n </p-iconfield>\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 pSortableColumn=\"field\">\n {{ 'Admin.Credentials.Field' | transloco }}\n <p-sortIcon field=\"field\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"is_required\">\n {{ 'Admin.Credentials.Required' | transloco }}\n <p-sortIcon field=\"is_required\"></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=\"is_visible\">\n {{ 'Label.IsVisible' | transloco }}\n <p-sortIcon field=\"is_visible\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"subscription_credentials_count\">\n {{ 'Admin.Credentials.UsageCount' | transloco }}\n <p-sortIcon field=\"subscription_credentials_count\"></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-credential>\n <tr>\n <td data-head=\"Name\">{{ credential.name }}</td>\n <td data-head=\"Field\">\n @if (credential?.description) {\n <span [pTooltip]=\"credential.description\" tooltipPosition=\"top\" appendTo=\"body\">{{ credential.field\n }} <i class=\"
|
|
750
|
+
args: [{ selector: 'pw-credentials', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n <h2 class=\"card-title p-0\">Credentials</h2>\n <button class=\"btn btn-sm btn-outline-primary\"\n data-cy=\"create-role\"\n [routerLink]=\"[routers.adminCredentialsDetails + 'add']\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Credential\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.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=\"text-end\">\n <label for=\"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=\"credentials-search\"\n name=\"credentials-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n autocomplete=\"off\"\n placeholder=\"Search credentials...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n aria-label=\"Search credentials...\" />\n </p-iconfield>\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 pSortableColumn=\"field\">\n {{ 'Admin.Credentials.Field' | transloco }}\n <p-sortIcon field=\"field\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"is_required\">\n {{ 'Admin.Credentials.Required' | transloco }}\n <p-sortIcon field=\"is_required\"></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=\"is_visible\">\n {{ 'Label.IsVisible' | transloco }}\n <p-sortIcon field=\"is_visible\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"subscription_credentials_count\">\n {{ 'Admin.Credentials.UsageCount' | transloco }}\n <p-sortIcon field=\"subscription_credentials_count\"></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-credential>\n <tr>\n <td data-head=\"Name\">{{ credential.name }}</td>\n <td data-head=\"Field\">\n @if (credential?.description) {\n <span [pTooltip]=\"credential.description\" tooltipPosition=\"top\" appendTo=\"body\">{{ credential.field\n }} <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i></span>\n } @else {\n {{ credential.field }}\n }\n </td>\n <td data-head=\"Required\">\n <span [appDynamicBadge]=\"{\n itemsArray: [true, false],\n item: credential?.is_required\n }\"\n color=\"success-danger\"\n class=\"badge\">\n {{ !!credential?.is_required }}\n </span>\n </td>\n <td data-head=\"Is Active\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: credential?.active }\"\n color=\"success-danger\"\n class=\"badge\">{{ credential?.active ? 'Yes' : 'No' }}</span>\n </td>\n <td data-head=\"Is Visible\">\n <span [appDynamicBadge]=\"{\n itemsArray: [true, false],\n item: credential?.is_visible\n }\"\n color=\"success-danger\"\n class=\"badge\">{{ credential?.is_visible ? 'Yes' : 'No' }}</span>\n </td>\n <td data-head=\"Usage Count\">{{ credential?.subscription_credentials_count ?? 0 }}</td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"[routers.adminCredentialsDetails + credential.id]\">\n <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n </li>\n <li pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\n class=\"me-2 me-sm-3\">\n <i\n (click)=\"onDelete(credential)\"\n (keydown.enter)=\"onDelete(credential)\"\n (keydown.space)=\"onDelete(credential)\"\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" }]
|
|
751
751
|
}], ctorParameters: () => [{ type: i1.AdminService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i3$2.ConfirmDialogService }] });
|
|
752
752
|
|
|
753
753
|
class CredentialsDetailsComponent extends AppBaseComponent {
|
|
@@ -1746,14 +1746,14 @@ class DomainConfigBuildComponent extends AppBaseComponent {
|
|
|
1746
1746
|
});
|
|
1747
1747
|
}
|
|
1748
1748
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DomainConfigBuildComponent, deps: [{ token: i0.Injector }, { token: i1.AdminService }, { token: i1$1.ProductService }, { token: i2.NgbModal }, { token: i0.ChangeDetectorRef }, { token: i9.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1749
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: DomainConfigBuildComponent, isStandalone: false, selector: "pw-domain-config-build", viewQueries: [{ propertyName: "partnerCropper", first: true, predicate: ["partnerCropper"], descendants: true }, { propertyName: "uploader", predicate: CustomUploaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<h3>Public Pages Configuration</h3>\n<div class=\"mb-4\">\n <p> The following parameters and settings will be applied to all public pages of this domain. </p>\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 && data?.host_name) {\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscription' | transloco\"\n name=\"master_subscription_id\" controlId=\"domain-build-master_subscription_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.MasterSubscription' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-master_subscription_id-label'\"\n [options]=\"masterSubscriptionsList\"\n formControlName=\"master_subscription_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['master_subscription_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.MasterSubscription' | transloco\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscriptionProduct' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.MasterSubscriptionProduct' | transloco\n \"\n name=\"master_subscription_product_id\" controlId=\"domain-build-master_subscription_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-master_subscription_product_id-label'\"\n [options]=\"masterSubscriptionProductList\"\n formControlName=\"master_subscription_product_id\"\n [ngClass]=\"{'is-invalid': submitted && f['master_subscription_product_id']?.errors}\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.MasterProduct' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\"\n >\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.BlogFeatureKey' | transloco\"\n name=\"blog_feature_key\" controlId=\"domain-build-blog_feature_key\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.BlogFeatureKey' | transloco\">\n <input type=\"text\"\n id=\"domain-build-blog_feature_key\" [placeholder]=\"'Admin.DomainConfig.Placeholder.BlogFeatureKey' | transloco\"\n class=\"form-control\"\n formControlName=\"blog_feature_key\"\n [ngClass]=\"{ 'is-invalid': submitted && f['blog_feature_key'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.BlogFeatureKey' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MainTos' | transloco\"\n name=\"main_tos_id\" controlId=\"domain-build-main_tos_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.MainTos' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-main_tos_id-label'\"\n [options]=\"subscriptionTosList\"\n formControlName=\"main_tos_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['main_tos_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.MainTos' | transloco\"\n optionValue=\"id\">\n <ng-template pTemplate=\"selectedItem\" let-item>\n <span [innerHTML]=\"item.title\"></span>\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n <span [innerHTML]=\"item.title\"></span>\n </ng-template>\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmSubscription' | transloco\"\n name=\"crm_subscription_id\" controlId=\"domain-build-crm_subscription_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSubscription' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_subscription_id-label'\"\n [options]=\"crmSubscriptionsList\"\n formControlName=\"crm_subscription_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_subscription_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSubscription' | transloco\"\n optionValue=\"id\">\n <ng-template pTemplate=\"selectedItem\" let-item>\n {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n </ng-template>\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmProduct' | transloco\"\n name=\"crm_product_id\" controlId=\"domain-build-crm_product_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmProduct' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_product_id-label'\"\n [options]=\"crmProductList\"\n formControlName=\"crm_product_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_product_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmProduct' | transloco\"\n optionValue=\"id\"\n >\n <ng-template pTemplate=\"selectedItem\" let-item>\n {{item?.subscription_id ? item?.name +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n {{item?.subscription_id ? item?.name +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n </ng-template>\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmSource' | transloco\"\n name=\"crm_source_id\" controlId=\"domain-build-crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSource' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_source_id-label'\"\n [options]=\"crmSourcesList\"\n formControlName=\"crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSource' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\"\n >\n </p-select>\n </pw-input-container>\n </div>\n <!-- crm subscription fields end-->\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.Active' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.Active' | transloco\" name=\"active\" controlId=\"domain-build-active\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch [attr.aria-labelledby]=\"'domain-build-active-label'\" formControlName=\"active\" name=\"active\"\n [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.IsProductDomain' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.IsProductDomain' | transloco\"\n name=\"is_product_domain\" controlId=\"domain-build-is_product_domain\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch [attr.aria-labelledby]=\"'domain-build-is_product_domain-label'\"\n formControlName=\"is_product_domain\"\n name=\"is_product_domain\"\n [ngClass]=\"{ 'is-invalid': submitted && f['is_product_domain'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CanRegisterOnMainPage' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CanRegisterOnMainPage' | transloco\"\n name=\"can_register_through_main_page\" controlId=\"domain-build-can_register_through_main_page\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch [attr.aria-labelledby]=\"'domain-build-can_register_through_main_page-label'\" formControlName=\"can_register_through_main_page\"\n name=\"can_register_through_main_page\" [ngClass]=\"{\n 'is-invalid': submitted && f['can_register_through_main_page'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.SocialLoginEnabled' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.SocialLoginEnable' | transloco\" name=\"social_login_enabled\" controlId=\"domain-build-social_login_enabled\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch [attr.aria-labelledby]=\"'domain-build-social_login_enabled-label'\" formControlName=\"social_login_enabled\"\n name=\"social_login_enabled\" [ngClass]=\"{ 'is-invalid': submitted && f['social_login_enabled'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.NotifyLogins' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.NotifyLogins' | transloco\" name=\"notify_logins\" controlId=\"domain-build-notify_logins\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch [attr.aria-labelledby]=\"'domain-build-notify_logins-label'\" formControlName=\"notify_logins\"\n name=\"notify_logins\" [ngClass]=\"{ 'is-invalid': submitted && f['notify_logins'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"my-5\">\n <h3>Pre-Built Pages Config (Resources, Landing Pages, etc)</h3>\n <p-accordion class=\"mt-5\">\n <p-accordion-panel value=\"0\">\n <p-accordion-header>Instructions - README FIRST</p-accordion-header>\n <p-accordion-content>\n <div class=\"mb-3\">\n <p>We've built and maintain a collection of high-converting landing pages designed to help you quickly launch polished\n UIs for onboarding users.</p>\n <p><strong>Newsletter Subscription Pages:</strong><br> After configuring your domain, you can access pages like\n <strong>/join/cs1, /join/cs2, /join/cs3, etc.</strong>, specifically designed for newsletter sign-ups. <br>\n Subscribers from these pages will be listed in the <strong>SmartCRM module</strong>.</p>\n <p><strong>Trial Product Sign-Up Pages:</strong><br> For users interested in trial products, utilize pages such as\n <strong>/join/trial1, /join/trial2, /join/trial3, etc.</strong>.<br> Users registering through these pages will\n appear in the <strong>Admin > Users section</strong>.</p>\n <p>Once you've selected the landing page you want to use <strong>(e.g., /join/trial3)</strong>, make sure to update\n the <strong>Internal Path</strong> in the <strong>Core tab</strong> accordingly\u2014i.e., set it to\n <strong>/join/trial3</strong>.</p>\n <p>If you need assistance integrating these pages into your workflow or have further questions, feel free to reach\n out.</p>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n <p-accordion-panel value=\"1\">\n <p-accordion-header>Subscribe to Product/Newsletter Config</p-accordion-header>\n <p-accordion-content>\n <div class=\"mb-3\">\n <p>Trial Pages will enable users to sign up to real products and are accessible at the path /join/trial1,\n /join/trial2, etc.</p>\n <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n /join/cs1, /join/cs2, etc.</p>\n </div>\n <!-- live page link -->\n @if (shardUrl) {\n <div class=\"text-end\">\n <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveTrial' | transloco\" tooltipPosition=\"top\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span> : <a [href]=\"shardUrl + '/join/trial1'\" target=\"_blank\">{{ shardUrl }}/join/trial1</a></span>\n </div>\n }\n <div class=\"row\">\n <div class=\"col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialProduct' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialProduct' | transloco\" name=\"trial_product_id\" controlId=\"domain-build-trial_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-autoComplete appendTo=\"body\" [attr.aria-labelledby]=\"'domain-build-trial_product_id-label'\" [suggestions]=\"productsList\" formControlName=\"trial_product_id\" dataKey=\"id\" optionLabel=\"name\"\n [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.SearchProduct' | transloco\" [inputStyle]=\"\n form.get('trial_product_id').touched &&\n form.get('trial_product_id').invalid\n ? { border: '1px solid #ff586b' }\n : {}\n \" [multiple]=\"false\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialCrmSourceId' | transloco\" name=\"trial_crm_source_id\" controlId=\"domain-build-trial_crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialCrmSourceId' | transloco\n \">\n <p-select inputId=\"domain-build-trial_crm_source_id\"\n [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-trial_crm_source_id-label'\" formControlName=\"trial_crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_crm_source_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSource' | transloco\" optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfSourceId' | transloco\" name=\"trial_pdf_source_id\" controlId=\"domain-build-trial_pdf_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialPdfSourceId' | transloco\n \">\n <p-select inputId=\"domain-build-trial_pdf_source_id\"\n [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-trial_pdf_source_id-label'\" formControlName=\"trial_pdf_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_pdf_source_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSource' | transloco\" optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\"></div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialVideoUrl' | transloco\" name=\"trial_video_url\" controlId=\"domain-build-trial_video_url\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialVideoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-trial_video_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"trial_video_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_video_url'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.TrialVideoUrl' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialBookDemoUrl' | transloco\" name=\"trial_book_demo_url\" controlId=\"domain-build-trial_book_demo_url\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialBookDemoUrl' | transloco\n \">\n <input type=\"text\" id=\"domain-build-trial_book_demo_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"trial_book_demo_url\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_book_demo_url'].errors\n }\"\n [attr.aria-label]=\"'Admin.DomainConfig.TrialBookDemoUrl' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialCtaIframe' | transloco\" name=\"trial_cta_iframe\" controlId=\"domain-build-trial_cta_iframe\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialCtaIframe' | transloco\n \">\n <textarea id=\"domain-build-trial_cta_iframe\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtaIframe' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"trial_cta_iframe\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_cta_iframe'].errors\n }\"\n [attr.aria-label]=\"'Admin.DomainConfig.TrialCtaIframe' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialJoinMessage' | transloco\" name=\"trial_join_message\" controlId=\"domain-build-trial_join_message\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialJoinMessage' | transloco\n \">\n <textarea id=\"domain-build-trial_join_message\" [placeholder]=\"'Admin.DomainConfig.Placeholder.JoinMessage' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"trial_join_message\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_join_message'].errors\n }\"\n [attr.aria-label]=\"'Admin.DomainConfig.TrialJoinMessage' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfDownloadText' | transloco\" name=\"trial_pdf_download_text\" controlId=\"domain-build-trial_pdf_download_text\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialPdfDownloadText' | transloco\n \">\n <textarea id=\"domain-build-trial_pdf_download_text\" [placeholder]=\"'Admin.DomainConfig.Placeholder.PdfDownloadText' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"trial_pdf_download_text\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_pdf_download_text'].errors\n }\"\n [attr.aria-label]=\"'Admin.DomainConfig.TrialPdfDownloadText' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row gy-4\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image-label\">{{ 'Admin.DomainConfig.TrialImage' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.TrialImage' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Trial Image'\"\n [controlName]=\"'trial_image'\" [previewData]=\"data['trial_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image2-label\">{{ 'Admin.DomainConfig.TrialImage2' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.TrialImage2' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image2'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image2'\" [previewData]=\"data['trial_image2']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_pdf_image-label\">{{ 'Admin.DomainConfig.TrialPdfImage' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.TrialPdfImage' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Pdf Image'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_pdf_image'\" [previewData]=\"data['trial_pdf_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image_bg-label\">{{ 'Admin.DomainConfig.TrialImageBg' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.TrialImageBg' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image_bg'\" [previewData]=\"data['trial_image_bg']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image_bg2-label\">{{ 'Admin.DomainConfig.TrialImageBg2' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.TrialImageBg2' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg2'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image_bg2'\" [previewData]=\"data['trial_image_bg2']\">\n </pw-custom-uploader>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"2\">\n <p-accordion-header>Header Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4\" formGroupName=\"header\">\n <h4 class=\"mb-4\">Header Section</h4>\n <!-- Headline -->\n <div class=\"col-12 col-md-12\">\n <pw-input-container label=\"Header Headline\" name=\"headline\" controlId=\"domain-build-header-headline\">\n <input type=\"text\" id=\"domain-build-header-headline\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HeaderHeadline' | transloco\" class=\"form-control\" formControlName=\"headline\"\n aria-label=\"Headline\" />\n </pw-input-container>\n </div>\n <!-- Video URL -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Header Video URL\" name=\"video_url\" controlId=\"domain-build-header-video_url\">\n <input type=\"text\" id=\"domain-build-header-video_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\"\n aria-label=\"Video Url\" />\n </pw-input-container>\n </div>\n <!-- Background Image URL -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Header Background Image URL\" name=\"bg_image_url\" controlId=\"domain-build-header-bg_image_url\">\n <input type=\"text\" id=\"domain-build-header-bg_image_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"bg_image_url\"\n aria-label=\"Bg Image Url\" />\n </pw-input-container>\n </div>\n <!-- Description -->\n <div class=\"col-12\">\n <pw-input-container label=\"Header Description\" name=\"description\" controlId=\"domain-build-header-description\">\n <textarea\n id=\"domain-build-header-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HeaderDescription' | transloco\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n\n aria-label=\"Description\" ></textarea>\n </pw-input-container>\n </div>\n <!-- Sub Headings -->\n <div formArrayName=\"sub_headings\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(headerSubHeadings, $event)\">\n @for (sub of f['header'].get('sub_headings')['controls']; track sub; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-md-10\">\n <pw-input-container label=\"Sub Header Description\" name=\"description\" [controlId]=\"'domain-build-header-sub_description-' + i\">\n <textarea\n [id]=\"'domain-build-header-sub_description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.SubHeadingDescription' | transloco\"\n class=\"form-control\"\n rows=\"3\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n\n aria-label=\"Description\" ></textarea>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeHeaderSubHeading(i)\"\n (keydown.enter)=\"removeHeaderSubHeading(i)\"\n (keydown.space)=\"removeHeaderSubHeading(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addHeaderSubHeading()\">\n + Add Sub Heading\n </button>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"3\">\n <p-accordion-header>Resources Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row row mt-4 mb-4\">\n <h4 class=\"mb-3\">Resources Section</h4>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.ResourceTagline' | transloco\" name=\"resources_tagline\" controlId=\"domain-build-resources_tagline\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceTagline' | transloco\">\n <input type=\"text\" id=\"domain-build-resources_tagline\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ResourceTagline' | transloco\" class=\"form-control\" formControlName=\"resources_tagline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['resources_tagline'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.ResourceTagline' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.ResourceDescription' | transloco\" name=\"resources_description\" controlId=\"domain-build-resources_description\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceDescription' | transloco\">\n <textarea id=\"domain-build-resources_description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ResourceDescription' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"resources_description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['resources_description'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.ResourceDescription' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row gy-4\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-resource_image-label\">{{ 'Admin.DomainConfig.ResourceImage' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.ResourceImage' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n [controlName]=\"'resources_image'\" [previewData]=\"data['resources_image']\">\n </pw-custom-uploader>\n </div>\n </div>\n</p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"4\">\n <p-accordion-header>Unique Selling Proposition Section (USP)</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4 mb-4\" formGroupName=\"usps\">\n <h4 class=\"mb-4\">Unique Selling Proposition Section (USP)</h4>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"USPs Title\" name=\"title\" controlId=\"domain-build-usps-title\">\n <input type=\"text\" id=\"domain-build-usps-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.UspsTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"USPs Video Url\" name=\"video_url\" controlId=\"domain-build-usps-video_url\">\n <input type=\"text\" id=\"domain-build-usps-video_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\"\n aria-label=\"Video Url\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container label=\"USPs Description\" name=\"description\" controlId=\"domain-build-usps-description\">\n <textarea id=\"domain-build-usps-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.UspsDescription' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n </div>\n <!-- USP Items -->\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(uspsItems, $event)\">\n @for (item of f['usps'].get('items')['controls']; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-sm-10\">\n <pw-input-container label=\"Item Description\" name=\"description\" [controlId]=\"'domain-build-usps-item-desc-' + i\">\n <textarea [id]=\"'domain-build-usps-item-desc-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ItemDescription' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n </div>\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeUspItem(i)\"\n (keydown.enter)=\"removeUspItem(i)\"\n (keydown.space)=\"removeUspItem(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addUspItem()\">\n + Add USP Item\n </button>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"5\">\n <p-accordion-header>Partners (Clients) Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4 mb-4\" formGroupName=\"partners\">\n <h4 class=\"mb-4\">Partners (Clients) Section</h4>\n <!-- Title -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Partner Title\" name=\"title\" controlId=\"domain-build-partners-title\">\n <input type=\"text\" id=\"domain-build-partners-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.PartnersTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n </div>\n <!-- Description -->\n <div class=\"col-12\">\n <pw-input-container label=\"Partners Description\" name=\"description\" controlId=\"domain-build-partners-description\">\n <textarea id=\"domain-build-partners-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.PartnersDescription' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n </div>\n <!-- Partner Items with Drag Support -->\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(partnersItems, $event)\">\n @for (item of partnersItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <!-- Name -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Name\" class=\"col-12\" name=\"name\" [controlId]=\"'domain-build-partner-name-' + i\">\n <input [id]=\"'domain-build-partner-name-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Name' | transloco\" class=\"form-control\" formControlName=\"name\" id=\"input_name_11\" name=\"input_name_11\"\n aria-label=\"Name\"/>\n </pw-input-container>\n </div>\n <!-- Blog URL + Drag Handle -->\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog Url\" name=\"blog_url\" [controlId]=\"'domain-build-partner-blog_url-' + i\">\n <input [id]=\"'domain-build-partner-blog_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"blog_url\" id=\"input_blog_url_12\" name=\"input_blog_url_12\"\n aria-label=\"Blog Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <!-- Video URL -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Video Url\" name=\"video_url\" [controlId]=\"'domain-build-partner-video_url-' + i\">\n <input [id]=\"'domain-build-partner-video_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\" id=\"input_video_url_13\" name=\"input_video_url_13\"\n aria-label=\"Video Url\"/>\n </pw-input-container>\n </div>\n <!-- Image URL -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Image Url\" name=\"image_url\" [controlId]=\"'domain-build-partner-image_url-' + i\">\n <input [id]=\"'domain-build-partner-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_14\" name=\"input_image_url_14\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n </div>\n <!-- Delete Icon -->\n <div class=\"col-md-12 text-end mt-2\">\n <i\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n (click)=\"removePartnerItem(i)\"\n (keydown.enter)=\"removePartnerItem(i)\"\n (keydown.space)=\"removePartnerItem(i)\"\n class=\"fa fa-trash delete-icon text-danger\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <!-- Add New Partner -->\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addPartnerItem()\">+ Add Partner</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"6\">\n <p-accordion-header>Testimonials Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"testimonials\">\n <h4 class=\"mb-4\">Testimonials Section</h4>\n <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"testimonials_title\" controlId=\"domain-build-testimonials-title\">\n <input type=\"text\" id=\"domain-build-testimonials-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.TestimonialsTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"testimonials_description\" controlId=\"domain-build-testimonials-description\">\n <textarea id=\"domain-build-testimonials-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.TestimonialsDescription' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n <!-- Items List -->\n <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(testimonialsItems, $event)\">\n @for (item of testimonialsItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-md-6\">\n <pw-input-container label=\"Name\" name=\"name\" [controlId]=\"'domain-build-testimonial-name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-name-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Name' | transloco\" class=\"form-control\" formControlName=\"name\" id=\"input_name_16\" name=\"input_name_16\"\n aria-label=\"Name\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog URL\" name=\"blog_url\" [controlId]=\"'domain-build-testimonial-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-blog_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"blog_url\" id=\"input_blog_url_17\" name=\"input_blog_url_17\"\n aria-label=\"Blog Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-testimonial-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_18\" name=\"input_image_url_18\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-testimonial-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-video_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\" id=\"input_video_url_19\" name=\"input_video_url_19\"\n aria-label=\"Video Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Testimonial\" class=\"col-md-10\" name=\"testimonial\" [controlId]=\"'domain-build-testimonial-text-' + i\">\n <textarea [id]=\"'domain-build-testimonial-text-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Testimonial' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"testimonial\"\n aria-label=\"Testimonial\"></textarea>\n </pw-input-container>\n <div class=\"col-md-2 d-flex align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n (click)=\"removeTestimonialItem(i)\"\n (keydown.enter)=\"removeTestimonialItem(i)\"\n (keydown.space)=\"removeTestimonialItem(i)\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addTestimonialItem()\">\n + Add Testimonial\n </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"7\">\n <p-accordion-header>Video Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"videos\">\n <h4 class=\"mb-3\">Video Section</h4>\n <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"videos_title\" controlId=\"domain-build-videos-title\">\n <input type=\"text\" id=\"domain-build-videos-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.VideosTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"videos_description\" controlId=\"domain-build-videos-description\">\n <textarea id=\"domain-build-videos-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.VideosDescription' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n <!-- Video Items -->\n <div\n formArrayName=\"items\"\n class=\"col-12 mt-3\"\n cdkDropList\n (cdkDropListDropped)=\"dropItems(videosItems, $event)\"\n >\n @for (item of videosItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-md-6\">\n <pw-input-container label=\"Title\" name=\"title\" [controlId]=\"'domain-build-video-item-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_21\" name=\"input_title_21\"\n aria-label=\"Title\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog URL\" name=\"blog_url\" [controlId]=\"'domain-build-video-item-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-blog_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"blog_url\" id=\"input_blog_url_22\" name=\"input_blog_url_22\"\n aria-label=\"Blog Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-video-item-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_23\" name=\"input_image_url_23\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-video-item-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-video_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\" id=\"input_video_url_24\" name=\"input_video_url_24\"\n aria-label=\"Video Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-md-10\" name=\"description\" [controlId]=\"'domain-build-video-item-description-' + i\">\n <textarea [id]=\"'domain-build-video-item-description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n <div class=\"col-md-2 d-flex align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeVideoItem(i)\"\n (keydown.enter)=\"removeVideoItem(i)\"\n (keydown.space)=\"removeVideoItem(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addVideoItem()\">\n + Add Video\n </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"8\">\n <p-accordion-header>Call to Actions Section (CTAs)</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4 mb-4\" formGroupName=\"ctas\">\n <h4 class=\"mb-4\">CTAs Section</h4>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Title\" name=\"title\" controlId=\"domain-build-ctas-title\">\n <input type=\"text\" id=\"domain-build-ctas-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtasTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Image URL\" name=\"image_url\" controlId=\"domain-build-ctas-image_url\">\n <input type=\"text\" id=\"domain-build-ctas-image_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\"\n aria-label=\"Image Url\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Button Text\" name=\"button_text\" controlId=\"domain-build-ctas-button_text\">\n <input type=\"text\" id=\"domain-build-ctas-button_text\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ButtonText' | transloco\" class=\"form-control\" formControlName=\"button_text\"\n aria-label=\"Button Text\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container label=\"Description\" name=\"description\" controlId=\"domain-build-ctas-description\">\n <input type=\"text\" id=\"domain-build-ctas-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtasDescription' | transloco\" class=\"form-control\" formControlName=\"description\"\n aria-label=\"Description\" />\n </pw-input-container>\n </div>\n <!-- CTA Items -->\n <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(ctasItems, $event)\">\n @for (item of ctasItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Image URL\" name=\"image_url\" [controlId]=\"'domain-build-cta-item-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_29\" name=\"input_image_url_29\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Cta URL\" name=\"cta_url\" [controlId]=\"'domain-build-cta-item-cta_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-cta_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"cta_url\" id=\"input_cta_url_30\" name=\"input_cta_url_30\"\n aria-label=\"Cta Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Video URL\" name=\"video_url\" [controlId]=\"'domain-build-cta-item-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-video_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\" id=\"input_video_url_31\" name=\"input_video_url_31\"\n aria-label=\"Video Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"CTA Title\" name=\"title\" [controlId]=\"'domain-build-cta-item-title-' + i\">\n <input [id]=\"'domain-build-cta-item-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtaTitle' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_32\" name=\"input_title_32\"\n aria-label=\"Title\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"CTA Description\" name=\"description\" [controlId]=\"'domain-build-cta-item-description-' + i\">\n <input [id]=\"'domain-build-cta-item-description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtaDescription' | transloco\" class=\"form-control\" formControlName=\"description\" id=\"input_description_33\" name=\"input_description_33\"\n aria-label=\"Description\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-5\">\n <pw-input-container label=\"Button Text\" name=\"button_text\" [controlId]=\"'domain-build-cta-item-button_text-' + i\">\n <input [id]=\"'domain-build-cta-item-button_text-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ButtonText' | transloco\" class=\"form-control\" formControlName=\"button_text\" id=\"input_button_text_34\" name=\"input_button_text_34\"\n aria-label=\"Button Text\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex align-items-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (click)=\"removeCtasItem(i)\"\n (keydown.enter)=\"removeCtasItem(i)\"\n (keydown.space)=\"removeCtasItem(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addCtasItem()\">+ Add CTA Item</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"9\">\n <p-accordion-header>Integrations Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"integrations\">\n <h4 class=\"mb-3\">Integrations Section</h4>\n <pw-input-container label=\"Title\" class=\"col-12\" name=\"title\" controlId=\"domain-build-integrations-title\">\n <input type=\"text\" id=\"domain-build-integrations-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.IntegrationsSectionTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"description\" controlId=\"domain-build-integrations-description\">\n <textarea id=\"domain-build-integrations-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.IntegrationsSectionDescription' | transloco\" class=\"form-control\" formControlName=\"description\" rows=\"3\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(integrationsItems, $event)\">\n @for (item of integrationsItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 rounded bg-light\"\n cdkDrag\n >\n <pw-input-container label=\"Title\" class=\"col-md-6\" name=\"title\" [controlId]=\"'domain-build-integration-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_36\" name=\"input_title_36\"\n aria-label=\"Title\"/>\n </pw-input-container>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Description\" name=\"description\" [controlId]=\"'domain-build-integration-description-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\" class=\"form-control\" formControlName=\"description\" id=\"input_description_37\" name=\"input_description_37\"\n aria-label=\"Description\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"Blog URL\" class=\"col-md-6\" name=\"blog_url\" [controlId]=\"'domain-build-integration-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-blog_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"blog_url\" id=\"input_blog_url_38\" name=\"input_blog_url_38\"\n aria-label=\"Blog Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-integration-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_39\" name=\"input_image_url_39\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-integration-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-video_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\" id=\"input_video_url_40\" name=\"input_video_url_40\"\n aria-label=\"Video Url\"/>\n </pw-input-container>\n <div class=\"col-md-6 d-flex align-items-end justify-content-end\">\n <i\n class=\"fa fa-trash delete-icon align-self-center\"\n (click)=\"removeIntegrationItem(i)\"\n (keydown.enter)=\"removeIntegrationItem(i)\"\n (keydown.space)=\"removeIntegrationItem(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addIntegrationItem()\">+ Add Integration</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"10\">\n <p-accordion-header>Contact Us Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"contact_us\">\n <h4 class=\"mb-3\">Contact Us Section</h4>\n <pw-input-container label=\"Url\" class=\"col-md-6\" name=\"url\" controlId=\"domain-build-contact_us-url\">\n <input type=\"text\" id=\"domain-build-contact_us-url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"url\"\n aria-label=\"Url\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"contact_us_description\" controlId=\"domain-build-contact_us-description\">\n <textarea id=\"domain-build-contact_us-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n <div formArrayName=\"questions\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsQuestions, $event)\">\n @for (questionGroup of contactUsQuestions.controls; track questionGroup; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3\"\n cdkDrag\n >\n <pw-input-container label=\"Question\" class=\"col-md-10\" name=\"question\" [controlId]=\"'domain-build-contact_us-question-' + i\">\n <input type=\"text\" [id]=\"'domain-build-contact_us-question-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Question' | transloco\" class=\"form-control\" formControlName=\"question\" id=\"input_question_42\" name=\"input_question_42\"\n aria-label=\"Question\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeContactUsQuestion(i)\"\n (keydown.enter)=\"removeContactUsQuestion(i)\"\n (keydown.space)=\"removeContactUsQuestion(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-12 mt-3\" formArrayName=\"options\" cdkDropList [cdkDropListData]=\"getQuestionOptions(i).controls\" (cdkDropListDropped)=\"dropContactUsOptions(i, $event)\">\n @for (option of getQuestionOptions(i).controls; track option; let j = $index) {\n <div\n class=\"row align-items-center mb-2 border p-3\"\n [formGroupName]=\"j\"\n cdkDrag\n >\n <pw-input-container label=\"Option\" class=\"col-md-10\" name=\"option\" [controlId]=\"'domain-build-contact_us-option-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-contact_us-option-' + i + '-' + j\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Option' | transloco\" class=\"form-control\" formControlName=\"option\" id=\"input_option_43\" name=\"input_option_43\"\n aria-label=\"Option\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeContactUsOption(i, j)\"\n (keydown.enter)=\"removeContactUsOption(i, j)\"\n (keydown.space)=\"removeContactUsOption(i, j)\"\n pTooltip=\"Remove Option\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder option\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start\">\n <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addContactUsOption(i)\">\n + Add Option\n </button>\n </div>\n </div>\n </div>\n }\n <div class=\"text-start mt-3\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addContactUsQuestion()\">\n + Add Question\n </button>\n </div>\n </div>\n <div formArrayName=\"hubspot\" class=\"col-12 mt-4\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsHubspotItems, $event)\">\n <h5 class=\"mb-4\">Hubspot Embeds</h5>\n @for (hub of contactUsHubspotItems.controls; track hub; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-2\"\n cdkDrag\n >\n <pw-input-container label=\"ID\" class=\"col-md-5\" name=\"id\" [controlId]=\"'domain-build-hubspot-id-' + i\">\n <input type=\"text\" [id]=\"'domain-build-hubspot-id-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HubspotId' | transloco\" class=\"form-control\" formControlName=\"id\" id=\"input_id_44\" name=\"input_id_44\"\n aria-label=\"Id\"/>\n </pw-input-container>\n <pw-input-container label=\"Position\" class=\"col-md-6\" name=\"position\" [controlId]=\"'domain-build-hubspot-position-' + i\">\n <input type=\"text\" [id]=\"'domain-build-hubspot-position-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HubspotPosition' | transloco\" class=\"form-control\" formControlName=\"position\" id=\"input_position_45\" name=\"input_position_45\"\n aria-label=\"Position\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"Div\" class=\"col-10\" name=\"div\" [controlId]=\"'domain-build-hubspot-div-' + i\">\n <textarea\n [id]=\"'domain-build-hubspot-div-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HubspotDiv' | transloco\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"div\"\n [ngClass]=\"{ 'is-invalid': submitted && f['div']?.errors }\"\n\n aria-label=\"Div\" ></textarea>\n </pw-input-container>\n <div class=\"col-md-2 d-flex align-items-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (click)=\"removeHubspotItem(i)\"\n (keydown.enter)=\"removeHubspotItem(i)\"\n (keydown.space)=\"removeHubspotItem(i)\"\n pTooltip=\"Remove Hubspot Embed\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\">\n </i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addHubspotItem()\">\n + Add Hubspot Embed\n </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"11\">\n <p-accordion-header>Book a Demo Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4\">\n <div class=\"col-12\">\n <h4 class=\"mb-3\">{{ 'Admin.DomainConfig.BookDemoLinks' | transloco }}</h4>\n <div formGroupName=\"book_demo\">\n <pw-input-container label=\"Title\" name=\"title\" controlId=\"domain-build-book_demo-title\">\n <input type=\"text\" id=\"domain-build-book_demo-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" formControlName=\"title\" class=\"form-control\"\n aria-label=\"Title\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" name=\"description\" controlId=\"domain-build-book_demo-description\">\n <input type=\"text\" id=\"domain-build-book_demo-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\" formControlName=\"description\" class=\"form-control\"\n aria-label=\"Description\" />\n </pw-input-container>\n <div formArrayName=\"items\" cdkDropList (cdkDropListDropped)=\"dropBookDemoLinks($event)\">\n @for (link of f['book_demo'].get('items')['controls']; track link; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3 border p-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-sm-5\">\n <pw-input-container label=\"Link Title\" name=\"title\" [controlId]=\"'domain-build-book_demo-link-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-book_demo-link-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.LinkTitle' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_48\" name=\"input_title_48\"\n aria-label=\"Title\"/>\n </pw-input-container>\n </div>\n <div class=\"col-sm-5\">\n <pw-input-container label=\"Link URL\" name=\"url\" [controlId]=\"'domain-build-book_demo-link-url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-book_demo-link-url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"url\" id=\"input_url_49\" name=\"input_url_49\"\n aria-label=\"Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n (click)=\"removeBookDemoLink(i)\"\n (keydown.enter)=\"removeBookDemoLink(i)\"\n (keydown.space)=\"removeBookDemoLink(i)\"\n class=\"fa fa-trash delete-icon text-danger\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addBookDemoLink()\">\n + Add Book Demo Link\n </button>\n </div>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"12\">\n <p-accordion-header>Navbar Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"navbar\">\n <h4 class=\"mb-3\">Navbar Section</h4>\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(navbarItems, $event)\">\n @for (item of navbarItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-center\">\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-navbar-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-navbar-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_50\" name=\"input_title_50\"\n aria-label=\"Title\"/>\n </pw-input-container>\n <pw-input-container label=\"Path\" class=\"col-md-5\" name=\"path\" [controlId]=\"'domain-build-navbar-path-' + i\">\n <input type=\"text\" [id]=\"'domain-build-navbar-path-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Path' | transloco\" class=\"form-control\" formControlName=\"path\" id=\"input_path_51\" name=\"input_path_51\"\n aria-label=\"Path\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeNavbarItem(i)\"\n (keydown.enter)=\"removeNavbarItem(i)\"\n (keydown.space)=\"removeNavbarItem(i)\"\n pTooltip=\"Remove Navbar Item\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n <div\n class=\"col-12 mt-3\"\n formArrayName=\"subtitles\"\n cdkDropList\n [cdkDropListData]=\"getNavbarSubtitles(i).controls\"\n (cdkDropListDropped)=\"dropNavbarSubtitles(i, $event)\"\n >\n @for (sub of getNavbarSubtitles(i).controls; track sub; let j = $index) {\n <div\n [formGroupName]=\"j\"\n class=\"row border p-3 mb-2 align-items-center\"\n cdkDrag\n >\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Title\" name=\"title\" [controlId]=\"'domain-build-navbar-subtitle-title-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-navbar-subtitle-title-' + i + '-' + j\" [placeholder]=\"'Admin.DomainConfig.Placeholder.SubtitleTitle' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_52\" name=\"input_title_52\"\n aria-label=\"Title\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Path\" name=\"path\" [controlId]=\"'domain-build-navbar-subtitle-path-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-navbar-subtitle-path-' + i + '-' + j\" [placeholder]=\"'Admin.DomainConfig.Placeholder.SubtitlePath' | transloco\" class=\"form-control\" formControlName=\"path\" id=\"input_path_53\" name=\"input_path_53\"\n aria-label=\"Path\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeSubtitle(i, j)\"\n (keydown.enter)=\"removeSubtitle(i, j)\"\n (keydown.space)=\"removeSubtitle(i, j)\"\n pTooltip=\"Remove Subtitle\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder subtitle\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <button type=\"button\" class=\"btn btn-sm btn-primary mt-2\" (click)=\"addSubtitle(i)\">\n + Add Subtitle\n </button>\n </div>\n </div>\n }\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addNavbarItem()\">\n + Add Navbar Item\n </button>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"13\">\n <p-accordion-header>Footer Links Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"footer_links\">\n <h4 class=\"mb-3\">Footer Links Section</h4>\n <div\n formArrayName=\"items\"\n class=\"col-12\"\n cdkDropList\n (cdkDropListDropped)=\"dropItems(footerLinksItems, $event)\"\n >\n @for (item of footerLinksItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-center\">\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-footer-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-footer-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_54\" name=\"input_title_54\"\n aria-label=\"Title\"/>\n </pw-input-container>\n <pw-input-container label=\"Path\" class=\"col-md-5\" name=\"path\" [controlId]=\"'domain-build-footer-path-' + i\">\n <input type=\"text\" [id]=\"'domain-build-footer-path-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Path' | transloco\" class=\"form-control\" formControlName=\"path\" id=\"input_path_55\" name=\"input_path_55\"\n aria-label=\"Path\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeFooterLinkItem(i)\"\n (keydown.enter)=\"removeFooterLinkItem(i)\"\n (keydown.space)=\"removeFooterLinkItem(i)\"\n pTooltip=\"Remove Footer Item\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n <div\n class=\"col-12 mt-3\"\n formArrayName=\"subtitles\"\n cdkDropList\n [cdkDropListData]=\"getFooterSubtitles(i).controls\"\n (cdkDropListDropped)=\"dropFooterSubtitles(i, $event)\"\n >\n @for (sub of getFooterSubtitles(i).controls; track sub; let j = $index) {\n <div\n [formGroupName]=\"j\"\n class=\"row border p-3 mb-2 align-items-center\"\n cdkDrag\n >\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Title\" name=\"title\" [controlId]=\"'domain-build-footer-subtitle-title-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-footer-subtitle-title-' + i + '-' + j\" [placeholder]=\"'Admin.DomainConfig.Placeholder.SubtitleTitle' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_56\" name=\"input_title_56\"\n aria-label=\"Title\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Path\" name=\"path\" [controlId]=\"'domain-build-footer-subtitle-path-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-footer-subtitle-path-' + i + '-' + j\" [placeholder]=\"'Admin.DomainConfig.Placeholder.SubtitlePath' | transloco\" class=\"form-control\" formControlName=\"path\" id=\"input_path_57\" name=\"input_path_57\"\n aria-label=\"Path\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeFooterSubtitle(i, j)\"\n (keydown.enter)=\"removeFooterSubtitle(i, j)\"\n (keydown.space)=\"removeFooterSubtitle(i, j)\"\n pTooltip=\"Remove Subtitle\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder subtitle\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <button\n type=\"button\"\n class=\"btn btn-sm btn-primary mt-2\"\n (click)=\"addFooterSubtitle(i)\"\n >\n + Add Subtitle\n </button>\n </div>\n </div>\n }\n <button\n type=\"button\"\n class=\"btn btn-primary mt-2 mb-2\"\n (click)=\"addFooterLinkItem()\"\n >\n + Add Footer Link\n </button>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"14\">\n <p-accordion-header>Guides Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"guides\">\n <h4 class=\"mb-3\">Guides Section</h4>\n <div formArrayName=\"items\" class=\"col-12\">\n <div cdkDropList (cdkDropListDropped)=\"dropItems(guidesItems, $event)\">\n @for (item of guidesItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"border p-3 mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-start\">\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-guide-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_58\" name=\"input_title_58\"\n aria-label=\"Title\"/>\n </pw-input-container>\n <pw-input-container label=\"Button Text\" class=\"col-md-6\" name=\"button_text\" [controlId]=\"'domain-build-guide-button_text-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-button_text-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ButtonText' | transloco\" class=\"form-control\" formControlName=\"button_text\" id=\"input_button_text_59\" name=\"input_button_text_59\"\n aria-label=\"Button Text\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n <div class=\"row mt-2\">\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-guide-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_60\" name=\"input_image_url_60\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Guide URL\" class=\"col-md-6\" name=\"guide_url\" [controlId]=\"'domain-build-guide-guide_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-guide_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"guide_url\" id=\"input_guide_url_61\" name=\"input_guide_url_61\"\n aria-label=\"Guide Url\"/>\n </pw-input-container>\n </div>\n <div class=\"row mt-2\">\n <pw-input-container label=\"Description\" class=\"col-md-11\" name=\"description\" [controlId]=\"'domain-build-guide-description-' + i\">\n <textarea\n [id]=\"'domain-build-guide-description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n\n aria-label=\"Description\" ></textarea>\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeGuideItem(i)\"\n (keydown.enter)=\"removeGuideItem(i)\"\n (keydown.space)=\"removeGuideItem(i)\"\n pTooltip=\"Remove Guide\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addGuideItem()\">\n + Add Guide\n </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"15\">\n <p-accordion-header>AB Tests Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\">\n <h4 class=\"mb-3\">AB Tests</h4>\n <div formArrayName=\"ab_tests\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(abTests, $event)\">\n @for (abTest of abTests.controls; track abTest; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3 border p-3\"\n cdkDrag\n >\n <pw-input-container label=\"Description\" class=\"col-md-5\" name=\"description\" [controlId]=\"'domain-build-ab_test-description-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\" class=\"form-control\" formControlName=\"description\" id=\"input_description_62\" name=\"input_description_62\"\n aria-label=\"Description\"/>\n </pw-input-container>\n <pw-input-container label=\"Experiment Name\" class=\"col-md-6\" name=\"experiment_name\" [controlId]=\"'domain-build-ab_test-experiment_name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-experiment_name-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ExperimentName' | transloco\" class=\"form-control\" formControlName=\"experiment_name\" id=\"input_experiment_name_63\" name=\"input_experiment_name_63\"\n aria-label=\"Experiment Name\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"DB Shard\" class=\"col-md-6\" name=\"db_shard\" [controlId]=\"'domain-build-ab_test-db_shard-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-db_shard-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.DbShard' | transloco\" class=\"form-control\" formControlName=\"db_shard\" id=\"input_db_shard_64\" name=\"input_db_shard_64\"\n aria-label=\"Db Shard\"/>\n </pw-input-container>\n <pw-input-container label=\"Microservice Name\" class=\"col-md-6\" name=\"microservice_name\" [controlId]=\"'domain-build-ab_test-microservice_name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-microservice_name-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.MicroserviceName' | transloco\" class=\"form-control\" formControlName=\"microservice_name\" id=\"input_microservice_name_65\" name=\"input_microservice_name_65\"\n aria-label=\"Microservice Name\"/>\n </pw-input-container>\n <div class=\"col-md-12 text-end mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeAbTest(i)\"\n (keydown.enter)=\"removeAbTest(i)\"\n (keydown.space)=\"removeAbTest(i)\"\n pTooltip=\"Remove AB Test\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addAbTest()\">+ Add AB Test</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"16\">\n <p-accordion-header>Coming soon pages - Subscribe to newsletter (TO DISCONTINUE)</p-accordion-header>\n <p-accordion-content>\n <div class=\"mb-3\">\n <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n /join/cs1, /join/cs2, etc.</p>\n </div>\n @if (shardUrl) {\n <div class=\"text-end\">\n <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveCs' | transloco\" tooltipPosition=\"top\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span> : <a [href]=\"shardUrl + '/join/cs1'\" target=\"_blank\">{{ shardUrl }}/join/cs1</a></span>\n </div>\n }\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsProduct' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsProduct' | transloco\" name=\"cs_product_id\" controlId=\"domain-build-cs_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-autoComplete appendTo=\"body\" [attr.aria-labelledby]=\"'domain-build-cs_product_id-label'\" [suggestions]=\"productsList\" formControlName=\"cs_product_id\" dataKey=\"id\" optionLabel=\"name\"\n [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.SearchProduct' | transloco\" [inputStyle]=\"\n form.get('cs_product_id').touched &&\n form.get('cs_product_id').invalid\n ? { border: '1px solid #ff586b' }\n : {}\n \" [multiple]=\"false\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsCrmSourceId' | transloco\" name=\"cs_crm_source_id\" controlId=\"domain-build-cs_crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCrmSourceId' | transloco\">\n <p-select inputId=\"domain-build-cs_crm_source_id\"\n [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-cs_crm_source_id-label'\" formControlName=\"cs_crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_crm_source_id']?.errors }\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSource' | transloco\"\n optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfSourceId' | transloco\" name=\"cs_pdf_source_id\" controlId=\"domain-build-cs_pdf_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsPdfSourceId' | transloco\">\n <p-select inputId=\"domain-build-cs_pdf_source_id\"\n [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-cs_pdf_source_id-label'\" formControlName=\"cs_pdf_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_pdf_source_id']?.errors }\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSource' | transloco\"\n optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\"></div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsVideoUrl' | transloco\" name=\"cs_video_url\" controlId=\"domain-build-cs_video_url\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsVideoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-cs_video_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"cs_video_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_video_url'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.CsVideoUrl' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsBookDemoUrl' | transloco\" name=\"cs_book_demo_url\" controlId=\"domain-build-cs_book_demo_url\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsBookDemoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-cs_book_demo_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"cs_book_demo_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_book_demo_url'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.CsBookDemoUrl' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsCtaIframe' | transloco\" name=\"cs_cta_iframe\" controlId=\"domain-build-cs_cta_iframe\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCtaIframe' | transloco\">\n <textarea id=\"domain-build-cs_cta_iframe\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtaIframe' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"cs_cta_iframe\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_cta_iframe'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.CsCtaIframe' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsJoinMessage' | transloco\" name=\"cs_join_message\" controlId=\"domain-build-cs_join_message\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsJoinMessage' | transloco\">\n <textarea id=\"domain-build-cs_join_message\" [placeholder]=\"'Admin.DomainConfig.Placeholder.JoinMessage' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"cs_join_message\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_join_message'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.CsJoinMessage' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfDownloadText' | transloco\" name=\"cs_pdf_download_text\" controlId=\"domain-build-cs_pdf_download_text\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.CsPdfDownloadText' | transloco\n \">\n <textarea id=\"domain-build-cs_pdf_download_text\" [placeholder]=\"'Admin.DomainConfig.Placeholder.PdfDownloadText' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"cs_pdf_download_text\" [ngClass]=\"{\n 'is-invalid': submitted && f['cs_pdf_download_text'].errors\n }\"\n [attr.aria-label]=\"'Admin.DomainConfig.CsPdfDownloadText' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row gy-4\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image-label\">{{ 'Admin.DomainConfig.CsImage' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.CsImage' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n [controlName]=\"'cs_image'\" [previewData]=\"data['cs_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image2-label\">{{ 'Admin.DomainConfig.CsImage2' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.CsImage2' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image2'\"\n [controlName]=\"'cs_image2'\" [previewData]=\"data['cs_image2']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_pdf_image-label\">{{ 'Admin.DomainConfig.CsPdfImage' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.CsPdfImage' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image'\"\n [controlName]=\"'cs_pdf_image'\" [previewData]=\"data['cs_pdf_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image_bg-label\">{{ 'Admin.DomainConfig.CsImageBg' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.CsImageBg' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg'\"\n [controlName]=\"'cs_image_bg'\" [previewData]=\"data['cs_image_bg']\">\n </pw-custom-uploader>\n</div>\n<div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image_bg2-label\">{{ 'Admin.DomainConfig.CsImageBg2' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.CsImageBg2' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n</span>\n<pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg2'\"\n [controlName]=\"'cs_image_bg2'\" [previewData]=\"data['cs_image_bg2']\">\n</pw-custom-uploader>\n</div>\n</div>\n</p-accordion-content>\n</p-accordion-panel>\n</p-accordion>\n</div>\n<div class=\"col-12 text-end mt-3\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n</div>\n</form>\n}\n@if (!data?.host_name && !isLoading) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"> </pw-no-data>\n </div>\n}\n\n\n<ng-template #partnerCropper let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Partner Image</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n <div class=\"modal-body\">\n <small>You can upload JPG, PNG, or GIF files. Avoid images with celebrities, nudity, or artwork.</small>\n <pw-image-cropper\n aspectRatio=\"auto\"\n (imageSelectionEvent)=\"onPartnerImageSelected($event)\"\n (closeEvent)=\"onClosePartnerModal()\"\n ></pw-image-cropper>\n </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.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$2.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "motionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i7$2.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i7$2.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i7$2.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { 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: i6$1.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i9.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "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$1.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: i13$1.CustomUploaderComponent, selector: "pw-custom-uploader", inputs: ["controlName", "previewData", "aspectRatio", "title"], outputs: ["saveEvent"] }, { kind: "component", type: i3$2.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i14.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: "directive", type: i9.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i9.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
1749
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: DomainConfigBuildComponent, isStandalone: false, selector: "pw-domain-config-build", viewQueries: [{ propertyName: "partnerCropper", first: true, predicate: ["partnerCropper"], descendants: true }, { propertyName: "uploader", predicate: CustomUploaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<h3>Public Pages Configuration</h3>\n<div class=\"mb-4\">\n <p> The following parameters and settings will be applied to all public pages of this domain. </p>\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 && data?.host_name) {\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscription' | transloco\"\n name=\"master_subscription_id\" controlId=\"domain-build-master_subscription_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.MasterSubscription' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-master_subscription_id-label'\"\n [options]=\"masterSubscriptionsList\"\n formControlName=\"master_subscription_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['master_subscription_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.MasterSubscription' | transloco\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscriptionProduct' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.MasterSubscriptionProduct' | transloco\n \"\n name=\"master_subscription_product_id\" controlId=\"domain-build-master_subscription_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-master_subscription_product_id-label'\"\n [options]=\"masterSubscriptionProductList\"\n formControlName=\"master_subscription_product_id\"\n [ngClass]=\"{'is-invalid': submitted && f['master_subscription_product_id']?.errors}\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.MasterProduct' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\"\n >\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.BlogFeatureKey' | transloco\"\n name=\"blog_feature_key\" controlId=\"domain-build-blog_feature_key\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.BlogFeatureKey' | transloco\">\n <input type=\"text\"\n id=\"domain-build-blog_feature_key\" [placeholder]=\"'Admin.DomainConfig.Placeholder.BlogFeatureKey' | transloco\"\n class=\"form-control\"\n formControlName=\"blog_feature_key\"\n [ngClass]=\"{ 'is-invalid': submitted && f['blog_feature_key'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.BlogFeatureKey' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MainTos' | transloco\"\n name=\"main_tos_id\" controlId=\"domain-build-main_tos_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.MainTos' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-main_tos_id-label'\"\n [options]=\"subscriptionTosList\"\n formControlName=\"main_tos_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['main_tos_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.MainTos' | transloco\"\n optionValue=\"id\">\n <ng-template pTemplate=\"selectedItem\" let-item>\n <span [innerHTML]=\"item.title\"></span>\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n <span [innerHTML]=\"item.title\"></span>\n </ng-template>\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmSubscription' | transloco\"\n name=\"crm_subscription_id\" controlId=\"domain-build-crm_subscription_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSubscription' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_subscription_id-label'\"\n [options]=\"crmSubscriptionsList\"\n formControlName=\"crm_subscription_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_subscription_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSubscription' | transloco\"\n optionValue=\"id\">\n <ng-template pTemplate=\"selectedItem\" let-item>\n {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n </ng-template>\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmProduct' | transloco\"\n name=\"crm_product_id\" controlId=\"domain-build-crm_product_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmProduct' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_product_id-label'\"\n [options]=\"crmProductList\"\n formControlName=\"crm_product_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_product_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmProduct' | transloco\"\n optionValue=\"id\"\n >\n <ng-template pTemplate=\"selectedItem\" let-item>\n {{item?.subscription_id ? item?.name +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n {{item?.subscription_id ? item?.name +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n </ng-template>\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmSource' | transloco\"\n name=\"crm_source_id\" controlId=\"domain-build-crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSource' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_source_id-label'\"\n [options]=\"crmSourcesList\"\n formControlName=\"crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSource' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\"\n >\n </p-select>\n </pw-input-container>\n </div>\n <!-- crm subscription fields end-->\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.Active' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.Active' | transloco\" name=\"active\" controlId=\"domain-build-active\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch [attr.aria-labelledby]=\"'domain-build-active-label'\" formControlName=\"active\" name=\"active\"\n [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.IsProductDomain' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.IsProductDomain' | transloco\"\n name=\"is_product_domain\" controlId=\"domain-build-is_product_domain\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch [attr.aria-labelledby]=\"'domain-build-is_product_domain-label'\"\n formControlName=\"is_product_domain\"\n name=\"is_product_domain\"\n [ngClass]=\"{ 'is-invalid': submitted && f['is_product_domain'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CanRegisterOnMainPage' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CanRegisterOnMainPage' | transloco\"\n name=\"can_register_through_main_page\" controlId=\"domain-build-can_register_through_main_page\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch [attr.aria-labelledby]=\"'domain-build-can_register_through_main_page-label'\" formControlName=\"can_register_through_main_page\"\n name=\"can_register_through_main_page\" [ngClass]=\"{\n 'is-invalid': submitted && f['can_register_through_main_page'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.SocialLoginEnabled' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.SocialLoginEnable' | transloco\" name=\"social_login_enabled\" controlId=\"domain-build-social_login_enabled\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch [attr.aria-labelledby]=\"'domain-build-social_login_enabled-label'\" formControlName=\"social_login_enabled\"\n name=\"social_login_enabled\" [ngClass]=\"{ 'is-invalid': submitted && f['social_login_enabled'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.NotifyLogins' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.NotifyLogins' | transloco\" name=\"notify_logins\" controlId=\"domain-build-notify_logins\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch [attr.aria-labelledby]=\"'domain-build-notify_logins-label'\" formControlName=\"notify_logins\"\n name=\"notify_logins\" [ngClass]=\"{ 'is-invalid': submitted && f['notify_logins'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"my-5\">\n <h3>Pre-Built Pages Config (Resources, Landing Pages, etc)</h3>\n <p-accordion class=\"mt-5\">\n <p-accordion-panel value=\"0\">\n <p-accordion-header>Instructions - README FIRST</p-accordion-header>\n <p-accordion-content>\n <div class=\"mb-3\">\n <p>We've built and maintain a collection of high-converting landing pages designed to help you quickly launch polished\n UIs for onboarding users.</p>\n <p><strong>Newsletter Subscription Pages:</strong><br> After configuring your domain, you can access pages like\n <strong>/join/cs1, /join/cs2, /join/cs3, etc.</strong>, specifically designed for newsletter sign-ups. <br>\n Subscribers from these pages will be listed in the <strong>SmartCRM module</strong>.</p>\n <p><strong>Trial Product Sign-Up Pages:</strong><br> For users interested in trial products, utilize pages such as\n <strong>/join/trial1, /join/trial2, /join/trial3, etc.</strong>.<br> Users registering through these pages will\n appear in the <strong>Admin > Users section</strong>.</p>\n <p>Once you've selected the landing page you want to use <strong>(e.g., /join/trial3)</strong>, make sure to update\n the <strong>Internal Path</strong> in the <strong>Core tab</strong> accordingly\u2014i.e., set it to\n <strong>/join/trial3</strong>.</p>\n <p>If you need assistance integrating these pages into your workflow or have further questions, feel free to reach\n out.</p>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n <p-accordion-panel value=\"1\">\n <p-accordion-header>Subscribe to Product/Newsletter Config</p-accordion-header>\n <p-accordion-content>\n <div class=\"mb-3\">\n <p>Trial Pages will enable users to sign up to real products and are accessible at the path /join/trial1,\n /join/trial2, etc.</p>\n <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n /join/cs1, /join/cs2, etc.</p>\n </div>\n <!-- live page link -->\n @if (shardUrl) {\n <div class=\"text-end\">\n <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveTrial' | transloco\" tooltipPosition=\"top\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span> : <a [href]=\"shardUrl + '/join/trial1'\" target=\"_blank\">{{ shardUrl }}/join/trial1</a></span>\n </div>\n }\n <div class=\"row\">\n <div class=\"col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialProduct' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialProduct' | transloco\" name=\"trial_product_id\" controlId=\"domain-build-trial_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-autoComplete appendTo=\"body\" [attr.aria-labelledby]=\"'domain-build-trial_product_id-label'\" [suggestions]=\"productsList\" formControlName=\"trial_product_id\" dataKey=\"id\" optionLabel=\"name\"\n [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.SearchProduct' | transloco\" [inputStyle]=\"\n form.get('trial_product_id').touched &&\n form.get('trial_product_id').invalid\n ? { border: '1px solid #ff586b' }\n : {}\n \" [multiple]=\"false\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialCrmSourceId' | transloco\" name=\"trial_crm_source_id\" controlId=\"domain-build-trial_crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialCrmSourceId' | transloco\n \">\n <p-select inputId=\"domain-build-trial_crm_source_id\"\n [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-trial_crm_source_id-label'\" formControlName=\"trial_crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_crm_source_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSource' | transloco\" optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfSourceId' | transloco\" name=\"trial_pdf_source_id\" controlId=\"domain-build-trial_pdf_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialPdfSourceId' | transloco\n \">\n <p-select inputId=\"domain-build-trial_pdf_source_id\"\n [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-trial_pdf_source_id-label'\" formControlName=\"trial_pdf_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_pdf_source_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSource' | transloco\" optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\"></div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialVideoUrl' | transloco\" name=\"trial_video_url\" controlId=\"domain-build-trial_video_url\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialVideoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-trial_video_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"trial_video_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_video_url'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.TrialVideoUrl' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialBookDemoUrl' | transloco\" name=\"trial_book_demo_url\" controlId=\"domain-build-trial_book_demo_url\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialBookDemoUrl' | transloco\n \">\n <input type=\"text\" id=\"domain-build-trial_book_demo_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"trial_book_demo_url\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_book_demo_url'].errors\n }\"\n [attr.aria-label]=\"'Admin.DomainConfig.TrialBookDemoUrl' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialCtaIframe' | transloco\" name=\"trial_cta_iframe\" controlId=\"domain-build-trial_cta_iframe\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialCtaIframe' | transloco\n \">\n <textarea id=\"domain-build-trial_cta_iframe\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtaIframe' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"trial_cta_iframe\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_cta_iframe'].errors\n }\"\n [attr.aria-label]=\"'Admin.DomainConfig.TrialCtaIframe' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialJoinMessage' | transloco\" name=\"trial_join_message\" controlId=\"domain-build-trial_join_message\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialJoinMessage' | transloco\n \">\n <textarea id=\"domain-build-trial_join_message\" [placeholder]=\"'Admin.DomainConfig.Placeholder.JoinMessage' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"trial_join_message\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_join_message'].errors\n }\"\n [attr.aria-label]=\"'Admin.DomainConfig.TrialJoinMessage' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfDownloadText' | transloco\" name=\"trial_pdf_download_text\" controlId=\"domain-build-trial_pdf_download_text\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialPdfDownloadText' | transloco\n \">\n <textarea id=\"domain-build-trial_pdf_download_text\" [placeholder]=\"'Admin.DomainConfig.Placeholder.PdfDownloadText' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"trial_pdf_download_text\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_pdf_download_text'].errors\n }\"\n [attr.aria-label]=\"'Admin.DomainConfig.TrialPdfDownloadText' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row gy-4\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image-label\">{{ 'Admin.DomainConfig.TrialImage' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.TrialImage' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Trial Image'\"\n [controlName]=\"'trial_image'\" [previewData]=\"data['trial_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image2-label\">{{ 'Admin.DomainConfig.TrialImage2' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.TrialImage2' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image2'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image2'\" [previewData]=\"data['trial_image2']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_pdf_image-label\">{{ 'Admin.DomainConfig.TrialPdfImage' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.TrialPdfImage' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Pdf Image'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_pdf_image'\" [previewData]=\"data['trial_pdf_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image_bg-label\">{{ 'Admin.DomainConfig.TrialImageBg' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.TrialImageBg' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image_bg'\" [previewData]=\"data['trial_image_bg']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image_bg2-label\">{{ 'Admin.DomainConfig.TrialImageBg2' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.TrialImageBg2' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg2'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image_bg2'\" [previewData]=\"data['trial_image_bg2']\">\n </pw-custom-uploader>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"2\">\n <p-accordion-header>Header Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4\" formGroupName=\"header\">\n <h4 class=\"mb-4\">Header Section</h4>\n <!-- Headline -->\n <div class=\"col-12 col-md-12\">\n <pw-input-container label=\"Header Headline\" name=\"headline\" controlId=\"domain-build-header-headline\">\n <input type=\"text\" id=\"domain-build-header-headline\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HeaderHeadline' | transloco\" class=\"form-control\" formControlName=\"headline\"\n aria-label=\"Headline\" />\n </pw-input-container>\n </div>\n <!-- Video URL -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Header Video URL\" name=\"video_url\" controlId=\"domain-build-header-video_url\">\n <input type=\"text\" id=\"domain-build-header-video_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\"\n aria-label=\"Video Url\" />\n </pw-input-container>\n </div>\n <!-- Background Image URL -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Header Background Image URL\" name=\"bg_image_url\" controlId=\"domain-build-header-bg_image_url\">\n <input type=\"text\" id=\"domain-build-header-bg_image_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"bg_image_url\"\n aria-label=\"Bg Image Url\" />\n </pw-input-container>\n </div>\n <!-- Description -->\n <div class=\"col-12\">\n <pw-input-container label=\"Header Description\" name=\"description\" controlId=\"domain-build-header-description\">\n <textarea\n id=\"domain-build-header-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HeaderDescription' | transloco\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n\n aria-label=\"Description\" ></textarea>\n </pw-input-container>\n </div>\n <!-- Sub Headings -->\n <div formArrayName=\"sub_headings\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(headerSubHeadings, $event)\">\n @for (sub of f['header'].get('sub_headings')['controls']; track sub; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-md-10\">\n <pw-input-container label=\"Sub Header Description\" name=\"description\" [controlId]=\"'domain-build-header-sub_description-' + i\">\n <textarea\n [id]=\"'domain-build-header-sub_description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.SubHeadingDescription' | transloco\"\n class=\"form-control\"\n rows=\"3\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n\n aria-label=\"Description\" ></textarea>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeHeaderSubHeading(i)\"\n (keydown.enter)=\"removeHeaderSubHeading(i)\"\n (keydown.space)=\"removeHeaderSubHeading(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addHeaderSubHeading()\">\n + Add Sub Heading\n </button>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"3\">\n <p-accordion-header>Resources Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row row mt-4 mb-4\">\n <h4 class=\"mb-3\">Resources Section</h4>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.ResourceTagline' | transloco\" name=\"resources_tagline\" controlId=\"domain-build-resources_tagline\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceTagline' | transloco\">\n <input type=\"text\" id=\"domain-build-resources_tagline\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ResourceTagline' | transloco\" class=\"form-control\" formControlName=\"resources_tagline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['resources_tagline'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.ResourceTagline' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.ResourceDescription' | transloco\" name=\"resources_description\" controlId=\"domain-build-resources_description\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceDescription' | transloco\">\n <textarea id=\"domain-build-resources_description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ResourceDescription' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"resources_description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['resources_description'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.ResourceDescription' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row gy-4\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-resource_image-label\">{{ 'Admin.DomainConfig.ResourceImage' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.ResourceImage' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n [controlName]=\"'resources_image'\" [previewData]=\"data['resources_image']\">\n </pw-custom-uploader>\n </div>\n </div>\n</p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"4\">\n <p-accordion-header>Unique Selling Proposition Section (USP)</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4 mb-4\" formGroupName=\"usps\">\n <h4 class=\"mb-4\">Unique Selling Proposition Section (USP)</h4>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"USPs Title\" name=\"title\" controlId=\"domain-build-usps-title\">\n <input type=\"text\" id=\"domain-build-usps-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.UspsTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"USPs Video Url\" name=\"video_url\" controlId=\"domain-build-usps-video_url\">\n <input type=\"text\" id=\"domain-build-usps-video_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\"\n aria-label=\"Video Url\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container label=\"USPs Description\" name=\"description\" controlId=\"domain-build-usps-description\">\n <textarea id=\"domain-build-usps-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.UspsDescription' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n </div>\n <!-- USP Items -->\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(uspsItems, $event)\">\n @for (item of f['usps'].get('items')['controls']; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-sm-10\">\n <pw-input-container label=\"Item Description\" name=\"description\" [controlId]=\"'domain-build-usps-item-desc-' + i\">\n <textarea [id]=\"'domain-build-usps-item-desc-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ItemDescription' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n </div>\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeUspItem(i)\"\n (keydown.enter)=\"removeUspItem(i)\"\n (keydown.space)=\"removeUspItem(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addUspItem()\">\n + Add USP Item\n </button>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"5\">\n <p-accordion-header>Partners (Clients) Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4 mb-4\" formGroupName=\"partners\">\n <h4 class=\"mb-4\">Partners (Clients) Section</h4>\n <!-- Title -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Partner Title\" name=\"title\" controlId=\"domain-build-partners-title\">\n <input type=\"text\" id=\"domain-build-partners-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.PartnersTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n </div>\n <!-- Description -->\n <div class=\"col-12\">\n <pw-input-container label=\"Partners Description\" name=\"description\" controlId=\"domain-build-partners-description\">\n <textarea id=\"domain-build-partners-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.PartnersDescription' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n </div>\n <!-- Partner Items with Drag Support -->\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(partnersItems, $event)\">\n @for (item of partnersItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <!-- Name -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Name\" class=\"col-12\" name=\"name\" [controlId]=\"'domain-build-partner-name-' + i\">\n <input [id]=\"'domain-build-partner-name-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Name' | transloco\" class=\"form-control\" formControlName=\"name\" id=\"input_name_11\" name=\"input_name_11\"\n aria-label=\"Name\"/>\n </pw-input-container>\n </div>\n <!-- Blog URL + Drag Handle -->\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog Url\" name=\"blog_url\" [controlId]=\"'domain-build-partner-blog_url-' + i\">\n <input [id]=\"'domain-build-partner-blog_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"blog_url\" id=\"input_blog_url_12\" name=\"input_blog_url_12\"\n aria-label=\"Blog Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <!-- Video URL -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Video Url\" name=\"video_url\" [controlId]=\"'domain-build-partner-video_url-' + i\">\n <input [id]=\"'domain-build-partner-video_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\" id=\"input_video_url_13\" name=\"input_video_url_13\"\n aria-label=\"Video Url\"/>\n </pw-input-container>\n </div>\n <!-- Image URL -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Image Url\" name=\"image_url\" [controlId]=\"'domain-build-partner-image_url-' + i\">\n <input [id]=\"'domain-build-partner-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_14\" name=\"input_image_url_14\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n </div>\n <!-- Delete Icon -->\n <div class=\"col-md-12 text-end mt-2\">\n <i\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n (click)=\"removePartnerItem(i)\"\n (keydown.enter)=\"removePartnerItem(i)\"\n (keydown.space)=\"removePartnerItem(i)\"\n class=\"fa fa-trash delete-icon text-danger\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <!-- Add New Partner -->\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addPartnerItem()\">+ Add Partner</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"6\">\n <p-accordion-header>Testimonials Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"testimonials\">\n <h4 class=\"mb-4\">Testimonials Section</h4>\n <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"testimonials_title\" controlId=\"domain-build-testimonials-title\">\n <input type=\"text\" id=\"domain-build-testimonials-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.TestimonialsTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"testimonials_description\" controlId=\"domain-build-testimonials-description\">\n <textarea id=\"domain-build-testimonials-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.TestimonialsDescription' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n <!-- Items List -->\n <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(testimonialsItems, $event)\">\n @for (item of testimonialsItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-md-6\">\n <pw-input-container label=\"Name\" name=\"name\" [controlId]=\"'domain-build-testimonial-name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-name-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Name' | transloco\" class=\"form-control\" formControlName=\"name\" id=\"input_name_16\" name=\"input_name_16\"\n aria-label=\"Name\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog URL\" name=\"blog_url\" [controlId]=\"'domain-build-testimonial-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-blog_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"blog_url\" id=\"input_blog_url_17\" name=\"input_blog_url_17\"\n aria-label=\"Blog Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-testimonial-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_18\" name=\"input_image_url_18\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-testimonial-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-video_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\" id=\"input_video_url_19\" name=\"input_video_url_19\"\n aria-label=\"Video Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Testimonial\" class=\"col-md-10\" name=\"testimonial\" [controlId]=\"'domain-build-testimonial-text-' + i\">\n <textarea [id]=\"'domain-build-testimonial-text-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Testimonial' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"testimonial\"\n aria-label=\"Testimonial\"></textarea>\n </pw-input-container>\n <div class=\"col-md-2 d-flex align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n (click)=\"removeTestimonialItem(i)\"\n (keydown.enter)=\"removeTestimonialItem(i)\"\n (keydown.space)=\"removeTestimonialItem(i)\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addTestimonialItem()\">\n + Add Testimonial\n </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"7\">\n <p-accordion-header>Video Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"videos\">\n <h4 class=\"mb-3\">Video Section</h4>\n <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"videos_title\" controlId=\"domain-build-videos-title\">\n <input type=\"text\" id=\"domain-build-videos-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.VideosTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"videos_description\" controlId=\"domain-build-videos-description\">\n <textarea id=\"domain-build-videos-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.VideosDescription' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n <!-- Video Items -->\n <div\n formArrayName=\"items\"\n class=\"col-12 mt-3\"\n cdkDropList\n (cdkDropListDropped)=\"dropItems(videosItems, $event)\"\n >\n @for (item of videosItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-md-6\">\n <pw-input-container label=\"Title\" name=\"title\" [controlId]=\"'domain-build-video-item-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_21\" name=\"input_title_21\"\n aria-label=\"Title\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog URL\" name=\"blog_url\" [controlId]=\"'domain-build-video-item-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-blog_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"blog_url\" id=\"input_blog_url_22\" name=\"input_blog_url_22\"\n aria-label=\"Blog Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-video-item-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_23\" name=\"input_image_url_23\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-video-item-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-video_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\" id=\"input_video_url_24\" name=\"input_video_url_24\"\n aria-label=\"Video Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-md-10\" name=\"description\" [controlId]=\"'domain-build-video-item-description-' + i\">\n <textarea [id]=\"'domain-build-video-item-description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n <div class=\"col-md-2 d-flex align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeVideoItem(i)\"\n (keydown.enter)=\"removeVideoItem(i)\"\n (keydown.space)=\"removeVideoItem(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addVideoItem()\">\n + Add Video\n </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"8\">\n <p-accordion-header>Call to Actions Section (CTAs)</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4 mb-4\" formGroupName=\"ctas\">\n <h4 class=\"mb-4\">CTAs Section</h4>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Title\" name=\"title\" controlId=\"domain-build-ctas-title\">\n <input type=\"text\" id=\"domain-build-ctas-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtasTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Image URL\" name=\"image_url\" controlId=\"domain-build-ctas-image_url\">\n <input type=\"text\" id=\"domain-build-ctas-image_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\"\n aria-label=\"Image Url\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Button Text\" name=\"button_text\" controlId=\"domain-build-ctas-button_text\">\n <input type=\"text\" id=\"domain-build-ctas-button_text\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ButtonText' | transloco\" class=\"form-control\" formControlName=\"button_text\"\n aria-label=\"Button Text\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container label=\"Description\" name=\"description\" controlId=\"domain-build-ctas-description\">\n <input type=\"text\" id=\"domain-build-ctas-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtasDescription' | transloco\" class=\"form-control\" formControlName=\"description\"\n aria-label=\"Description\" />\n </pw-input-container>\n </div>\n <!-- CTA Items -->\n <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(ctasItems, $event)\">\n @for (item of ctasItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Image URL\" name=\"image_url\" [controlId]=\"'domain-build-cta-item-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_29\" name=\"input_image_url_29\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Cta URL\" name=\"cta_url\" [controlId]=\"'domain-build-cta-item-cta_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-cta_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"cta_url\" id=\"input_cta_url_30\" name=\"input_cta_url_30\"\n aria-label=\"Cta Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Video URL\" name=\"video_url\" [controlId]=\"'domain-build-cta-item-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-video_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\" id=\"input_video_url_31\" name=\"input_video_url_31\"\n aria-label=\"Video Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"CTA Title\" name=\"title\" [controlId]=\"'domain-build-cta-item-title-' + i\">\n <input [id]=\"'domain-build-cta-item-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtaTitle' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_32\" name=\"input_title_32\"\n aria-label=\"Title\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"CTA Description\" name=\"description\" [controlId]=\"'domain-build-cta-item-description-' + i\">\n <input [id]=\"'domain-build-cta-item-description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtaDescription' | transloco\" class=\"form-control\" formControlName=\"description\" id=\"input_description_33\" name=\"input_description_33\"\n aria-label=\"Description\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-5\">\n <pw-input-container label=\"Button Text\" name=\"button_text\" [controlId]=\"'domain-build-cta-item-button_text-' + i\">\n <input [id]=\"'domain-build-cta-item-button_text-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ButtonText' | transloco\" class=\"form-control\" formControlName=\"button_text\" id=\"input_button_text_34\" name=\"input_button_text_34\"\n aria-label=\"Button Text\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex align-items-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (click)=\"removeCtasItem(i)\"\n (keydown.enter)=\"removeCtasItem(i)\"\n (keydown.space)=\"removeCtasItem(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addCtasItem()\">+ Add CTA Item</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"9\">\n <p-accordion-header>Integrations Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"integrations\">\n <h4 class=\"mb-3\">Integrations Section</h4>\n <pw-input-container label=\"Title\" class=\"col-12\" name=\"title\" controlId=\"domain-build-integrations-title\">\n <input type=\"text\" id=\"domain-build-integrations-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.IntegrationsSectionTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"description\" controlId=\"domain-build-integrations-description\">\n <textarea id=\"domain-build-integrations-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.IntegrationsSectionDescription' | transloco\" class=\"form-control\" formControlName=\"description\" rows=\"3\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(integrationsItems, $event)\">\n @for (item of integrationsItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 rounded bg-light\"\n cdkDrag\n >\n <pw-input-container label=\"Title\" class=\"col-md-6\" name=\"title\" [controlId]=\"'domain-build-integration-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_36\" name=\"input_title_36\"\n aria-label=\"Title\"/>\n </pw-input-container>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Description\" name=\"description\" [controlId]=\"'domain-build-integration-description-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\" class=\"form-control\" formControlName=\"description\" id=\"input_description_37\" name=\"input_description_37\"\n aria-label=\"Description\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"Blog URL\" class=\"col-md-6\" name=\"blog_url\" [controlId]=\"'domain-build-integration-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-blog_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"blog_url\" id=\"input_blog_url_38\" name=\"input_blog_url_38\"\n aria-label=\"Blog Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-integration-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_39\" name=\"input_image_url_39\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-integration-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-video_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\" id=\"input_video_url_40\" name=\"input_video_url_40\"\n aria-label=\"Video Url\"/>\n </pw-input-container>\n <div class=\"col-md-6 d-flex align-items-end justify-content-end\">\n <i\n class=\"fa fa-trash delete-icon align-self-center\"\n (click)=\"removeIntegrationItem(i)\"\n (keydown.enter)=\"removeIntegrationItem(i)\"\n (keydown.space)=\"removeIntegrationItem(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addIntegrationItem()\">+ Add Integration</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"10\">\n <p-accordion-header>Contact Us Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"contact_us\">\n <h4 class=\"mb-3\">Contact Us Section</h4>\n <pw-input-container label=\"Url\" class=\"col-md-6\" name=\"url\" controlId=\"domain-build-contact_us-url\">\n <input type=\"text\" id=\"domain-build-contact_us-url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"url\"\n aria-label=\"Url\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"contact_us_description\" controlId=\"domain-build-contact_us-description\">\n <textarea id=\"domain-build-contact_us-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n <div formArrayName=\"questions\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsQuestions, $event)\">\n @for (questionGroup of contactUsQuestions.controls; track questionGroup; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3\"\n cdkDrag\n >\n <pw-input-container label=\"Question\" class=\"col-md-10\" name=\"question\" [controlId]=\"'domain-build-contact_us-question-' + i\">\n <input type=\"text\" [id]=\"'domain-build-contact_us-question-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Question' | transloco\" class=\"form-control\" formControlName=\"question\" id=\"input_question_42\" name=\"input_question_42\"\n aria-label=\"Question\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeContactUsQuestion(i)\"\n (keydown.enter)=\"removeContactUsQuestion(i)\"\n (keydown.space)=\"removeContactUsQuestion(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-12 mt-3\" formArrayName=\"options\" cdkDropList [cdkDropListData]=\"getQuestionOptions(i).controls\" (cdkDropListDropped)=\"dropContactUsOptions(i, $event)\">\n @for (option of getQuestionOptions(i).controls; track option; let j = $index) {\n <div\n class=\"row align-items-center mb-2 border p-3\"\n [formGroupName]=\"j\"\n cdkDrag\n >\n <pw-input-container label=\"Option\" class=\"col-md-10\" name=\"option\" [controlId]=\"'domain-build-contact_us-option-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-contact_us-option-' + i + '-' + j\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Option' | transloco\" class=\"form-control\" formControlName=\"option\" id=\"input_option_43\" name=\"input_option_43\"\n aria-label=\"Option\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeContactUsOption(i, j)\"\n (keydown.enter)=\"removeContactUsOption(i, j)\"\n (keydown.space)=\"removeContactUsOption(i, j)\"\n pTooltip=\"Remove Option\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder option\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start\">\n <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addContactUsOption(i)\">\n + Add Option\n </button>\n </div>\n </div>\n </div>\n }\n <div class=\"text-start mt-3\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addContactUsQuestion()\">\n + Add Question\n </button>\n </div>\n </div>\n <div formArrayName=\"hubspot\" class=\"col-12 mt-4\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsHubspotItems, $event)\">\n <h5 class=\"mb-4\">Hubspot Embeds</h5>\n @for (hub of contactUsHubspotItems.controls; track hub; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-2\"\n cdkDrag\n >\n <pw-input-container label=\"ID\" class=\"col-md-5\" name=\"id\" [controlId]=\"'domain-build-hubspot-id-' + i\">\n <input type=\"text\" [id]=\"'domain-build-hubspot-id-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HubspotId' | transloco\" class=\"form-control\" formControlName=\"id\" id=\"input_id_44\" name=\"input_id_44\"\n aria-label=\"Id\"/>\n </pw-input-container>\n <pw-input-container label=\"Position\" class=\"col-md-6\" name=\"position\" [controlId]=\"'domain-build-hubspot-position-' + i\">\n <input type=\"text\" [id]=\"'domain-build-hubspot-position-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HubspotPosition' | transloco\" class=\"form-control\" formControlName=\"position\" id=\"input_position_45\" name=\"input_position_45\"\n aria-label=\"Position\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"Div\" class=\"col-10\" name=\"div\" [controlId]=\"'domain-build-hubspot-div-' + i\">\n <textarea\n [id]=\"'domain-build-hubspot-div-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HubspotDiv' | transloco\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"div\"\n [ngClass]=\"{ 'is-invalid': submitted && f['div']?.errors }\"\n\n aria-label=\"Div\" ></textarea>\n </pw-input-container>\n <div class=\"col-md-2 d-flex align-items-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (click)=\"removeHubspotItem(i)\"\n (keydown.enter)=\"removeHubspotItem(i)\"\n (keydown.space)=\"removeHubspotItem(i)\"\n pTooltip=\"Remove Hubspot Embed\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\">\n </i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addHubspotItem()\">\n + Add Hubspot Embed\n </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"11\">\n <p-accordion-header>Book a Demo Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4\">\n <div class=\"col-12\">\n <h4 class=\"mb-3\">{{ 'Admin.DomainConfig.BookDemoLinks' | transloco }}</h4>\n <div formGroupName=\"book_demo\">\n <pw-input-container label=\"Title\" name=\"title\" controlId=\"domain-build-book_demo-title\">\n <input type=\"text\" id=\"domain-build-book_demo-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" formControlName=\"title\" class=\"form-control\"\n aria-label=\"Title\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" name=\"description\" controlId=\"domain-build-book_demo-description\">\n <input type=\"text\" id=\"domain-build-book_demo-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\" formControlName=\"description\" class=\"form-control\"\n aria-label=\"Description\" />\n </pw-input-container>\n <div formArrayName=\"items\" cdkDropList (cdkDropListDropped)=\"dropBookDemoLinks($event)\">\n @for (link of f['book_demo'].get('items')['controls']; track link; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3 border p-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-sm-5\">\n <pw-input-container label=\"Link Title\" name=\"title\" [controlId]=\"'domain-build-book_demo-link-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-book_demo-link-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.LinkTitle' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_48\" name=\"input_title_48\"\n aria-label=\"Title\"/>\n </pw-input-container>\n </div>\n <div class=\"col-sm-5\">\n <pw-input-container label=\"Link URL\" name=\"url\" [controlId]=\"'domain-build-book_demo-link-url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-book_demo-link-url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"url\" id=\"input_url_49\" name=\"input_url_49\"\n aria-label=\"Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n (click)=\"removeBookDemoLink(i)\"\n (keydown.enter)=\"removeBookDemoLink(i)\"\n (keydown.space)=\"removeBookDemoLink(i)\"\n class=\"fa fa-trash delete-icon text-danger\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addBookDemoLink()\">\n + Add Book Demo Link\n </button>\n </div>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"12\">\n <p-accordion-header>Navbar Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"navbar\">\n <h4 class=\"mb-3\">Navbar Section</h4>\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(navbarItems, $event)\">\n @for (item of navbarItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-center\">\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-navbar-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-navbar-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_50\" name=\"input_title_50\"\n aria-label=\"Title\"/>\n </pw-input-container>\n <pw-input-container label=\"Path\" class=\"col-md-5\" name=\"path\" [controlId]=\"'domain-build-navbar-path-' + i\">\n <input type=\"text\" [id]=\"'domain-build-navbar-path-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Path' | transloco\" class=\"form-control\" formControlName=\"path\" id=\"input_path_51\" name=\"input_path_51\"\n aria-label=\"Path\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeNavbarItem(i)\"\n (keydown.enter)=\"removeNavbarItem(i)\"\n (keydown.space)=\"removeNavbarItem(i)\"\n pTooltip=\"Remove Navbar Item\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n <div\n class=\"col-12 mt-3\"\n formArrayName=\"subtitles\"\n cdkDropList\n [cdkDropListData]=\"getNavbarSubtitles(i).controls\"\n (cdkDropListDropped)=\"dropNavbarSubtitles(i, $event)\"\n >\n @for (sub of getNavbarSubtitles(i).controls; track sub; let j = $index) {\n <div\n [formGroupName]=\"j\"\n class=\"row border p-3 mb-2 align-items-center\"\n cdkDrag\n >\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Title\" name=\"title\" [controlId]=\"'domain-build-navbar-subtitle-title-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-navbar-subtitle-title-' + i + '-' + j\" [placeholder]=\"'Admin.DomainConfig.Placeholder.SubtitleTitle' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_52\" name=\"input_title_52\"\n aria-label=\"Title\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Path\" name=\"path\" [controlId]=\"'domain-build-navbar-subtitle-path-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-navbar-subtitle-path-' + i + '-' + j\" [placeholder]=\"'Admin.DomainConfig.Placeholder.SubtitlePath' | transloco\" class=\"form-control\" formControlName=\"path\" id=\"input_path_53\" name=\"input_path_53\"\n aria-label=\"Path\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeSubtitle(i, j)\"\n (keydown.enter)=\"removeSubtitle(i, j)\"\n (keydown.space)=\"removeSubtitle(i, j)\"\n pTooltip=\"Remove Subtitle\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder subtitle\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <button type=\"button\" class=\"btn btn-sm btn-primary mt-2\" (click)=\"addSubtitle(i)\">\n + Add Subtitle\n </button>\n </div>\n </div>\n }\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addNavbarItem()\">\n + Add Navbar Item\n </button>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"13\">\n <p-accordion-header>Footer Links Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"footer_links\">\n <h4 class=\"mb-3\">Footer Links Section</h4>\n <div\n formArrayName=\"items\"\n class=\"col-12\"\n cdkDropList\n (cdkDropListDropped)=\"dropItems(footerLinksItems, $event)\"\n >\n @for (item of footerLinksItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-center\">\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-footer-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-footer-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_54\" name=\"input_title_54\"\n aria-label=\"Title\"/>\n </pw-input-container>\n <pw-input-container label=\"Path\" class=\"col-md-5\" name=\"path\" [controlId]=\"'domain-build-footer-path-' + i\">\n <input type=\"text\" [id]=\"'domain-build-footer-path-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Path' | transloco\" class=\"form-control\" formControlName=\"path\" id=\"input_path_55\" name=\"input_path_55\"\n aria-label=\"Path\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeFooterLinkItem(i)\"\n (keydown.enter)=\"removeFooterLinkItem(i)\"\n (keydown.space)=\"removeFooterLinkItem(i)\"\n pTooltip=\"Remove Footer Item\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n <div\n class=\"col-12 mt-3\"\n formArrayName=\"subtitles\"\n cdkDropList\n [cdkDropListData]=\"getFooterSubtitles(i).controls\"\n (cdkDropListDropped)=\"dropFooterSubtitles(i, $event)\"\n >\n @for (sub of getFooterSubtitles(i).controls; track sub; let j = $index) {\n <div\n [formGroupName]=\"j\"\n class=\"row border p-3 mb-2 align-items-center\"\n cdkDrag\n >\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Title\" name=\"title\" [controlId]=\"'domain-build-footer-subtitle-title-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-footer-subtitle-title-' + i + '-' + j\" [placeholder]=\"'Admin.DomainConfig.Placeholder.SubtitleTitle' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_56\" name=\"input_title_56\"\n aria-label=\"Title\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Path\" name=\"path\" [controlId]=\"'domain-build-footer-subtitle-path-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-footer-subtitle-path-' + i + '-' + j\" [placeholder]=\"'Admin.DomainConfig.Placeholder.SubtitlePath' | transloco\" class=\"form-control\" formControlName=\"path\" id=\"input_path_57\" name=\"input_path_57\"\n aria-label=\"Path\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeFooterSubtitle(i, j)\"\n (keydown.enter)=\"removeFooterSubtitle(i, j)\"\n (keydown.space)=\"removeFooterSubtitle(i, j)\"\n pTooltip=\"Remove Subtitle\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder subtitle\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <button\n type=\"button\"\n class=\"btn btn-sm btn-primary mt-2\"\n (click)=\"addFooterSubtitle(i)\"\n >\n + Add Subtitle\n </button>\n </div>\n </div>\n }\n <button\n type=\"button\"\n class=\"btn btn-primary mt-2 mb-2\"\n (click)=\"addFooterLinkItem()\"\n >\n + Add Footer Link\n </button>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"14\">\n <p-accordion-header>Guides Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"guides\">\n <h4 class=\"mb-3\">Guides Section</h4>\n <div formArrayName=\"items\" class=\"col-12\">\n <div cdkDropList (cdkDropListDropped)=\"dropItems(guidesItems, $event)\">\n @for (item of guidesItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"border p-3 mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-start\">\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-guide-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_58\" name=\"input_title_58\"\n aria-label=\"Title\"/>\n </pw-input-container>\n <pw-input-container label=\"Button Text\" class=\"col-md-6\" name=\"button_text\" [controlId]=\"'domain-build-guide-button_text-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-button_text-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ButtonText' | transloco\" class=\"form-control\" formControlName=\"button_text\" id=\"input_button_text_59\" name=\"input_button_text_59\"\n aria-label=\"Button Text\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n <div class=\"row mt-2\">\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-guide-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_60\" name=\"input_image_url_60\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Guide URL\" class=\"col-md-6\" name=\"guide_url\" [controlId]=\"'domain-build-guide-guide_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-guide_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"guide_url\" id=\"input_guide_url_61\" name=\"input_guide_url_61\"\n aria-label=\"Guide Url\"/>\n </pw-input-container>\n </div>\n <div class=\"row mt-2\">\n <pw-input-container label=\"Description\" class=\"col-md-11\" name=\"description\" [controlId]=\"'domain-build-guide-description-' + i\">\n <textarea\n [id]=\"'domain-build-guide-description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n\n aria-label=\"Description\" ></textarea>\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeGuideItem(i)\"\n (keydown.enter)=\"removeGuideItem(i)\"\n (keydown.space)=\"removeGuideItem(i)\"\n pTooltip=\"Remove Guide\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addGuideItem()\">\n + Add Guide\n </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"15\">\n <p-accordion-header>AB Tests Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\">\n <h4 class=\"mb-3\">AB Tests</h4>\n <div formArrayName=\"ab_tests\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(abTests, $event)\">\n @for (abTest of abTests.controls; track abTest; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3 border p-3\"\n cdkDrag\n >\n <pw-input-container label=\"Description\" class=\"col-md-5\" name=\"description\" [controlId]=\"'domain-build-ab_test-description-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\" class=\"form-control\" formControlName=\"description\" id=\"input_description_62\" name=\"input_description_62\"\n aria-label=\"Description\"/>\n </pw-input-container>\n <pw-input-container label=\"Experiment Name\" class=\"col-md-6\" name=\"experiment_name\" [controlId]=\"'domain-build-ab_test-experiment_name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-experiment_name-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ExperimentName' | transloco\" class=\"form-control\" formControlName=\"experiment_name\" id=\"input_experiment_name_63\" name=\"input_experiment_name_63\"\n aria-label=\"Experiment Name\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"DB Shard\" class=\"col-md-6\" name=\"db_shard\" [controlId]=\"'domain-build-ab_test-db_shard-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-db_shard-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.DbShard' | transloco\" class=\"form-control\" formControlName=\"db_shard\" id=\"input_db_shard_64\" name=\"input_db_shard_64\"\n aria-label=\"Db Shard\"/>\n </pw-input-container>\n <pw-input-container label=\"Microservice Name\" class=\"col-md-6\" name=\"microservice_name\" [controlId]=\"'domain-build-ab_test-microservice_name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-microservice_name-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.MicroserviceName' | transloco\" class=\"form-control\" formControlName=\"microservice_name\" id=\"input_microservice_name_65\" name=\"input_microservice_name_65\"\n aria-label=\"Microservice Name\"/>\n </pw-input-container>\n <div class=\"col-md-12 text-end mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeAbTest(i)\"\n (keydown.enter)=\"removeAbTest(i)\"\n (keydown.space)=\"removeAbTest(i)\"\n pTooltip=\"Remove AB Test\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addAbTest()\">+ Add AB Test</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"16\">\n <p-accordion-header>Coming soon pages - Subscribe to newsletter (TO DISCONTINUE)</p-accordion-header>\n <p-accordion-content>\n <div class=\"mb-3\">\n <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n /join/cs1, /join/cs2, etc.</p>\n </div>\n @if (shardUrl) {\n <div class=\"text-end\">\n <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveCs' | transloco\" tooltipPosition=\"top\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span> : <a [href]=\"shardUrl + '/join/cs1'\" target=\"_blank\">{{ shardUrl }}/join/cs1</a></span>\n </div>\n }\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsProduct' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsProduct' | transloco\" name=\"cs_product_id\" controlId=\"domain-build-cs_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-autoComplete appendTo=\"body\" [attr.aria-labelledby]=\"'domain-build-cs_product_id-label'\" [suggestions]=\"productsList\" formControlName=\"cs_product_id\" dataKey=\"id\" optionLabel=\"name\"\n [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.SearchProduct' | transloco\" [inputStyle]=\"\n form.get('cs_product_id').touched &&\n form.get('cs_product_id').invalid\n ? { border: '1px solid #ff586b' }\n : {}\n \" [multiple]=\"false\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsCrmSourceId' | transloco\" name=\"cs_crm_source_id\" controlId=\"domain-build-cs_crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCrmSourceId' | transloco\">\n <p-select inputId=\"domain-build-cs_crm_source_id\"\n [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-cs_crm_source_id-label'\" formControlName=\"cs_crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_crm_source_id']?.errors }\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSource' | transloco\"\n optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfSourceId' | transloco\" name=\"cs_pdf_source_id\" controlId=\"domain-build-cs_pdf_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsPdfSourceId' | transloco\">\n <p-select inputId=\"domain-build-cs_pdf_source_id\"\n [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-cs_pdf_source_id-label'\" formControlName=\"cs_pdf_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_pdf_source_id']?.errors }\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSource' | transloco\"\n optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\"></div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsVideoUrl' | transloco\" name=\"cs_video_url\" controlId=\"domain-build-cs_video_url\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsVideoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-cs_video_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"cs_video_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_video_url'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.CsVideoUrl' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsBookDemoUrl' | transloco\" name=\"cs_book_demo_url\" controlId=\"domain-build-cs_book_demo_url\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsBookDemoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-cs_book_demo_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"cs_book_demo_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_book_demo_url'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.CsBookDemoUrl' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsCtaIframe' | transloco\" name=\"cs_cta_iframe\" controlId=\"domain-build-cs_cta_iframe\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCtaIframe' | transloco\">\n <textarea id=\"domain-build-cs_cta_iframe\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtaIframe' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"cs_cta_iframe\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_cta_iframe'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.CsCtaIframe' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsJoinMessage' | transloco\" name=\"cs_join_message\" controlId=\"domain-build-cs_join_message\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsJoinMessage' | transloco\">\n <textarea id=\"domain-build-cs_join_message\" [placeholder]=\"'Admin.DomainConfig.Placeholder.JoinMessage' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"cs_join_message\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_join_message'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.CsJoinMessage' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfDownloadText' | transloco\" name=\"cs_pdf_download_text\" controlId=\"domain-build-cs_pdf_download_text\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.CsPdfDownloadText' | transloco\n \">\n <textarea id=\"domain-build-cs_pdf_download_text\" [placeholder]=\"'Admin.DomainConfig.Placeholder.PdfDownloadText' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"cs_pdf_download_text\" [ngClass]=\"{\n 'is-invalid': submitted && f['cs_pdf_download_text'].errors\n }\"\n [attr.aria-label]=\"'Admin.DomainConfig.CsPdfDownloadText' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row gy-4\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image-label\">{{ 'Admin.DomainConfig.CsImage' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.CsImage' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n [controlName]=\"'cs_image'\" [previewData]=\"data['cs_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image2-label\">{{ 'Admin.DomainConfig.CsImage2' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.CsImage2' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image2'\"\n [controlName]=\"'cs_image2'\" [previewData]=\"data['cs_image2']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_pdf_image-label\">{{ 'Admin.DomainConfig.CsPdfImage' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.CsPdfImage' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image'\"\n [controlName]=\"'cs_pdf_image'\" [previewData]=\"data['cs_pdf_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image_bg-label\">{{ 'Admin.DomainConfig.CsImageBg' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.CsImageBg' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg'\"\n [controlName]=\"'cs_image_bg'\" [previewData]=\"data['cs_image_bg']\">\n </pw-custom-uploader>\n</div>\n<div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image_bg2-label\">{{ 'Admin.DomainConfig.CsImageBg2' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.CsImageBg2' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n</span>\n<pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg2'\"\n [controlName]=\"'cs_image_bg2'\" [previewData]=\"data['cs_image_bg2']\">\n</pw-custom-uploader>\n</div>\n</div>\n</p-accordion-content>\n</p-accordion-panel>\n</p-accordion>\n</div>\n<div class=\"col-12 text-end mt-3\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n</div>\n</form>\n}\n@if (!data?.host_name && !isLoading) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"> </pw-no-data>\n </div>\n}\n\n\n<ng-template #partnerCropper let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Partner Image</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n <div class=\"modal-body\">\n <small>You can upload JPG, PNG, or GIF files. Avoid images with celebrities, nudity, or artwork.</small>\n <pw-image-cropper\n aspectRatio=\"auto\"\n (imageSelectionEvent)=\"onPartnerImageSelected($event)\"\n (closeEvent)=\"onClosePartnerModal()\"\n ></pw-image-cropper>\n </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i5.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$2.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "motionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i7$2.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i7$2.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i7$2.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { 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: i6$1.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$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i9.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "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$1.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: i13$1.CustomUploaderComponent, selector: "pw-custom-uploader", inputs: ["controlName", "previewData", "aspectRatio", "title"], outputs: ["saveEvent"] }, { kind: "component", type: i3$2.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "controlId", "useAriaLabelledbyOnly", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i15.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i15.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i15.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: i14.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: "directive", type: i9.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i9.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
1750
1750
|
}
|
|
1751
1751
|
__decorate([
|
|
1752
1752
|
ValidateForm('form')
|
|
1753
1753
|
], DomainConfigBuildComponent.prototype, "onSave", null);
|
|
1754
1754
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: DomainConfigBuildComponent, decorators: [{
|
|
1755
1755
|
type: Component,
|
|
1756
|
-
args: [{ selector: 'pw-domain-config-build', standalone: false, template: "<h3>Public Pages Configuration</h3>\n<div class=\"mb-4\">\n <p> The following parameters and settings will be applied to all public pages of this domain. </p>\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 && data?.host_name) {\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscription' | transloco\"\n name=\"master_subscription_id\" controlId=\"domain-build-master_subscription_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.MasterSubscription' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-master_subscription_id-label'\"\n [options]=\"masterSubscriptionsList\"\n formControlName=\"master_subscription_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['master_subscription_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.MasterSubscription' | transloco\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscriptionProduct' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.MasterSubscriptionProduct' | transloco\n \"\n name=\"master_subscription_product_id\" controlId=\"domain-build-master_subscription_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-master_subscription_product_id-label'\"\n [options]=\"masterSubscriptionProductList\"\n formControlName=\"master_subscription_product_id\"\n [ngClass]=\"{'is-invalid': submitted && f['master_subscription_product_id']?.errors}\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.MasterProduct' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\"\n >\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.BlogFeatureKey' | transloco\"\n name=\"blog_feature_key\" controlId=\"domain-build-blog_feature_key\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.BlogFeatureKey' | transloco\">\n <input type=\"text\"\n id=\"domain-build-blog_feature_key\" [placeholder]=\"'Admin.DomainConfig.Placeholder.BlogFeatureKey' | transloco\"\n class=\"form-control\"\n formControlName=\"blog_feature_key\"\n [ngClass]=\"{ 'is-invalid': submitted && f['blog_feature_key'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.BlogFeatureKey' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MainTos' | transloco\"\n name=\"main_tos_id\" controlId=\"domain-build-main_tos_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.MainTos' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-main_tos_id-label'\"\n [options]=\"subscriptionTosList\"\n formControlName=\"main_tos_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['main_tos_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.MainTos' | transloco\"\n optionValue=\"id\">\n <ng-template pTemplate=\"selectedItem\" let-item>\n <span [innerHTML]=\"item.title\"></span>\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n <span [innerHTML]=\"item.title\"></span>\n </ng-template>\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmSubscription' | transloco\"\n name=\"crm_subscription_id\" controlId=\"domain-build-crm_subscription_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSubscription' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_subscription_id-label'\"\n [options]=\"crmSubscriptionsList\"\n formControlName=\"crm_subscription_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_subscription_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSubscription' | transloco\"\n optionValue=\"id\">\n <ng-template pTemplate=\"selectedItem\" let-item>\n {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n </ng-template>\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmProduct' | transloco\"\n name=\"crm_product_id\" controlId=\"domain-build-crm_product_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmProduct' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_product_id-label'\"\n [options]=\"crmProductList\"\n formControlName=\"crm_product_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_product_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmProduct' | transloco\"\n optionValue=\"id\"\n >\n <ng-template pTemplate=\"selectedItem\" let-item>\n {{item?.subscription_id ? item?.name +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n {{item?.subscription_id ? item?.name +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n </ng-template>\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmSource' | transloco\"\n name=\"crm_source_id\" controlId=\"domain-build-crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSource' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_source_id-label'\"\n [options]=\"crmSourcesList\"\n formControlName=\"crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSource' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\"\n >\n </p-select>\n </pw-input-container>\n </div>\n <!-- crm subscription fields end-->\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.Active' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.Active' | transloco\" name=\"active\" controlId=\"domain-build-active\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch [attr.aria-labelledby]=\"'domain-build-active-label'\" formControlName=\"active\" name=\"active\"\n [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.IsProductDomain' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.IsProductDomain' | transloco\"\n name=\"is_product_domain\" controlId=\"domain-build-is_product_domain\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch [attr.aria-labelledby]=\"'domain-build-is_product_domain-label'\"\n formControlName=\"is_product_domain\"\n name=\"is_product_domain\"\n [ngClass]=\"{ 'is-invalid': submitted && f['is_product_domain'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CanRegisterOnMainPage' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CanRegisterOnMainPage' | transloco\"\n name=\"can_register_through_main_page\" controlId=\"domain-build-can_register_through_main_page\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch [attr.aria-labelledby]=\"'domain-build-can_register_through_main_page-label'\" formControlName=\"can_register_through_main_page\"\n name=\"can_register_through_main_page\" [ngClass]=\"{\n 'is-invalid': submitted && f['can_register_through_main_page'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.SocialLoginEnabled' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.SocialLoginEnable' | transloco\" name=\"social_login_enabled\" controlId=\"domain-build-social_login_enabled\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch [attr.aria-labelledby]=\"'domain-build-social_login_enabled-label'\" formControlName=\"social_login_enabled\"\n name=\"social_login_enabled\" [ngClass]=\"{ 'is-invalid': submitted && f['social_login_enabled'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.NotifyLogins' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.NotifyLogins' | transloco\" name=\"notify_logins\" controlId=\"domain-build-notify_logins\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch [attr.aria-labelledby]=\"'domain-build-notify_logins-label'\" formControlName=\"notify_logins\"\n name=\"notify_logins\" [ngClass]=\"{ 'is-invalid': submitted && f['notify_logins'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"my-5\">\n <h3>Pre-Built Pages Config (Resources, Landing Pages, etc)</h3>\n <p-accordion class=\"mt-5\">\n <p-accordion-panel value=\"0\">\n <p-accordion-header>Instructions - README FIRST</p-accordion-header>\n <p-accordion-content>\n <div class=\"mb-3\">\n <p>We've built and maintain a collection of high-converting landing pages designed to help you quickly launch polished\n UIs for onboarding users.</p>\n <p><strong>Newsletter Subscription Pages:</strong><br> After configuring your domain, you can access pages like\n <strong>/join/cs1, /join/cs2, /join/cs3, etc.</strong>, specifically designed for newsletter sign-ups. <br>\n Subscribers from these pages will be listed in the <strong>SmartCRM module</strong>.</p>\n <p><strong>Trial Product Sign-Up Pages:</strong><br> For users interested in trial products, utilize pages such as\n <strong>/join/trial1, /join/trial2, /join/trial3, etc.</strong>.<br> Users registering through these pages will\n appear in the <strong>Admin > Users section</strong>.</p>\n <p>Once you've selected the landing page you want to use <strong>(e.g., /join/trial3)</strong>, make sure to update\n the <strong>Internal Path</strong> in the <strong>Core tab</strong> accordingly\u2014i.e., set it to\n <strong>/join/trial3</strong>.</p>\n <p>If you need assistance integrating these pages into your workflow or have further questions, feel free to reach\n out.</p>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n <p-accordion-panel value=\"1\">\n <p-accordion-header>Subscribe to Product/Newsletter Config</p-accordion-header>\n <p-accordion-content>\n <div class=\"mb-3\">\n <p>Trial Pages will enable users to sign up to real products and are accessible at the path /join/trial1,\n /join/trial2, etc.</p>\n <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n /join/cs1, /join/cs2, etc.</p>\n </div>\n <!-- live page link -->\n @if (shardUrl) {\n <div class=\"text-end\">\n <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveTrial' | transloco\" tooltipPosition=\"top\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span> : <a [href]=\"shardUrl + '/join/trial1'\" target=\"_blank\">{{ shardUrl }}/join/trial1</a></span>\n </div>\n }\n <div class=\"row\">\n <div class=\"col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialProduct' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialProduct' | transloco\" name=\"trial_product_id\" controlId=\"domain-build-trial_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-autoComplete appendTo=\"body\" [attr.aria-labelledby]=\"'domain-build-trial_product_id-label'\" [suggestions]=\"productsList\" formControlName=\"trial_product_id\" dataKey=\"id\" optionLabel=\"name\"\n [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.SearchProduct' | transloco\" [inputStyle]=\"\n form.get('trial_product_id').touched &&\n form.get('trial_product_id').invalid\n ? { border: '1px solid #ff586b' }\n : {}\n \" [multiple]=\"false\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialCrmSourceId' | transloco\" name=\"trial_crm_source_id\" controlId=\"domain-build-trial_crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialCrmSourceId' | transloco\n \">\n <p-select inputId=\"domain-build-trial_crm_source_id\"\n [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-trial_crm_source_id-label'\" formControlName=\"trial_crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_crm_source_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSource' | transloco\" optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfSourceId' | transloco\" name=\"trial_pdf_source_id\" controlId=\"domain-build-trial_pdf_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialPdfSourceId' | transloco\n \">\n <p-select inputId=\"domain-build-trial_pdf_source_id\"\n [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-trial_pdf_source_id-label'\" formControlName=\"trial_pdf_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_pdf_source_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSource' | transloco\" optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\"></div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialVideoUrl' | transloco\" name=\"trial_video_url\" controlId=\"domain-build-trial_video_url\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialVideoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-trial_video_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"trial_video_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_video_url'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.TrialVideoUrl' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialBookDemoUrl' | transloco\" name=\"trial_book_demo_url\" controlId=\"domain-build-trial_book_demo_url\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialBookDemoUrl' | transloco\n \">\n <input type=\"text\" id=\"domain-build-trial_book_demo_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"trial_book_demo_url\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_book_demo_url'].errors\n }\"\n [attr.aria-label]=\"'Admin.DomainConfig.TrialBookDemoUrl' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialCtaIframe' | transloco\" name=\"trial_cta_iframe\" controlId=\"domain-build-trial_cta_iframe\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialCtaIframe' | transloco\n \">\n <textarea id=\"domain-build-trial_cta_iframe\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtaIframe' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"trial_cta_iframe\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_cta_iframe'].errors\n }\"\n [attr.aria-label]=\"'Admin.DomainConfig.TrialCtaIframe' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialJoinMessage' | transloco\" name=\"trial_join_message\" controlId=\"domain-build-trial_join_message\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialJoinMessage' | transloco\n \">\n <textarea id=\"domain-build-trial_join_message\" [placeholder]=\"'Admin.DomainConfig.Placeholder.JoinMessage' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"trial_join_message\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_join_message'].errors\n }\"\n [attr.aria-label]=\"'Admin.DomainConfig.TrialJoinMessage' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfDownloadText' | transloco\" name=\"trial_pdf_download_text\" controlId=\"domain-build-trial_pdf_download_text\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialPdfDownloadText' | transloco\n \">\n <textarea id=\"domain-build-trial_pdf_download_text\" [placeholder]=\"'Admin.DomainConfig.Placeholder.PdfDownloadText' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"trial_pdf_download_text\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_pdf_download_text'].errors\n }\"\n [attr.aria-label]=\"'Admin.DomainConfig.TrialPdfDownloadText' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row gy-4\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image-label\">{{ 'Admin.DomainConfig.TrialImage' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.TrialImage' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Trial Image'\"\n [controlName]=\"'trial_image'\" [previewData]=\"data['trial_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image2-label\">{{ 'Admin.DomainConfig.TrialImage2' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.TrialImage2' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image2'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image2'\" [previewData]=\"data['trial_image2']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_pdf_image-label\">{{ 'Admin.DomainConfig.TrialPdfImage' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.TrialPdfImage' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Pdf Image'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_pdf_image'\" [previewData]=\"data['trial_pdf_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image_bg-label\">{{ 'Admin.DomainConfig.TrialImageBg' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.TrialImageBg' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image_bg'\" [previewData]=\"data['trial_image_bg']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image_bg2-label\">{{ 'Admin.DomainConfig.TrialImageBg2' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.TrialImageBg2' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg2'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image_bg2'\" [previewData]=\"data['trial_image_bg2']\">\n </pw-custom-uploader>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"2\">\n <p-accordion-header>Header Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4\" formGroupName=\"header\">\n <h4 class=\"mb-4\">Header Section</h4>\n <!-- Headline -->\n <div class=\"col-12 col-md-12\">\n <pw-input-container label=\"Header Headline\" name=\"headline\" controlId=\"domain-build-header-headline\">\n <input type=\"text\" id=\"domain-build-header-headline\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HeaderHeadline' | transloco\" class=\"form-control\" formControlName=\"headline\"\n aria-label=\"Headline\" />\n </pw-input-container>\n </div>\n <!-- Video URL -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Header Video URL\" name=\"video_url\" controlId=\"domain-build-header-video_url\">\n <input type=\"text\" id=\"domain-build-header-video_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\"\n aria-label=\"Video Url\" />\n </pw-input-container>\n </div>\n <!-- Background Image URL -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Header Background Image URL\" name=\"bg_image_url\" controlId=\"domain-build-header-bg_image_url\">\n <input type=\"text\" id=\"domain-build-header-bg_image_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"bg_image_url\"\n aria-label=\"Bg Image Url\" />\n </pw-input-container>\n </div>\n <!-- Description -->\n <div class=\"col-12\">\n <pw-input-container label=\"Header Description\" name=\"description\" controlId=\"domain-build-header-description\">\n <textarea\n id=\"domain-build-header-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HeaderDescription' | transloco\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n\n aria-label=\"Description\" ></textarea>\n </pw-input-container>\n </div>\n <!-- Sub Headings -->\n <div formArrayName=\"sub_headings\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(headerSubHeadings, $event)\">\n @for (sub of f['header'].get('sub_headings')['controls']; track sub; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-md-10\">\n <pw-input-container label=\"Sub Header Description\" name=\"description\" [controlId]=\"'domain-build-header-sub_description-' + i\">\n <textarea\n [id]=\"'domain-build-header-sub_description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.SubHeadingDescription' | transloco\"\n class=\"form-control\"\n rows=\"3\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n\n aria-label=\"Description\" ></textarea>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeHeaderSubHeading(i)\"\n (keydown.enter)=\"removeHeaderSubHeading(i)\"\n (keydown.space)=\"removeHeaderSubHeading(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addHeaderSubHeading()\">\n + Add Sub Heading\n </button>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"3\">\n <p-accordion-header>Resources Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row row mt-4 mb-4\">\n <h4 class=\"mb-3\">Resources Section</h4>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.ResourceTagline' | transloco\" name=\"resources_tagline\" controlId=\"domain-build-resources_tagline\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceTagline' | transloco\">\n <input type=\"text\" id=\"domain-build-resources_tagline\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ResourceTagline' | transloco\" class=\"form-control\" formControlName=\"resources_tagline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['resources_tagline'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.ResourceTagline' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.ResourceDescription' | transloco\" name=\"resources_description\" controlId=\"domain-build-resources_description\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceDescription' | transloco\">\n <textarea id=\"domain-build-resources_description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ResourceDescription' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"resources_description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['resources_description'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.ResourceDescription' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row gy-4\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-resource_image-label\">{{ 'Admin.DomainConfig.ResourceImage' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.ResourceImage' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n [controlName]=\"'resources_image'\" [previewData]=\"data['resources_image']\">\n </pw-custom-uploader>\n </div>\n </div>\n</p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"4\">\n <p-accordion-header>Unique Selling Proposition Section (USP)</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4 mb-4\" formGroupName=\"usps\">\n <h4 class=\"mb-4\">Unique Selling Proposition Section (USP)</h4>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"USPs Title\" name=\"title\" controlId=\"domain-build-usps-title\">\n <input type=\"text\" id=\"domain-build-usps-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.UspsTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"USPs Video Url\" name=\"video_url\" controlId=\"domain-build-usps-video_url\">\n <input type=\"text\" id=\"domain-build-usps-video_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\"\n aria-label=\"Video Url\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container label=\"USPs Description\" name=\"description\" controlId=\"domain-build-usps-description\">\n <textarea id=\"domain-build-usps-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.UspsDescription' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n </div>\n <!-- USP Items -->\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(uspsItems, $event)\">\n @for (item of f['usps'].get('items')['controls']; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-sm-10\">\n <pw-input-container label=\"Item Description\" name=\"description\" [controlId]=\"'domain-build-usps-item-desc-' + i\">\n <textarea [id]=\"'domain-build-usps-item-desc-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ItemDescription' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n </div>\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeUspItem(i)\"\n (keydown.enter)=\"removeUspItem(i)\"\n (keydown.space)=\"removeUspItem(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addUspItem()\">\n + Add USP Item\n </button>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"5\">\n <p-accordion-header>Partners (Clients) Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4 mb-4\" formGroupName=\"partners\">\n <h4 class=\"mb-4\">Partners (Clients) Section</h4>\n <!-- Title -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Partner Title\" name=\"title\" controlId=\"domain-build-partners-title\">\n <input type=\"text\" id=\"domain-build-partners-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.PartnersTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n </div>\n <!-- Description -->\n <div class=\"col-12\">\n <pw-input-container label=\"Partners Description\" name=\"description\" controlId=\"domain-build-partners-description\">\n <textarea id=\"domain-build-partners-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.PartnersDescription' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n </div>\n <!-- Partner Items with Drag Support -->\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(partnersItems, $event)\">\n @for (item of partnersItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <!-- Name -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Name\" class=\"col-12\" name=\"name\" [controlId]=\"'domain-build-partner-name-' + i\">\n <input [id]=\"'domain-build-partner-name-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Name' | transloco\" class=\"form-control\" formControlName=\"name\" id=\"input_name_11\" name=\"input_name_11\"\n aria-label=\"Name\"/>\n </pw-input-container>\n </div>\n <!-- Blog URL + Drag Handle -->\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog Url\" name=\"blog_url\" [controlId]=\"'domain-build-partner-blog_url-' + i\">\n <input [id]=\"'domain-build-partner-blog_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"blog_url\" id=\"input_blog_url_12\" name=\"input_blog_url_12\"\n aria-label=\"Blog Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <!-- Video URL -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Video Url\" name=\"video_url\" [controlId]=\"'domain-build-partner-video_url-' + i\">\n <input [id]=\"'domain-build-partner-video_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\" id=\"input_video_url_13\" name=\"input_video_url_13\"\n aria-label=\"Video Url\"/>\n </pw-input-container>\n </div>\n <!-- Image URL -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Image Url\" name=\"image_url\" [controlId]=\"'domain-build-partner-image_url-' + i\">\n <input [id]=\"'domain-build-partner-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_14\" name=\"input_image_url_14\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n </div>\n <!-- Delete Icon -->\n <div class=\"col-md-12 text-end mt-2\">\n <i\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n (click)=\"removePartnerItem(i)\"\n (keydown.enter)=\"removePartnerItem(i)\"\n (keydown.space)=\"removePartnerItem(i)\"\n class=\"fa fa-trash delete-icon text-danger\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <!-- Add New Partner -->\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addPartnerItem()\">+ Add Partner</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"6\">\n <p-accordion-header>Testimonials Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"testimonials\">\n <h4 class=\"mb-4\">Testimonials Section</h4>\n <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"testimonials_title\" controlId=\"domain-build-testimonials-title\">\n <input type=\"text\" id=\"domain-build-testimonials-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.TestimonialsTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"testimonials_description\" controlId=\"domain-build-testimonials-description\">\n <textarea id=\"domain-build-testimonials-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.TestimonialsDescription' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n <!-- Items List -->\n <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(testimonialsItems, $event)\">\n @for (item of testimonialsItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-md-6\">\n <pw-input-container label=\"Name\" name=\"name\" [controlId]=\"'domain-build-testimonial-name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-name-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Name' | transloco\" class=\"form-control\" formControlName=\"name\" id=\"input_name_16\" name=\"input_name_16\"\n aria-label=\"Name\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog URL\" name=\"blog_url\" [controlId]=\"'domain-build-testimonial-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-blog_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"blog_url\" id=\"input_blog_url_17\" name=\"input_blog_url_17\"\n aria-label=\"Blog Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-testimonial-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_18\" name=\"input_image_url_18\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-testimonial-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-video_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\" id=\"input_video_url_19\" name=\"input_video_url_19\"\n aria-label=\"Video Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Testimonial\" class=\"col-md-10\" name=\"testimonial\" [controlId]=\"'domain-build-testimonial-text-' + i\">\n <textarea [id]=\"'domain-build-testimonial-text-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Testimonial' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"testimonial\"\n aria-label=\"Testimonial\"></textarea>\n </pw-input-container>\n <div class=\"col-md-2 d-flex align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n (click)=\"removeTestimonialItem(i)\"\n (keydown.enter)=\"removeTestimonialItem(i)\"\n (keydown.space)=\"removeTestimonialItem(i)\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addTestimonialItem()\">\n + Add Testimonial\n </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"7\">\n <p-accordion-header>Video Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"videos\">\n <h4 class=\"mb-3\">Video Section</h4>\n <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"videos_title\" controlId=\"domain-build-videos-title\">\n <input type=\"text\" id=\"domain-build-videos-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.VideosTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"videos_description\" controlId=\"domain-build-videos-description\">\n <textarea id=\"domain-build-videos-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.VideosDescription' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n <!-- Video Items -->\n <div\n formArrayName=\"items\"\n class=\"col-12 mt-3\"\n cdkDropList\n (cdkDropListDropped)=\"dropItems(videosItems, $event)\"\n >\n @for (item of videosItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-md-6\">\n <pw-input-container label=\"Title\" name=\"title\" [controlId]=\"'domain-build-video-item-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_21\" name=\"input_title_21\"\n aria-label=\"Title\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog URL\" name=\"blog_url\" [controlId]=\"'domain-build-video-item-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-blog_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"blog_url\" id=\"input_blog_url_22\" name=\"input_blog_url_22\"\n aria-label=\"Blog Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-video-item-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_23\" name=\"input_image_url_23\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-video-item-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-video_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\" id=\"input_video_url_24\" name=\"input_video_url_24\"\n aria-label=\"Video Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-md-10\" name=\"description\" [controlId]=\"'domain-build-video-item-description-' + i\">\n <textarea [id]=\"'domain-build-video-item-description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n <div class=\"col-md-2 d-flex align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeVideoItem(i)\"\n (keydown.enter)=\"removeVideoItem(i)\"\n (keydown.space)=\"removeVideoItem(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addVideoItem()\">\n + Add Video\n </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"8\">\n <p-accordion-header>Call to Actions Section (CTAs)</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4 mb-4\" formGroupName=\"ctas\">\n <h4 class=\"mb-4\">CTAs Section</h4>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Title\" name=\"title\" controlId=\"domain-build-ctas-title\">\n <input type=\"text\" id=\"domain-build-ctas-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtasTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Image URL\" name=\"image_url\" controlId=\"domain-build-ctas-image_url\">\n <input type=\"text\" id=\"domain-build-ctas-image_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\"\n aria-label=\"Image Url\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Button Text\" name=\"button_text\" controlId=\"domain-build-ctas-button_text\">\n <input type=\"text\" id=\"domain-build-ctas-button_text\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ButtonText' | transloco\" class=\"form-control\" formControlName=\"button_text\"\n aria-label=\"Button Text\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container label=\"Description\" name=\"description\" controlId=\"domain-build-ctas-description\">\n <input type=\"text\" id=\"domain-build-ctas-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtasDescription' | transloco\" class=\"form-control\" formControlName=\"description\"\n aria-label=\"Description\" />\n </pw-input-container>\n </div>\n <!-- CTA Items -->\n <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(ctasItems, $event)\">\n @for (item of ctasItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Image URL\" name=\"image_url\" [controlId]=\"'domain-build-cta-item-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_29\" name=\"input_image_url_29\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Cta URL\" name=\"cta_url\" [controlId]=\"'domain-build-cta-item-cta_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-cta_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"cta_url\" id=\"input_cta_url_30\" name=\"input_cta_url_30\"\n aria-label=\"Cta Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Video URL\" name=\"video_url\" [controlId]=\"'domain-build-cta-item-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-video_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\" id=\"input_video_url_31\" name=\"input_video_url_31\"\n aria-label=\"Video Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"CTA Title\" name=\"title\" [controlId]=\"'domain-build-cta-item-title-' + i\">\n <input [id]=\"'domain-build-cta-item-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtaTitle' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_32\" name=\"input_title_32\"\n aria-label=\"Title\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"CTA Description\" name=\"description\" [controlId]=\"'domain-build-cta-item-description-' + i\">\n <input [id]=\"'domain-build-cta-item-description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtaDescription' | transloco\" class=\"form-control\" formControlName=\"description\" id=\"input_description_33\" name=\"input_description_33\"\n aria-label=\"Description\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-5\">\n <pw-input-container label=\"Button Text\" name=\"button_text\" [controlId]=\"'domain-build-cta-item-button_text-' + i\">\n <input [id]=\"'domain-build-cta-item-button_text-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ButtonText' | transloco\" class=\"form-control\" formControlName=\"button_text\" id=\"input_button_text_34\" name=\"input_button_text_34\"\n aria-label=\"Button Text\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex align-items-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (click)=\"removeCtasItem(i)\"\n (keydown.enter)=\"removeCtasItem(i)\"\n (keydown.space)=\"removeCtasItem(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addCtasItem()\">+ Add CTA Item</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"9\">\n <p-accordion-header>Integrations Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"integrations\">\n <h4 class=\"mb-3\">Integrations Section</h4>\n <pw-input-container label=\"Title\" class=\"col-12\" name=\"title\" controlId=\"domain-build-integrations-title\">\n <input type=\"text\" id=\"domain-build-integrations-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.IntegrationsSectionTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"description\" controlId=\"domain-build-integrations-description\">\n <textarea id=\"domain-build-integrations-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.IntegrationsSectionDescription' | transloco\" class=\"form-control\" formControlName=\"description\" rows=\"3\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(integrationsItems, $event)\">\n @for (item of integrationsItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 rounded bg-light\"\n cdkDrag\n >\n <pw-input-container label=\"Title\" class=\"col-md-6\" name=\"title\" [controlId]=\"'domain-build-integration-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_36\" name=\"input_title_36\"\n aria-label=\"Title\"/>\n </pw-input-container>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Description\" name=\"description\" [controlId]=\"'domain-build-integration-description-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\" class=\"form-control\" formControlName=\"description\" id=\"input_description_37\" name=\"input_description_37\"\n aria-label=\"Description\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"Blog URL\" class=\"col-md-6\" name=\"blog_url\" [controlId]=\"'domain-build-integration-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-blog_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"blog_url\" id=\"input_blog_url_38\" name=\"input_blog_url_38\"\n aria-label=\"Blog Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-integration-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_39\" name=\"input_image_url_39\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-integration-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-video_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\" id=\"input_video_url_40\" name=\"input_video_url_40\"\n aria-label=\"Video Url\"/>\n </pw-input-container>\n <div class=\"col-md-6 d-flex align-items-end justify-content-end\">\n <i\n class=\"fa fa-trash delete-icon align-self-center\"\n (click)=\"removeIntegrationItem(i)\"\n (keydown.enter)=\"removeIntegrationItem(i)\"\n (keydown.space)=\"removeIntegrationItem(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addIntegrationItem()\">+ Add Integration</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"10\">\n <p-accordion-header>Contact Us Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"contact_us\">\n <h4 class=\"mb-3\">Contact Us Section</h4>\n <pw-input-container label=\"Url\" class=\"col-md-6\" name=\"url\" controlId=\"domain-build-contact_us-url\">\n <input type=\"text\" id=\"domain-build-contact_us-url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"url\"\n aria-label=\"Url\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"contact_us_description\" controlId=\"domain-build-contact_us-description\">\n <textarea id=\"domain-build-contact_us-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n <div formArrayName=\"questions\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsQuestions, $event)\">\n @for (questionGroup of contactUsQuestions.controls; track questionGroup; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3\"\n cdkDrag\n >\n <pw-input-container label=\"Question\" class=\"col-md-10\" name=\"question\" [controlId]=\"'domain-build-contact_us-question-' + i\">\n <input type=\"text\" [id]=\"'domain-build-contact_us-question-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Question' | transloco\" class=\"form-control\" formControlName=\"question\" id=\"input_question_42\" name=\"input_question_42\"\n aria-label=\"Question\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeContactUsQuestion(i)\"\n (keydown.enter)=\"removeContactUsQuestion(i)\"\n (keydown.space)=\"removeContactUsQuestion(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-12 mt-3\" formArrayName=\"options\" cdkDropList [cdkDropListData]=\"getQuestionOptions(i).controls\" (cdkDropListDropped)=\"dropContactUsOptions(i, $event)\">\n @for (option of getQuestionOptions(i).controls; track option; let j = $index) {\n <div\n class=\"row align-items-center mb-2 border p-3\"\n [formGroupName]=\"j\"\n cdkDrag\n >\n <pw-input-container label=\"Option\" class=\"col-md-10\" name=\"option\" [controlId]=\"'domain-build-contact_us-option-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-contact_us-option-' + i + '-' + j\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Option' | transloco\" class=\"form-control\" formControlName=\"option\" id=\"input_option_43\" name=\"input_option_43\"\n aria-label=\"Option\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeContactUsOption(i, j)\"\n (keydown.enter)=\"removeContactUsOption(i, j)\"\n (keydown.space)=\"removeContactUsOption(i, j)\"\n pTooltip=\"Remove Option\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder option\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start\">\n <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addContactUsOption(i)\">\n + Add Option\n </button>\n </div>\n </div>\n </div>\n }\n <div class=\"text-start mt-3\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addContactUsQuestion()\">\n + Add Question\n </button>\n </div>\n </div>\n <div formArrayName=\"hubspot\" class=\"col-12 mt-4\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsHubspotItems, $event)\">\n <h5 class=\"mb-4\">Hubspot Embeds</h5>\n @for (hub of contactUsHubspotItems.controls; track hub; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-2\"\n cdkDrag\n >\n <pw-input-container label=\"ID\" class=\"col-md-5\" name=\"id\" [controlId]=\"'domain-build-hubspot-id-' + i\">\n <input type=\"text\" [id]=\"'domain-build-hubspot-id-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HubspotId' | transloco\" class=\"form-control\" formControlName=\"id\" id=\"input_id_44\" name=\"input_id_44\"\n aria-label=\"Id\"/>\n </pw-input-container>\n <pw-input-container label=\"Position\" class=\"col-md-6\" name=\"position\" [controlId]=\"'domain-build-hubspot-position-' + i\">\n <input type=\"text\" [id]=\"'domain-build-hubspot-position-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HubspotPosition' | transloco\" class=\"form-control\" formControlName=\"position\" id=\"input_position_45\" name=\"input_position_45\"\n aria-label=\"Position\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"Div\" class=\"col-10\" name=\"div\" [controlId]=\"'domain-build-hubspot-div-' + i\">\n <textarea\n [id]=\"'domain-build-hubspot-div-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HubspotDiv' | transloco\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"div\"\n [ngClass]=\"{ 'is-invalid': submitted && f['div']?.errors }\"\n\n aria-label=\"Div\" ></textarea>\n </pw-input-container>\n <div class=\"col-md-2 d-flex align-items-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (click)=\"removeHubspotItem(i)\"\n (keydown.enter)=\"removeHubspotItem(i)\"\n (keydown.space)=\"removeHubspotItem(i)\"\n pTooltip=\"Remove Hubspot Embed\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\">\n </i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addHubspotItem()\">\n + Add Hubspot Embed\n </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"11\">\n <p-accordion-header>Book a Demo Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4\">\n <div class=\"col-12\">\n <h4 class=\"mb-3\">{{ 'Admin.DomainConfig.BookDemoLinks' | transloco }}</h4>\n <div formGroupName=\"book_demo\">\n <pw-input-container label=\"Title\" name=\"title\" controlId=\"domain-build-book_demo-title\">\n <input type=\"text\" id=\"domain-build-book_demo-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" formControlName=\"title\" class=\"form-control\"\n aria-label=\"Title\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" name=\"description\" controlId=\"domain-build-book_demo-description\">\n <input type=\"text\" id=\"domain-build-book_demo-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\" formControlName=\"description\" class=\"form-control\"\n aria-label=\"Description\" />\n </pw-input-container>\n <div formArrayName=\"items\" cdkDropList (cdkDropListDropped)=\"dropBookDemoLinks($event)\">\n @for (link of f['book_demo'].get('items')['controls']; track link; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3 border p-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-sm-5\">\n <pw-input-container label=\"Link Title\" name=\"title\" [controlId]=\"'domain-build-book_demo-link-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-book_demo-link-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.LinkTitle' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_48\" name=\"input_title_48\"\n aria-label=\"Title\"/>\n </pw-input-container>\n </div>\n <div class=\"col-sm-5\">\n <pw-input-container label=\"Link URL\" name=\"url\" [controlId]=\"'domain-build-book_demo-link-url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-book_demo-link-url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"url\" id=\"input_url_49\" name=\"input_url_49\"\n aria-label=\"Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n (click)=\"removeBookDemoLink(i)\"\n (keydown.enter)=\"removeBookDemoLink(i)\"\n (keydown.space)=\"removeBookDemoLink(i)\"\n class=\"fa fa-trash delete-icon text-danger\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addBookDemoLink()\">\n + Add Book Demo Link\n </button>\n </div>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"12\">\n <p-accordion-header>Navbar Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"navbar\">\n <h4 class=\"mb-3\">Navbar Section</h4>\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(navbarItems, $event)\">\n @for (item of navbarItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-center\">\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-navbar-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-navbar-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_50\" name=\"input_title_50\"\n aria-label=\"Title\"/>\n </pw-input-container>\n <pw-input-container label=\"Path\" class=\"col-md-5\" name=\"path\" [controlId]=\"'domain-build-navbar-path-' + i\">\n <input type=\"text\" [id]=\"'domain-build-navbar-path-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Path' | transloco\" class=\"form-control\" formControlName=\"path\" id=\"input_path_51\" name=\"input_path_51\"\n aria-label=\"Path\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeNavbarItem(i)\"\n (keydown.enter)=\"removeNavbarItem(i)\"\n (keydown.space)=\"removeNavbarItem(i)\"\n pTooltip=\"Remove Navbar Item\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n <div\n class=\"col-12 mt-3\"\n formArrayName=\"subtitles\"\n cdkDropList\n [cdkDropListData]=\"getNavbarSubtitles(i).controls\"\n (cdkDropListDropped)=\"dropNavbarSubtitles(i, $event)\"\n >\n @for (sub of getNavbarSubtitles(i).controls; track sub; let j = $index) {\n <div\n [formGroupName]=\"j\"\n class=\"row border p-3 mb-2 align-items-center\"\n cdkDrag\n >\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Title\" name=\"title\" [controlId]=\"'domain-build-navbar-subtitle-title-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-navbar-subtitle-title-' + i + '-' + j\" [placeholder]=\"'Admin.DomainConfig.Placeholder.SubtitleTitle' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_52\" name=\"input_title_52\"\n aria-label=\"Title\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Path\" name=\"path\" [controlId]=\"'domain-build-navbar-subtitle-path-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-navbar-subtitle-path-' + i + '-' + j\" [placeholder]=\"'Admin.DomainConfig.Placeholder.SubtitlePath' | transloco\" class=\"form-control\" formControlName=\"path\" id=\"input_path_53\" name=\"input_path_53\"\n aria-label=\"Path\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeSubtitle(i, j)\"\n (keydown.enter)=\"removeSubtitle(i, j)\"\n (keydown.space)=\"removeSubtitle(i, j)\"\n pTooltip=\"Remove Subtitle\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder subtitle\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <button type=\"button\" class=\"btn btn-sm btn-primary mt-2\" (click)=\"addSubtitle(i)\">\n + Add Subtitle\n </button>\n </div>\n </div>\n }\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addNavbarItem()\">\n + Add Navbar Item\n </button>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"13\">\n <p-accordion-header>Footer Links Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"footer_links\">\n <h4 class=\"mb-3\">Footer Links Section</h4>\n <div\n formArrayName=\"items\"\n class=\"col-12\"\n cdkDropList\n (cdkDropListDropped)=\"dropItems(footerLinksItems, $event)\"\n >\n @for (item of footerLinksItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-center\">\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-footer-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-footer-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_54\" name=\"input_title_54\"\n aria-label=\"Title\"/>\n </pw-input-container>\n <pw-input-container label=\"Path\" class=\"col-md-5\" name=\"path\" [controlId]=\"'domain-build-footer-path-' + i\">\n <input type=\"text\" [id]=\"'domain-build-footer-path-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Path' | transloco\" class=\"form-control\" formControlName=\"path\" id=\"input_path_55\" name=\"input_path_55\"\n aria-label=\"Path\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeFooterLinkItem(i)\"\n (keydown.enter)=\"removeFooterLinkItem(i)\"\n (keydown.space)=\"removeFooterLinkItem(i)\"\n pTooltip=\"Remove Footer Item\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n <div\n class=\"col-12 mt-3\"\n formArrayName=\"subtitles\"\n cdkDropList\n [cdkDropListData]=\"getFooterSubtitles(i).controls\"\n (cdkDropListDropped)=\"dropFooterSubtitles(i, $event)\"\n >\n @for (sub of getFooterSubtitles(i).controls; track sub; let j = $index) {\n <div\n [formGroupName]=\"j\"\n class=\"row border p-3 mb-2 align-items-center\"\n cdkDrag\n >\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Title\" name=\"title\" [controlId]=\"'domain-build-footer-subtitle-title-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-footer-subtitle-title-' + i + '-' + j\" [placeholder]=\"'Admin.DomainConfig.Placeholder.SubtitleTitle' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_56\" name=\"input_title_56\"\n aria-label=\"Title\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Path\" name=\"path\" [controlId]=\"'domain-build-footer-subtitle-path-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-footer-subtitle-path-' + i + '-' + j\" [placeholder]=\"'Admin.DomainConfig.Placeholder.SubtitlePath' | transloco\" class=\"form-control\" formControlName=\"path\" id=\"input_path_57\" name=\"input_path_57\"\n aria-label=\"Path\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeFooterSubtitle(i, j)\"\n (keydown.enter)=\"removeFooterSubtitle(i, j)\"\n (keydown.space)=\"removeFooterSubtitle(i, j)\"\n pTooltip=\"Remove Subtitle\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder subtitle\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <button\n type=\"button\"\n class=\"btn btn-sm btn-primary mt-2\"\n (click)=\"addFooterSubtitle(i)\"\n >\n + Add Subtitle\n </button>\n </div>\n </div>\n }\n <button\n type=\"button\"\n class=\"btn btn-primary mt-2 mb-2\"\n (click)=\"addFooterLinkItem()\"\n >\n + Add Footer Link\n </button>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"14\">\n <p-accordion-header>Guides Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"guides\">\n <h4 class=\"mb-3\">Guides Section</h4>\n <div formArrayName=\"items\" class=\"col-12\">\n <div cdkDropList (cdkDropListDropped)=\"dropItems(guidesItems, $event)\">\n @for (item of guidesItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"border p-3 mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-start\">\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-guide-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_58\" name=\"input_title_58\"\n aria-label=\"Title\"/>\n </pw-input-container>\n <pw-input-container label=\"Button Text\" class=\"col-md-6\" name=\"button_text\" [controlId]=\"'domain-build-guide-button_text-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-button_text-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ButtonText' | transloco\" class=\"form-control\" formControlName=\"button_text\" id=\"input_button_text_59\" name=\"input_button_text_59\"\n aria-label=\"Button Text\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n <div class=\"row mt-2\">\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-guide-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_60\" name=\"input_image_url_60\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Guide URL\" class=\"col-md-6\" name=\"guide_url\" [controlId]=\"'domain-build-guide-guide_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-guide_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"guide_url\" id=\"input_guide_url_61\" name=\"input_guide_url_61\"\n aria-label=\"Guide Url\"/>\n </pw-input-container>\n </div>\n <div class=\"row mt-2\">\n <pw-input-container label=\"Description\" class=\"col-md-11\" name=\"description\" [controlId]=\"'domain-build-guide-description-' + i\">\n <textarea\n [id]=\"'domain-build-guide-description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n\n aria-label=\"Description\" ></textarea>\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeGuideItem(i)\"\n (keydown.enter)=\"removeGuideItem(i)\"\n (keydown.space)=\"removeGuideItem(i)\"\n pTooltip=\"Remove Guide\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addGuideItem()\">\n + Add Guide\n </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"15\">\n <p-accordion-header>AB Tests Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\">\n <h4 class=\"mb-3\">AB Tests</h4>\n <div formArrayName=\"ab_tests\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(abTests, $event)\">\n @for (abTest of abTests.controls; track abTest; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3 border p-3\"\n cdkDrag\n >\n <pw-input-container label=\"Description\" class=\"col-md-5\" name=\"description\" [controlId]=\"'domain-build-ab_test-description-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\" class=\"form-control\" formControlName=\"description\" id=\"input_description_62\" name=\"input_description_62\"\n aria-label=\"Description\"/>\n </pw-input-container>\n <pw-input-container label=\"Experiment Name\" class=\"col-md-6\" name=\"experiment_name\" [controlId]=\"'domain-build-ab_test-experiment_name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-experiment_name-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ExperimentName' | transloco\" class=\"form-control\" formControlName=\"experiment_name\" id=\"input_experiment_name_63\" name=\"input_experiment_name_63\"\n aria-label=\"Experiment Name\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"DB Shard\" class=\"col-md-6\" name=\"db_shard\" [controlId]=\"'domain-build-ab_test-db_shard-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-db_shard-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.DbShard' | transloco\" class=\"form-control\" formControlName=\"db_shard\" id=\"input_db_shard_64\" name=\"input_db_shard_64\"\n aria-label=\"Db Shard\"/>\n </pw-input-container>\n <pw-input-container label=\"Microservice Name\" class=\"col-md-6\" name=\"microservice_name\" [controlId]=\"'domain-build-ab_test-microservice_name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-microservice_name-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.MicroserviceName' | transloco\" class=\"form-control\" formControlName=\"microservice_name\" id=\"input_microservice_name_65\" name=\"input_microservice_name_65\"\n aria-label=\"Microservice Name\"/>\n </pw-input-container>\n <div class=\"col-md-12 text-end mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeAbTest(i)\"\n (keydown.enter)=\"removeAbTest(i)\"\n (keydown.space)=\"removeAbTest(i)\"\n pTooltip=\"Remove AB Test\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addAbTest()\">+ Add AB Test</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"16\">\n <p-accordion-header>Coming soon pages - Subscribe to newsletter (TO DISCONTINUE)</p-accordion-header>\n <p-accordion-content>\n <div class=\"mb-3\">\n <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n /join/cs1, /join/cs2, etc.</p>\n </div>\n @if (shardUrl) {\n <div class=\"text-end\">\n <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveCs' | transloco\" tooltipPosition=\"top\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span> : <a [href]=\"shardUrl + '/join/cs1'\" target=\"_blank\">{{ shardUrl }}/join/cs1</a></span>\n </div>\n }\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsProduct' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsProduct' | transloco\" name=\"cs_product_id\" controlId=\"domain-build-cs_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-autoComplete appendTo=\"body\" [attr.aria-labelledby]=\"'domain-build-cs_product_id-label'\" [suggestions]=\"productsList\" formControlName=\"cs_product_id\" dataKey=\"id\" optionLabel=\"name\"\n [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.SearchProduct' | transloco\" [inputStyle]=\"\n form.get('cs_product_id').touched &&\n form.get('cs_product_id').invalid\n ? { border: '1px solid #ff586b' }\n : {}\n \" [multiple]=\"false\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsCrmSourceId' | transloco\" name=\"cs_crm_source_id\" controlId=\"domain-build-cs_crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCrmSourceId' | transloco\">\n <p-select inputId=\"domain-build-cs_crm_source_id\"\n [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-cs_crm_source_id-label'\" formControlName=\"cs_crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_crm_source_id']?.errors }\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSource' | transloco\"\n optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfSourceId' | transloco\" name=\"cs_pdf_source_id\" controlId=\"domain-build-cs_pdf_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsPdfSourceId' | transloco\">\n <p-select inputId=\"domain-build-cs_pdf_source_id\"\n [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-cs_pdf_source_id-label'\" formControlName=\"cs_pdf_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_pdf_source_id']?.errors }\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSource' | transloco\"\n optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\"></div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsVideoUrl' | transloco\" name=\"cs_video_url\" controlId=\"domain-build-cs_video_url\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsVideoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-cs_video_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"cs_video_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_video_url'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.CsVideoUrl' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsBookDemoUrl' | transloco\" name=\"cs_book_demo_url\" controlId=\"domain-build-cs_book_demo_url\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsBookDemoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-cs_book_demo_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"cs_book_demo_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_book_demo_url'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.CsBookDemoUrl' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsCtaIframe' | transloco\" name=\"cs_cta_iframe\" controlId=\"domain-build-cs_cta_iframe\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCtaIframe' | transloco\">\n <textarea id=\"domain-build-cs_cta_iframe\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtaIframe' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"cs_cta_iframe\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_cta_iframe'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.CsCtaIframe' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsJoinMessage' | transloco\" name=\"cs_join_message\" controlId=\"domain-build-cs_join_message\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsJoinMessage' | transloco\">\n <textarea id=\"domain-build-cs_join_message\" [placeholder]=\"'Admin.DomainConfig.Placeholder.JoinMessage' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"cs_join_message\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_join_message'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.CsJoinMessage' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfDownloadText' | transloco\" name=\"cs_pdf_download_text\" controlId=\"domain-build-cs_pdf_download_text\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.CsPdfDownloadText' | transloco\n \">\n <textarea id=\"domain-build-cs_pdf_download_text\" [placeholder]=\"'Admin.DomainConfig.Placeholder.PdfDownloadText' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"cs_pdf_download_text\" [ngClass]=\"{\n 'is-invalid': submitted && f['cs_pdf_download_text'].errors\n }\"\n [attr.aria-label]=\"'Admin.DomainConfig.CsPdfDownloadText' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row gy-4\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image-label\">{{ 'Admin.DomainConfig.CsImage' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.CsImage' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n [controlName]=\"'cs_image'\" [previewData]=\"data['cs_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image2-label\">{{ 'Admin.DomainConfig.CsImage2' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.CsImage2' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image2'\"\n [controlName]=\"'cs_image2'\" [previewData]=\"data['cs_image2']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_pdf_image-label\">{{ 'Admin.DomainConfig.CsPdfImage' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.CsPdfImage' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image'\"\n [controlName]=\"'cs_pdf_image'\" [previewData]=\"data['cs_pdf_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image_bg-label\">{{ 'Admin.DomainConfig.CsImageBg' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.CsImageBg' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg'\"\n [controlName]=\"'cs_image_bg'\" [previewData]=\"data['cs_image_bg']\">\n </pw-custom-uploader>\n</div>\n<div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image_bg2-label\">{{ 'Admin.DomainConfig.CsImageBg2' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.CsImageBg2' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n</span>\n<pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg2'\"\n [controlName]=\"'cs_image_bg2'\" [previewData]=\"data['cs_image_bg2']\">\n</pw-custom-uploader>\n</div>\n</div>\n</p-accordion-content>\n</p-accordion-panel>\n</p-accordion>\n</div>\n<div class=\"col-12 text-end mt-3\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n</div>\n</form>\n}\n@if (!data?.host_name && !isLoading) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"> </pw-no-data>\n </div>\n}\n\n\n<ng-template #partnerCropper let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Partner Image</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n <div class=\"modal-body\">\n <small>You can upload JPG, PNG, or GIF files. Avoid images with celebrities, nudity, or artwork.</small>\n <pw-image-cropper\n aspectRatio=\"auto\"\n (imageSelectionEvent)=\"onPartnerImageSelected($event)\"\n (closeEvent)=\"onClosePartnerModal()\"\n ></pw-image-cropper>\n </div>\n</ng-template>\n" }]
|
|
1756
|
+
args: [{ selector: 'pw-domain-config-build', standalone: false, template: "<h3>Public Pages Configuration</h3>\n<div class=\"mb-4\">\n <p> The following parameters and settings will be applied to all public pages of this domain. </p>\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 && data?.host_name) {\n <form [formGroup]=\"form\"\n (ngSubmit)=\"onSave()\">\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscription' | transloco\"\n name=\"master_subscription_id\" controlId=\"domain-build-master_subscription_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.MasterSubscription' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-master_subscription_id-label'\"\n [options]=\"masterSubscriptionsList\"\n formControlName=\"master_subscription_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['master_subscription_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.MasterSubscription' | transloco\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscriptionProduct' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.MasterSubscriptionProduct' | transloco\n \"\n name=\"master_subscription_product_id\" controlId=\"domain-build-master_subscription_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-master_subscription_product_id-label'\"\n [options]=\"masterSubscriptionProductList\"\n formControlName=\"master_subscription_product_id\"\n [ngClass]=\"{'is-invalid': submitted && f['master_subscription_product_id']?.errors}\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.MasterProduct' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\"\n >\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.BlogFeatureKey' | transloco\"\n name=\"blog_feature_key\" controlId=\"domain-build-blog_feature_key\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.BlogFeatureKey' | transloco\">\n <input type=\"text\"\n id=\"domain-build-blog_feature_key\" [placeholder]=\"'Admin.DomainConfig.Placeholder.BlogFeatureKey' | transloco\"\n class=\"form-control\"\n formControlName=\"blog_feature_key\"\n [ngClass]=\"{ 'is-invalid': submitted && f['blog_feature_key'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.BlogFeatureKey' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.MainTos' | transloco\"\n name=\"main_tos_id\" controlId=\"domain-build-main_tos_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.MainTos' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-main_tos_id-label'\"\n [options]=\"subscriptionTosList\"\n formControlName=\"main_tos_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['main_tos_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.MainTos' | transloco\"\n optionValue=\"id\">\n <ng-template pTemplate=\"selectedItem\" let-item>\n <span [innerHTML]=\"item.title\"></span>\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n <span [innerHTML]=\"item.title\"></span>\n </ng-template>\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmSubscription' | transloco\"\n name=\"crm_subscription_id\" controlId=\"domain-build-crm_subscription_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSubscription' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_subscription_id-label'\"\n [options]=\"crmSubscriptionsList\"\n formControlName=\"crm_subscription_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_subscription_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSubscription' | transloco\"\n optionValue=\"id\">\n <ng-template pTemplate=\"selectedItem\" let-item>\n {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n </ng-template>\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmProduct' | transloco\"\n name=\"crm_product_id\" controlId=\"domain-build-crm_product_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmProduct' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_product_id-label'\"\n [options]=\"crmProductList\"\n formControlName=\"crm_product_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_product_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmProduct' | transloco\"\n optionValue=\"id\"\n >\n <ng-template pTemplate=\"selectedItem\" let-item>\n {{item?.subscription_id ? item?.name +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n </ng-template>\n <ng-template pTemplate=\"item\" let-item>\n {{item?.subscription_id ? item?.name +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n </ng-template>\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CrmSource' | transloco\"\n name=\"crm_source_id\" controlId=\"domain-build-crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSource' | transloco\">\n <p-select\n [attr.aria-labelledby]=\"'domain-build-crm_source_id-label'\"\n [options]=\"crmSourcesList\"\n formControlName=\"crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSource' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\"\n >\n </p-select>\n </pw-input-container>\n </div>\n <!-- crm subscription fields end-->\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.Active' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.Active' | transloco\" name=\"active\" controlId=\"domain-build-active\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch [attr.aria-labelledby]=\"'domain-build-active-label'\" formControlName=\"active\" name=\"active\"\n [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.IsProductDomain' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.IsProductDomain' | transloco\"\n name=\"is_product_domain\" controlId=\"domain-build-is_product_domain\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch [attr.aria-labelledby]=\"'domain-build-is_product_domain-label'\"\n formControlName=\"is_product_domain\"\n name=\"is_product_domain\"\n [ngClass]=\"{ 'is-invalid': submitted && f['is_product_domain'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CanRegisterOnMainPage' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CanRegisterOnMainPage' | transloco\"\n name=\"can_register_through_main_page\" controlId=\"domain-build-can_register_through_main_page\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch [attr.aria-labelledby]=\"'domain-build-can_register_through_main_page-label'\" formControlName=\"can_register_through_main_page\"\n name=\"can_register_through_main_page\" [ngClass]=\"{\n 'is-invalid': submitted && f['can_register_through_main_page'].errors\n }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.SocialLoginEnabled' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.SocialLoginEnable' | transloco\" name=\"social_login_enabled\" controlId=\"domain-build-social_login_enabled\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch [attr.aria-labelledby]=\"'domain-build-social_login_enabled-label'\" formControlName=\"social_login_enabled\"\n name=\"social_login_enabled\" [ngClass]=\"{ 'is-invalid': submitted && f['social_login_enabled'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.NotifyLogins' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.NotifyLogins' | transloco\" name=\"notify_logins\" controlId=\"domain-build-notify_logins\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch [attr.aria-labelledby]=\"'domain-build-notify_logins-label'\" formControlName=\"notify_logins\"\n name=\"notify_logins\" [ngClass]=\"{ 'is-invalid': submitted && f['notify_logins'].errors }\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n <div class=\"my-5\">\n <h3>Pre-Built Pages Config (Resources, Landing Pages, etc)</h3>\n <p-accordion class=\"mt-5\">\n <p-accordion-panel value=\"0\">\n <p-accordion-header>Instructions - README FIRST</p-accordion-header>\n <p-accordion-content>\n <div class=\"mb-3\">\n <p>We've built and maintain a collection of high-converting landing pages designed to help you quickly launch polished\n UIs for onboarding users.</p>\n <p><strong>Newsletter Subscription Pages:</strong><br> After configuring your domain, you can access pages like\n <strong>/join/cs1, /join/cs2, /join/cs3, etc.</strong>, specifically designed for newsletter sign-ups. <br>\n Subscribers from these pages will be listed in the <strong>SmartCRM module</strong>.</p>\n <p><strong>Trial Product Sign-Up Pages:</strong><br> For users interested in trial products, utilize pages such as\n <strong>/join/trial1, /join/trial2, /join/trial3, etc.</strong>.<br> Users registering through these pages will\n appear in the <strong>Admin > Users section</strong>.</p>\n <p>Once you've selected the landing page you want to use <strong>(e.g., /join/trial3)</strong>, make sure to update\n the <strong>Internal Path</strong> in the <strong>Core tab</strong> accordingly\u2014i.e., set it to\n <strong>/join/trial3</strong>.</p>\n <p>If you need assistance integrating these pages into your workflow or have further questions, feel free to reach\n out.</p>\n </div>\n </p-accordion-content>\n </p-accordion-panel>\n <p-accordion-panel value=\"1\">\n <p-accordion-header>Subscribe to Product/Newsletter Config</p-accordion-header>\n <p-accordion-content>\n <div class=\"mb-3\">\n <p>Trial Pages will enable users to sign up to real products and are accessible at the path /join/trial1,\n /join/trial2, etc.</p>\n <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n /join/cs1, /join/cs2, etc.</p>\n </div>\n <!-- live page link -->\n @if (shardUrl) {\n <div class=\"text-end\">\n <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveTrial' | transloco\" tooltipPosition=\"top\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span> : <a [href]=\"shardUrl + '/join/trial1'\" target=\"_blank\">{{ shardUrl }}/join/trial1</a></span>\n </div>\n }\n <div class=\"row\">\n <div class=\"col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialProduct' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialProduct' | transloco\" name=\"trial_product_id\" controlId=\"domain-build-trial_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-autoComplete appendTo=\"body\" [attr.aria-labelledby]=\"'domain-build-trial_product_id-label'\" [suggestions]=\"productsList\" formControlName=\"trial_product_id\" dataKey=\"id\" optionLabel=\"name\"\n [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.SearchProduct' | transloco\" [inputStyle]=\"\n form.get('trial_product_id').touched &&\n form.get('trial_product_id').invalid\n ? { border: '1px solid #ff586b' }\n : {}\n \" [multiple]=\"false\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialCrmSourceId' | transloco\" name=\"trial_crm_source_id\" controlId=\"domain-build-trial_crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialCrmSourceId' | transloco\n \">\n <p-select inputId=\"domain-build-trial_crm_source_id\"\n [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-trial_crm_source_id-label'\" formControlName=\"trial_crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_crm_source_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSource' | transloco\" optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfSourceId' | transloco\" name=\"trial_pdf_source_id\" controlId=\"domain-build-trial_pdf_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialPdfSourceId' | transloco\n \">\n <p-select inputId=\"domain-build-trial_pdf_source_id\"\n [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-trial_pdf_source_id-label'\" formControlName=\"trial_pdf_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_pdf_source_id']?.errors }\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSource' | transloco\" optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\"></div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialVideoUrl' | transloco\" name=\"trial_video_url\" controlId=\"domain-build-trial_video_url\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialVideoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-trial_video_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"trial_video_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['trial_video_url'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.TrialVideoUrl' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialBookDemoUrl' | transloco\" name=\"trial_book_demo_url\" controlId=\"domain-build-trial_book_demo_url\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialBookDemoUrl' | transloco\n \">\n <input type=\"text\" id=\"domain-build-trial_book_demo_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"trial_book_demo_url\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_book_demo_url'].errors\n }\"\n [attr.aria-label]=\"'Admin.DomainConfig.TrialBookDemoUrl' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialCtaIframe' | transloco\" name=\"trial_cta_iframe\" controlId=\"domain-build-trial_cta_iframe\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialCtaIframe' | transloco\n \">\n <textarea id=\"domain-build-trial_cta_iframe\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtaIframe' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"trial_cta_iframe\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_cta_iframe'].errors\n }\"\n [attr.aria-label]=\"'Admin.DomainConfig.TrialCtaIframe' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialJoinMessage' | transloco\" name=\"trial_join_message\" controlId=\"domain-build-trial_join_message\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialJoinMessage' | transloco\n \">\n <textarea id=\"domain-build-trial_join_message\" [placeholder]=\"'Admin.DomainConfig.Placeholder.JoinMessage' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"trial_join_message\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_join_message'].errors\n }\"\n [attr.aria-label]=\"'Admin.DomainConfig.TrialJoinMessage' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfDownloadText' | transloco\" name=\"trial_pdf_download_text\" controlId=\"domain-build-trial_pdf_download_text\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.TrialPdfDownloadText' | transloco\n \">\n <textarea id=\"domain-build-trial_pdf_download_text\" [placeholder]=\"'Admin.DomainConfig.Placeholder.PdfDownloadText' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"trial_pdf_download_text\" [ngClass]=\"{\n 'is-invalid': submitted && f['trial_pdf_download_text'].errors\n }\"\n [attr.aria-label]=\"'Admin.DomainConfig.TrialPdfDownloadText' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row gy-4\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image-label\">{{ 'Admin.DomainConfig.TrialImage' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.TrialImage' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Trial Image'\"\n [controlName]=\"'trial_image'\" [previewData]=\"data['trial_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image2-label\">{{ 'Admin.DomainConfig.TrialImage2' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.TrialImage2' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image2'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image2'\" [previewData]=\"data['trial_image2']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_pdf_image-label\">{{ 'Admin.DomainConfig.TrialPdfImage' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.TrialPdfImage' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Pdf Image'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_pdf_image'\" [previewData]=\"data['trial_pdf_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image_bg-label\">{{ 'Admin.DomainConfig.TrialImageBg' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.TrialImageBg' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image_bg'\" [previewData]=\"data['trial_image_bg']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-trial_image_bg2-label\">{{ 'Admin.DomainConfig.TrialImageBg2' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.TrialImageBg2' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg2'\" [aspectRatio]=\"'custom'\"\n [controlName]=\"'trial_image_bg2'\" [previewData]=\"data['trial_image_bg2']\">\n </pw-custom-uploader>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"2\">\n <p-accordion-header>Header Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4\" formGroupName=\"header\">\n <h4 class=\"mb-4\">Header Section</h4>\n <!-- Headline -->\n <div class=\"col-12 col-md-12\">\n <pw-input-container label=\"Header Headline\" name=\"headline\" controlId=\"domain-build-header-headline\">\n <input type=\"text\" id=\"domain-build-header-headline\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HeaderHeadline' | transloco\" class=\"form-control\" formControlName=\"headline\"\n aria-label=\"Headline\" />\n </pw-input-container>\n </div>\n <!-- Video URL -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Header Video URL\" name=\"video_url\" controlId=\"domain-build-header-video_url\">\n <input type=\"text\" id=\"domain-build-header-video_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\"\n aria-label=\"Video Url\" />\n </pw-input-container>\n </div>\n <!-- Background Image URL -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Header Background Image URL\" name=\"bg_image_url\" controlId=\"domain-build-header-bg_image_url\">\n <input type=\"text\" id=\"domain-build-header-bg_image_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"bg_image_url\"\n aria-label=\"Bg Image Url\" />\n </pw-input-container>\n </div>\n <!-- Description -->\n <div class=\"col-12\">\n <pw-input-container label=\"Header Description\" name=\"description\" controlId=\"domain-build-header-description\">\n <textarea\n id=\"domain-build-header-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HeaderDescription' | transloco\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n\n aria-label=\"Description\" ></textarea>\n </pw-input-container>\n </div>\n <!-- Sub Headings -->\n <div formArrayName=\"sub_headings\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(headerSubHeadings, $event)\">\n @for (sub of f['header'].get('sub_headings')['controls']; track sub; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-md-10\">\n <pw-input-container label=\"Sub Header Description\" name=\"description\" [controlId]=\"'domain-build-header-sub_description-' + i\">\n <textarea\n [id]=\"'domain-build-header-sub_description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.SubHeadingDescription' | transloco\"\n class=\"form-control\"\n rows=\"3\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n\n aria-label=\"Description\" ></textarea>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeHeaderSubHeading(i)\"\n (keydown.enter)=\"removeHeaderSubHeading(i)\"\n (keydown.space)=\"removeHeaderSubHeading(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addHeaderSubHeading()\">\n + Add Sub Heading\n </button>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"3\">\n <p-accordion-header>Resources Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row row mt-4 mb-4\">\n <h4 class=\"mb-3\">Resources Section</h4>\n <div class=\"col-12 col-sm-6\">\n <pw-input-container [label]=\"'Admin.DomainConfig.ResourceTagline' | transloco\" name=\"resources_tagline\" controlId=\"domain-build-resources_tagline\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceTagline' | transloco\">\n <input type=\"text\" id=\"domain-build-resources_tagline\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ResourceTagline' | transloco\" class=\"form-control\" formControlName=\"resources_tagline\"\n [ngClass]=\"{ 'is-invalid': submitted && f['resources_tagline'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.ResourceTagline' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.ResourceDescription' | transloco\" name=\"resources_description\" controlId=\"domain-build-resources_description\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceDescription' | transloco\">\n <textarea id=\"domain-build-resources_description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ResourceDescription' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"resources_description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['resources_description'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.ResourceDescription' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row gy-4\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-resource_image-label\">{{ 'Admin.DomainConfig.ResourceImage' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.ResourceImage' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n [controlName]=\"'resources_image'\" [previewData]=\"data['resources_image']\">\n </pw-custom-uploader>\n </div>\n </div>\n</p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"4\">\n <p-accordion-header>Unique Selling Proposition Section (USP)</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4 mb-4\" formGroupName=\"usps\">\n <h4 class=\"mb-4\">Unique Selling Proposition Section (USP)</h4>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"USPs Title\" name=\"title\" controlId=\"domain-build-usps-title\">\n <input type=\"text\" id=\"domain-build-usps-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.UspsTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"USPs Video Url\" name=\"video_url\" controlId=\"domain-build-usps-video_url\">\n <input type=\"text\" id=\"domain-build-usps-video_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\"\n aria-label=\"Video Url\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container label=\"USPs Description\" name=\"description\" controlId=\"domain-build-usps-description\">\n <textarea id=\"domain-build-usps-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.UspsDescription' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n </div>\n <!-- USP Items -->\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(uspsItems, $event)\">\n @for (item of f['usps'].get('items')['controls']; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-sm-10\">\n <pw-input-container label=\"Item Description\" name=\"description\" [controlId]=\"'domain-build-usps-item-desc-' + i\">\n <textarea [id]=\"'domain-build-usps-item-desc-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ItemDescription' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n </div>\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeUspItem(i)\"\n (keydown.enter)=\"removeUspItem(i)\"\n (keydown.space)=\"removeUspItem(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addUspItem()\">\n + Add USP Item\n </button>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"5\">\n <p-accordion-header>Partners (Clients) Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4 mb-4\" formGroupName=\"partners\">\n <h4 class=\"mb-4\">Partners (Clients) Section</h4>\n <!-- Title -->\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Partner Title\" name=\"title\" controlId=\"domain-build-partners-title\">\n <input type=\"text\" id=\"domain-build-partners-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.PartnersTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n </div>\n <!-- Description -->\n <div class=\"col-12\">\n <pw-input-container label=\"Partners Description\" name=\"description\" controlId=\"domain-build-partners-description\">\n <textarea id=\"domain-build-partners-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.PartnersDescription' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n </div>\n <!-- Partner Items with Drag Support -->\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(partnersItems, $event)\">\n @for (item of partnersItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <!-- Name -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Name\" class=\"col-12\" name=\"name\" [controlId]=\"'domain-build-partner-name-' + i\">\n <input [id]=\"'domain-build-partner-name-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Name' | transloco\" class=\"form-control\" formControlName=\"name\" id=\"input_name_11\" name=\"input_name_11\"\n aria-label=\"Name\"/>\n </pw-input-container>\n </div>\n <!-- Blog URL + Drag Handle -->\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog Url\" name=\"blog_url\" [controlId]=\"'domain-build-partner-blog_url-' + i\">\n <input [id]=\"'domain-build-partner-blog_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"blog_url\" id=\"input_blog_url_12\" name=\"input_blog_url_12\"\n aria-label=\"Blog Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <!-- Video URL -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Video Url\" name=\"video_url\" [controlId]=\"'domain-build-partner-video_url-' + i\">\n <input [id]=\"'domain-build-partner-video_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\" id=\"input_video_url_13\" name=\"input_video_url_13\"\n aria-label=\"Video Url\"/>\n </pw-input-container>\n </div>\n <!-- Image URL -->\n <div class=\"col-md-6\">\n <pw-input-container label=\"Image Url\" name=\"image_url\" [controlId]=\"'domain-build-partner-image_url-' + i\">\n <input [id]=\"'domain-build-partner-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_14\" name=\"input_image_url_14\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n </div>\n <!-- Delete Icon -->\n <div class=\"col-md-12 text-end mt-2\">\n <i\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n (click)=\"removePartnerItem(i)\"\n (keydown.enter)=\"removePartnerItem(i)\"\n (keydown.space)=\"removePartnerItem(i)\"\n class=\"fa fa-trash delete-icon text-danger\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <!-- Add New Partner -->\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addPartnerItem()\">+ Add Partner</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"6\">\n <p-accordion-header>Testimonials Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"testimonials\">\n <h4 class=\"mb-4\">Testimonials Section</h4>\n <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"testimonials_title\" controlId=\"domain-build-testimonials-title\">\n <input type=\"text\" id=\"domain-build-testimonials-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.TestimonialsTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"testimonials_description\" controlId=\"domain-build-testimonials-description\">\n <textarea id=\"domain-build-testimonials-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.TestimonialsDescription' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n <!-- Items List -->\n <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(testimonialsItems, $event)\">\n @for (item of testimonialsItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-md-6\">\n <pw-input-container label=\"Name\" name=\"name\" [controlId]=\"'domain-build-testimonial-name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-name-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Name' | transloco\" class=\"form-control\" formControlName=\"name\" id=\"input_name_16\" name=\"input_name_16\"\n aria-label=\"Name\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog URL\" name=\"blog_url\" [controlId]=\"'domain-build-testimonial-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-blog_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"blog_url\" id=\"input_blog_url_17\" name=\"input_blog_url_17\"\n aria-label=\"Blog Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-testimonial-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_18\" name=\"input_image_url_18\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-testimonial-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-testimonial-video_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\" id=\"input_video_url_19\" name=\"input_video_url_19\"\n aria-label=\"Video Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Testimonial\" class=\"col-md-10\" name=\"testimonial\" [controlId]=\"'domain-build-testimonial-text-' + i\">\n <textarea [id]=\"'domain-build-testimonial-text-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Testimonial' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"testimonial\"\n aria-label=\"Testimonial\"></textarea>\n </pw-input-container>\n <div class=\"col-md-2 d-flex align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n (click)=\"removeTestimonialItem(i)\"\n (keydown.enter)=\"removeTestimonialItem(i)\"\n (keydown.space)=\"removeTestimonialItem(i)\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addTestimonialItem()\">\n + Add Testimonial\n </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"7\">\n <p-accordion-header>Video Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"videos\">\n <h4 class=\"mb-3\">Video Section</h4>\n <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"videos_title\" controlId=\"domain-build-videos-title\">\n <input type=\"text\" id=\"domain-build-videos-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.VideosTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"videos_description\" controlId=\"domain-build-videos-description\">\n <textarea id=\"domain-build-videos-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.VideosDescription' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n <!-- Video Items -->\n <div\n formArrayName=\"items\"\n class=\"col-12 mt-3\"\n cdkDropList\n (cdkDropListDropped)=\"dropItems(videosItems, $event)\"\n >\n @for (item of videosItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-md-6\">\n <pw-input-container label=\"Title\" name=\"title\" [controlId]=\"'domain-build-video-item-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_21\" name=\"input_title_21\"\n aria-label=\"Title\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Blog URL\" name=\"blog_url\" [controlId]=\"'domain-build-video-item-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-blog_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"blog_url\" id=\"input_blog_url_22\" name=\"input_blog_url_22\"\n aria-label=\"Blog Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-video-item-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_23\" name=\"input_image_url_23\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-video-item-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-video-item-video_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\" id=\"input_video_url_24\" name=\"input_video_url_24\"\n aria-label=\"Video Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-md-10\" name=\"description\" [controlId]=\"'domain-build-video-item-description-' + i\">\n <textarea [id]=\"'domain-build-video-item-description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n <div class=\"col-md-2 d-flex align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeVideoItem(i)\"\n (keydown.enter)=\"removeVideoItem(i)\"\n (keydown.space)=\"removeVideoItem(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addVideoItem()\">\n + Add Video\n </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"8\">\n <p-accordion-header>Call to Actions Section (CTAs)</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4 mb-4\" formGroupName=\"ctas\">\n <h4 class=\"mb-4\">CTAs Section</h4>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Title\" name=\"title\" controlId=\"domain-build-ctas-title\">\n <input type=\"text\" id=\"domain-build-ctas-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtasTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Image URL\" name=\"image_url\" controlId=\"domain-build-ctas-image_url\">\n <input type=\"text\" id=\"domain-build-ctas-image_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\"\n aria-label=\"Image Url\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Button Text\" name=\"button_text\" controlId=\"domain-build-ctas-button_text\">\n <input type=\"text\" id=\"domain-build-ctas-button_text\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ButtonText' | transloco\" class=\"form-control\" formControlName=\"button_text\"\n aria-label=\"Button Text\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container label=\"Description\" name=\"description\" controlId=\"domain-build-ctas-description\">\n <input type=\"text\" id=\"domain-build-ctas-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtasDescription' | transloco\" class=\"form-control\" formControlName=\"description\"\n aria-label=\"Description\" />\n </pw-input-container>\n </div>\n <!-- CTA Items -->\n <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(ctasItems, $event)\">\n @for (item of ctasItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 align-items-start\"\n cdkDrag\n >\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Image URL\" name=\"image_url\" [controlId]=\"'domain-build-cta-item-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_29\" name=\"input_image_url_29\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Cta URL\" name=\"cta_url\" [controlId]=\"'domain-build-cta-item-cta_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-cta_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"cta_url\" id=\"input_cta_url_30\" name=\"input_cta_url_30\"\n aria-label=\"Cta Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"Video URL\" name=\"video_url\" [controlId]=\"'domain-build-cta-item-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-cta-item-video_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\" id=\"input_video_url_31\" name=\"input_video_url_31\"\n aria-label=\"Video Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"CTA Title\" name=\"title\" [controlId]=\"'domain-build-cta-item-title-' + i\">\n <input [id]=\"'domain-build-cta-item-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtaTitle' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_32\" name=\"input_title_32\"\n aria-label=\"Title\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-6\">\n <pw-input-container label=\"CTA Description\" name=\"description\" [controlId]=\"'domain-build-cta-item-description-' + i\">\n <input [id]=\"'domain-build-cta-item-description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtaDescription' | transloco\" class=\"form-control\" formControlName=\"description\" id=\"input_description_33\" name=\"input_description_33\"\n aria-label=\"Description\"/>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-md-5\">\n <pw-input-container label=\"Button Text\" name=\"button_text\" [controlId]=\"'domain-build-cta-item-button_text-' + i\">\n <input [id]=\"'domain-build-cta-item-button_text-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ButtonText' | transloco\" class=\"form-control\" formControlName=\"button_text\" id=\"input_button_text_34\" name=\"input_button_text_34\"\n aria-label=\"Button Text\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex align-items-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (click)=\"removeCtasItem(i)\"\n (keydown.enter)=\"removeCtasItem(i)\"\n (keydown.space)=\"removeCtasItem(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addCtasItem()\">+ Add CTA Item</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"9\">\n <p-accordion-header>Integrations Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"integrations\">\n <h4 class=\"mb-3\">Integrations Section</h4>\n <pw-input-container label=\"Title\" class=\"col-12\" name=\"title\" controlId=\"domain-build-integrations-title\">\n <input type=\"text\" id=\"domain-build-integrations-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.IntegrationsSectionTitle' | transloco\" class=\"form-control\" formControlName=\"title\"\n aria-label=\"Title\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"description\" controlId=\"domain-build-integrations-description\">\n <textarea id=\"domain-build-integrations-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.IntegrationsSectionDescription' | transloco\" class=\"form-control\" formControlName=\"description\" rows=\"3\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(integrationsItems, $event)\">\n @for (item of integrationsItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3 rounded bg-light\"\n cdkDrag\n >\n <pw-input-container label=\"Title\" class=\"col-md-6\" name=\"title\" [controlId]=\"'domain-build-integration-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_36\" name=\"input_title_36\"\n aria-label=\"Title\"/>\n </pw-input-container>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Description\" name=\"description\" [controlId]=\"'domain-build-integration-description-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\" class=\"form-control\" formControlName=\"description\" id=\"input_description_37\" name=\"input_description_37\"\n aria-label=\"Description\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"Blog URL\" class=\"col-md-6\" name=\"blog_url\" [controlId]=\"'domain-build-integration-blog_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-blog_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"blog_url\" id=\"input_blog_url_38\" name=\"input_blog_url_38\"\n aria-label=\"Blog Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-integration-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_39\" name=\"input_image_url_39\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Video URL\" class=\"col-md-6\" name=\"video_url\" [controlId]=\"'domain-build-integration-video_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-integration-video_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"video_url\" id=\"input_video_url_40\" name=\"input_video_url_40\"\n aria-label=\"Video Url\"/>\n </pw-input-container>\n <div class=\"col-md-6 d-flex align-items-end justify-content-end\">\n <i\n class=\"fa fa-trash delete-icon align-self-center\"\n (click)=\"removeIntegrationItem(i)\"\n (keydown.enter)=\"removeIntegrationItem(i)\"\n (keydown.space)=\"removeIntegrationItem(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addIntegrationItem()\">+ Add Integration</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"10\">\n <p-accordion-header>Contact Us Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"contact_us\">\n <h4 class=\"mb-3\">Contact Us Section</h4>\n <pw-input-container label=\"Url\" class=\"col-md-6\" name=\"url\" controlId=\"domain-build-contact_us-url\">\n <input type=\"text\" id=\"domain-build-contact_us-url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"url\"\n aria-label=\"Url\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" class=\"col-12\" name=\"contact_us_description\" controlId=\"domain-build-contact_us-description\">\n <textarea id=\"domain-build-contact_us-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\" rows=\"3\" class=\"form-control\" formControlName=\"description\"\n aria-label=\"Description\"></textarea>\n </pw-input-container>\n <div formArrayName=\"questions\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsQuestions, $event)\">\n @for (questionGroup of contactUsQuestions.controls; track questionGroup; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-3\"\n cdkDrag\n >\n <pw-input-container label=\"Question\" class=\"col-md-10\" name=\"question\" [controlId]=\"'domain-build-contact_us-question-' + i\">\n <input type=\"text\" [id]=\"'domain-build-contact_us-question-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Question' | transloco\" class=\"form-control\" formControlName=\"question\" id=\"input_question_42\" name=\"input_question_42\"\n aria-label=\"Question\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeContactUsQuestion(i)\"\n (keydown.enter)=\"removeContactUsQuestion(i)\"\n (keydown.space)=\"removeContactUsQuestion(i)\"\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder question\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-12 mt-3\" formArrayName=\"options\" cdkDropList [cdkDropListData]=\"getQuestionOptions(i).controls\" (cdkDropListDropped)=\"dropContactUsOptions(i, $event)\">\n @for (option of getQuestionOptions(i).controls; track option; let j = $index) {\n <div\n class=\"row align-items-center mb-2 border p-3\"\n [formGroupName]=\"j\"\n cdkDrag\n >\n <pw-input-container label=\"Option\" class=\"col-md-10\" name=\"option\" [controlId]=\"'domain-build-contact_us-option-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-contact_us-option-' + i + '-' + j\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Option' | transloco\" class=\"form-control\" formControlName=\"option\" id=\"input_option_43\" name=\"input_option_43\"\n aria-label=\"Option\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeContactUsOption(i, j)\"\n (keydown.enter)=\"removeContactUsOption(i, j)\"\n (keydown.space)=\"removeContactUsOption(i, j)\"\n pTooltip=\"Remove Option\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder option\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start\">\n <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addContactUsOption(i)\">\n + Add Option\n </button>\n </div>\n </div>\n </div>\n }\n <div class=\"text-start mt-3\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addContactUsQuestion()\">\n + Add Question\n </button>\n </div>\n </div>\n <div formArrayName=\"hubspot\" class=\"col-12 mt-4\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsHubspotItems, $event)\">\n <h5 class=\"mb-4\">Hubspot Embeds</h5>\n @for (hub of contactUsHubspotItems.controls; track hub; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row border p-3 mb-2\"\n cdkDrag\n >\n <pw-input-container label=\"ID\" class=\"col-md-5\" name=\"id\" [controlId]=\"'domain-build-hubspot-id-' + i\">\n <input type=\"text\" [id]=\"'domain-build-hubspot-id-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HubspotId' | transloco\" class=\"form-control\" formControlName=\"id\" id=\"input_id_44\" name=\"input_id_44\"\n aria-label=\"Id\"/>\n </pw-input-container>\n <pw-input-container label=\"Position\" class=\"col-md-6\" name=\"position\" [controlId]=\"'domain-build-hubspot-position-' + i\">\n <input type=\"text\" [id]=\"'domain-build-hubspot-position-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HubspotPosition' | transloco\" class=\"form-control\" formControlName=\"position\" id=\"input_position_45\" name=\"input_position_45\"\n aria-label=\"Position\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"Div\" class=\"col-10\" name=\"div\" [controlId]=\"'domain-build-hubspot-div-' + i\">\n <textarea\n [id]=\"'domain-build-hubspot-div-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.HubspotDiv' | transloco\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"div\"\n [ngClass]=\"{ 'is-invalid': submitted && f['div']?.errors }\"\n\n aria-label=\"Div\" ></textarea>\n </pw-input-container>\n <div class=\"col-md-2 d-flex align-items-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon\"\n (click)=\"removeHubspotItem(i)\"\n (keydown.enter)=\"removeHubspotItem(i)\"\n (keydown.space)=\"removeHubspotItem(i)\"\n pTooltip=\"Remove Hubspot Embed\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\">\n </i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addHubspotItem()\">\n + Add Hubspot Embed\n </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"11\">\n <p-accordion-header>Book a Demo Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-4\">\n <div class=\"col-12\">\n <h4 class=\"mb-3\">{{ 'Admin.DomainConfig.BookDemoLinks' | transloco }}</h4>\n <div formGroupName=\"book_demo\">\n <pw-input-container label=\"Title\" name=\"title\" controlId=\"domain-build-book_demo-title\">\n <input type=\"text\" id=\"domain-build-book_demo-title\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" formControlName=\"title\" class=\"form-control\"\n aria-label=\"Title\" />\n </pw-input-container>\n <pw-input-container label=\"Description\" name=\"description\" controlId=\"domain-build-book_demo-description\">\n <input type=\"text\" id=\"domain-build-book_demo-description\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\" formControlName=\"description\" class=\"form-control\"\n aria-label=\"Description\" />\n </pw-input-container>\n <div formArrayName=\"items\" cdkDropList (cdkDropListDropped)=\"dropBookDemoLinks($event)\">\n @for (link of f['book_demo'].get('items')['controls']; track link; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3 border p-3 align-items-center\"\n cdkDrag\n >\n <div class=\"col-sm-5\">\n <pw-input-container label=\"Link Title\" name=\"title\" [controlId]=\"'domain-build-book_demo-link-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-book_demo-link-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.LinkTitle' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_48\" name=\"input_title_48\"\n aria-label=\"Title\"/>\n </pw-input-container>\n </div>\n <div class=\"col-sm-5\">\n <pw-input-container label=\"Link URL\" name=\"url\" [controlId]=\"'domain-build-book_demo-link-url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-book_demo-link-url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"url\" id=\"input_url_49\" name=\"input_url_49\"\n aria-label=\"Url\"/>\n </pw-input-container>\n </div>\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n pTooltip=\"Remove\" tooltipPosition=\"top\" appendTo=\"body\"\n (click)=\"removeBookDemoLink(i)\"\n (keydown.enter)=\"removeBookDemoLink(i)\"\n (keydown.space)=\"removeBookDemoLink(i)\"\n class=\"fa fa-trash delete-icon text-danger\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addBookDemoLink()\">\n + Add Book Demo Link\n </button>\n </div>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"12\">\n <p-accordion-header>Navbar Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"navbar\">\n <h4 class=\"mb-3\">Navbar Section</h4>\n <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(navbarItems, $event)\">\n @for (item of navbarItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-center\">\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-navbar-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-navbar-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_50\" name=\"input_title_50\"\n aria-label=\"Title\"/>\n </pw-input-container>\n <pw-input-container label=\"Path\" class=\"col-md-5\" name=\"path\" [controlId]=\"'domain-build-navbar-path-' + i\">\n <input type=\"text\" [id]=\"'domain-build-navbar-path-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Path' | transloco\" class=\"form-control\" formControlName=\"path\" id=\"input_path_51\" name=\"input_path_51\"\n aria-label=\"Path\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeNavbarItem(i)\"\n (keydown.enter)=\"removeNavbarItem(i)\"\n (keydown.space)=\"removeNavbarItem(i)\"\n pTooltip=\"Remove Navbar Item\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n <div\n class=\"col-12 mt-3\"\n formArrayName=\"subtitles\"\n cdkDropList\n [cdkDropListData]=\"getNavbarSubtitles(i).controls\"\n (cdkDropListDropped)=\"dropNavbarSubtitles(i, $event)\"\n >\n @for (sub of getNavbarSubtitles(i).controls; track sub; let j = $index) {\n <div\n [formGroupName]=\"j\"\n class=\"row border p-3 mb-2 align-items-center\"\n cdkDrag\n >\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Title\" name=\"title\" [controlId]=\"'domain-build-navbar-subtitle-title-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-navbar-subtitle-title-' + i + '-' + j\" [placeholder]=\"'Admin.DomainConfig.Placeholder.SubtitleTitle' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_52\" name=\"input_title_52\"\n aria-label=\"Title\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Path\" name=\"path\" [controlId]=\"'domain-build-navbar-subtitle-path-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-navbar-subtitle-path-' + i + '-' + j\" [placeholder]=\"'Admin.DomainConfig.Placeholder.SubtitlePath' | transloco\" class=\"form-control\" formControlName=\"path\" id=\"input_path_53\" name=\"input_path_53\"\n aria-label=\"Path\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeSubtitle(i, j)\"\n (keydown.enter)=\"removeSubtitle(i, j)\"\n (keydown.space)=\"removeSubtitle(i, j)\"\n pTooltip=\"Remove Subtitle\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder subtitle\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <button type=\"button\" class=\"btn btn-sm btn-primary mt-2\" (click)=\"addSubtitle(i)\">\n + Add Subtitle\n </button>\n </div>\n </div>\n }\n <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addNavbarItem()\">\n + Add Navbar Item\n </button>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"13\">\n <p-accordion-header>Footer Links Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"footer_links\">\n <h4 class=\"mb-3\">Footer Links Section</h4>\n <div\n formArrayName=\"items\"\n class=\"col-12\"\n cdkDropList\n (cdkDropListDropped)=\"dropItems(footerLinksItems, $event)\"\n >\n @for (item of footerLinksItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-center\">\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-footer-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-footer-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_54\" name=\"input_title_54\"\n aria-label=\"Title\"/>\n </pw-input-container>\n <pw-input-container label=\"Path\" class=\"col-md-5\" name=\"path\" [controlId]=\"'domain-build-footer-path-' + i\">\n <input type=\"text\" [id]=\"'domain-build-footer-path-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Path' | transloco\" class=\"form-control\" formControlName=\"path\" id=\"input_path_55\" name=\"input_path_55\"\n aria-label=\"Path\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeFooterLinkItem(i)\"\n (keydown.enter)=\"removeFooterLinkItem(i)\"\n (keydown.space)=\"removeFooterLinkItem(i)\"\n pTooltip=\"Remove Footer Item\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n <div\n class=\"col-12 mt-3\"\n formArrayName=\"subtitles\"\n cdkDropList\n [cdkDropListData]=\"getFooterSubtitles(i).controls\"\n (cdkDropListDropped)=\"dropFooterSubtitles(i, $event)\"\n >\n @for (sub of getFooterSubtitles(i).controls; track sub; let j = $index) {\n <div\n [formGroupName]=\"j\"\n class=\"row border p-3 mb-2 align-items-center\"\n cdkDrag\n >\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Title\" name=\"title\" [controlId]=\"'domain-build-footer-subtitle-title-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-footer-subtitle-title-' + i + '-' + j\" [placeholder]=\"'Admin.DomainConfig.Placeholder.SubtitleTitle' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_56\" name=\"input_title_56\"\n aria-label=\"Title\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-5\">\n <pw-input-container label=\"Subtitle Path\" name=\"path\" [controlId]=\"'domain-build-footer-subtitle-path-' + i + '-' + j\">\n <input type=\"text\" [id]=\"'domain-build-footer-subtitle-path-' + i + '-' + j\" [placeholder]=\"'Admin.DomainConfig.Placeholder.SubtitlePath' | transloco\" class=\"form-control\" formControlName=\"path\" id=\"input_path_57\" name=\"input_path_57\"\n aria-label=\"Path\"/>\n </pw-input-container>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeFooterSubtitle(i, j)\"\n (keydown.enter)=\"removeFooterSubtitle(i, j)\"\n (keydown.space)=\"removeFooterSubtitle(i, j)\"\n pTooltip=\"Remove Subtitle\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"col-md-1 d-flex justify-content-end\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder subtitle\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <button\n type=\"button\"\n class=\"btn btn-sm btn-primary mt-2\"\n (click)=\"addFooterSubtitle(i)\"\n >\n + Add Subtitle\n </button>\n </div>\n </div>\n }\n <button\n type=\"button\"\n class=\"btn btn-primary mt-2 mb-2\"\n (click)=\"addFooterLinkItem()\"\n >\n + Add Footer Link\n </button>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"14\">\n <p-accordion-header>Guides Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\" formGroupName=\"guides\">\n <h4 class=\"mb-3\">Guides Section</h4>\n <div formArrayName=\"items\" class=\"col-12\">\n <div cdkDropList (cdkDropListDropped)=\"dropItems(guidesItems, $event)\">\n @for (item of guidesItems.controls; track item; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"border p-3 mb-3\"\n cdkDrag\n >\n <div class=\"row align-items-start\">\n <pw-input-container label=\"Title\" class=\"col-md-5\" name=\"title\" [controlId]=\"'domain-build-guide-title-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-title-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Title' | transloco\" class=\"form-control\" formControlName=\"title\" id=\"input_title_58\" name=\"input_title_58\"\n aria-label=\"Title\"/>\n </pw-input-container>\n <pw-input-container label=\"Button Text\" class=\"col-md-6\" name=\"button_text\" [controlId]=\"'domain-build-guide-button_text-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-button_text-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ButtonText' | transloco\" class=\"form-control\" formControlName=\"button_text\" id=\"input_button_text_59\" name=\"input_button_text_59\"\n aria-label=\"Button Text\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n <div class=\"row mt-2\">\n <pw-input-container label=\"Image URL\" class=\"col-md-6\" name=\"image_url\" [controlId]=\"'domain-build-guide-image_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-image_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"image_url\" id=\"input_image_url_60\" name=\"input_image_url_60\"\n aria-label=\"Image Url\"/>\n </pw-input-container>\n <pw-input-container label=\"Guide URL\" class=\"col-md-6\" name=\"guide_url\" [controlId]=\"'domain-build-guide-guide_url-' + i\">\n <input type=\"text\" [id]=\"'domain-build-guide-guide_url-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"guide_url\" id=\"input_guide_url_61\" name=\"input_guide_url_61\"\n aria-label=\"Guide Url\"/>\n </pw-input-container>\n </div>\n <div class=\"row mt-2\">\n <pw-input-container label=\"Description\" class=\"col-md-11\" name=\"description\" [controlId]=\"'domain-build-guide-description-' + i\">\n <textarea\n [id]=\"'domain-build-guide-description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\"\n class=\"form-control\"\n rows=\"5\"\n formControlName=\"description\"\n [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n\n aria-label=\"Description\" ></textarea>\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-center mt-3\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeGuideItem(i)\"\n (keydown.enter)=\"removeGuideItem(i)\"\n (keydown.space)=\"removeGuideItem(i)\"\n pTooltip=\"Remove Guide\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n </div>\n }\n </div>\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addGuideItem()\">\n + Add Guide\n </button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"15\">\n <p-accordion-header>AB Tests Section</p-accordion-header>\n <p-accordion-content>\n <div class=\"row mt-3 mb-4\">\n <h4 class=\"mb-3\">AB Tests</h4>\n <div formArrayName=\"ab_tests\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(abTests, $event)\">\n @for (abTest of abTests.controls; track abTest; let i = $index) {\n <div\n [formGroupName]=\"i\"\n class=\"row mb-3 border p-3\"\n cdkDrag\n >\n <pw-input-container label=\"Description\" class=\"col-md-5\" name=\"description\" [controlId]=\"'domain-build-ab_test-description-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-description-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Description' | transloco\" class=\"form-control\" formControlName=\"description\" id=\"input_description_62\" name=\"input_description_62\"\n aria-label=\"Description\"/>\n </pw-input-container>\n <pw-input-container label=\"Experiment Name\" class=\"col-md-6\" name=\"experiment_name\" [controlId]=\"'domain-build-ab_test-experiment_name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-experiment_name-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.ExperimentName' | transloco\" class=\"form-control\" formControlName=\"experiment_name\" id=\"input_experiment_name_63\" name=\"input_experiment_name_63\"\n aria-label=\"Experiment Name\"/>\n </pw-input-container>\n <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n <i\n class=\"fa fa-bars cursor-move\"\n cdkDragHandle\n pTooltip=\"Drag to reorder\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <pw-input-container label=\"DB Shard\" class=\"col-md-6\" name=\"db_shard\" [controlId]=\"'domain-build-ab_test-db_shard-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-db_shard-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.DbShard' | transloco\" class=\"form-control\" formControlName=\"db_shard\" id=\"input_db_shard_64\" name=\"input_db_shard_64\"\n aria-label=\"Db Shard\"/>\n </pw-input-container>\n <pw-input-container label=\"Microservice Name\" class=\"col-md-6\" name=\"microservice_name\" [controlId]=\"'domain-build-ab_test-microservice_name-' + i\">\n <input type=\"text\" [id]=\"'domain-build-ab_test-microservice_name-' + i\" [placeholder]=\"'Admin.DomainConfig.Placeholder.MicroserviceName' | transloco\" class=\"form-control\" formControlName=\"microservice_name\" id=\"input_microservice_name_65\" name=\"input_microservice_name_65\"\n aria-label=\"Microservice Name\"/>\n </pw-input-container>\n <div class=\"col-md-12 text-end mt-2\">\n <i\n class=\"fa fa-trash delete-icon text-danger\"\n (click)=\"removeAbTest(i)\"\n (keydown.enter)=\"removeAbTest(i)\"\n (keydown.space)=\"removeAbTest(i)\"\n pTooltip=\"Remove AB Test\" tooltipPosition=\"top\" appendTo=\"body\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </div>\n }\n <div class=\"text-start mt-2\">\n <button type=\"button\" class=\"btn btn-primary\" (click)=\"addAbTest()\">+ Add AB Test</button>\n </div>\n </div>\n </div>\n </p-accordion-content>\n</p-accordion-panel>\n<p-accordion-panel value=\"16\">\n <p-accordion-header>Coming soon pages - Subscribe to newsletter (TO DISCONTINUE)</p-accordion-header>\n <p-accordion-content>\n <div class=\"mb-3\">\n <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n /join/cs1, /join/cs2, etc.</p>\n </div>\n @if (shardUrl) {\n <div class=\"text-end\">\n <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveCs' | transloco\" tooltipPosition=\"top\">\n <i class=\"far fa-info-circle text-muted\"></i>\n </span> : <a [href]=\"shardUrl + '/join/cs1'\" target=\"_blank\">{{ shardUrl }}/join/cs1</a></span>\n </div>\n }\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsProduct' | transloco\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsProduct' | transloco\" name=\"cs_product_id\" controlId=\"domain-build-cs_product_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-autoComplete appendTo=\"body\" [attr.aria-labelledby]=\"'domain-build-cs_product_id-label'\" [suggestions]=\"productsList\" formControlName=\"cs_product_id\" dataKey=\"id\" optionLabel=\"name\"\n [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n [placeholder]=\"'Admin.DomainConfig.Placeholder.SearchProduct' | transloco\" [inputStyle]=\"\n form.get('cs_product_id').touched &&\n form.get('cs_product_id').invalid\n ? { border: '1px solid #ff586b' }\n : {}\n \" [multiple]=\"false\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsCrmSourceId' | transloco\" name=\"cs_crm_source_id\" controlId=\"domain-build-cs_crm_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCrmSourceId' | transloco\">\n <p-select inputId=\"domain-build-cs_crm_source_id\"\n [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-cs_crm_source_id-label'\" formControlName=\"cs_crm_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_crm_source_id']?.errors }\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSource' | transloco\"\n optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfSourceId' | transloco\" name=\"cs_pdf_source_id\" controlId=\"domain-build-cs_pdf_source_id\" [useAriaLabelledbyOnly]=\"true\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsPdfSourceId' | transloco\">\n <p-select inputId=\"domain-build-cs_pdf_source_id\"\n [options]=\"crmSourcesList\" [attr.aria-labelledby]=\"'domain-build-cs_pdf_source_id-label'\" formControlName=\"cs_pdf_source_id\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_pdf_source_id']?.errors }\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CrmSource' | transloco\"\n optionValue=\"id\" optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\"></div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsVideoUrl' | transloco\" name=\"cs_video_url\" controlId=\"domain-build-cs_video_url\" [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsVideoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-cs_video_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"cs_video_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_video_url'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.CsVideoUrl' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsBookDemoUrl' | transloco\" name=\"cs_book_demo_url\" controlId=\"domain-build-cs_book_demo_url\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsBookDemoUrl' | transloco\">\n <input type=\"text\" id=\"domain-build-cs_book_demo_url\" [placeholder]=\"'Admin.DomainConfig.Placeholder.Url' | transloco\" class=\"form-control\" formControlName=\"cs_book_demo_url\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_book_demo_url'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.CsBookDemoUrl' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsCtaIframe' | transloco\" name=\"cs_cta_iframe\" controlId=\"domain-build-cs_cta_iframe\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCtaIframe' | transloco\">\n <textarea id=\"domain-build-cs_cta_iframe\" [placeholder]=\"'Admin.DomainConfig.Placeholder.CtaIframe' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"cs_cta_iframe\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_cta_iframe'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.CsCtaIframe' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsJoinMessage' | transloco\" name=\"cs_join_message\" controlId=\"domain-build-cs_join_message\"\n [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsJoinMessage' | transloco\">\n <textarea id=\"domain-build-cs_join_message\" [placeholder]=\"'Admin.DomainConfig.Placeholder.JoinMessage' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"cs_join_message\"\n [ngClass]=\"{ 'is-invalid': submitted && f['cs_join_message'].errors }\"\n [attr.aria-label]=\"'Admin.DomainConfig.CsJoinMessage' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n <div class=\"col-12\">\n <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfDownloadText' | transloco\" name=\"cs_pdf_download_text\" controlId=\"domain-build-cs_pdf_download_text\"\n [showTooltip]=\"true\" [tooltipText]=\"\n 'Admin.DomainConfig.Tooltip.CsPdfDownloadText' | transloco\n \">\n <textarea id=\"domain-build-cs_pdf_download_text\" [placeholder]=\"'Admin.DomainConfig.Placeholder.PdfDownloadText' | transloco\" class=\"form-control\" rows=\"3\" formControlName=\"cs_pdf_download_text\" [ngClass]=\"{\n 'is-invalid': submitted && f['cs_pdf_download_text'].errors\n }\"\n [attr.aria-label]=\"'Admin.DomainConfig.CsPdfDownloadText' | transloco\">\n </textarea>\n </pw-input-container>\n </div>\n </div>\n <div class=\"row gy-4\" matchHeight=\"card\">\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image-label\">{{ 'Admin.DomainConfig.CsImage' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.CsImage' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n [controlName]=\"'cs_image'\" [previewData]=\"data['cs_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image2-label\">{{ 'Admin.DomainConfig.CsImage2' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.CsImage2' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image2'\"\n [controlName]=\"'cs_image2'\" [previewData]=\"data['cs_image2']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_pdf_image-label\">{{ 'Admin.DomainConfig.CsPdfImage' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.CsPdfImage' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image'\"\n [controlName]=\"'cs_pdf_image'\" [previewData]=\"data['cs_pdf_image']\">\n </pw-custom-uploader>\n </div>\n <div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image_bg-label\">{{ 'Admin.DomainConfig.CsImageBg' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.CsImageBg' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg'\"\n [controlName]=\"'cs_image_bg'\" [previewData]=\"data['cs_image_bg']\">\n </pw-custom-uploader>\n</div>\n<div class=\"col-md-4\">\n <span class=\"pw-label-style\" id=\"domain-build-cs_image_bg2-label\">{{ 'Admin.DomainConfig.CsImageBg2' | transloco }} <span [pTooltip]=\"'Admin.DomainConfig.Tooltip.CsImageBg2' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n</span>\n<pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg2'\"\n [controlName]=\"'cs_image_bg2'\" [previewData]=\"data['cs_image_bg2']\">\n</pw-custom-uploader>\n</div>\n</div>\n</p-accordion-content>\n</p-accordion-panel>\n</p-accordion>\n</div>\n<div class=\"col-12 text-end mt-3\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n</div>\n</form>\n}\n@if (!data?.host_name && !isLoading) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"> </pw-no-data>\n </div>\n}\n\n\n<ng-template #partnerCropper let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Partner Image</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n <div class=\"modal-body\">\n <small>You can upload JPG, PNG, or GIF files. Avoid images with celebrities, nudity, or artwork.</small>\n <pw-image-cropper\n aspectRatio=\"auto\"\n (imageSelectionEvent)=\"onPartnerImageSelected($event)\"\n (closeEvent)=\"onClosePartnerModal()\"\n ></pw-image-cropper>\n </div>\n</ng-template>\n" }]
|
|
1757
1757
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.AdminService }, { type: i1$1.ProductService }, { type: i2.NgbModal }, { type: i0.ChangeDetectorRef }, { type: i9.FormBuilder }], propDecorators: { uploader: [{
|
|
1758
1758
|
type: ViewChildren,
|
|
1759
1759
|
args: [CustomUploaderComponent]
|
|
@@ -4846,11 +4846,11 @@ class NewsletterUsersListComponent extends AppBaseComponent {
|
|
|
4846
4846
|
super.ngOnDestroy();
|
|
4847
4847
|
}
|
|
4848
4848
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: NewsletterUsersListComponent, deps: [{ token: i0.Injector }, { token: i1.AdminService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4849
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: NewsletterUsersListComponent, isStandalone: false, selector: "pw-newsletter-users-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\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=\"m-subheader__title m-subheader__title--separator\">Newsletter recipients</h3>\n </div>\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\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt\n [value]=\"data.newsletter_users\"\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=\"text-end\">\n <label for=\"newsletter-users-list-search\" class=\"visually-hidden\">Search users</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=\"newsletter-users-list-search\"\n name=\"newsletter-users-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search users...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n aria-label=\"Search users...\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Lable.Name' | transloco }}\n <p-sortIcon field=\"first_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"email\">\n {{ 'Lable.Email' | transloco }}\n <p-sortIcon field=\"email\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"joined_at\">\n {{ 'Admin.NewsletterItem.JoinedAt' | transloco }}\n <p-sortIcon field=\"joined_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_sign_in_at\">\n {{ 'Admin.NewsletterItem.LastSignInAt' | transloco }}\n <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_opened\">\n {{ 'Admin.NewsletterItem.LastOpened' | transloco }}\n <p-sortIcon field=\"last_opened\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"open_count\">\n {{ 'Admin.NewsletterItem.OpenCount' | transloco }}\n <p-sortIcon field=\"open_count\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"clicked_at\">\n {{ 'Admin.NewsletterItem.ClickedAt' | transloco }}\n <p-sortIcon field=\"clicked_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"clicked_count\">\n {{ 'Admin.NewsletterItem.ClickedCount' | transloco }}\n <p-sortIcon field=\"clicked_count\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-user>\n <tr>\n <td data-head=\"Name\">\n <a [routerLink]=\"['/members', user?.slug]\">{{ user?.first_name }} {{ user?.last_name }}</a>\n </td>\n <td data-head=\"Email\">{{ user?.email }}</td>\n <td data-head=\"Joined At\">{{ user?.joined_at | dateFormat }}</td>\n <td data-head=\"Last Sign In At\"
|
|
4849
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: NewsletterUsersListComponent, isStandalone: false, selector: "pw-newsletter-users-list", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\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=\"m-subheader__title m-subheader__title--separator\">Newsletter recipients</h3>\n </div>\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\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt\n [value]=\"data.newsletter_users\"\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=\"text-end\">\n <label for=\"newsletter-users-list-search\" class=\"visually-hidden\">Search users</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=\"newsletter-users-list-search\"\n name=\"newsletter-users-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search users...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n aria-label=\"Search users...\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Lable.Name' | transloco }}\n <p-sortIcon field=\"first_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"email\">\n {{ 'Lable.Email' | transloco }}\n <p-sortIcon field=\"email\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"joined_at\">\n {{ 'Admin.NewsletterItem.JoinedAt' | transloco }}\n <p-sortIcon field=\"joined_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_sign_in_at\">\n {{ 'Admin.NewsletterItem.LastSignInAt' | transloco }}\n <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_opened\">\n {{ 'Admin.NewsletterItem.LastOpened' | transloco }}\n <p-sortIcon field=\"last_opened\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"open_count\">\n {{ 'Admin.NewsletterItem.OpenCount' | transloco }}\n <p-sortIcon field=\"open_count\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"clicked_at\">\n {{ 'Admin.NewsletterItem.ClickedAt' | transloco }}\n <p-sortIcon field=\"clicked_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"clicked_count\">\n {{ 'Admin.NewsletterItem.ClickedCount' | transloco }}\n <p-sortIcon field=\"clicked_count\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-user>\n <tr>\n <td data-head=\"Name\">\n <a [routerLink]=\"['/members', user?.slug]\">{{ user?.first_name }} {{ user?.last_name }}</a>\n \n </td>\n <td data-head=\"Email\">{{ user?.email }}</td>\n <td data-head=\"Joined At\">{{ user?.joined_at | dateFormat }}</td>\n <td data-head=\"Last Sign In At\">\n @if (user?.current_sign_in_at | isOnline) {\n <pw-online-indicator [lastSeen]=\"user.current_sign_in_at\" />\n } @else {\n {{ user?.last_sign_in_at | dateFormat }}\n }\n </td>\n <td data-head=\"Last Opened\">{{ user?.last_opened }}</td>\n <td data-head=\"Open Count\">{{ user?.open_count }}</td>\n <td data-head=\"Clicked At\">{{ user?.clicked_at }}</td>\n <td data-head=\"Clicked Count\">{{ user?.clicked_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 @if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.NewsletterItem.NewsLetterRecipientsNoDataMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n", dependencies: [{ kind: "component", type: i3.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.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i6.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { 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$1.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.OnlineIndicatorComponent, selector: "pw-online-indicator", inputs: ["lastSeen"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.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" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.IsOnlinePipe, name: "isOnline" }] }); }
|
|
4850
4850
|
}
|
|
4851
4851
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: NewsletterUsersListComponent, decorators: [{
|
|
4852
4852
|
type: Component,
|
|
4853
|
-
args: [{ selector: 'pw-newsletter-users-list', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\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=\"m-subheader__title m-subheader__title--separator\">Newsletter recipients</h3>\n </div>\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\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt\n [value]=\"data.newsletter_users\"\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=\"text-end\">\n <label for=\"newsletter-users-list-search\" class=\"visually-hidden\">Search users</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=\"newsletter-users-list-search\"\n name=\"newsletter-users-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search users...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n aria-label=\"Search users...\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Lable.Name' | transloco }}\n <p-sortIcon field=\"first_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"email\">\n {{ 'Lable.Email' | transloco }}\n <p-sortIcon field=\"email\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"joined_at\">\n {{ 'Admin.NewsletterItem.JoinedAt' | transloco }}\n <p-sortIcon field=\"joined_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_sign_in_at\">\n {{ 'Admin.NewsletterItem.LastSignInAt' | transloco }}\n <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_opened\">\n {{ 'Admin.NewsletterItem.LastOpened' | transloco }}\n <p-sortIcon field=\"last_opened\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"open_count\">\n {{ 'Admin.NewsletterItem.OpenCount' | transloco }}\n <p-sortIcon field=\"open_count\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"clicked_at\">\n {{ 'Admin.NewsletterItem.ClickedAt' | transloco }}\n <p-sortIcon field=\"clicked_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"clicked_count\">\n {{ 'Admin.NewsletterItem.ClickedCount' | transloco }}\n <p-sortIcon field=\"clicked_count\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-user>\n <tr>\n <td data-head=\"Name\">\n <a [routerLink]=\"['/members', user?.slug]\">{{ user?.first_name }} {{ user?.last_name }}</a>\n </td>\n <td data-head=\"Email\">{{ user?.email }}</td>\n <td data-head=\"Joined At\">{{ user?.joined_at | dateFormat }}</td>\n <td data-head=\"Last Sign In At\"
|
|
4853
|
+
args: [{ selector: 'pw-newsletter-users-list', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\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=\"m-subheader__title m-subheader__title--separator\">Newsletter recipients</h3>\n </div>\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\n <div class=\"primeng-datatable-container actions-collapsed table-responsive\"\n [class.hideTable]=\"data.unfiltered_count === 0\">\n <p-table #dt\n [value]=\"data.newsletter_users\"\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=\"text-end\">\n <label for=\"newsletter-users-list-search\" class=\"visually-hidden\">Search users</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=\"newsletter-users-list-search\"\n name=\"newsletter-users-list-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search users...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n aria-label=\"Search users...\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Lable.Name' | transloco }}\n <p-sortIcon field=\"first_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"email\">\n {{ 'Lable.Email' | transloco }}\n <p-sortIcon field=\"email\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"joined_at\">\n {{ 'Admin.NewsletterItem.JoinedAt' | transloco }}\n <p-sortIcon field=\"joined_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_sign_in_at\">\n {{ 'Admin.NewsletterItem.LastSignInAt' | transloco }}\n <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_opened\">\n {{ 'Admin.NewsletterItem.LastOpened' | transloco }}\n <p-sortIcon field=\"last_opened\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"open_count\">\n {{ 'Admin.NewsletterItem.OpenCount' | transloco }}\n <p-sortIcon field=\"open_count\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"clicked_at\">\n {{ 'Admin.NewsletterItem.ClickedAt' | transloco }}\n <p-sortIcon field=\"clicked_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"clicked_count\">\n {{ 'Admin.NewsletterItem.ClickedCount' | transloco }}\n <p-sortIcon field=\"clicked_count\"></p-sortIcon>\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-user>\n <tr>\n <td data-head=\"Name\">\n <a [routerLink]=\"['/members', user?.slug]\">{{ user?.first_name }} {{ user?.last_name }}</a>\n \n </td>\n <td data-head=\"Email\">{{ user?.email }}</td>\n <td data-head=\"Joined At\">{{ user?.joined_at | dateFormat }}</td>\n <td data-head=\"Last Sign In At\">\n @if (user?.current_sign_in_at | isOnline) {\n <pw-online-indicator [lastSeen]=\"user.current_sign_in_at\" />\n } @else {\n {{ user?.last_sign_in_at | dateFormat }}\n }\n </td>\n <td data-head=\"Last Opened\">{{ user?.last_opened }}</td>\n <td data-head=\"Open Count\">{{ user?.open_count }}</td>\n <td data-head=\"Clicked At\">{{ user?.clicked_at }}</td>\n <td data-head=\"Clicked Count\">{{ user?.clicked_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 @if (data.unfiltered_count === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.NewsletterItem.NewsLetterRecipientsNoDataMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n" }]
|
|
4854
4854
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i1.AdminService }, { type: i0.ChangeDetectorRef }] });
|
|
4855
4855
|
|
|
4856
4856
|
class NewsletterInsightComponent extends AppBaseComponent {
|
|
@@ -6165,14 +6165,14 @@ class ProductDetailsComponent extends AppBaseComponent {
|
|
|
6165
6165
|
super.ngOnDestroy();
|
|
6166
6166
|
}
|
|
6167
6167
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", 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 }); }
|
|
6168
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", 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 (click)=\"back()\" class=\"previous\" aria-label=\"Back\"><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>{{ '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>{{ '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 [attr.aria-label]=\"'Label.Name' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.NickName' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.DocumentationUrl' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.Price' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.MinUnit' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.MaxUnit' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.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 [attr.aria-label]=\"'Admin.Products.TrialDays' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.MaxTrialHits' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.TrialHits' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.FeatureKey' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.PermissionKey' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.ProductKey' | transloco\" />\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\" id=\"product-dependency_products-label\" [pTooltip]=\"'Admin.Products.Tooltip.DependencyProducts' | transloco\" tooltipPosition=\"top\" appendTo=\"body\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\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\" id=\"product-roles-label\" [pTooltip]=\"'Admin.Subscriptions.Tooltip.AssignedRoles' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">{{ 'Admin.Products.AssignedRoles' | transloco }} <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\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 [attr.aria-label]=\"'Admin.Products.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: i5.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$2.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "motionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i7$2.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i7$2.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i7$2.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type: i6$1.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: i7.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$1.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$1.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$2.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: i14.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i14.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i14.LazyImgDirective, selector: "img" }, { kind: "directive", type: i14.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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
6168
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", 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 (click)=\"back()\" class=\"previous\" aria-label=\"Back\"><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>{{ '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>{{ '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 [attr.aria-label]=\"'Label.Name' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.NickName' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.DocumentationUrl' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.Price' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.MinUnit' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.MaxUnit' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.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 [attr.aria-label]=\"'Admin.Products.TrialDays' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.MaxTrialHits' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.TrialHits' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.FeatureKey' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.PermissionKey' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.ProductKey' | transloco\" />\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\" id=\"product-dependency_products-label\" [pTooltip]=\"'Admin.Products.Tooltip.DependencyProducts' | transloco\" tooltipPosition=\"top\" appendTo=\"body\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\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\" id=\"product-roles-label\" [pTooltip]=\"'Admin.Subscriptions.Tooltip.AssignedRoles' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">{{ 'Admin.Products.AssignedRoles' | transloco }} <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\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 [attr.aria-label]=\"'Admin.Products.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: i5.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$2.Accordion, selector: "p-accordion", inputs: ["value", "multiple", "styleClass", "expandIcon", "collapseIcon", "selectOnFocus", "transitionOptions", "motionOptions"], outputs: ["valueChange", "onClose", "onOpen"] }, { kind: "component", type: i7$2.AccordionPanel, selector: "p-accordion-panel, p-accordionpanel", inputs: ["value", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: i7$2.AccordionHeader, selector: "p-accordion-header, p-accordionheader" }, { kind: "component", type: i7$2.AccordionContent, selector: "p-accordion-content, p-accordioncontent" }, { kind: "component", type: i6$1.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: i7.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$1.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$1.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$2.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: i14.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i14.NumberDirective, selector: "input[numbersOnly]" }, { kind: "directive", type: i14.LazyImgDirective, selector: "img" }, { kind: "directive", type: i14.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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
6169
6169
|
}
|
|
6170
6170
|
__decorate([
|
|
6171
6171
|
ValidateForm('form')
|
|
6172
6172
|
], ProductDetailsComponent.prototype, "onSave", null);
|
|
6173
6173
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: ProductDetailsComponent, decorators: [{
|
|
6174
6174
|
type: Component,
|
|
6175
|
-
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 (click)=\"back()\" class=\"previous\" aria-label=\"Back\"><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>{{ '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>{{ '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 [attr.aria-label]=\"'Label.Name' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.NickName' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.DocumentationUrl' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.Price' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.MinUnit' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.MaxUnit' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.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 [attr.aria-label]=\"'Admin.Products.TrialDays' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.MaxTrialHits' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.TrialHits' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.FeatureKey' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.PermissionKey' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.ProductKey' | transloco\" />\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\" id=\"product-dependency_products-label\" [pTooltip]=\"'Admin.Products.Tooltip.DependencyProducts' | transloco\" tooltipPosition=\"top\" appendTo=\"body\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\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\" id=\"product-roles-label\" [pTooltip]=\"'Admin.Subscriptions.Tooltip.AssignedRoles' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">{{ 'Admin.Products.AssignedRoles' | transloco }} <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\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 [attr.aria-label]=\"'Admin.Products.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"] }]
|
|
6175
|
+
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 (click)=\"back()\" class=\"previous\" aria-label=\"Back\"><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>{{ '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>{{ '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 [attr.aria-label]=\"'Label.Name' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.NickName' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.DocumentationUrl' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.Price' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.MinUnit' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.MaxUnit' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.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 [attr.aria-label]=\"'Admin.Products.TrialDays' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.MaxTrialHits' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.TrialHits' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.FeatureKey' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.PermissionKey' | transloco\" />\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 [attr.aria-label]=\"'Admin.Products.ProductKey' | transloco\" />\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\" id=\"product-dependency_products-label\" [pTooltip]=\"'Admin.Products.Tooltip.DependencyProducts' | transloco\" tooltipPosition=\"top\" appendTo=\"body\"> {{ 'Admin.Products.DependencyProducts' | transloco }}<i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\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\" id=\"product-roles-label\" [pTooltip]=\"'Admin.Subscriptions.Tooltip.AssignedRoles' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">{{ 'Admin.Products.AssignedRoles' | transloco }} <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\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 [attr.aria-label]=\"'Admin.Products.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"] }]
|
|
6176
6176
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$1.ProductService }, { type: i2.NgbModal }, { type: i1.AdminService }], propDecorators: { onSave: [] } });
|
|
6177
6177
|
|
|
6178
6178
|
class ProductInsightComponent extends AppBaseComponent {
|
|
@@ -6410,11 +6410,11 @@ class UsersListForProductComponent extends AppBaseComponent {
|
|
|
6410
6410
|
super.ngOnDestroy();
|
|
6411
6411
|
}
|
|
6412
6412
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UsersListForProductComponent, deps: [{ token: i1$1.ProductService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6413
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UsersListForProductComponent, isStandalone: false, selector: "pw-users-list-for-product", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\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=\"m-subheader__title m-subheader__title--separator\">\n Users list for Product ({{ productName }})\n </h3>\n </div>\n </div>\n </div>\n <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\">\n <p-table #dt\n [value]=\"users\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n [globalFilterFields]=\"['first_name', 'email']\"\n [loading]=\"loading\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <label for=\"users-list-for-product-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-for-product-search\"\n name=\"users-list-for-product-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search users...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n aria-label=\"Search users...\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr class=\"head\">\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Label.Name' | transloco }}\n <p-sortIcon field=\"first_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=\"joined_at\">\n {{ 'Admin.Products.JoinedAt' | transloco }}\n <p-sortIcon field=\"joined_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_sign_in_at\">\n {{ 'Admin.Products.LastSignInAt' | transloco }}\n <p-sortIcon field=\"last_sign_in_at\"></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=\"Name\">\n <a [routerLink]=\"['/members', item?.slug]\">{{ item?.first_name }} {{ item?.last_name }}</a>\n </td>\n <td data-head=\"Email\">{{ item.email }}</td>\n <td data-head=\"Joined At\">{{ item?.joined_at | dateFormat }}</td>\n <td data-head=\"Last Sign In At\"
|
|
6413
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: UsersListForProductComponent, isStandalone: false, selector: "pw-users-list-for-product", usesInheritance: true, ngImport: i0, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\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=\"m-subheader__title m-subheader__title--separator\">\n Users list for Product ({{ productName }})\n </h3>\n </div>\n </div>\n </div>\n <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\">\n <p-table #dt\n [value]=\"users\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n [globalFilterFields]=\"['first_name', 'email']\"\n [loading]=\"loading\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <label for=\"users-list-for-product-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-for-product-search\"\n name=\"users-list-for-product-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search users...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n aria-label=\"Search users...\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr class=\"head\">\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Label.Name' | transloco }}\n <p-sortIcon field=\"first_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=\"joined_at\">\n {{ 'Admin.Products.JoinedAt' | transloco }}\n <p-sortIcon field=\"joined_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_sign_in_at\">\n {{ 'Admin.Products.LastSignInAt' | transloco }}\n <p-sortIcon field=\"last_sign_in_at\"></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=\"Name\">\n <a [routerLink]=\"['/members', item?.slug]\">{{ item?.first_name }} {{ item?.last_name }}</a>\n \n </td>\n <td data-head=\"Email\">{{ item.email }}</td>\n <td data-head=\"Joined At\">{{ item?.joined_at | dateFormat }}</td>\n <td data-head=\"Last Sign In At\">\n @if (item?.current_sign_in_at | isOnline) {\n <pw-online-indicator [lastSeen]=\"item.current_sign_in_at\" />\n } @else {\n {{ item?.last_sign_in_at | dateFormat }}\n }\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n @if (currentUser && item.id !== currentUser.id) {\n <li pTooltip=\"Message\" tooltipPosition=\"top\" appendTo=\"body\"\n *rbacAllow=\"'Pages.Chat'\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"['/message']\"\n [fragment]=\"item.slug\">\n <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (!loading && (dt?.value?.length ?? 0) === 0) {\n <div>\n <pw-no-data [withImage]=\"true\"\n [message]=\"'Search.NoDataMessage' | transloco\"\n [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", dependencies: [{ kind: "component", type: i3.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.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.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: i6.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { 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$2.OnlineIndicatorComponent, selector: "pw-online-indicator", inputs: ["lastSeen"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i14.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.IsOnlinePipe, name: "isOnline" }] }); }
|
|
6414
6414
|
}
|
|
6415
6415
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UsersListForProductComponent, decorators: [{
|
|
6416
6416
|
type: Component,
|
|
6417
|
-
args: [{ selector: 'pw-users-list-for-product', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\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=\"m-subheader__title m-subheader__title--separator\">\n Users list for Product ({{ productName }})\n </h3>\n </div>\n </div>\n </div>\n <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\">\n <p-table #dt\n [value]=\"users\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n [globalFilterFields]=\"['first_name', 'email']\"\n [loading]=\"loading\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <label for=\"users-list-for-product-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-for-product-search\"\n name=\"users-list-for-product-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search users...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n aria-label=\"Search users...\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr class=\"head\">\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Label.Name' | transloco }}\n <p-sortIcon field=\"first_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=\"joined_at\">\n {{ 'Admin.Products.JoinedAt' | transloco }}\n <p-sortIcon field=\"joined_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_sign_in_at\">\n {{ 'Admin.Products.LastSignInAt' | transloco }}\n <p-sortIcon field=\"last_sign_in_at\"></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=\"Name\">\n <a [routerLink]=\"['/members', item?.slug]\">{{ item?.first_name }} {{ item?.last_name }}</a>\n </td>\n <td data-head=\"Email\">{{ item.email }}</td>\n <td data-head=\"Joined At\">{{ item?.joined_at | dateFormat }}</td>\n <td data-head=\"Last Sign In At\"
|
|
6417
|
+
args: [{ selector: 'pw-users-list-for-product', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 mb-3\">\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=\"m-subheader__title m-subheader__title--separator\">\n Users list for Product ({{ productName }})\n </h3>\n </div>\n </div>\n </div>\n <div class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\">\n <p-table #dt\n [value]=\"users\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [totalRecords]=\"totalRecords\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n [globalFilterFields]=\"['first_name', 'email']\"\n [loading]=\"loading\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <label for=\"users-list-for-product-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-for-product-search\"\n name=\"users-list-for-product-search\"\n [(ngModel)]=\"searchText\"\n pInputText\n placeholder=\"Search users...\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n aria-label=\"Search users...\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr class=\"head\">\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Label.Name' | transloco }}\n <p-sortIcon field=\"first_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=\"joined_at\">\n {{ 'Admin.Products.JoinedAt' | transloco }}\n <p-sortIcon field=\"joined_at\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_sign_in_at\">\n {{ 'Admin.Products.LastSignInAt' | transloco }}\n <p-sortIcon field=\"last_sign_in_at\"></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=\"Name\">\n <a [routerLink]=\"['/members', item?.slug]\">{{ item?.first_name }} {{ item?.last_name }}</a>\n \n </td>\n <td data-head=\"Email\">{{ item.email }}</td>\n <td data-head=\"Joined At\">{{ item?.joined_at | dateFormat }}</td>\n <td data-head=\"Last Sign In At\">\n @if (item?.current_sign_in_at | isOnline) {\n <pw-online-indicator [lastSeen]=\"item.current_sign_in_at\" />\n } @else {\n {{ item?.last_sign_in_at | dateFormat }}\n }\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n @if (currentUser && item.id !== currentUser.id) {\n <li pTooltip=\"Message\" tooltipPosition=\"top\" appendTo=\"body\"\n *rbacAllow=\"'Pages.Chat'\"\n class=\"me-2 me-sm-3\"\n [routerLink]=\"['/message']\"\n [fragment]=\"item.slug\">\n <i class=\"fa fa-comments cta1-icon\" aria-hidden=\"true\"></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (!loading && (dt?.value?.length ?? 0) === 0) {\n <div>\n <pw-no-data [withImage]=\"true\"\n [message]=\"'Search.NoDataMessage' | transloco\"\n [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" }]
|
|
6418
6418
|
}], ctorParameters: () => [{ type: i1$1.ProductService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
|
|
6419
6419
|
|
|
6420
6420
|
class ResourceAdminDetailsComponent extends AppBaseComponent {
|
|
@@ -7629,11 +7629,11 @@ class SubscriptionUsersComponent extends AppBaseComponent {
|
|
|
7629
7629
|
});
|
|
7630
7630
|
}
|
|
7631
7631
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SubscriptionUsersComponent, deps: [{ token: i1$1.SubscriptionService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1$1.AuthService }, { token: i1$1.WindowService }, { token: i1.AdminService }, { token: i1$1.CustomToastService }, { token: i3$2.ConfirmDialogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7632
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: SubscriptionUsersComponent, isStandalone: false, selector: "pw-subscription-users", viewQueries: [{ propertyName: "passwordValidationModalForImpersonate", first: true, predicate: ["passwordValidationModalForImpersonate"], descendants: true }, { propertyName: "passwordValidationModalForUserDelete", first: true, predicate: ["passwordValidationModalForUserDelete"], descendants: true }, { propertyName: "passwordValidationModalForRemove2fa", first: true, predicate: ["passwordValidationModalForRemove2fa"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\">\n @if (!isLoaded) {\n <p-progressSpinner></p-progressSpinner>\n }\n</div>\n@if (!isAddEnabled && canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n <div class=\"text-end mb-2\">\n <button class=\"btn btn-sm btn-outline-primary\" (click)=\"isAddEnabled = true\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n </button>\n </div>\n}\n@if (!isAddEnabled) {\n <section id=\"members\"\n >\n <div [class.hideTable]=\"totalUnfilteredCount === 0\"\n class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\">\n <p-table #dt\n [value]=\"subscriptionMembers\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n [customSort]=\"true\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <label for=\"subscription-users-search\" class=\"visually-hidden\">Search subscription users</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input id=\"subscription-users-search\"\n name=\"subscription-users-search\"\n [(ngModel)]=\"searchText\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n type=\"text\"\n pInputText\n placeholder=\"Search subscription users...\"\n aria-label=\"Search subscription users...\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"id\">\n {{ 'Admin.Users.Id' | transloco }}\n <p-sortIcon field=\"id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Label.FirstName' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_name\">\n {{ 'Label.LastName' | transloco }}\n <p-sortIcon field=\"last_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"email\">\n {{ 'Label.Email' | transloco }}\n <p-sortIcon field=\"email\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"slug\">\n {{ 'Admin.Subscriptions.NickName' | transloco }}\n <p-sortIcon field=\"slug\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"has_password\">\n {{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n <p-sortIcon field=\"has_password\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_sign_in_at\">\n {{ 'Admin.Subscriptions.LastLogin' | transloco }}\n <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n </th>\n <th scope=\"true\" class=\"actions-list-two\">\n {{ 'Label.Actions' | transloco }}\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-user>\n <tr>\n <td data-head=\"Id\">{{ user.id }}</td>\n <td data-head=\"First Name\">\n <span class=\"first-name\">{{ user.first_name }}</span>\n @if (subscriptionOwnerUserId === user.id) {\n <span *rbacAllow=\"'Pages.Alpha'\" class=\"badge bg-primary mx-1\"> Owner </span>\n }\n @if (subscriptionAdmins?.includes(user?.id)) {\n <span class=\"badge bg-success mx-1 admin-badge\"> Admin </span>\n }\n </td>\n <td data-head=\"Last Name\">\n {{ user.last_name }}\n @if (user?.alpha) {\n <span\n [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n tooltipPosition=\"top\"\n appendTo=\"body\">\n <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n </span>\n }\n @if (user?.beta) {\n <span\n [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n class=\"ms-2\"\n tooltipPosition=\"top\"\n appendTo=\"body\">\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 appendTo=\"body\">\n <i class=\"fa fa-cloud success\" ></i>\n </span>\n }\n </td>\n <td data-head=\"Email\">{{ user.email }}</td>\n <td data-head=\"Nick Name\">\n <a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n </td>\n <td data-head=\"Email Confirm\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n color=\"success-danger\"\n class=\"badge\">\n {{ user?.has_password ? 'Yes' : 'No' }}\n </span>\n @if (user?.blocked) {\n <span\n [pTooltip]=\"'This user has been blocked'\"\n class=\"ms-2\"\n tooltipPosition=\"top\"\n appendTo=\"body\">\n <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n </span>\n }\n </td>\n <td data-head=\"Last Login\">\n @if (user?.current_sign_in_at) {\n <span>\n <span>\n {{ user.current_sign_in_at | dateFormat }}\n </span>\n @if (user.current_sign_in_at) {\n <span>\n ({{ user.current_sign_in_at | sinceAgo }})\n </span>\n }\n </span>\n } @else {\n <span>\n <span>\n {{ user.last_sign_in_at | dateFormat }}\n </span>\n @if (user.last_sign_in_at) {\n <span>\n ({{ user.last_sign_in_at | sinceAgo }})\n </span>\n }\n </span>\n }\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li *rbacAllow=\"'Pages.Alpha'\" pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-3\">\n <i (click)=\"onImpersonate(user)\" (keydown.enter)=\"onImpersonate(user)\" class=\"fas fa-people-arrows fa-lg\" aria-hidden=\"true\"></i>\n </li>\n @if (subscriptionOwnerUserId !== user.id) {\n <li *rbacAllow=\"'Pages.Alpha'\" pTooltip=\"Set this user as new owner\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-3\">\n <i (click)=\"onChangeOwner(user)\" (keydown.enter)=\"onChangeOwner(user)\" class=\"fa fa-key warning fa-lg\" aria-hidden=\"true\"></i>\n </li>\n }\n @if (user?.enable_two_factor_authenticator) {\n <li *rbacAllow=\"'Pages.Alpha'\"\n (click)=\"disable2fa(user?.id)\"\n (keydown.enter)=\"disable2fa(user?.id)\"\n pTooltip=\"Disable 2FA\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n class=\"me-2 me-sm-3 success\">\n <i class=\"fa fa-lock\"\n aria-hidden=\"true\"></i>\n </li>\n }\n @if (canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n <!-- Make Admin -->\n @if (!subscriptionAdmins?.includes(user.id)) {\n <li pTooltip=\"Make Admin\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n class=\"me-2 me-sm-3 mx-2\"\n >\n <i\n class=\"fa fa-user-crown fa-lg success\"\n (click)=\"makeAdmin(user, true)\"\n (keydown.enter)=\"makeAdmin(users, true)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n }\n <li></li>\n <!-- Remove Admin -->\n @if (subscriptionAdmins?.includes(user.id)) {\n <li pTooltip=\"Remove Admin\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n class=\"me-2 me-sm-3 mx-2\"\n >\n <i\n class=\"fa fa-ban warning fa-lg\"\n (keydown.enter)=\"makeAdmin(user, false)\"\n (click)=\"makeAdmin(user, false)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n }\n } @else {\n <li class=\"mx-3\"></li>\n }\n @if (canShowSubscriptionActions) {\n <li\n [routerLink]=\"[routers.usersDetails + user.id]\"\n pTooltip=\"Edit\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n class=\"me-2 me-sm-3\">\n <i class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"></i>\n </li>\n }\n @if (canShowSubscriptionActions && isGranted('Pages.Admin.Users.Delete')) {\n <li\n pTooltip=\"Remove user from subscription\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n class=\"me-2 me-sm-3\">\n <i (click)=\"onDelete(user)\"\n (keydown.enter)=\"onDelete(user)\"\n class=\"fa fa-trash delete-icon\"\n aria-hidden=\"true\"></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords === 0 && totalUnfilteredCount !== 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n }\n @if (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n @if (totalUnfilteredCount === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </section>\n}\n\n\n@if (isAddEnabled) {\n <section id=\"manage-members\"\n >\n <pw-add-members (membersAdded)=\"onMembersAdded()\"\n ></pw-add-members>\n </section>\n}\n\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}.info-icon{vertical-align:middle;margin-left:5px}.first-name{margin-right:5px}\n"], dependencies: [{ kind: "component", type: i3.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.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.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: i6.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { 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$2.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage", "destructive"], outputs: ["successEvent"] }, { kind: "component", type: i4$1.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i14.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i14.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: AddMembersComponent, selector: "pw-add-members", outputs: ["membersAdded"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.SinceAgoPipe, name: "sinceAgo" }] }); }
|
|
7632
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: SubscriptionUsersComponent, isStandalone: false, selector: "pw-subscription-users", viewQueries: [{ propertyName: "passwordValidationModalForImpersonate", first: true, predicate: ["passwordValidationModalForImpersonate"], descendants: true }, { propertyName: "passwordValidationModalForUserDelete", first: true, predicate: ["passwordValidationModalForUserDelete"], descendants: true }, { propertyName: "passwordValidationModalForRemove2fa", first: true, predicate: ["passwordValidationModalForRemove2fa"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\">\n @if (!isLoaded) {\n <p-progressSpinner></p-progressSpinner>\n }\n</div>\n@if (!isAddEnabled && canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n <div class=\"text-end mb-2\">\n <button class=\"btn btn-sm btn-outline-primary\" (click)=\"isAddEnabled = true\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n </button>\n </div>\n}\n@if (!isAddEnabled) {\n <section id=\"members\"\n >\n <div [class.hideTable]=\"totalUnfilteredCount === 0\"\n class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\">\n <p-table #dt\n [value]=\"subscriptionMembers\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n [customSort]=\"true\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <label for=\"subscription-users-search\" class=\"visually-hidden\">Search subscription users</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input id=\"subscription-users-search\"\n name=\"subscription-users-search\"\n [(ngModel)]=\"searchText\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n type=\"text\"\n pInputText\n placeholder=\"Search subscription users...\"\n aria-label=\"Search subscription users...\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"id\">\n {{ 'Admin.Users.Id' | transloco }}\n <p-sortIcon field=\"id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Label.FirstName' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_name\">\n {{ 'Label.LastName' | transloco }}\n <p-sortIcon field=\"last_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"email\">\n {{ 'Label.Email' | transloco }}\n <p-sortIcon field=\"email\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"slug\">\n {{ 'Admin.Subscriptions.NickName' | transloco }}\n <p-sortIcon field=\"slug\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"has_password\">\n {{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n <p-sortIcon field=\"has_password\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_sign_in_at\">\n {{ 'Admin.Subscriptions.LastLogin' | transloco }}\n <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n </th>\n <th scope=\"true\" class=\"actions-list-two\">\n {{ 'Label.Actions' | transloco }}\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-user>\n <tr>\n <td data-head=\"Id\">{{ user.id }}</td>\n <td data-head=\"First Name\">\n <span class=\"first-name\">{{ user.first_name }}</span>\n @if (subscriptionOwnerUserId === user.id) {\n <span *rbacAllow=\"'Pages.Alpha'\" class=\"badge bg-primary mx-1\"> Owner </span>\n }\n @if (subscriptionAdmins?.includes(user?.id)) {\n <span class=\"badge bg-success mx-1 admin-badge\"> Admin </span>\n }\n \n </td>\n <td data-head=\"Last Name\">\n {{ user.last_name }}\n @if (user?.alpha) {\n <span\n [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n tooltipPosition=\"top\"\n appendTo=\"body\">\n <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n </span>\n }\n @if (user?.beta) {\n <span\n [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n class=\"ms-2\"\n tooltipPosition=\"top\"\n appendTo=\"body\">\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 appendTo=\"body\">\n <i class=\"fa fa-cloud success\" ></i>\n </span>\n }\n </td>\n <td data-head=\"Email\">{{ user.email }}</td>\n <td data-head=\"Nick Name\">\n <a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n </td>\n <td data-head=\"Email Confirm\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n color=\"success-danger\"\n class=\"badge\">\n {{ user?.has_password ? 'Yes' : 'No' }}\n </span>\n @if (user?.blocked) {\n <span\n [pTooltip]=\"'This user has been blocked'\"\n class=\"ms-2\"\n tooltipPosition=\"top\"\n appendTo=\"body\">\n <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n </span>\n }\n </td>\n <td data-head=\"Last Login\">\n @if (user?.current_sign_in_at | isOnline) {\n <pw-online-indicator [lastSeen]=\"user.current_sign_in_at\" />\n } @else if (user?.current_sign_in_at) {\n <span>\n <span>\n {{ user.current_sign_in_at | dateFormat }}\n </span>\n <span>\n ({{ user.current_sign_in_at | sinceAgo }})\n </span>\n </span>\n } @else {\n <span>\n <span>\n {{ user.last_sign_in_at | dateFormat }}\n </span>\n @if (user.last_sign_in_at) {\n <span>\n ({{ user.last_sign_in_at | sinceAgo }})\n </span>\n }\n </span>\n }\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li *rbacAllow=\"'Pages.Alpha'\" pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-3\">\n <i (click)=\"onImpersonate(user)\" (keydown.enter)=\"onImpersonate(user)\" class=\"fas fa-people-arrows fa-lg\" aria-hidden=\"true\"></i>\n </li>\n @if (subscriptionOwnerUserId !== user.id) {\n <li *rbacAllow=\"'Pages.Alpha'\" pTooltip=\"Set this user as new owner\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-3\">\n <i (click)=\"onChangeOwner(user)\" (keydown.enter)=\"onChangeOwner(user)\" class=\"fa fa-key warning fa-lg\" aria-hidden=\"true\"></i>\n </li>\n }\n @if (user?.enable_two_factor_authenticator) {\n <li *rbacAllow=\"'Pages.Alpha'\"\n (click)=\"disable2fa(user?.id)\"\n (keydown.enter)=\"disable2fa(user?.id)\"\n pTooltip=\"Disable 2FA\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n class=\"me-2 me-sm-3 success\">\n <i class=\"fa fa-lock\"\n aria-hidden=\"true\"></i>\n </li>\n }\n @if (canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n <!-- Make Admin -->\n @if (!subscriptionAdmins?.includes(user.id)) {\n <li pTooltip=\"Make Admin\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n class=\"me-2 me-sm-3 mx-2\"\n >\n <i\n class=\"fa fa-user-crown fa-lg success\"\n (click)=\"makeAdmin(user, true)\"\n (keydown.enter)=\"makeAdmin(users, true)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n }\n <li></li>\n <!-- Remove Admin -->\n @if (subscriptionAdmins?.includes(user.id)) {\n <li pTooltip=\"Remove Admin\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n class=\"me-2 me-sm-3 mx-2\"\n >\n <i\n class=\"fa fa-ban warning fa-lg\"\n (keydown.enter)=\"makeAdmin(user, false)\"\n (click)=\"makeAdmin(user, false)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n }\n } @else {\n <li class=\"mx-3\"></li>\n }\n @if (canShowSubscriptionActions) {\n <li\n [routerLink]=\"[routers.usersDetails + user.id]\"\n pTooltip=\"Edit\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n class=\"me-2 me-sm-3\">\n <i class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"></i>\n </li>\n }\n @if (canShowSubscriptionActions && isGranted('Pages.Admin.Users.Delete')) {\n <li\n pTooltip=\"Remove user from subscription\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n class=\"me-2 me-sm-3\">\n <i (click)=\"onDelete(user)\"\n (keydown.enter)=\"onDelete(user)\"\n class=\"fa fa-trash delete-icon\"\n aria-hidden=\"true\"></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords === 0 && totalUnfilteredCount !== 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n }\n @if (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n @if (totalUnfilteredCount === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </section>\n}\n\n@if (isAddEnabled) {\n <section id=\"manage-members\"\n >\n <pw-add-members (membersAdded)=\"onMembersAdded()\"\n ></pw-add-members>\n </section>\n}\n\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}.info-icon{vertical-align:middle;margin-left:5px}.first-name{margin-right:5px}\n"], dependencies: [{ kind: "component", type: i3.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.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.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: i6.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { 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$2.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage", "destructive"], outputs: ["successEvent"] }, { kind: "component", type: i4$1.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.OnlineIndicatorComponent, selector: "pw-online-indicator", inputs: ["lastSeen"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i14.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i14.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: AddMembersComponent, selector: "pw-add-members", outputs: ["membersAdded"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i17.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i17.SinceAgoPipe, name: "sinceAgo" }, { kind: "pipe", type: i17.IsOnlinePipe, name: "isOnline" }] }); }
|
|
7633
7633
|
}
|
|
7634
7634
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SubscriptionUsersComponent, decorators: [{
|
|
7635
7635
|
type: Component,
|
|
7636
|
-
args: [{ selector: 'pw-subscription-users', standalone: false, template: "<div class=\"w-100 text-center mt-3\">\n @if (!isLoaded) {\n <p-progressSpinner></p-progressSpinner>\n }\n</div>\n@if (!isAddEnabled && canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n <div class=\"text-end mb-2\">\n <button class=\"btn btn-sm btn-outline-primary\" (click)=\"isAddEnabled = true\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n </button>\n </div>\n}\n@if (!isAddEnabled) {\n <section id=\"members\"\n >\n <div [class.hideTable]=\"totalUnfilteredCount === 0\"\n class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\">\n <p-table #dt\n [value]=\"subscriptionMembers\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n [customSort]=\"true\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <label for=\"subscription-users-search\" class=\"visually-hidden\">Search subscription users</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input id=\"subscription-users-search\"\n name=\"subscription-users-search\"\n [(ngModel)]=\"searchText\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n type=\"text\"\n pInputText\n placeholder=\"Search subscription users...\"\n aria-label=\"Search subscription users...\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"id\">\n {{ 'Admin.Users.Id' | transloco }}\n <p-sortIcon field=\"id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Label.FirstName' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_name\">\n {{ 'Label.LastName' | transloco }}\n <p-sortIcon field=\"last_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"email\">\n {{ 'Label.Email' | transloco }}\n <p-sortIcon field=\"email\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"slug\">\n {{ 'Admin.Subscriptions.NickName' | transloco }}\n <p-sortIcon field=\"slug\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"has_password\">\n {{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n <p-sortIcon field=\"has_password\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_sign_in_at\">\n {{ 'Admin.Subscriptions.LastLogin' | transloco }}\n <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n </th>\n <th scope=\"true\" class=\"actions-list-two\">\n {{ 'Label.Actions' | transloco }}\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-user>\n <tr>\n <td data-head=\"Id\">{{ user.id }}</td>\n <td data-head=\"First Name\">\n <span class=\"first-name\">{{ user.first_name }}</span>\n @if (subscriptionOwnerUserId === user.id) {\n <span *rbacAllow=\"'Pages.Alpha'\" class=\"badge bg-primary mx-1\"> Owner </span>\n }\n @if (subscriptionAdmins?.includes(user?.id)) {\n <span class=\"badge bg-success mx-1 admin-badge\"> Admin </span>\n }\n </td>\n <td data-head=\"Last Name\">\n {{ user.last_name }}\n @if (user?.alpha) {\n <span\n [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n tooltipPosition=\"top\"\n appendTo=\"body\">\n <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n </span>\n }\n @if (user?.beta) {\n <span\n [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n class=\"ms-2\"\n tooltipPosition=\"top\"\n appendTo=\"body\">\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 appendTo=\"body\">\n <i class=\"fa fa-cloud success\" ></i>\n </span>\n }\n </td>\n <td data-head=\"Email\">{{ user.email }}</td>\n <td data-head=\"Nick Name\">\n <a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n </td>\n <td data-head=\"Email Confirm\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n color=\"success-danger\"\n class=\"badge\">\n {{ user?.has_password ? 'Yes' : 'No' }}\n </span>\n @if (user?.blocked) {\n <span\n [pTooltip]=\"'This user has been blocked'\"\n class=\"ms-2\"\n tooltipPosition=\"top\"\n appendTo=\"body\">\n <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n </span>\n }\n </td>\n <td data-head=\"Last Login\">\n @if (user?.current_sign_in_at) {\n <span>\n <span>\n {{ user.current_sign_in_at | dateFormat }}\n </span>\n @if (user.current_sign_in_at) {\n <span>\n ({{ user.current_sign_in_at | sinceAgo }})\n </span>\n }\n </span>\n } @else {\n <span>\n <span>\n {{ user.last_sign_in_at | dateFormat }}\n </span>\n @if (user.last_sign_in_at) {\n <span>\n ({{ user.last_sign_in_at | sinceAgo }})\n </span>\n }\n </span>\n }\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li *rbacAllow=\"'Pages.Alpha'\" pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-3\">\n <i (click)=\"onImpersonate(user)\" (keydown.enter)=\"onImpersonate(user)\" class=\"fas fa-people-arrows fa-lg\" aria-hidden=\"true\"></i>\n </li>\n @if (subscriptionOwnerUserId !== user.id) {\n <li *rbacAllow=\"'Pages.Alpha'\" pTooltip=\"Set this user as new owner\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-3\">\n <i (click)=\"onChangeOwner(user)\" (keydown.enter)=\"onChangeOwner(user)\" class=\"fa fa-key warning fa-lg\" aria-hidden=\"true\"></i>\n </li>\n }\n @if (user?.enable_two_factor_authenticator) {\n <li *rbacAllow=\"'Pages.Alpha'\"\n (click)=\"disable2fa(user?.id)\"\n (keydown.enter)=\"disable2fa(user?.id)\"\n pTooltip=\"Disable 2FA\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n class=\"me-2 me-sm-3 success\">\n <i class=\"fa fa-lock\"\n aria-hidden=\"true\"></i>\n </li>\n }\n @if (canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n <!-- Make Admin -->\n @if (!subscriptionAdmins?.includes(user.id)) {\n <li pTooltip=\"Make Admin\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n class=\"me-2 me-sm-3 mx-2\"\n >\n <i\n class=\"fa fa-user-crown fa-lg success\"\n (click)=\"makeAdmin(user, true)\"\n (keydown.enter)=\"makeAdmin(users, true)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n }\n <li></li>\n <!-- Remove Admin -->\n @if (subscriptionAdmins?.includes(user.id)) {\n <li pTooltip=\"Remove Admin\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n class=\"me-2 me-sm-3 mx-2\"\n >\n <i\n class=\"fa fa-ban warning fa-lg\"\n (keydown.enter)=\"makeAdmin(user, false)\"\n (click)=\"makeAdmin(user, false)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n }\n } @else {\n <li class=\"mx-3\"></li>\n }\n @if (canShowSubscriptionActions) {\n <li\n [routerLink]=\"[routers.usersDetails + user.id]\"\n pTooltip=\"Edit\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n class=\"me-2 me-sm-3\">\n <i class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"></i>\n </li>\n }\n @if (canShowSubscriptionActions && isGranted('Pages.Admin.Users.Delete')) {\n <li\n pTooltip=\"Remove user from subscription\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n class=\"me-2 me-sm-3\">\n <i (click)=\"onDelete(user)\"\n (keydown.enter)=\"onDelete(user)\"\n class=\"fa fa-trash delete-icon\"\n aria-hidden=\"true\"></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords === 0 && totalUnfilteredCount !== 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n }\n @if (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n @if (totalUnfilteredCount === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </section>\n}\n\n\n@if (isAddEnabled) {\n <section id=\"manage-members\"\n >\n <pw-add-members (membersAdded)=\"onMembersAdded()\"\n ></pw-add-members>\n </section>\n}\n\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}.info-icon{vertical-align:middle;margin-left:5px}.first-name{margin-right:5px}\n"] }]
|
|
7636
|
+
args: [{ selector: 'pw-subscription-users', standalone: false, template: "<div class=\"w-100 text-center mt-3\">\n @if (!isLoaded) {\n <p-progressSpinner></p-progressSpinner>\n }\n</div>\n@if (!isAddEnabled && canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n <div class=\"text-end mb-2\">\n <button class=\"btn btn-sm btn-outline-primary\" (click)=\"isAddEnabled = true\">\n <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n </button>\n </div>\n}\n@if (!isAddEnabled) {\n <section id=\"members\"\n >\n <div [class.hideTable]=\"totalUnfilteredCount === 0\"\n class=\"primeng-datatable-container actions-collapsed table-responsive mt-0\">\n <p-table #dt\n [value]=\"subscriptionMembers\"\n [paginator]=\"totalRecords !== 0\"\n [rows]=\"PAGE_SIZE\"\n [lazy]=\"true\"\n [totalRecords]=\"totalRecords\"\n [loading]=\"loading\"\n [filterDelay]=\"1000\"\n [customSort]=\"true\"\n (onLazyLoad)=\"onLazyLoad($event)\">\n <ng-template pTemplate=\"caption\">\n <div class=\"text-end\">\n <label for=\"subscription-users-search\" class=\"visually-hidden\">Search subscription users</label>\n <p-iconfield iconPosition=\"left\">\n <p-inputicon><i class=\"fa fa-search\" aria-hidden=\"true\"></i></p-inputicon>\n <input id=\"subscription-users-search\"\n name=\"subscription-users-search\"\n [(ngModel)]=\"searchText\"\n (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n type=\"text\"\n pInputText\n placeholder=\"Search subscription users...\"\n aria-label=\"Search subscription users...\" />\n </p-iconfield>\n </div>\n </ng-template>\n <ng-template pTemplate=\"header\">\n <tr>\n <th scope=\"true\"\n pSortableColumn=\"id\">\n {{ 'Admin.Users.Id' | transloco }}\n <p-sortIcon field=\"id\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"first_name\">\n {{ 'Label.FirstName' | transloco }}\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_name\">\n {{ 'Label.LastName' | transloco }}\n <p-sortIcon field=\"last_name\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"email\">\n {{ 'Label.Email' | transloco }}\n <p-sortIcon field=\"email\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"slug\">\n {{ 'Admin.Subscriptions.NickName' | transloco }}\n <p-sortIcon field=\"slug\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"has_password\">\n {{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n <p-sortIcon field=\"has_password\"></p-sortIcon>\n </th>\n <th scope=\"true\"\n pSortableColumn=\"last_sign_in_at\">\n {{ 'Admin.Subscriptions.LastLogin' | transloco }}\n <p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n </th>\n <th scope=\"true\" class=\"actions-list-two\">\n {{ 'Label.Actions' | transloco }}\n </th>\n </tr>\n </ng-template>\n <ng-template pTemplate=\"body\"\n let-user>\n <tr>\n <td data-head=\"Id\">{{ user.id }}</td>\n <td data-head=\"First Name\">\n <span class=\"first-name\">{{ user.first_name }}</span>\n @if (subscriptionOwnerUserId === user.id) {\n <span *rbacAllow=\"'Pages.Alpha'\" class=\"badge bg-primary mx-1\"> Owner </span>\n }\n @if (subscriptionAdmins?.includes(user?.id)) {\n <span class=\"badge bg-success mx-1 admin-badge\"> Admin </span>\n }\n \n </td>\n <td data-head=\"Last Name\">\n {{ user.last_name }}\n @if (user?.alpha) {\n <span\n [pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n tooltipPosition=\"top\"\n appendTo=\"body\">\n <i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n </span>\n }\n @if (user?.beta) {\n <span\n [pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n class=\"ms-2\"\n tooltipPosition=\"top\"\n appendTo=\"body\">\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 appendTo=\"body\">\n <i class=\"fa fa-cloud success\" ></i>\n </span>\n }\n </td>\n <td data-head=\"Email\">{{ user.email }}</td>\n <td data-head=\"Nick Name\">\n <a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n </td>\n <td data-head=\"Email Confirm\">\n <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n color=\"success-danger\"\n class=\"badge\">\n {{ user?.has_password ? 'Yes' : 'No' }}\n </span>\n @if (user?.blocked) {\n <span\n [pTooltip]=\"'This user has been blocked'\"\n class=\"ms-2\"\n tooltipPosition=\"top\"\n appendTo=\"body\">\n <i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n </span>\n }\n </td>\n <td data-head=\"Last Login\">\n @if (user?.current_sign_in_at | isOnline) {\n <pw-online-indicator [lastSeen]=\"user.current_sign_in_at\" />\n } @else if (user?.current_sign_in_at) {\n <span>\n <span>\n {{ user.current_sign_in_at | dateFormat }}\n </span>\n <span>\n ({{ user.current_sign_in_at | sinceAgo }})\n </span>\n </span>\n } @else {\n <span>\n <span>\n {{ user.last_sign_in_at | dateFormat }}\n </span>\n @if (user.last_sign_in_at) {\n <span>\n ({{ user.last_sign_in_at | sinceAgo }})\n </span>\n }\n </span>\n }\n </td>\n <td data-head=\"Action\">\n <ul class=\"list-unstyled list-inline list-action\">\n <li *rbacAllow=\"'Pages.Alpha'\" pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-3\">\n <i (click)=\"onImpersonate(user)\" (keydown.enter)=\"onImpersonate(user)\" class=\"fas fa-people-arrows fa-lg\" aria-hidden=\"true\"></i>\n </li>\n @if (subscriptionOwnerUserId !== user.id) {\n <li *rbacAllow=\"'Pages.Alpha'\" pTooltip=\"Set this user as new owner\" tooltipPosition=\"top\" appendTo=\"body\" class=\"me-2 me-sm-3\">\n <i (click)=\"onChangeOwner(user)\" (keydown.enter)=\"onChangeOwner(user)\" class=\"fa fa-key warning fa-lg\" aria-hidden=\"true\"></i>\n </li>\n }\n @if (user?.enable_two_factor_authenticator) {\n <li *rbacAllow=\"'Pages.Alpha'\"\n (click)=\"disable2fa(user?.id)\"\n (keydown.enter)=\"disable2fa(user?.id)\"\n pTooltip=\"Disable 2FA\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n class=\"me-2 me-sm-3 success\">\n <i class=\"fa fa-lock\"\n aria-hidden=\"true\"></i>\n </li>\n }\n @if (canShowSubscriptionActions && isUserSubscriptionSuperAdmin) {\n <!-- Make Admin -->\n @if (!subscriptionAdmins?.includes(user.id)) {\n <li pTooltip=\"Make Admin\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n class=\"me-2 me-sm-3 mx-2\"\n >\n <i\n class=\"fa fa-user-crown fa-lg success\"\n (click)=\"makeAdmin(user, true)\"\n (keydown.enter)=\"makeAdmin(users, true)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n }\n <li></li>\n <!-- Remove Admin -->\n @if (subscriptionAdmins?.includes(user.id)) {\n <li pTooltip=\"Remove Admin\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n class=\"me-2 me-sm-3 mx-2\"\n >\n <i\n class=\"fa fa-ban warning fa-lg\"\n (keydown.enter)=\"makeAdmin(user, false)\"\n (click)=\"makeAdmin(user, false)\"\n aria-hidden=\"true\"\n ></i>\n </li>\n }\n } @else {\n <li class=\"mx-3\"></li>\n }\n @if (canShowSubscriptionActions) {\n <li\n [routerLink]=\"[routers.usersDetails + user.id]\"\n pTooltip=\"Edit\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n class=\"me-2 me-sm-3\">\n <i class=\"fa fa-edit edit-icon\"\n aria-hidden=\"true\"></i>\n </li>\n }\n @if (canShowSubscriptionActions && isGranted('Pages.Admin.Users.Delete')) {\n <li\n pTooltip=\"Remove user from subscription\"\n tooltipPosition=\"top\"\n appendTo=\"body\"\n class=\"me-2 me-sm-3\">\n <i (click)=\"onDelete(user)\"\n (keydown.enter)=\"onDelete(user)\"\n class=\"fa fa-trash delete-icon\"\n aria-hidden=\"true\"></i>\n </li>\n }\n </ul>\n </td>\n </tr>\n </ng-template>\n </p-table>\n @if (totalRecords === 0 && totalUnfilteredCount !== 0) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n </pw-no-data>\n </div>\n }\n @if (totalRecords !== 0) {\n <pw-records-summary [showing]=\"dt?.value?.length ?? 0\" [total]=\"totalRecords\" />\n }\n </div>\n @if (totalUnfilteredCount === 0 && isLoaded) {\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n </pw-no-data>\n </div>\n }\n </section>\n}\n\n@if (isAddEnabled) {\n <section id=\"manage-members\"\n >\n <pw-add-members (membersAdded)=\"onMembersAdded()\"\n ></pw-add-members>\n </section>\n}\n\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n (successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n (successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}.info-icon{vertical-align:middle;margin-left:5px}.first-name{margin-right:5px}\n"] }]
|
|
7637
7637
|
}], ctorParameters: () => [{ type: i1$1.SubscriptionService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$1.AuthService }, { type: i1$1.WindowService }, { type: i1.AdminService }, { type: i1$1.CustomToastService }, { type: i3$2.ConfirmDialogService }], propDecorators: { passwordValidationModalForImpersonate: [{
|
|
7638
7638
|
type: ViewChild,
|
|
7639
7639
|
args: ['passwordValidationModalForImpersonate', { static: false }]
|
|
@@ -8069,11 +8069,11 @@ class SubscriptionDetailsComponent extends AppBaseComponent {
|
|
|
8069
8069
|
super.ngOnDestroy();
|
|
8070
8070
|
}
|
|
8071
8071
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SubscriptionDetailsComponent, deps: [{ token: i1$1.SubscriptionService }, { token: i1.AdminService }, { token: i3$1.DatePipe }, { token: i1$1.CommonService }, { token: i1$1.NgbDateCustomParserFormatter }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8072
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: SubscriptionDetailsComponent, isStandalone: false, selector: "pw-subscription-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\"\n routerLink=\"/admin/subscriptions/list\"\n class=\"previous\">\n <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"m-subheader__title m-subheader__title--separator\">\n <span>Subscription Details</span>\n </h3>\n @if (currentSubscriber?.is_deleted) {\n <span class=\"badge rounded-pill bg-danger ms-2\"\n >Deleted</span>\n }\n </div>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!isLoading) {\n <div >\n <ul ngbNav\n #nav=\"ngbNav\" [activeId]=\"activeTabId\" (navChange)=\"onTabChange($event)\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Subscription</a>\n <ng-template ngbNavContent>\n <div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"mt-4\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"saveDetails()\">\n <h3>{{ 'Admin.Subscriptions.Section.IdentityContact' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Organization' | transloco\"\n [label]=\"'Admin.Subscriptions.Organization' | transloco\"\n name=\"organisation\"\n controlId=\"sub-details-organisation\">\n <input type=\"text\"\n id=\"sub-details-organisation\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n formControlName=\"organisation\"\n [attr.aria-label]=\"'Admin.Subscriptions.Organization' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactName' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactName' | transloco\"\n name=\"contact_name\"\n controlId=\"sub-details-contact_name\">\n <input type=\"text\"\n id=\"sub-details-contact_name\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactName' | transloco\"\n formControlName=\"contact_name\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactName' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactEmail' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactEmail' | transloco\"\n name=\"contact_email\"\n controlId=\"sub-details-contact_email\">\n <input type=\"text\"\n id=\"sub-details-contact_email\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactEmail' | transloco\"\n formControlName=\"contact_email\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactEmail' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.InvoiceRecipientEmails' | transloco\"\n [label]=\"'Admin.Subscriptions.InvoiceRecipientEmails' | transloco\"\n name=\"invoice_recipient_emails\"\n controlId=\"sub-details-invoice_recipient_emails\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.InvoiceRecipientEmails' | transloco\">\n <input type=\"text\"\n id=\"sub-details-invoice_recipient_emails\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.InvoiceRecipientEmails' | transloco\"\n formControlName=\"invoice_recipient_emails\"\n [ngClass]=\"{\n 'is-invalid': form.get('invoice_recipient_emails').touched && form.get('invoice_recipient_emails').invalid\n }\"\n [attr.aria-label]=\"'Admin.Subscriptions.InvoiceRecipientEmails' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactTel' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactTel' | transloco\"\n name=\"contact_tel\"\n controlId=\"sub-details-contact_tel\">\n <input type=\"text\"\n id=\"sub-details-contact_tel\"\n formControlName=\"contact_tel\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactTel' | transloco\"\n class=\"form-control\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactTel' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [label]=\"'Admin.Subscriptions.TaxId' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.TaxId' | transloco\"\n name=\"tax_id\"\n controlId=\"sub-details-tax_id\">\n <input type=\"text\"\n id=\"sub-details-tax_id\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.TaxId' | transloco\"\n formControlName=\"tax_id\"\n [attr.aria-label]=\"'Admin.Subscriptions.TaxId' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <span class=\"pw-label-style\" id=\"subscription-details-roles-label\" [pTooltip]=\"'Admin.Subscriptions.Tooltip.AssignedRoles' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">{{ 'Admin.Subscriptions.AssignedRoles' | transloco }}\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <p-multiSelect inputId=\"subscription-details-roles\" [options]=\"allRoles\"\n formControlName=\"roles\"\n appendTo=\"body\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.AssignedRoles' | transloco\"\n [ariaLabelledBy]=\"'subscription-details-roles-label'\"\n [ariaLabel]=\"'Admin.Subscriptions.AssignedRoles' | transloco\"></p-multiSelect>\n </div>\n @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\"\n [label]=\"'Organization.OrganizationType' | transloco\"\n name=\"organization_type_id\" controlId=\"subscription-organization_type_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_type_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n [options]=\"types['organization_types']\"\n formControlName=\"organization_type_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationType' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\"\n [label]=\"'Organization.OrganizationIndustry' | transloco\"\n name=\"organization_industry_id\" controlId=\"subscription-organization_industry_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_industry_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n [options]=\"industries['organization_industries']\"\n formControlName=\"organization_industry_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationIndustry' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationSizes$ | async; as sizes) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\"\n [label]=\"'Size' | transloco\"\n name=\"organization_size_id\" controlId=\"subscription-organization_size_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_size_id-label'\"\n [ariaLabel]=\"'Size' | transloco\"\n [options]=\"sizes['organization_sizes']\"\n formControlName=\"organization_size_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationSize' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CompanyUrl' | transloco\"\n [label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\"\n name=\"company_url\"\n controlId=\"sub-details-company_url\">\n <input type=\"text\"\n id=\"sub-details-company_url\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.CompanyUrl' | transloco\"\n formControlName=\"company_url\"\n [attr.aria-label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <h3>{{ 'Admin.Subscriptions.Section.PlanSeats' | transloco }}</h3>\n <div class=\"row\">\n <!-- Readonly Starts -->\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reference' | transloco\"\n [label]=\"'Admin.Subscriptions.Reference' | transloco\"\n name=\"reference_number\"\n controlId=\"sub-details-reference_number\">\n @if (form) {\n <input type=\"text\"\n id=\"sub-details-reference_number\"\n readonly\n class=\"form-control\"\n data-control=\"reference\"\n [value]=\"form.get('reference_number')?.value\"\n [attr.aria-label]=\"'Admin.Subscriptions.Reference' | transloco\" />\n }\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.UnitsInUse' | transloco\"\n [label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\"\n name=\"units_in_use\"\n controlId=\"sub-details-units_in_use\">\n <input type=\"text\"\n id=\"sub-details-units_in_use\"\n readonly\n class=\"form-control\"\n formControlName=\"units_in_use\"\n [attr.aria-label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MaxUnits' | transloco\"\n [label]=\"'Admin.Subscriptions.MaxUnits' | transloco\"\n name=\"max_units\"\n controlId=\"sub-details-max_units\">\n <input type=\"text\"\n id=\"sub-details-max_units\"\n readonly\n class=\"form-control\"\n formControlName=\"max_units\"\n [attr.aria-label]=\"'Admin.Subscriptions.MaxUnits' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CalculatedPrice' | transloco\"\n [label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\"\n name=\"calculated_price\"\n controlId=\"sub-details-calculated_price\">\n <input type=\"text\"\n id=\"sub-details-calculated_price\"\n class=\"form-control\"\n readonly\n formControlName=\"calculated_price\"\n [attr.aria-label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MainExpiryDate' | transloco\"\n [label]=\"\n 'Admin.Subscriptions.MainExpiryDate' | transloco\n \"\n name=\"expires_at\" controlId=\"sub-details-expires_at\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"sub-details-expires_at\"\n name=\"expires_at\"\n container=\"body\"\n formControlName=\"expires_at\"\n [readonly]=\"true\"\n ngbDatepicker\n #c=\"ngbDatepicker\"\n [attr.aria-label]=\" 'Admin.Subscriptions.MainExpiryDate' | transloco \" />\n <button class=\"btn btn-primary\"\n type=\"button\"\n [disabled]=\"true\"\n aria-label=\"Open date picker\"\n (click)=\"c.toggle()\">\n <i\n class=\"fa fa-calendar\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SuperAdmin'\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.PurchasedSeats' | transloco\"\n [label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\"\n name=\"purchased_units\"\n controlId=\"sub-details-purchased_units\">\n <input type=\"number\"\n id=\"sub-details-purchased_units\"\n min=\"0\"\n readonly\n class=\"form-control\"\n formControlName=\"purchased_units\"\n [attr.aria-label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\" />\n </pw-input-container>\n </div>\n <!-- Readonly Ends -->\n </div>\n <!-- social links -->\n <h3>{{ 'Admin.Subscriptions.Section.SocialLinks' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Facebook' | transloco\"\n [label]=\"'Admin.Subscriptions.Facebook' | transloco\"\n name=\"facebook_handle\"\n controlId=\"sub-details-facebook_handle\">\n <input type=\"text\"\n id=\"sub-details-facebook_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Facebook' | transloco\"\n formControlName=\"facebook_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Facebook' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Twitter' | transloco\"\n [label]=\"'Admin.Subscriptions.Twitter' | transloco\"\n name=\"twitter_handle\"\n controlId=\"sub-details-twitter_handle\">\n <input type=\"text\"\n id=\"sub-details-twitter_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Twitter' | transloco\"\n formControlName=\"twitter_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Twitter' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Linkedin' | transloco\"\n [label]=\"'Admin.Subscriptions.LinkedIn' | transloco\"\n name=\"linkedin_handle\"\n controlId=\"sub-details-linkedin_handle\">\n <input type=\"text\"\n id=\"sub-details-linkedin_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.LinkedIn' | transloco\"\n formControlName=\"linkedin_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.LinkedIn' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reddit' | transloco\"\n [label]=\"'Admin.Subscriptions.Reddit' | transloco\"\n name=\"reddit_handle\"\n controlId=\"sub-details-reddit_handle\">\n <input type=\"text\"\n id=\"sub-details-reddit_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Reddit' | transloco\"\n formControlName=\"reddit_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Reddit' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <ng-container *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <h3>{{ 'Admin.Subscriptions.Section.Security' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Enforce2fa'| transloco\"\n label=\"Enforce 2FA\"\n name=\"enforce_2fa\" controlId=\"subscription-enforce_2fa\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch formControlName=\"enforce_2fa\"\n [attr.aria-labelledby]=\"'subscription-enforce_2fa-label'\"\n name=\"enforce_2fa\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </ng-container>\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"submitted\"\n class=\"btn btn-primary\"\n *rbacAllow=\"'Pages.Admin.Subscription.Edit'\">\n {{ 'Button.Save' | transloco }}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Products</a>\n <ng-template ngbNavContent>\n <pw-subscription-products></pw-subscription-products>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Members</a>\n <ng-template ngbNavContent>\n <pw-subscription-users></pw-subscription-users>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"4\"\n *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <a ngbNavLink>Ambassadors</a>\n <ng-template ngbNavContent>\n <pw-subscription-agents-list></pw-subscription-agents-list>\n </ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n }\n </div>\n </div>\n </div>\n", styles: [".ui-autocomplete-multiple-container,.ui-fluid.skills-modal p-autocomplete{background:transparent}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}:host ::ng-deep .pw-label-style+p-multiselect{margin-top:6px}:host ::ng-deep .input-group .btn{min-height:36px;display:inline-flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i5.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$1.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: i7.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$1.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: "component", type: i10.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i4$1.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.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: i14.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i14.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i9.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: SubscriptionProductsComponent, selector: "pw-subscription-products" }, { kind: "component", type: SubscriptionUsersComponent, selector: "pw-subscription-users" }, { kind: "component", type: SubscriptionAgentsListComponent, selector: "pw-subscription-agents-list" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
8072
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", type: SubscriptionDetailsComponent, isStandalone: false, selector: "pw-subscription-details", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\"\n routerLink=\"/admin/subscriptions/list\"\n class=\"previous\">\n <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"m-subheader__title m-subheader__title--separator\">\n <span>Subscription Details</span>\n </h3>\n @if (currentSubscriber?.is_deleted) {\n <span class=\"badge rounded-pill bg-danger ms-2\"\n >Deleted</span>\n }\n </div>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!isLoading) {\n <div >\n <ul ngbNav\n #nav=\"ngbNav\" [activeId]=\"activeTabId\" (navChange)=\"onTabChange($event)\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Subscription</a>\n <ng-template ngbNavContent>\n <div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"mt-4\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"saveDetails()\">\n <h3>{{ 'Admin.Subscriptions.Section.IdentityContact' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Organization' | transloco\"\n [label]=\"'Admin.Subscriptions.Organization' | transloco\"\n name=\"organisation\"\n controlId=\"sub-details-organisation\">\n <input type=\"text\"\n id=\"sub-details-organisation\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n formControlName=\"organisation\"\n [attr.aria-label]=\"'Admin.Subscriptions.Organization' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactName' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactName' | transloco\"\n name=\"contact_name\"\n controlId=\"sub-details-contact_name\">\n <input type=\"text\"\n id=\"sub-details-contact_name\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactName' | transloco\"\n formControlName=\"contact_name\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactName' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactEmail' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactEmail' | transloco\"\n name=\"contact_email\"\n controlId=\"sub-details-contact_email\">\n <input type=\"text\"\n id=\"sub-details-contact_email\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactEmail' | transloco\"\n formControlName=\"contact_email\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactEmail' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.InvoiceRecipientEmails' | transloco\"\n [label]=\"'Admin.Subscriptions.InvoiceRecipientEmails' | transloco\"\n name=\"invoice_recipient_emails\"\n controlId=\"sub-details-invoice_recipient_emails\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.InvoiceRecipientEmails' | transloco\">\n <input type=\"text\"\n id=\"sub-details-invoice_recipient_emails\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.InvoiceRecipientEmails' | transloco\"\n formControlName=\"invoice_recipient_emails\"\n [ngClass]=\"{\n 'is-invalid': form.get('invoice_recipient_emails').touched && form.get('invoice_recipient_emails').invalid\n }\"\n [attr.aria-label]=\"'Admin.Subscriptions.InvoiceRecipientEmails' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactTel' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactTel' | transloco\"\n name=\"contact_tel\"\n controlId=\"sub-details-contact_tel\">\n <input type=\"text\"\n id=\"sub-details-contact_tel\"\n formControlName=\"contact_tel\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactTel' | transloco\"\n class=\"form-control\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactTel' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [label]=\"'Admin.Subscriptions.TaxId' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.TaxId' | transloco\"\n name=\"tax_id\"\n controlId=\"sub-details-tax_id\">\n <input type=\"text\"\n id=\"sub-details-tax_id\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.TaxId' | transloco\"\n formControlName=\"tax_id\"\n [attr.aria-label]=\"'Admin.Subscriptions.TaxId' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <span class=\"pw-label-style\" id=\"subscription-details-roles-label\" [pTooltip]=\"'Admin.Subscriptions.Tooltip.AssignedRoles' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">{{ 'Admin.Subscriptions.AssignedRoles' | transloco }}\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <p-multiSelect inputId=\"subscription-details-roles\" [options]=\"allRoles\"\n formControlName=\"roles\"\n appendTo=\"body\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.AssignedRoles' | transloco\"\n [ariaLabelledBy]=\"'subscription-details-roles-label'\"\n [ariaLabel]=\"'Admin.Subscriptions.AssignedRoles' | transloco\"></p-multiSelect>\n </div>\n @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\"\n [label]=\"'Organization.OrganizationType' | transloco\"\n name=\"organization_type_id\" controlId=\"subscription-organization_type_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_type_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n [options]=\"types['organization_types']\"\n formControlName=\"organization_type_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationType' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\"\n [label]=\"'Organization.OrganizationIndustry' | transloco\"\n name=\"organization_industry_id\" controlId=\"subscription-organization_industry_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_industry_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n [options]=\"industries['organization_industries']\"\n formControlName=\"organization_industry_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationIndustry' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationSizes$ | async; as sizes) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\"\n [label]=\"'Size' | transloco\"\n name=\"organization_size_id\" controlId=\"subscription-organization_size_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_size_id-label'\"\n [ariaLabel]=\"'Size' | transloco\"\n [options]=\"sizes['organization_sizes']\"\n formControlName=\"organization_size_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationSize' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CompanyUrl' | transloco\"\n [label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\"\n name=\"company_url\"\n controlId=\"sub-details-company_url\">\n <input type=\"text\"\n id=\"sub-details-company_url\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.CompanyUrl' | transloco\"\n formControlName=\"company_url\"\n [attr.aria-label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <h3>{{ 'Admin.Subscriptions.Section.PlanSeats' | transloco }}</h3>\n <div class=\"row\">\n <!-- Readonly Starts -->\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reference' | transloco\"\n [label]=\"'Admin.Subscriptions.Reference' | transloco\"\n name=\"reference_number\"\n controlId=\"sub-details-reference_number\">\n @if (form) {\n <input type=\"text\"\n id=\"sub-details-reference_number\"\n readonly\n class=\"form-control\"\n data-control=\"reference\"\n [value]=\"form.get('reference_number')?.value\"\n [attr.aria-label]=\"'Admin.Subscriptions.Reference' | transloco\" />\n }\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.UnitsInUse' | transloco\"\n [label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\"\n name=\"units_in_use\"\n controlId=\"sub-details-units_in_use\">\n <input type=\"text\"\n id=\"sub-details-units_in_use\"\n readonly\n class=\"form-control\"\n formControlName=\"units_in_use\"\n [attr.aria-label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MaxUnits' | transloco\"\n [label]=\"'Admin.Subscriptions.MaxUnits' | transloco\"\n name=\"max_units\"\n controlId=\"sub-details-max_units\">\n <input type=\"text\"\n id=\"sub-details-max_units\"\n readonly\n class=\"form-control\"\n formControlName=\"max_units\"\n [attr.aria-label]=\"'Admin.Subscriptions.MaxUnits' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CalculatedPrice' | transloco\"\n [label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\"\n name=\"calculated_price\"\n controlId=\"sub-details-calculated_price\">\n <input type=\"text\"\n id=\"sub-details-calculated_price\"\n class=\"form-control\"\n readonly\n formControlName=\"calculated_price\"\n [attr.aria-label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MainExpiryDate' | transloco\"\n [label]=\"\n 'Admin.Subscriptions.MainExpiryDate' | transloco\n \"\n name=\"expires_at\" controlId=\"sub-details-expires_at\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"sub-details-expires_at\"\n name=\"expires_at\"\n container=\"body\"\n formControlName=\"expires_at\"\n [readonly]=\"true\"\n ngbDatepicker\n #c=\"ngbDatepicker\"\n [attr.aria-label]=\" 'Admin.Subscriptions.MainExpiryDate' | transloco \" />\n <button class=\"btn btn-primary\"\n type=\"button\"\n [disabled]=\"true\"\n aria-label=\"Open date picker\"\n (click)=\"c.toggle()\">\n <i\n class=\"fa fa-calendar\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SuperAdmin'\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.PurchasedSeats' | transloco\"\n [label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\"\n name=\"purchased_units\"\n controlId=\"sub-details-purchased_units\">\n <input type=\"number\"\n id=\"sub-details-purchased_units\"\n min=\"0\"\n readonly\n class=\"form-control\"\n formControlName=\"purchased_units\"\n [attr.aria-label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\" />\n </pw-input-container>\n </div>\n <!-- Readonly Ends -->\n </div>\n <!-- social links -->\n <h3>{{ 'Admin.Subscriptions.Section.SocialLinks' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Facebook' | transloco\"\n [label]=\"'Admin.Subscriptions.Facebook' | transloco\"\n name=\"facebook_handle\"\n controlId=\"sub-details-facebook_handle\">\n <input type=\"text\"\n id=\"sub-details-facebook_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Facebook' | transloco\"\n formControlName=\"facebook_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Facebook' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Twitter' | transloco\"\n [label]=\"'Admin.Subscriptions.Twitter' | transloco\"\n name=\"twitter_handle\"\n controlId=\"sub-details-twitter_handle\">\n <input type=\"text\"\n id=\"sub-details-twitter_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Twitter' | transloco\"\n formControlName=\"twitter_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Twitter' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Linkedin' | transloco\"\n [label]=\"'Admin.Subscriptions.LinkedIn' | transloco\"\n name=\"linkedin_handle\"\n controlId=\"sub-details-linkedin_handle\">\n <input type=\"text\"\n id=\"sub-details-linkedin_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.LinkedIn' | transloco\"\n formControlName=\"linkedin_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.LinkedIn' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reddit' | transloco\"\n [label]=\"'Admin.Subscriptions.Reddit' | transloco\"\n name=\"reddit_handle\"\n controlId=\"sub-details-reddit_handle\">\n <input type=\"text\"\n id=\"sub-details-reddit_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Reddit' | transloco\"\n formControlName=\"reddit_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Reddit' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <ng-container *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <h3>{{ 'Admin.Subscriptions.Section.Security' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Enforce2fa'| transloco\"\n label=\"Enforce 2FA\"\n name=\"enforce_2fa\" controlId=\"subscription-enforce_2fa\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch formControlName=\"enforce_2fa\"\n [attr.aria-labelledby]=\"'subscription-enforce_2fa-label'\"\n name=\"enforce_2fa\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </ng-container>\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"submitted\"\n class=\"btn btn-primary\"\n *rbacAllow=\"'Pages.Admin.Subscription.Edit'\">\n {{ 'Button.Save' | transloco }}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Products</a>\n <ng-template ngbNavContent>\n <pw-subscription-products></pw-subscription-products>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Members</a>\n <ng-template ngbNavContent>\n <pw-subscription-users></pw-subscription-users>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"4\"\n *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <a ngbNavLink>Ambassadors</a>\n <ng-template ngbNavContent>\n <pw-subscription-agents-list></pw-subscription-agents-list>\n </ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n }\n </div>\n </div>\n </div>\n", styles: [".ui-autocomplete-multiple-container,.ui-fluid.skills-modal p-autocomplete{background:transparent}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}:host ::ng-deep .pw-label-style+p-multiselect{margin-top:6px}:host ::ng-deep .input-group .btn{min-height:36px;display:inline-flex;align-items:center;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i5.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$1.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: i7.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$1.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: "component", type: i10.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "directive", type: i2.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i2.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i2.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i2.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i2.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i2.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i2.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: i4$1.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.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: i14.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i14.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i12.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i9.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i9.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: SubscriptionProductsComponent, selector: "pw-subscription-products" }, { kind: "component", type: SubscriptionUsersComponent, selector: "pw-subscription-users" }, { kind: "component", type: SubscriptionAgentsListComponent, selector: "pw-subscription-agents-list" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
|
|
8073
8073
|
}
|
|
8074
8074
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: SubscriptionDetailsComponent, decorators: [{
|
|
8075
8075
|
type: Component,
|
|
8076
|
-
args: [{ selector: 'pw-subscription-details', standalone: false, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\"\n routerLink=\"/admin/subscriptions/list\"\n class=\"previous\">\n <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"m-subheader__title m-subheader__title--separator\">\n <span>Subscription Details</span>\n </h3>\n @if (currentSubscriber?.is_deleted) {\n <span class=\"badge rounded-pill bg-danger ms-2\"\n >Deleted</span>\n }\n </div>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!isLoading) {\n <div >\n <ul ngbNav\n #nav=\"ngbNav\" [activeId]=\"activeTabId\" (navChange)=\"onTabChange($event)\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Subscription</a>\n <ng-template ngbNavContent>\n <div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"mt-4\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"saveDetails()\">\n <h3>{{ 'Admin.Subscriptions.Section.IdentityContact' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Organization' | transloco\"\n [label]=\"'Admin.Subscriptions.Organization' | transloco\"\n name=\"organisation\"\n controlId=\"sub-details-organisation\">\n <input type=\"text\"\n id=\"sub-details-organisation\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n formControlName=\"organisation\"\n [attr.aria-label]=\"'Admin.Subscriptions.Organization' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactName' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactName' | transloco\"\n name=\"contact_name\"\n controlId=\"sub-details-contact_name\">\n <input type=\"text\"\n id=\"sub-details-contact_name\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactName' | transloco\"\n formControlName=\"contact_name\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactName' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactEmail' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactEmail' | transloco\"\n name=\"contact_email\"\n controlId=\"sub-details-contact_email\">\n <input type=\"text\"\n id=\"sub-details-contact_email\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactEmail' | transloco\"\n formControlName=\"contact_email\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactEmail' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.InvoiceRecipientEmails' | transloco\"\n [label]=\"'Admin.Subscriptions.InvoiceRecipientEmails' | transloco\"\n name=\"invoice_recipient_emails\"\n controlId=\"sub-details-invoice_recipient_emails\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.InvoiceRecipientEmails' | transloco\">\n <input type=\"text\"\n id=\"sub-details-invoice_recipient_emails\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.InvoiceRecipientEmails' | transloco\"\n formControlName=\"invoice_recipient_emails\"\n [ngClass]=\"{\n 'is-invalid': form.get('invoice_recipient_emails').touched && form.get('invoice_recipient_emails').invalid\n }\"\n [attr.aria-label]=\"'Admin.Subscriptions.InvoiceRecipientEmails' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactTel' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactTel' | transloco\"\n name=\"contact_tel\"\n controlId=\"sub-details-contact_tel\">\n <input type=\"text\"\n id=\"sub-details-contact_tel\"\n formControlName=\"contact_tel\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactTel' | transloco\"\n class=\"form-control\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactTel' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [label]=\"'Admin.Subscriptions.TaxId' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.TaxId' | transloco\"\n name=\"tax_id\"\n controlId=\"sub-details-tax_id\">\n <input type=\"text\"\n id=\"sub-details-tax_id\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.TaxId' | transloco\"\n formControlName=\"tax_id\"\n [attr.aria-label]=\"'Admin.Subscriptions.TaxId' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <span class=\"pw-label-style\" id=\"subscription-details-roles-label\" [pTooltip]=\"'Admin.Subscriptions.Tooltip.AssignedRoles' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">{{ 'Admin.Subscriptions.AssignedRoles' | transloco }}\n <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <p-multiSelect inputId=\"subscription-details-roles\" [options]=\"allRoles\"\n formControlName=\"roles\"\n appendTo=\"body\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.AssignedRoles' | transloco\"\n [ariaLabelledBy]=\"'subscription-details-roles-label'\"\n [ariaLabel]=\"'Admin.Subscriptions.AssignedRoles' | transloco\"></p-multiSelect>\n </div>\n @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\"\n [label]=\"'Organization.OrganizationType' | transloco\"\n name=\"organization_type_id\" controlId=\"subscription-organization_type_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_type_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n [options]=\"types['organization_types']\"\n formControlName=\"organization_type_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationType' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\"\n [label]=\"'Organization.OrganizationIndustry' | transloco\"\n name=\"organization_industry_id\" controlId=\"subscription-organization_industry_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_industry_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n [options]=\"industries['organization_industries']\"\n formControlName=\"organization_industry_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationIndustry' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationSizes$ | async; as sizes) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\"\n [label]=\"'Size' | transloco\"\n name=\"organization_size_id\" controlId=\"subscription-organization_size_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_size_id-label'\"\n [ariaLabel]=\"'Size' | transloco\"\n [options]=\"sizes['organization_sizes']\"\n formControlName=\"organization_size_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationSize' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CompanyUrl' | transloco\"\n [label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\"\n name=\"company_url\"\n controlId=\"sub-details-company_url\">\n <input type=\"text\"\n id=\"sub-details-company_url\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.CompanyUrl' | transloco\"\n formControlName=\"company_url\"\n [attr.aria-label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <h3>{{ 'Admin.Subscriptions.Section.PlanSeats' | transloco }}</h3>\n <div class=\"row\">\n <!-- Readonly Starts -->\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reference' | transloco\"\n [label]=\"'Admin.Subscriptions.Reference' | transloco\"\n name=\"reference_number\"\n controlId=\"sub-details-reference_number\">\n @if (form) {\n <input type=\"text\"\n id=\"sub-details-reference_number\"\n readonly\n class=\"form-control\"\n data-control=\"reference\"\n [value]=\"form.get('reference_number')?.value\"\n [attr.aria-label]=\"'Admin.Subscriptions.Reference' | transloco\" />\n }\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.UnitsInUse' | transloco\"\n [label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\"\n name=\"units_in_use\"\n controlId=\"sub-details-units_in_use\">\n <input type=\"text\"\n id=\"sub-details-units_in_use\"\n readonly\n class=\"form-control\"\n formControlName=\"units_in_use\"\n [attr.aria-label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MaxUnits' | transloco\"\n [label]=\"'Admin.Subscriptions.MaxUnits' | transloco\"\n name=\"max_units\"\n controlId=\"sub-details-max_units\">\n <input type=\"text\"\n id=\"sub-details-max_units\"\n readonly\n class=\"form-control\"\n formControlName=\"max_units\"\n [attr.aria-label]=\"'Admin.Subscriptions.MaxUnits' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CalculatedPrice' | transloco\"\n [label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\"\n name=\"calculated_price\"\n controlId=\"sub-details-calculated_price\">\n <input type=\"text\"\n id=\"sub-details-calculated_price\"\n class=\"form-control\"\n readonly\n formControlName=\"calculated_price\"\n [attr.aria-label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MainExpiryDate' | transloco\"\n [label]=\"\n 'Admin.Subscriptions.MainExpiryDate' | transloco\n \"\n name=\"expires_at\" controlId=\"sub-details-expires_at\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"sub-details-expires_at\"\n name=\"expires_at\"\n container=\"body\"\n formControlName=\"expires_at\"\n [readonly]=\"true\"\n ngbDatepicker\n #c=\"ngbDatepicker\"\n [attr.aria-label]=\" 'Admin.Subscriptions.MainExpiryDate' | transloco \" />\n <button class=\"btn btn-primary\"\n type=\"button\"\n [disabled]=\"true\"\n aria-label=\"Open date picker\"\n (click)=\"c.toggle()\">\n <i\n class=\"fa fa-calendar\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SuperAdmin'\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.PurchasedSeats' | transloco\"\n [label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\"\n name=\"purchased_units\"\n controlId=\"sub-details-purchased_units\">\n <input type=\"number\"\n id=\"sub-details-purchased_units\"\n min=\"0\"\n readonly\n class=\"form-control\"\n formControlName=\"purchased_units\"\n [attr.aria-label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\" />\n </pw-input-container>\n </div>\n <!-- Readonly Ends -->\n </div>\n <!-- social links -->\n <h3>{{ 'Admin.Subscriptions.Section.SocialLinks' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Facebook' | transloco\"\n [label]=\"'Admin.Subscriptions.Facebook' | transloco\"\n name=\"facebook_handle\"\n controlId=\"sub-details-facebook_handle\">\n <input type=\"text\"\n id=\"sub-details-facebook_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Facebook' | transloco\"\n formControlName=\"facebook_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Facebook' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Twitter' | transloco\"\n [label]=\"'Admin.Subscriptions.Twitter' | transloco\"\n name=\"twitter_handle\"\n controlId=\"sub-details-twitter_handle\">\n <input type=\"text\"\n id=\"sub-details-twitter_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Twitter' | transloco\"\n formControlName=\"twitter_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Twitter' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Linkedin' | transloco\"\n [label]=\"'Admin.Subscriptions.LinkedIn' | transloco\"\n name=\"linkedin_handle\"\n controlId=\"sub-details-linkedin_handle\">\n <input type=\"text\"\n id=\"sub-details-linkedin_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.LinkedIn' | transloco\"\n formControlName=\"linkedin_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.LinkedIn' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reddit' | transloco\"\n [label]=\"'Admin.Subscriptions.Reddit' | transloco\"\n name=\"reddit_handle\"\n controlId=\"sub-details-reddit_handle\">\n <input type=\"text\"\n id=\"sub-details-reddit_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Reddit' | transloco\"\n formControlName=\"reddit_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Reddit' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <ng-container *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <h3>{{ 'Admin.Subscriptions.Section.Security' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Enforce2fa'| transloco\"\n label=\"Enforce 2FA\"\n name=\"enforce_2fa\" controlId=\"subscription-enforce_2fa\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch formControlName=\"enforce_2fa\"\n [attr.aria-labelledby]=\"'subscription-enforce_2fa-label'\"\n name=\"enforce_2fa\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </ng-container>\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"submitted\"\n class=\"btn btn-primary\"\n *rbacAllow=\"'Pages.Admin.Subscription.Edit'\">\n {{ 'Button.Save' | transloco }}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Products</a>\n <ng-template ngbNavContent>\n <pw-subscription-products></pw-subscription-products>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Members</a>\n <ng-template ngbNavContent>\n <pw-subscription-users></pw-subscription-users>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"4\"\n *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <a ngbNavLink>Ambassadors</a>\n <ng-template ngbNavContent>\n <pw-subscription-agents-list></pw-subscription-agents-list>\n </ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n }\n </div>\n </div>\n </div>\n", styles: [".ui-autocomplete-multiple-container,.ui-fluid.skills-modal p-autocomplete{background:transparent}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}:host ::ng-deep .pw-label-style+p-multiselect{margin-top:6px}:host ::ng-deep .input-group .btn{min-height:36px;display:inline-flex;align-items:center;justify-content:center}\n"] }]
|
|
8076
|
+
args: [{ selector: 'pw-subscription-details', standalone: false, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"me-auto col-xs-6 mt-4\">\n <a aria-label=\"Navigate to Target\"\n routerLink=\"/admin/subscriptions/list\"\n class=\"previous\">\n <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n <h3 class=\"m-subheader__title m-subheader__title--separator\">\n <span>Subscription Details</span>\n </h3>\n @if (currentSubscriber?.is_deleted) {\n <span class=\"badge rounded-pill bg-danger ms-2\"\n >Deleted</span>\n }\n </div>\n @if (isLoading) {\n <div class=\"w-100 text-center mt-3\"\n >\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n }\n @if (!isLoading) {\n <div >\n <ul ngbNav\n #nav=\"ngbNav\" [activeId]=\"activeTabId\" (navChange)=\"onTabChange($event)\"\n class=\"nav-tabs\">\n <li [ngbNavItem]=\"1\">\n <a ngbNavLink>Subscription</a>\n <ng-template ngbNavContent>\n <div class=\"container-fluid pw-tab overflow-hidden\">\n <div class=\"dashboard\">\n <div class=\"dashboard-body\">\n <div class=\"mt-4\">\n <form [formGroup]=\"form\"\n (ngSubmit)=\"saveDetails()\">\n <h3>{{ 'Admin.Subscriptions.Section.IdentityContact' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Organization' | transloco\"\n [label]=\"'Admin.Subscriptions.Organization' | transloco\"\n name=\"organisation\"\n controlId=\"sub-details-organisation\">\n <input type=\"text\"\n id=\"sub-details-organisation\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Organization' | transloco\"\n formControlName=\"organisation\"\n [attr.aria-label]=\"'Admin.Subscriptions.Organization' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactName' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactName' | transloco\"\n name=\"contact_name\"\n controlId=\"sub-details-contact_name\">\n <input type=\"text\"\n id=\"sub-details-contact_name\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactName' | transloco\"\n formControlName=\"contact_name\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactName' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactEmail' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactEmail' | transloco\"\n name=\"contact_email\"\n controlId=\"sub-details-contact_email\">\n <input type=\"text\"\n id=\"sub-details-contact_email\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactEmail' | transloco\"\n formControlName=\"contact_email\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactEmail' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.InvoiceRecipientEmails' | transloco\"\n [label]=\"'Admin.Subscriptions.InvoiceRecipientEmails' | transloco\"\n name=\"invoice_recipient_emails\"\n controlId=\"sub-details-invoice_recipient_emails\"\n [errorMsg]=\"'Admin.Subscriptions.Validation.InvoiceRecipientEmails' | transloco\">\n <input type=\"text\"\n id=\"sub-details-invoice_recipient_emails\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.InvoiceRecipientEmails' | transloco\"\n formControlName=\"invoice_recipient_emails\"\n [ngClass]=\"{\n 'is-invalid': form.get('invoice_recipient_emails').touched && form.get('invoice_recipient_emails').invalid\n }\"\n [attr.aria-label]=\"'Admin.Subscriptions.InvoiceRecipientEmails' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.ContactTel' | transloco\"\n [label]=\"'Admin.Subscriptions.ContactTel' | transloco\"\n name=\"contact_tel\"\n controlId=\"sub-details-contact_tel\">\n <input type=\"text\"\n id=\"sub-details-contact_tel\"\n formControlName=\"contact_tel\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.ContactTel' | transloco\"\n class=\"form-control\"\n [attr.aria-label]=\"'Admin.Subscriptions.ContactTel' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [label]=\"'Admin.Subscriptions.TaxId' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.TaxId' | transloco\"\n name=\"tax_id\"\n controlId=\"sub-details-tax_id\">\n <input type=\"text\"\n id=\"sub-details-tax_id\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.TaxId' | transloco\"\n formControlName=\"tax_id\"\n [attr.aria-label]=\"'Admin.Subscriptions.TaxId' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <span class=\"pw-label-style\" id=\"subscription-details-roles-label\" [pTooltip]=\"'Admin.Subscriptions.Tooltip.AssignedRoles' | transloco\" tooltipPosition=\"top\" appendTo=\"body\">{{ 'Admin.Subscriptions.AssignedRoles' | transloco }}\n <i class=\"far fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <p-multiSelect inputId=\"subscription-details-roles\" [options]=\"allRoles\"\n formControlName=\"roles\"\n appendTo=\"body\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.AssignedRoles' | transloco\"\n [ariaLabelledBy]=\"'subscription-details-roles-label'\"\n [ariaLabel]=\"'Admin.Subscriptions.AssignedRoles' | transloco\"></p-multiSelect>\n </div>\n @if (organizationTypes$ | async; as types) {\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationType' | transloco\"\n [label]=\"'Organization.OrganizationType' | transloco\"\n name=\"organization_type_id\" controlId=\"subscription-organization_type_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_type_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationType' | transloco\"\n [options]=\"types['organization_types']\"\n formControlName=\"organization_type_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationType' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationIndustries$ | async; as industries) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationIndustry' | transloco\"\n [label]=\"'Organization.OrganizationIndustry' | transloco\"\n name=\"organization_industry_id\" controlId=\"subscription-organization_industry_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_industry_id-label'\"\n [ariaLabel]=\"'Organization.OrganizationIndustry' | transloco\"\n [options]=\"industries['organization_industries']\"\n formControlName=\"organization_industry_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationIndustry' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n @if (organizationSizes$ | async; as sizes) {\n <div class=\"mb-3 col-sm-6 col-md-3\"\n >\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.OrganizationSize' | transloco\"\n [label]=\"'Size' | transloco\"\n name=\"organization_size_id\" controlId=\"subscription-organization_size_id\" [useAriaLabelledbyOnly]=\"true\">\n <p-select\n [ariaLabelledBy]=\"'subscription-organization_size_id-label'\"\n [ariaLabel]=\"'Size' | transloco\"\n [options]=\"sizes['organization_sizes']\"\n formControlName=\"organization_size_id\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.OrganizationSize' | transloco\"\n optionValue=\"id\"\n optionLabel=\"name\">\n </p-select>\n </pw-input-container>\n </div>\n }\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CompanyUrl' | transloco\"\n [label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\"\n name=\"company_url\"\n controlId=\"sub-details-company_url\">\n <input type=\"text\"\n id=\"sub-details-company_url\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.CompanyUrl' | transloco\"\n formControlName=\"company_url\"\n [attr.aria-label]=\"'Admin.Subscriptions.CompanyUrl' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <h3>{{ 'Admin.Subscriptions.Section.PlanSeats' | transloco }}</h3>\n <div class=\"row\">\n <!-- Readonly Starts -->\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reference' | transloco\"\n [label]=\"'Admin.Subscriptions.Reference' | transloco\"\n name=\"reference_number\"\n controlId=\"sub-details-reference_number\">\n @if (form) {\n <input type=\"text\"\n id=\"sub-details-reference_number\"\n readonly\n class=\"form-control\"\n data-control=\"reference\"\n [value]=\"form.get('reference_number')?.value\"\n [attr.aria-label]=\"'Admin.Subscriptions.Reference' | transloco\" />\n }\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.UnitsInUse' | transloco\"\n [label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\"\n name=\"units_in_use\"\n controlId=\"sub-details-units_in_use\">\n <input type=\"text\"\n id=\"sub-details-units_in_use\"\n readonly\n class=\"form-control\"\n formControlName=\"units_in_use\"\n [attr.aria-label]=\"'Admin.Subscriptions.UnitsInUse' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MaxUnits' | transloco\"\n [label]=\"'Admin.Subscriptions.MaxUnits' | transloco\"\n name=\"max_units\"\n controlId=\"sub-details-max_units\">\n <input type=\"text\"\n id=\"sub-details-max_units\"\n readonly\n class=\"form-control\"\n formControlName=\"max_units\"\n [attr.aria-label]=\"'Admin.Subscriptions.MaxUnits' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.CalculatedPrice' | transloco\"\n [label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\"\n name=\"calculated_price\"\n controlId=\"sub-details-calculated_price\">\n <input type=\"text\"\n id=\"sub-details-calculated_price\"\n class=\"form-control\"\n readonly\n formControlName=\"calculated_price\"\n [attr.aria-label]=\"'Admin.Subscriptions.CalculatedPrice' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.MainExpiryDate' | transloco\"\n [label]=\"\n 'Admin.Subscriptions.MainExpiryDate' | transloco\n \"\n name=\"expires_at\" controlId=\"sub-details-expires_at\">\n <div class=\"input-group\">\n <input class=\"form-control\"\n id=\"sub-details-expires_at\"\n name=\"expires_at\"\n container=\"body\"\n formControlName=\"expires_at\"\n [readonly]=\"true\"\n ngbDatepicker\n #c=\"ngbDatepicker\"\n [attr.aria-label]=\" 'Admin.Subscriptions.MainExpiryDate' | transloco \" />\n <button class=\"btn btn-primary\"\n type=\"button\"\n [disabled]=\"true\"\n aria-label=\"Open date picker\"\n (click)=\"c.toggle()\">\n <i\n class=\"fa fa-calendar\"\n aria-hidden=\"true\"\n ></i>\n </button>\n </div>\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\"\n *rbacAllow=\"'SuperAdmin'\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.PurchasedSeats' | transloco\"\n [label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\"\n name=\"purchased_units\"\n controlId=\"sub-details-purchased_units\">\n <input type=\"number\"\n id=\"sub-details-purchased_units\"\n min=\"0\"\n readonly\n class=\"form-control\"\n formControlName=\"purchased_units\"\n [attr.aria-label]=\"'Admin.Subscriptions.PurchasedSeats' | transloco\" />\n </pw-input-container>\n </div>\n <!-- Readonly Ends -->\n </div>\n <!-- social links -->\n <h3>{{ 'Admin.Subscriptions.Section.SocialLinks' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Facebook' | transloco\"\n [label]=\"'Admin.Subscriptions.Facebook' | transloco\"\n name=\"facebook_handle\"\n controlId=\"sub-details-facebook_handle\">\n <input type=\"text\"\n id=\"sub-details-facebook_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Facebook' | transloco\"\n formControlName=\"facebook_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Facebook' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Twitter' | transloco\"\n [label]=\"'Admin.Subscriptions.Twitter' | transloco\"\n name=\"twitter_handle\"\n controlId=\"sub-details-twitter_handle\">\n <input type=\"text\"\n id=\"sub-details-twitter_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Twitter' | transloco\"\n formControlName=\"twitter_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Twitter' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Linkedin' | transloco\"\n [label]=\"'Admin.Subscriptions.LinkedIn' | transloco\"\n name=\"linkedin_handle\"\n controlId=\"sub-details-linkedin_handle\">\n <input type=\"text\"\n id=\"sub-details-linkedin_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.LinkedIn' | transloco\"\n formControlName=\"linkedin_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.LinkedIn' | transloco\" />\n </pw-input-container>\n </div>\n <div class=\"mb-3 col-xs-12 col-sm-6 col-md-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Reddit' | transloco\"\n [label]=\"'Admin.Subscriptions.Reddit' | transloco\"\n name=\"reddit_handle\"\n controlId=\"sub-details-reddit_handle\">\n <input type=\"text\"\n id=\"sub-details-reddit_handle\"\n class=\"form-control\"\n [placeholder]=\"'Admin.Subscriptions.Placeholder.Reddit' | transloco\"\n formControlName=\"reddit_handle\"\n [attr.aria-label]=\"'Admin.Subscriptions.Reddit' | transloco\" />\n </pw-input-container>\n </div>\n </div>\n <ng-container *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <h3>{{ 'Admin.Subscriptions.Section.Security' | transloco }}</h3>\n <div class=\"row\">\n <div class=\"col-12 col-sm-3\">\n <pw-input-container [showTooltip]=\"true\"\n [tooltipText]=\"'Admin.Subscriptions.Tooltip.Enforce2fa'| transloco\"\n label=\"Enforce 2FA\"\n name=\"enforce_2fa\" controlId=\"subscription-enforce_2fa\" [useAriaLabelledbyOnly]=\"true\">\n <ui-switch formControlName=\"enforce_2fa\"\n [attr.aria-labelledby]=\"'subscription-enforce_2fa-label'\"\n name=\"enforce_2fa\">\n </ui-switch>\n </pw-input-container>\n </div>\n </div>\n </ng-container>\n <div class=\"row text-end mt-4\">\n <div class=\"col-12\">\n <button type=\"button\"\n class=\"btn btn-outline-default me-2\"\n (click)=\"back()\">\n {{ 'Button.Cancel' | transloco }}\n </button>\n <button type=\"submit\"\n [buttonBusy]=\"submitted\"\n class=\"btn btn-primary\"\n *rbacAllow=\"'Pages.Admin.Subscription.Edit'\">\n {{ 'Button.Save' | transloco }}\n </button>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n </div>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"2\">\n <a ngbNavLink>Products</a>\n <ng-template ngbNavContent>\n <pw-subscription-products></pw-subscription-products>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"3\">\n <a ngbNavLink>Members</a>\n <ng-template ngbNavContent>\n <pw-subscription-users></pw-subscription-users>\n </ng-template>\n </li>\n <li [ngbNavItem]=\"4\"\n *rbacAllow=\"'SubscriptionSuperAdmin'\">\n <a ngbNavLink>Ambassadors</a>\n <ng-template ngbNavContent>\n <pw-subscription-agents-list></pw-subscription-agents-list>\n </ng-template>\n </li>\n </ul>\n <div [ngbNavOutlet]=\"nav\"></div>\n </div>\n }\n </div>\n </div>\n </div>\n", styles: [".ui-autocomplete-multiple-container,.ui-fluid.skills-modal p-autocomplete{background:transparent}:host form>h3{display:block;border-top:1px solid #e2e5ea;margin-top:2rem;padding-top:1.25rem}:host form>h3:first-child{border-top:0;margin-top:.5rem;padding-top:0}:host ::ng-deep .pw-label-style+p-multiselect{margin-top:6px}:host ::ng-deep .input-group .btn{min-height:36px;display:inline-flex;align-items:center;justify-content:center}\n"] }]
|
|
8077
8077
|
}], ctorParameters: () => [{ type: i1$1.SubscriptionService }, { type: i1.AdminService }, { type: i3$1.DatePipe }, { type: i1$1.CommonService }, { type: i1$1.NgbDateCustomParserFormatter }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
|
|
8078
8078
|
|
|
8079
8079
|
class SubscriptionProductDetailsComponent extends AppBaseComponent {
|
|
@@ -11464,11 +11464,11 @@ class UserListComponent extends UsersListBaseComponent {
|
|
|
11464
11464
|
this.adminService.remove2fa(this.remove2faUserId, this.subscriptionId).subscribe();
|
|
11465
11465
|
}
|
|
11466
11466
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.19", 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$2.CollapsibleSidebarService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
11467
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", 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 flex-wrap justify-content-between align-items-baseline\">\n <h2 class=\"card-title p-0\">Users</h2>\n <a class=\"btn btn-sm btn-outline-primary\"\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=\"col-auto d-flex align-items-center\">\n <span class=\"ambassadors-only-toggle\"\n [pTooltip]=\"'Admin.Users.AmbassadorsOnly' | transloco\"\n tooltipPosition=\"top\" appendTo=\"body\">\n <ui-switch\n [checked]=\"showAmbassadorsOnly\"\n (change)=\"showAmbassadorsOnly = $event; onAmbassadorsOnlyToggle()\"\n [attr.aria-label]=\"'Admin.Users.AmbassadorsOnly' | transloco\">\n </ui-switch>\n </span>\n </div>\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 aria-label=\"Search users...\" />\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\" appendTo=\"body\">\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\" appendTo=\"body\">\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\" appendTo=\"body\">\n <i class=\"fa fa-cloud success\" ></i>\n </span>\n }\n @if (user?.ambassador_count > 0) {\n <span\n class=\"ms-2\"\n [pTooltip]=\"'Admin.Users.Tooltip.Ambassador' | transloco\"\n tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-handshake alpha-beta text-primary\" aria-hidden=\"true\"></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\" appendTo=\"body\">\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 pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\"\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 pTooltip=\"Disable 2FA\" tooltipPosition=\"top\" appendTo=\"body\"\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 pTooltip=\"Message\" tooltipPosition=\"top\" appendTo=\"body\"\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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\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 pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\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: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: 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}.ambassadors-only-toggle{display:inline-flex;align-items:center}.ambassadors-only-toggle ::ng-deep .switch small{display:flex;align-items:center;justify-content:center}.ambassadors-only-toggle ::ng-deep .switch small:after{content:\"\\f2b5\";font-family:\"Font Awesome 6 Pro\",sans-serif;font-weight:900;font-size:12px;line-height:1;color:var(--first)}\n"], dependencies: [{ kind: "component", type: i3.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.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.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.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: i6.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10.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: i3$2.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage", "destructive"], outputs: ["successEvent"] }, { kind: "component", type: i4$1.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i14.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i14.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" }] }); }
|
|
11467
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.19", 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 flex-wrap justify-content-between align-items-baseline\">\n <h2 class=\"card-title p-0\">Users</h2>\n <a class=\"btn btn-sm btn-outline-primary\"\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=\"col-auto d-flex align-items-center\">\n <span class=\"ambassadors-only-toggle\"\n [pTooltip]=\"'Admin.Users.AmbassadorsOnly' | transloco\"\n tooltipPosition=\"top\" appendTo=\"body\">\n <ui-switch\n [checked]=\"showAmbassadorsOnly\"\n (change)=\"showAmbassadorsOnly = $event; onAmbassadorsOnlyToggle()\"\n [attr.aria-label]=\"'Admin.Users.AmbassadorsOnly' | transloco\">\n </ui-switch>\n </span>\n </div>\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 aria-label=\"Search users...\" />\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\" appendTo=\"body\">\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\" appendTo=\"body\">\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\" appendTo=\"body\">\n <i class=\"fa fa-cloud success\" ></i>\n </span>\n }\n @if (user?.ambassador_count > 0) {\n <span\n class=\"ms-2\"\n [pTooltip]=\"'Admin.Users.Tooltip.Ambassador' | transloco\"\n tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-handshake alpha-beta text-primary\" aria-hidden=\"true\"></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\" appendTo=\"body\">\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 | isOnline) {\n <pw-online-indicator [lastSeen]=\"user.current_sign_in_at\" />\n } @else 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 pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\"\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 pTooltip=\"Disable 2FA\" tooltipPosition=\"top\" appendTo=\"body\"\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 pTooltip=\"Message\" tooltipPosition=\"top\" appendTo=\"body\"\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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\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 pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\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: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: 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}.ambassadors-only-toggle{display:inline-flex;align-items:center}.ambassadors-only-toggle ::ng-deep .switch small{display:flex;align-items:center;justify-content:center}.ambassadors-only-toggle ::ng-deep .switch small:after{content:\"\\f2b5\";font-family:\"Font Awesome 6 Pro\",sans-serif;font-weight:900;font-size:12px;line-height:1;color:var(--first)}\n"], dependencies: [{ kind: "component", type: i3.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.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i3.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i3.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i5.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.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: i6.InputText, selector: "[pInputText]", inputs: ["hostName", "ptInputText", "pInputTextPT", "pInputTextUnstyled", "pSize", "variant", "fluid", "invalid"] }, { kind: "component", type: i7$1.IconField, selector: "p-iconfield, p-iconField, p-icon-field", inputs: ["hostName", "iconPosition", "styleClass"] }, { kind: "component", type: i8.InputIcon, selector: "p-inputicon, p-inputIcon", inputs: ["hostName", "styleClass"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i9.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i9.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i9.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i10.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: i3$2.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage", "destructive"], outputs: ["successEvent"] }, { kind: "component", type: i4$1.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i3$2.OnlineIndicatorComponent, selector: "pw-online-indicator", inputs: ["lastSeen"] }, { kind: "component", type: i3$2.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "component", type: i3$2.RecordsSummaryComponent, selector: "pw-records-summary", inputs: ["showing", "total"] }, { kind: "directive", type: i14.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i14.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.IsOnlinePipe, name: "isOnline" }] }); }
|
|
11468
11468
|
}
|
|
11469
11469
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.19", ngImport: i0, type: UserListComponent, decorators: [{
|
|
11470
11470
|
type: Component,
|
|
11471
|
-
args: [{ selector: 'pw-admin-user-list', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n <h2 class=\"card-title p-0\">Users</h2>\n <a class=\"btn btn-sm btn-outline-primary\"\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=\"col-auto d-flex align-items-center\">\n <span class=\"ambassadors-only-toggle\"\n [pTooltip]=\"'Admin.Users.AmbassadorsOnly' | transloco\"\n tooltipPosition=\"top\" appendTo=\"body\">\n <ui-switch\n [checked]=\"showAmbassadorsOnly\"\n (change)=\"showAmbassadorsOnly = $event; onAmbassadorsOnlyToggle()\"\n [attr.aria-label]=\"'Admin.Users.AmbassadorsOnly' | transloco\">\n </ui-switch>\n </span>\n </div>\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 aria-label=\"Search users...\" />\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\" appendTo=\"body\">\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\" appendTo=\"body\">\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\" appendTo=\"body\">\n <i class=\"fa fa-cloud success\" ></i>\n </span>\n }\n @if (user?.ambassador_count > 0) {\n <span\n class=\"ms-2\"\n [pTooltip]=\"'Admin.Users.Tooltip.Ambassador' | transloco\"\n tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-handshake alpha-beta text-primary\" aria-hidden=\"true\"></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\" appendTo=\"body\">\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 pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\"\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 pTooltip=\"Disable 2FA\" tooltipPosition=\"top\" appendTo=\"body\"\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 pTooltip=\"Message\" tooltipPosition=\"top\" appendTo=\"body\"\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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\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 pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\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: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: 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}.ambassadors-only-toggle{display:inline-flex;align-items:center}.ambassadors-only-toggle ::ng-deep .switch small{display:flex;align-items:center;justify-content:center}.ambassadors-only-toggle ::ng-deep .switch small:after{content:\"\\f2b5\";font-family:\"Font Awesome 6 Pro\",sans-serif;font-weight:900;font-size:12px;line-height:1;color:var(--first)}\n"] }]
|
|
11471
|
+
args: [{ selector: 'pw-admin-user-list', standalone: false, template: "<div class=\"row\">\n <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-baseline\">\n <h2 class=\"card-title p-0\">Users</h2>\n <a class=\"btn btn-sm btn-outline-primary\"\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=\"col-auto d-flex align-items-center\">\n <span class=\"ambassadors-only-toggle\"\n [pTooltip]=\"'Admin.Users.AmbassadorsOnly' | transloco\"\n tooltipPosition=\"top\" appendTo=\"body\">\n <ui-switch\n [checked]=\"showAmbassadorsOnly\"\n (change)=\"showAmbassadorsOnly = $event; onAmbassadorsOnlyToggle()\"\n [attr.aria-label]=\"'Admin.Users.AmbassadorsOnly' | transloco\">\n </ui-switch>\n </span>\n </div>\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 aria-label=\"Search users...\" />\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\" appendTo=\"body\">\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\" appendTo=\"body\">\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\" appendTo=\"body\">\n <i class=\"fa fa-cloud success\" ></i>\n </span>\n }\n @if (user?.ambassador_count > 0) {\n <span\n class=\"ms-2\"\n [pTooltip]=\"'Admin.Users.Tooltip.Ambassador' | transloco\"\n tooltipPosition=\"top\" appendTo=\"body\">\n <i class=\"fa fa-handshake alpha-beta text-primary\" aria-hidden=\"true\"></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\" appendTo=\"body\">\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 | isOnline) {\n <pw-online-indicator [lastSeen]=\"user.current_sign_in_at\" />\n } @else 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 pTooltip=\"Impersonate this user\" tooltipPosition=\"top\" appendTo=\"body\"\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 pTooltip=\"Disable 2FA\" tooltipPosition=\"top\" appendTo=\"body\"\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 pTooltip=\"Message\" tooltipPosition=\"top\" appendTo=\"body\"\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 pTooltip=\"Edit\" tooltipPosition=\"top\" appendTo=\"body\"\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 pTooltip=\"Delete\" tooltipPosition=\"top\" appendTo=\"body\"\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: color-mix(in srgb, var(--first, rgb(23 105 225)) 85%, #000000);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255);--dashboard_bg: 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}.ambassadors-only-toggle{display:inline-flex;align-items:center}.ambassadors-only-toggle ::ng-deep .switch small{display:flex;align-items:center;justify-content:center}.ambassadors-only-toggle ::ng-deep .switch small:after{content:\"\\f2b5\";font-family:\"Font Awesome 6 Pro\",sans-serif;font-weight:900;font-size:12px;line-height:1;color:var(--first)}\n"] }]
|
|
11472
11472
|
}], 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$2.CollapsibleSidebarService }], propDecorators: { passwordValidationModalForUserDelete: [{
|
|
11473
11473
|
type: ViewChild,
|
|
11474
11474
|
args: ['passwordValidationModalForUserDelete', { static: false }]
|