@posiwise/resource-module 0.0.130 → 0.0.132
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.
- package/esm2022/lib/public/components/resource-company-card/resource-company-card.component.mjs +15 -6
- package/esm2022/lib/public/components/resource-edit-card/resource-edit-card.component.mjs +3 -3
- package/esm2022/lib/public/components/resource-integration/resource-integration.component.mjs +18 -11
- package/esm2022/lib/public/components/resource-post/related-resources/related-resources.component.mjs +3 -3
- package/esm2022/lib/public/components/resource-top-banner-edit/resource-top-banner-edit.component.mjs +3 -3
- package/esm2022/lib/public/components/resources/resource-tags/resource-tags.component.mjs +2 -2
- package/esm2022/lib/public/components/resources/vault-section/vault-section.component.mjs +3 -3
- package/esm2022/lib/public/components/resources-hub/resources-hub.component.mjs +7 -6
- package/fesm2022/posiwise-resource-module.mjs +47 -31
- package/fesm2022/posiwise-resource-module.mjs.map +1 -1
- package/lib/public/components/resource-company-card/resource-company-card.component.d.ts +4 -2
- package/lib/public/components/resource-integration/resource-integration.component.d.ts +1 -0
- package/lib/public/components/resources-hub/resources-hub.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -41,11 +41,11 @@ import moment from 'moment';
|
|
|
41
41
|
import * as i2$1 from '@ng-bootstrap/ng-bootstrap';
|
|
42
42
|
import * as i9 from 'primeng/autocomplete';
|
|
43
43
|
import { Swiper, Navigation, Pagination } from 'swiper';
|
|
44
|
+
import { Subject, takeUntil, forkJoin } from 'rxjs';
|
|
44
45
|
import * as i11 from '@angular/cdk/drag-drop';
|
|
45
46
|
import { moveItemInArray } from '@angular/cdk/drag-drop';
|
|
46
47
|
import * as i2$3 from '@angular/platform-browser';
|
|
47
48
|
import * as i5$2 from '@posiwise/admin-module-utils';
|
|
48
|
-
import { forkJoin } from 'rxjs';
|
|
49
49
|
|
|
50
50
|
class ResourceService {
|
|
51
51
|
constructor(api) {
|
|
@@ -315,11 +315,11 @@ class ResourceEditCardComponent extends AppBaseComponent {
|
|
|
315
315
|
HelperService.handleImageFallbackPath(event, fallbackPath);
|
|
316
316
|
}
|
|
317
317
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceEditCardComponent, deps: [{ token: i4.FormBuilder }, { token: i2$1.NgbModal }, { token: ResourceService }, { token: i2.TagService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
318
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourceEditCardComponent, selector: "pw-resource-edit-card", inputs: { id: "id", resourceData: "resourceData" }, outputs: { updated: "updated" }, usesInheritance: true, ngImport: i0, template: "<div class=\"edit-card\">\n <i class=\"fa fa-edit cursor-pointer text-dark in-page-edit-icon d-flex justify-content-center mb-2\"\n (click)=\"openModal(editResourceModal)\" title=\"Edit Resource\"></i>\n</div>\n\n<ng-template #editResourceModal let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Edit Resource</h5>\n <i class=\"fa fa-edit cursor-pointer text-dark in-page-edit-icon d-flex justify-content-center ms-3\"\n (click)=\"navigateToResourceEdit()\" title=\"Go to the main edit page\"></i>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n\n <div class=\"modal-body\">\n <form [formGroup]=\"editForm\">\n <div class=\"row\">\n\n\n <div class=\"col-12\">\n <pw-input-container label=\"Title\" name=\"title\">\n <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 row\">\n <pw-input-container label=\"CTA Text\" name=\"cta_text\" class=\"col-md-6\">\n <input type=\"text\" class=\"form-control\" formControlName=\"cta_text\" />\n </pw-input-container>\n\n <pw-input-container label=\"External URL\" name=\"external_url\" class=\"col-md-6\">\n <input type=\"text\" class=\"form-control\" formControlName=\"external_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12\">\n <pw-input-container\n [label]=\"'Resource.Posts.Body' | transloco\"\n name=\"body\"\n [errorMsg]=\"'Resource.Posts.Validation.Body' | transloco\">\n <quill-editor\n [styles]=\"{ height: '300px' }\"\n class=\"quillEditor\"\n [modules]=\"editorConfig\"\n formControlName=\"body\"\n [ngClass]=\"{\n 'w-100': true,\n 'quill-container': true,\n 'is-invalid': submitted && f['body'].errors\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-3 col-sm-6\">\n <pw-input-container\n [label]=\"'Resource.Posts.When' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.When' | transloco\"\n name=\"when\">\n <p-calendar formControlName=\"when\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\"\n [placeholder]=\"'Select Date'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['when'].errors }\">\n </p-calendar>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-8\">\n <pw-input-container\n [label]=\"'Resource.Posts.Tags' | transloco\"\n class=\"ui-fluid skills-modal tags\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\"\n name=\"cta_text\">\n <p-autoComplete [(ngModel)]=\"selectedTags\"\n class=\"body-bg\"\n [suggestions]=\"tagsSuggestion\"\n dataKey=\"id\"\n field=\"name\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n [minLength]=\"1\"\n [maxlength]=\"10\"\n [dropdown]=\"true\"\n [ngModelOptions]=\"{ standalone: true }\"\n placeholder=\"Tags\"\n [multiple]=\"true\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 row\">\n <div class=\"col-md-4 col-sm-6\">\n <pw-input-container\n [label]=\"'SHOWCASE'\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Mark as showcase post'\"\n name=\"showcase\">\n <ui-switch formControlName=\"showcase\" class=\"d-block\"></ui-switch>\n </pw-input-container>\n </div>\n\n <div class=\"col-md-4 col-sm-6\">\n <pw-input-container\n [label]=\"'PUBLISHED'\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Set to publish the post'\"\n name=\"published_at\">\n <ui-switch formControlName=\"published_at\" class=\"d-block\"></ui-switch>\n </pw-input-container>\n </div>\n\n <div class=\"col-md-4 col-sm-6\">\n <pw-input-container\n [label]=\"'ACCEPTED BY ADMIN'\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Indicates approval by admin'\"\n name=\"accepted_at\">\n <ui-switch formControlName=\"accepted_at\" class=\"d-block\"></ui-switch>\n </pw-input-container>\n </div>\n </div>\n\n <div class=\"col-12 col-md-4 col-sm-4 my-4 ms-3\">\n <div class=\"text-center mb-4\">\n <label for=\"coverPicture\">{{ 'Resource.Posts.CoverPicture' | transloco }}</label>\n <div class=\"text-center d-flex flex-column align-items-center\">\n <img [src]=\"(image && !image.includes('default-photo.jpg')) ? image : 'assets/img/resource/blog.png'\"\n (click)=\"openImageModal(imageCropContent)\"\n (keydown.enter)=\"openImageModal(imageCropContent)\"\n class=\"image w-100\"\n alt=\"Modal\"\n (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n <div class=\"d-flex justify-content-between align-items-center mt-2\">\n <a class=\"d-inline-block\" (click)=\"openImageModal(imageCropContent)\">\n {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n </a>\n <i *ngIf=\"image && !image.includes('default-photo.jpg')\"\n class=\"fa fa-trash delete-icon text-danger ms-2\"\n title=\"Remove Image\"\n (click)=\"removeImage()\"\n (keydown.enter)=\"removeImage()\"\n style=\"cursor: pointer;\"></i>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"col-12 col-md-4 col-sm-4 my-4 ms-3\">\n <div class=\"text-center mb-4\">\n <label for=\"rectangularPicture\">Rectangular Picture</label>\n <div class=\"text-center d-flex flex-column align-items-center\">\n <img [src]=\"(rectangularImage && !rectangularImage.includes('default-photo.jpg')) ? rectangularImage : 'assets/img/resource/blog.png'\"\n (click)=\"openRectModal(rectContent)\"\n (keydown.enter)=\"openRectModal(rectContent)\"\n class=\"image w-100\"\n alt=\"Uploaded rectangular media preview\"\n (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n <div class=\"d-flex justify-content-between align-items-center mt-2\">\n <a class=\"d-inline-block\" (click)=\"openRectModal(rectContent)\">\n {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n </a>\n <i *ngIf=\"rectangularImage && !rectangularImage.includes('default-photo.jpg')\"\n class=\"fa fa-trash delete-icon text-danger ms-2\"\n title=\"Remove Image\"\n (click)=\"deleteRectangularImage()\"\n (keydown.enter)=\"deleteRectangularImage()\"\n style=\"cursor: pointer;\"></i>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </form>\n </div>\n\n <div class=\"modal-footer\">\n <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\" (click)=\"saveResource()\">Save</button>\n </div>\n</ng-template>\n\n<ng-template #imageCropContent let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Picture</h5>\n <button type=\"button\" class=\"btn-close\" (click)=\"modal.dismiss()\"></button>\n </div>\n <div class=\"modal-body\">\n <small>You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n nudity, artwork or copyrighted images.)</small>\n <pw-image-cropper\n [aspectRatio]=\"'dynamic'\"\n (imageSelectionEvent)=\"onImageSelected($event)\"\n (closeEvent)=\"modal.close()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n\n<ng-template #rectContent let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Picture</h5>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n <div class=\"modal-body\">\n <small>You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n nudity, artwork or copyrighted images.)</small>\n <pw-image-cropper\n #profile\n [aspectRatio]=\"'dynamic'\"\n (imageSelectionEvent)=\"onRectangularImageSelection($event)\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n", styles: ["::ng-deep .modal-content{margin-top:5rem!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i7.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i5.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i9.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "variant"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i5.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i10.QuillEditorComponent, selector: "quill-editor" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i8.LazyImgDirective, selector: "img" }, { kind: "pipe", type: i10$1.TranslocoPipe, name: "transloco" }] }); }
|
|
318
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourceEditCardComponent, selector: "pw-resource-edit-card", inputs: { id: "id", resourceData: "resourceData" }, outputs: { updated: "updated" }, usesInheritance: true, ngImport: i0, template: "<div class=\"edit-card\">\n <i class=\"fa fa-edit cursor-pointer text-dark in-page-edit-icon d-flex justify-content-center mb-2\"\n (click)=\"openModal(editResourceModal)\" title=\"Edit Resource\"></i>\n</div>\n\n<ng-template #editResourceModal let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Edit Resource</h5>\n <i class=\"fa fa-edit cursor-pointer text-dark in-page-edit-icon d-flex justify-content-center ms-3\"\n (click)=\"navigateToResourceEdit()\" title=\"Go to the main edit page\"></i>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n\n <div class=\"modal-body\">\n <form [formGroup]=\"editForm\">\n <div class=\"row\">\n\n\n <div class=\"col-12\">\n <pw-input-container label=\"Title\" name=\"title\">\n <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 row\">\n <pw-input-container label=\"CTA Text\" name=\"cta_text\" class=\"col-md-6\">\n <input type=\"text\" class=\"form-control\" formControlName=\"cta_text\" />\n </pw-input-container>\n\n <pw-input-container label=\"External URL\" name=\"external_url\" class=\"col-md-6\">\n <input type=\"text\" class=\"form-control\" formControlName=\"external_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12\">\n <pw-input-container\n [label]=\"'Resource.Posts.Body' | transloco\"\n name=\"body\"\n [errorMsg]=\"'Resource.Posts.Validation.Body' | transloco\">\n <quill-editor\n [styles]=\"{ height: '300px' }\"\n class=\"quillEditor\"\n [modules]=\"editorConfig\"\n formControlName=\"body\"\n [ngClass]=\"{\n 'w-100': true,\n 'quill-container': true,\n 'is-invalid': submitted && f['body'].errors\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-3 col-sm-6\">\n <pw-input-container\n [label]=\"'Resource.Posts.When' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.When' | transloco\"\n name=\"when\">\n <p-calendar formControlName=\"when\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\"\n [placeholder]=\"'Select Date'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['when'].errors }\">\n </p-calendar>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-8\">\n <pw-input-container\n [label]=\"'Resource.Posts.Tags' | transloco\"\n class=\"ui-fluid skills-modal tags\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\"\n name=\"cta_text\">\n <p-autoComplete [(ngModel)]=\"selectedTags\"\n class=\"body-bg\"\n [suggestions]=\"tagsSuggestion\"\n dataKey=\"id\"\n field=\"name\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n [minLength]=\"1\"\n [maxlength]=\"10\"\n [dropdown]=\"true\"\n [ngModelOptions]=\"{ standalone: true }\"\n placeholder=\"Tags\"\n [multiple]=\"true\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 row\">\n <div class=\"col-md-4 col-sm-6\">\n <pw-input-container\n [label]=\"'SHOWCASE'\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Mark as showcase post'\"\n name=\"showcase\">\n <ui-switch formControlName=\"showcase\" class=\"d-block\"></ui-switch>\n </pw-input-container>\n </div>\n\n <div class=\"col-md-4 col-sm-6\">\n <pw-input-container\n [label]=\"'PUBLISHED'\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Set to publish the post'\"\n name=\"published_at\">\n <ui-switch formControlName=\"published_at\" class=\"d-block\"></ui-switch>\n </pw-input-container>\n </div>\n\n <div class=\"col-md-4 col-sm-6\">\n <pw-input-container\n [label]=\"'ACCEPTED BY ADMIN'\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Indicates approval by admin'\"\n name=\"accepted_at\">\n <ui-switch formControlName=\"accepted_at\" class=\"d-block\"></ui-switch>\n </pw-input-container>\n </div>\n </div>\n\n <div class=\"col-12 col-md-4 col-sm-4 my-4 ms-3\">\n <div class=\"text-center mb-4\">\n <label for=\"coverPicture\">{{ 'Resource.Posts.CoverPicture' | transloco }}</label>\n <div class=\"text-center d-flex flex-column align-items-center\">\n <img [src]=\"(image && !image.includes('default-photo.jpg')) ? image : 'assets/img/resource/blog.png'\"\n (click)=\"openImageModal(imageCropContent)\"\n (keydown.enter)=\"openImageModal(imageCropContent)\"\n class=\"image w-100\"\n alt=\"Modal\"\n (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n <div class=\"d-flex justify-content-between align-items-center mt-2\">\n <a class=\"d-inline-block\" (click)=\"openImageModal(imageCropContent)\">\n {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n </a>\n <i *ngIf=\"image && !image.includes('default-photo.jpg')\"\n class=\"fa fa-trash delete-icon text-danger ms-2 cursor-pointer\"\n title=\"Remove Image\"\n (click)=\"removeImage()\"\n (keydown.enter)=\"removeImage()\"></i>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"col-12 col-md-4 col-sm-4 my-4 ms-3\">\n <div class=\"text-center mb-4\">\n <label for=\"rectangularPicture\">Rectangular Picture</label>\n <div class=\"text-center d-flex flex-column align-items-center\">\n <img [src]=\"(rectangularImage && !rectangularImage.includes('default-photo.jpg')) ? rectangularImage : 'assets/img/resource/blog.png'\"\n (click)=\"openRectModal(rectContent)\"\n (keydown.enter)=\"openRectModal(rectContent)\"\n class=\"image w-100\"\n alt=\"Uploaded rectangular media preview\"\n (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n <div class=\"d-flex justify-content-between align-items-center mt-2\">\n <a class=\"d-inline-block\" (click)=\"openRectModal(rectContent)\">\n {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n </a>\n <i *ngIf=\"rectangularImage && !rectangularImage.includes('default-photo.jpg')\"\n class=\"fa fa-trash delete-icon text-danger ms-2 cursor-pointer\"\n title=\"Remove Image\"\n (click)=\"deleteRectangularImage()\"\n (keydown.enter)=\"deleteRectangularImage()\"></i>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </form>\n </div>\n\n <div class=\"modal-footer\">\n <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\" (click)=\"saveResource()\">Save</button>\n </div>\n</ng-template>\n\n<ng-template #imageCropContent let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Picture</h5>\n <button type=\"button\" class=\"btn-close\" (click)=\"modal.dismiss()\"></button>\n </div>\n <div class=\"modal-body\">\n <small>You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n nudity, artwork or copyrighted images.)</small>\n <pw-image-cropper\n [aspectRatio]=\"'dynamic'\"\n (imageSelectionEvent)=\"onImageSelected($event)\"\n (closeEvent)=\"modal.close()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n\n<ng-template #rectContent let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Picture</h5>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n <div class=\"modal-body\">\n <small>You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n nudity, artwork or copyrighted images.)</small>\n <pw-image-cropper\n #profile\n [aspectRatio]=\"'dynamic'\"\n (imageSelectionEvent)=\"onRectangularImageSelection($event)\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n", styles: ["::ng-deep .modal-content{margin-top:5rem!important}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i7.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "component", type: i5.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i9.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "variant"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i5.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i10.QuillEditorComponent, selector: "quill-editor" }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i8.LazyImgDirective, selector: "img" }, { kind: "pipe", type: i10$1.TranslocoPipe, name: "transloco" }] }); }
|
|
319
319
|
}
|
|
320
320
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceEditCardComponent, decorators: [{
|
|
321
321
|
type: Component,
|
|
322
|
-
args: [{ selector: 'pw-resource-edit-card', template: "<div class=\"edit-card\">\n <i class=\"fa fa-edit cursor-pointer text-dark in-page-edit-icon d-flex justify-content-center mb-2\"\n (click)=\"openModal(editResourceModal)\" title=\"Edit Resource\"></i>\n</div>\n\n<ng-template #editResourceModal let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Edit Resource</h5>\n <i class=\"fa fa-edit cursor-pointer text-dark in-page-edit-icon d-flex justify-content-center ms-3\"\n (click)=\"navigateToResourceEdit()\" title=\"Go to the main edit page\"></i>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n\n <div class=\"modal-body\">\n <form [formGroup]=\"editForm\">\n <div class=\"row\">\n\n\n <div class=\"col-12\">\n <pw-input-container label=\"Title\" name=\"title\">\n <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 row\">\n <pw-input-container label=\"CTA Text\" name=\"cta_text\" class=\"col-md-6\">\n <input type=\"text\" class=\"form-control\" formControlName=\"cta_text\" />\n </pw-input-container>\n\n <pw-input-container label=\"External URL\" name=\"external_url\" class=\"col-md-6\">\n <input type=\"text\" class=\"form-control\" formControlName=\"external_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12\">\n <pw-input-container\n [label]=\"'Resource.Posts.Body' | transloco\"\n name=\"body\"\n [errorMsg]=\"'Resource.Posts.Validation.Body' | transloco\">\n <quill-editor\n [styles]=\"{ height: '300px' }\"\n class=\"quillEditor\"\n [modules]=\"editorConfig\"\n formControlName=\"body\"\n [ngClass]=\"{\n 'w-100': true,\n 'quill-container': true,\n 'is-invalid': submitted && f['body'].errors\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-3 col-sm-6\">\n <pw-input-container\n [label]=\"'Resource.Posts.When' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.When' | transloco\"\n name=\"when\">\n <p-calendar formControlName=\"when\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\"\n [placeholder]=\"'Select Date'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['when'].errors }\">\n </p-calendar>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-8\">\n <pw-input-container\n [label]=\"'Resource.Posts.Tags' | transloco\"\n class=\"ui-fluid skills-modal tags\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\"\n name=\"cta_text\">\n <p-autoComplete [(ngModel)]=\"selectedTags\"\n class=\"body-bg\"\n [suggestions]=\"tagsSuggestion\"\n dataKey=\"id\"\n field=\"name\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n [minLength]=\"1\"\n [maxlength]=\"10\"\n [dropdown]=\"true\"\n [ngModelOptions]=\"{ standalone: true }\"\n placeholder=\"Tags\"\n [multiple]=\"true\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 row\">\n <div class=\"col-md-4 col-sm-6\">\n <pw-input-container\n [label]=\"'SHOWCASE'\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Mark as showcase post'\"\n name=\"showcase\">\n <ui-switch formControlName=\"showcase\" class=\"d-block\"></ui-switch>\n </pw-input-container>\n </div>\n\n <div class=\"col-md-4 col-sm-6\">\n <pw-input-container\n [label]=\"'PUBLISHED'\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Set to publish the post'\"\n name=\"published_at\">\n <ui-switch formControlName=\"published_at\" class=\"d-block\"></ui-switch>\n </pw-input-container>\n </div>\n\n <div class=\"col-md-4 col-sm-6\">\n <pw-input-container\n [label]=\"'ACCEPTED BY ADMIN'\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Indicates approval by admin'\"\n name=\"accepted_at\">\n <ui-switch formControlName=\"accepted_at\" class=\"d-block\"></ui-switch>\n </pw-input-container>\n </div>\n </div>\n\n <div class=\"col-12 col-md-4 col-sm-4 my-4 ms-3\">\n <div class=\"text-center mb-4\">\n <label for=\"coverPicture\">{{ 'Resource.Posts.CoverPicture' | transloco }}</label>\n <div class=\"text-center d-flex flex-column align-items-center\">\n <img [src]=\"(image && !image.includes('default-photo.jpg')) ? image : 'assets/img/resource/blog.png'\"\n (click)=\"openImageModal(imageCropContent)\"\n (keydown.enter)=\"openImageModal(imageCropContent)\"\n class=\"image w-100\"\n alt=\"Modal\"\n (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n <div class=\"d-flex justify-content-between align-items-center mt-2\">\n <a class=\"d-inline-block\" (click)=\"openImageModal(imageCropContent)\">\n {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n </a>\n <i *ngIf=\"image && !image.includes('default-photo.jpg')\"\n class=\"fa fa-trash delete-icon text-danger ms-2\"\n title=\"Remove Image\"\n (click)=\"removeImage()\"\n (keydown.enter)=\"removeImage()\"
|
|
322
|
+
args: [{ selector: 'pw-resource-edit-card', template: "<div class=\"edit-card\">\n <i class=\"fa fa-edit cursor-pointer text-dark in-page-edit-icon d-flex justify-content-center mb-2\"\n (click)=\"openModal(editResourceModal)\" title=\"Edit Resource\"></i>\n</div>\n\n<ng-template #editResourceModal let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Edit Resource</h5>\n <i class=\"fa fa-edit cursor-pointer text-dark in-page-edit-icon d-flex justify-content-center ms-3\"\n (click)=\"navigateToResourceEdit()\" title=\"Go to the main edit page\"></i>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n\n <div class=\"modal-body\">\n <form [formGroup]=\"editForm\">\n <div class=\"row\">\n\n\n <div class=\"col-12\">\n <pw-input-container label=\"Title\" name=\"title\">\n <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12 row\">\n <pw-input-container label=\"CTA Text\" name=\"cta_text\" class=\"col-md-6\">\n <input type=\"text\" class=\"form-control\" formControlName=\"cta_text\" />\n </pw-input-container>\n\n <pw-input-container label=\"External URL\" name=\"external_url\" class=\"col-md-6\">\n <input type=\"text\" class=\"form-control\" formControlName=\"external_url\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12\">\n <pw-input-container\n [label]=\"'Resource.Posts.Body' | transloco\"\n name=\"body\"\n [errorMsg]=\"'Resource.Posts.Validation.Body' | transloco\">\n <quill-editor\n [styles]=\"{ height: '300px' }\"\n class=\"quillEditor\"\n [modules]=\"editorConfig\"\n formControlName=\"body\"\n [ngClass]=\"{\n 'w-100': true,\n 'quill-container': true,\n 'is-invalid': submitted && f['body'].errors\n }\">\n </quill-editor>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-3 col-sm-6\">\n <pw-input-container\n [label]=\"'Resource.Posts.When' | transloco\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.When' | transloco\"\n name=\"when\">\n <p-calendar formControlName=\"when\"\n [showIcon]=\"true\"\n dateFormat=\"dd-M-yy\"\n [placeholder]=\"'Select Date'\"\n [ngClass]=\"{ 'is-invalid': submitted && f['when'].errors }\">\n </p-calendar>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 col-md-8\">\n <pw-input-container\n [label]=\"'Resource.Posts.Tags' | transloco\"\n class=\"ui-fluid skills-modal tags\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\"\n name=\"cta_text\">\n <p-autoComplete [(ngModel)]=\"selectedTags\"\n class=\"body-bg\"\n [suggestions]=\"tagsSuggestion\"\n dataKey=\"id\"\n field=\"name\"\n (completeMethod)=\"search($event)\"\n styleClass=\"w-100\"\n [minLength]=\"1\"\n [maxlength]=\"10\"\n [dropdown]=\"true\"\n [ngModelOptions]=\"{ standalone: true }\"\n placeholder=\"Tags\"\n [multiple]=\"true\">\n </p-autoComplete>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 row\">\n <div class=\"col-md-4 col-sm-6\">\n <pw-input-container\n [label]=\"'SHOWCASE'\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Mark as showcase post'\"\n name=\"showcase\">\n <ui-switch formControlName=\"showcase\" class=\"d-block\"></ui-switch>\n </pw-input-container>\n </div>\n\n <div class=\"col-md-4 col-sm-6\">\n <pw-input-container\n [label]=\"'PUBLISHED'\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Set to publish the post'\"\n name=\"published_at\">\n <ui-switch formControlName=\"published_at\" class=\"d-block\"></ui-switch>\n </pw-input-container>\n </div>\n\n <div class=\"col-md-4 col-sm-6\">\n <pw-input-container\n [label]=\"'ACCEPTED BY ADMIN'\"\n [showTooltip]=\"true\"\n [tooltipText]=\"'Indicates approval by admin'\"\n name=\"accepted_at\">\n <ui-switch formControlName=\"accepted_at\" class=\"d-block\"></ui-switch>\n </pw-input-container>\n </div>\n </div>\n\n <div class=\"col-12 col-md-4 col-sm-4 my-4 ms-3\">\n <div class=\"text-center mb-4\">\n <label for=\"coverPicture\">{{ 'Resource.Posts.CoverPicture' | transloco }}</label>\n <div class=\"text-center d-flex flex-column align-items-center\">\n <img [src]=\"(image && !image.includes('default-photo.jpg')) ? image : 'assets/img/resource/blog.png'\"\n (click)=\"openImageModal(imageCropContent)\"\n (keydown.enter)=\"openImageModal(imageCropContent)\"\n class=\"image w-100\"\n alt=\"Modal\"\n (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n <div class=\"d-flex justify-content-between align-items-center mt-2\">\n <a class=\"d-inline-block\" (click)=\"openImageModal(imageCropContent)\">\n {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n </a>\n <i *ngIf=\"image && !image.includes('default-photo.jpg')\"\n class=\"fa fa-trash delete-icon text-danger ms-2 cursor-pointer\"\n title=\"Remove Image\"\n (click)=\"removeImage()\"\n (keydown.enter)=\"removeImage()\"></i>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"col-12 col-md-4 col-sm-4 my-4 ms-3\">\n <div class=\"text-center mb-4\">\n <label for=\"rectangularPicture\">Rectangular Picture</label>\n <div class=\"text-center d-flex flex-column align-items-center\">\n <img [src]=\"(rectangularImage && !rectangularImage.includes('default-photo.jpg')) ? rectangularImage : 'assets/img/resource/blog.png'\"\n (click)=\"openRectModal(rectContent)\"\n (keydown.enter)=\"openRectModal(rectContent)\"\n class=\"image w-100\"\n alt=\"Uploaded rectangular media preview\"\n (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n <div class=\"d-flex justify-content-between align-items-center mt-2\">\n <a class=\"d-inline-block\" (click)=\"openRectModal(rectContent)\">\n {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n </a>\n <i *ngIf=\"rectangularImage && !rectangularImage.includes('default-photo.jpg')\"\n class=\"fa fa-trash delete-icon text-danger ms-2 cursor-pointer\"\n title=\"Remove Image\"\n (click)=\"deleteRectangularImage()\"\n (keydown.enter)=\"deleteRectangularImage()\"></i>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n </form>\n </div>\n\n <div class=\"modal-footer\">\n <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\" (click)=\"saveResource()\">Save</button>\n </div>\n</ng-template>\n\n<ng-template #imageCropContent let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Picture</h5>\n <button type=\"button\" class=\"btn-close\" (click)=\"modal.dismiss()\"></button>\n </div>\n <div class=\"modal-body\">\n <small>You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n nudity, artwork or copyrighted images.)</small>\n <pw-image-cropper\n [aspectRatio]=\"'dynamic'\"\n (imageSelectionEvent)=\"onImageSelected($event)\"\n (closeEvent)=\"modal.close()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n\n<ng-template #rectContent let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Picture</h5>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n <div class=\"modal-body\">\n <small>You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n nudity, artwork or copyrighted images.)</small>\n <pw-image-cropper\n #profile\n [aspectRatio]=\"'dynamic'\"\n (imageSelectionEvent)=\"onRectangularImageSelection($event)\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n", styles: ["::ng-deep .modal-content{margin-top:5rem!important}\n"] }]
|
|
323
323
|
}], ctorParameters: () => [{ type: i4.FormBuilder }, { type: i2$1.NgbModal }, { type: ResourceService }, { type: i2.TagService }, { type: i0.Injector }], propDecorators: { id: [{
|
|
324
324
|
type: Input
|
|
325
325
|
}], resourceData: [{
|
|
@@ -615,11 +615,11 @@ class ResourceTopBannerEditComponent extends AppBaseComponent {
|
|
|
615
615
|
});
|
|
616
616
|
}
|
|
617
617
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceTopBannerEditComponent, deps: [{ token: i4.FormBuilder }, { token: i2$1.NgbModal }, { token: i2.TagService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
618
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourceTopBannerEditComponent, selector: "pw-resource-top-banner-edit", inputs: { blogPostTag: "blogPostTag" }, outputs: { getUpdatedTag: "getUpdatedTag" }, viewQueries: [{ propertyName: "editModal", first: true, predicate: ["editModal"], descendants: true }, { propertyName: "imageCropContent", first: true, predicate: ["imageCropContent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"edit-card\">\n <i class=\"fa fa-edit cursor-pointer text-black in-page-edit-icon mb-1 ms-3\"\n (click)=\"openEditModal()\" title=\"Edit Blog Tag\"></i>\n</div>\n\n <ng-template #editModal let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Edit Blog Post Tag</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n\n <div class=\"modal-body\">\n <form [formGroup]=\"form\">\n <div class=\"row\">\n\n <div class=\"col-12\">\n <pw-input-container label=\"Title\" name=\"title\">\n <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12\">\n <pw-input-container label=\"Description\" name=\"description\">\n <textarea class=\"form-control\" rows=\"4\" formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 my-4\">\n <label for=\"tagImage\">Blog Tag Image</label>\n <div class=\"text-center d-flex flex-column align-items-center col-6\">\n <img [src]=\"image || defaultImage\"\n (click)=\"openImageModal(imageCropContent)\"\n class=\"image w-100\"\n alt=\"Blog Image\"\n (error)=\"handleImageError($event)\"\n />\n <div class=\"d-flex justify-content-between align-items-center mt-2\">\n <a class=\"d-inline-block mt-2\"\n (click)=\"openModal(imageCropContent)\">\n {{ image ? 'Update' : 'Add' }} Image\n </a>\n <i *ngIf=\"image\"\n class=\"fa fa-trash delete-icon text-danger ms-2\"\n title=\"Remove Image\"\n (click)=\"removeImage()\"
|
|
618
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourceTopBannerEditComponent, selector: "pw-resource-top-banner-edit", inputs: { blogPostTag: "blogPostTag" }, outputs: { getUpdatedTag: "getUpdatedTag" }, viewQueries: [{ propertyName: "editModal", first: true, predicate: ["editModal"], descendants: true }, { propertyName: "imageCropContent", first: true, predicate: ["imageCropContent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"edit-card\">\n <i class=\"fa fa-edit cursor-pointer text-black in-page-edit-icon mb-1 ms-3\"\n (click)=\"openEditModal()\" title=\"Edit Blog Tag\"></i>\n</div>\n\n <ng-template #editModal let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Edit Blog Post Tag</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n\n <div class=\"modal-body\">\n <form [formGroup]=\"form\">\n <div class=\"row\">\n\n <div class=\"col-12\">\n <pw-input-container label=\"Title\" name=\"title\">\n <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12\">\n <pw-input-container label=\"Description\" name=\"description\">\n <textarea class=\"form-control\" rows=\"4\" formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 my-4\">\n <label for=\"tagImage\">Blog Tag Image</label>\n <div class=\"text-center d-flex flex-column align-items-center col-6\">\n <img [src]=\"image || defaultImage\"\n (click)=\"openImageModal(imageCropContent)\"\n class=\"image w-100\"\n alt=\"Blog Image\"\n (error)=\"handleImageError($event)\"\n />\n <div class=\"d-flex justify-content-between align-items-center mt-2\">\n <a class=\"d-inline-block mt-2\"\n (click)=\"openModal(imageCropContent)\">\n {{ image ? 'Update' : 'Add' }} Image\n </a>\n <i *ngIf=\"image\"\n class=\"fa fa-trash delete-icon text-danger ms-2 cursor-pointer\"\n title=\"Remove Image\"\n (click)=\"removeImage()\"></i>\n </div>\n </div>\n </div>\n\n </div>\n </form>\n </div>\n\n <div class=\"modal-footer\">\n <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\" (click)=\"save()\">Save</button>\n </div>\n </ng-template>\n\n <ng-template #imageCropContent let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Image</h5>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n <div class=\"modal-body\">\n <small>You can upload a JPG, GIF, or PNG file. Avoid artwork, celebrities, or copyrighted images.</small>\n <pw-image-cropper\n #cropper\n aspectRatio=\"dynamic\"\n (imageSelectionEvent)=\"onImageSelected($event)\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n </ng-template>\n", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i5.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i5.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i8.LazyImgDirective, selector: "img" }] }); }
|
|
619
619
|
}
|
|
620
620
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceTopBannerEditComponent, decorators: [{
|
|
621
621
|
type: Component,
|
|
622
|
-
args: [{ selector: 'pw-resource-top-banner-edit', template: "<div class=\"edit-card\">\n <i class=\"fa fa-edit cursor-pointer text-black in-page-edit-icon mb-1 ms-3\"\n (click)=\"openEditModal()\" title=\"Edit Blog Tag\"></i>\n</div>\n\n <ng-template #editModal let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Edit Blog Post Tag</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n\n <div class=\"modal-body\">\n <form [formGroup]=\"form\">\n <div class=\"row\">\n\n <div class=\"col-12\">\n <pw-input-container label=\"Title\" name=\"title\">\n <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12\">\n <pw-input-container label=\"Description\" name=\"description\">\n <textarea class=\"form-control\" rows=\"4\" formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 my-4\">\n <label for=\"tagImage\">Blog Tag Image</label>\n <div class=\"text-center d-flex flex-column align-items-center col-6\">\n <img [src]=\"image || defaultImage\"\n (click)=\"openImageModal(imageCropContent)\"\n class=\"image w-100\"\n alt=\"Blog Image\"\n (error)=\"handleImageError($event)\"\n />\n <div class=\"d-flex justify-content-between align-items-center mt-2\">\n <a class=\"d-inline-block mt-2\"\n (click)=\"openModal(imageCropContent)\">\n {{ image ? 'Update' : 'Add' }} Image\n </a>\n <i *ngIf=\"image\"\n class=\"fa fa-trash delete-icon text-danger ms-2\"\n title=\"Remove Image\"\n (click)=\"removeImage()\"
|
|
622
|
+
args: [{ selector: 'pw-resource-top-banner-edit', template: "<div class=\"edit-card\">\n <i class=\"fa fa-edit cursor-pointer text-black in-page-edit-icon mb-1 ms-3\"\n (click)=\"openEditModal()\" title=\"Edit Blog Tag\"></i>\n</div>\n\n <ng-template #editModal let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Edit Blog Post Tag</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n\n <div class=\"modal-body\">\n <form [formGroup]=\"form\">\n <div class=\"row\">\n\n <div class=\"col-12\">\n <pw-input-container label=\"Title\" name=\"title\">\n <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n </pw-input-container>\n </div>\n\n <div class=\"col-12\">\n <pw-input-container label=\"Description\" name=\"description\">\n <textarea class=\"form-control\" rows=\"4\" formControlName=\"description\"></textarea>\n </pw-input-container>\n </div>\n\n <div class=\"col-12 my-4\">\n <label for=\"tagImage\">Blog Tag Image</label>\n <div class=\"text-center d-flex flex-column align-items-center col-6\">\n <img [src]=\"image || defaultImage\"\n (click)=\"openImageModal(imageCropContent)\"\n class=\"image w-100\"\n alt=\"Blog Image\"\n (error)=\"handleImageError($event)\"\n />\n <div class=\"d-flex justify-content-between align-items-center mt-2\">\n <a class=\"d-inline-block mt-2\"\n (click)=\"openModal(imageCropContent)\">\n {{ image ? 'Update' : 'Add' }} Image\n </a>\n <i *ngIf=\"image\"\n class=\"fa fa-trash delete-icon text-danger ms-2 cursor-pointer\"\n title=\"Remove Image\"\n (click)=\"removeImage()\"></i>\n </div>\n </div>\n </div>\n\n </div>\n </form>\n </div>\n\n <div class=\"modal-footer\">\n <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\" (click)=\"save()\">Save</button>\n </div>\n </ng-template>\n\n <ng-template #imageCropContent let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Image</h5>\n <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n <div class=\"modal-body\">\n <small>You can upload a JPG, GIF, or PNG file. Avoid artwork, celebrities, or copyrighted images.</small>\n <pw-image-cropper\n #cropper\n aspectRatio=\"dynamic\"\n (imageSelectionEvent)=\"onImageSelected($event)\"\n (closeEvent)=\"onClose()\">\n </pw-image-cropper>\n </div>\n </ng-template>\n" }]
|
|
623
623
|
}], ctorParameters: () => [{ type: i4.FormBuilder }, { type: i2$1.NgbModal }, { type: i2.TagService }, { type: i0.Injector }], propDecorators: { blogPostTag: [{
|
|
624
624
|
type: Input
|
|
625
625
|
}], getUpdatedTag: [{
|
|
@@ -974,6 +974,7 @@ class ResourceCompanyCardComponent extends AppBaseComponent {
|
|
|
974
974
|
constructor(injector) {
|
|
975
975
|
super(injector);
|
|
976
976
|
this.getPosts = new EventEmitter();
|
|
977
|
+
this.destroy$ = new Subject();
|
|
977
978
|
this.header = '';
|
|
978
979
|
this.data = [];
|
|
979
980
|
this.vendor = false;
|
|
@@ -993,10 +994,13 @@ class ResourceCompanyCardComponent extends AppBaseComponent {
|
|
|
993
994
|
const data = res ? JSON.parse(res) : null;
|
|
994
995
|
this.subscriptionId = data?.subscriptionId;
|
|
995
996
|
});
|
|
997
|
+
this.userService
|
|
998
|
+
.getUserInfo()
|
|
999
|
+
.pipe(takeUntil(this.destroy$))
|
|
1000
|
+
.subscribe(data => {
|
|
1001
|
+
this.user = data;
|
|
1002
|
+
});
|
|
996
1003
|
}
|
|
997
|
-
this.userService.getUserInfo().subscribe(data => {
|
|
998
|
-
this.user = data;
|
|
999
|
-
});
|
|
1000
1004
|
});
|
|
1001
1005
|
}
|
|
1002
1006
|
search(keywords) {
|
|
@@ -1018,12 +1022,16 @@ class ResourceCompanyCardComponent extends AppBaseComponent {
|
|
|
1018
1022
|
this.first = event.first;
|
|
1019
1023
|
this.rows = event.rows;
|
|
1020
1024
|
}
|
|
1025
|
+
ngOnDestroy() {
|
|
1026
|
+
this.destroy$.next();
|
|
1027
|
+
this.destroy$.complete();
|
|
1028
|
+
}
|
|
1021
1029
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceCompanyCardComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1022
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourceCompanyCardComponent, selector: "pw-resource-company-card", inputs: { header: "header", data: "data", integrationCountDisplay: "integrationCountDisplay", vendor: "vendor" }, outputs: { getPosts: "getPosts" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"{ 'vendors-distributor-wrapper': !vendor }\">\n <div class=\"d-flex justify-content-between align-items-center mb-3 search-container\">\n <div>\n <span class=\"int-span\">{{header}}</span>\n </div>\n <div class=\"search-wrapper position-relative\" *ngIf=\"integrationCountDisplay > 0\">\n <i class=\"fa fa-search search-icon\"></i>\n <input type=\"text\"\n\n (keyup)=\"search($event.target.value)\"\n placeholder=\"Search eg security\"\n class=\"search-input top-search-input\" />\n </div>\n\n </div>\n\n <div *ngIf=\"postData\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n\n <div class=\"row\" *ngIf=\"!postData && integrationCountDisplay > 0\">\n <div class=\"col-md-3 mt-4\"\n
|
|
1030
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourceCompanyCardComponent, selector: "pw-resource-company-card", inputs: { header: "header", data: "data", integrationCountDisplay: "integrationCountDisplay", vendor: "vendor" }, outputs: { getPosts: "getPosts" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"{ 'vendors-distributor-wrapper': !vendor }\">\n <div class=\"d-flex justify-content-between align-items-center mb-3 search-container\">\n <div>\n <span class=\"int-span\">{{header}}</span>\n </div>\n <div class=\"search-wrapper position-relative\" *ngIf=\"integrationCountDisplay > 0\">\n <i class=\"fa fa-search search-icon\"></i>\n <input type=\"text\"\n\n (keyup)=\"search($event.target.value)\"\n placeholder=\"Search eg security\"\n class=\"search-input top-search-input\" />\n </div>\n\n </div>\n\n <div *ngIf=\"postData\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n\n <div class=\"row\" *ngIf=\"!postData && integrationCountDisplay > 0\">\n <div class=\"col-md-3 mt-4\"\n *ngFor=\"let img of filteredData | slice:first:(first + rows)\">\n <div class=\"boxes d-flex align-items-center justify-content-center\">\n <ng-container *ngIf=\"img?.companyImg; else checkRectangular\">\n <img [src]=\"img.companyImg\" alt=\"Vendor Company Icon\" class=\"vendor-icon\" />\n </ng-container>\n\n <ng-template #checkRectangular>\n <ng-container *ngIf=\"img?.rectangular_picture?.url; else noImage\">\n <ng-container *ngIf=\"!img.rectangular_picture.url.includes('default-photo'); else showPostName\">\n <ng-container *ngIf=\"img?.showcase; else noLinkImage\">\n <a class=\"vendor-link\" [href]=\"img.external_url || ('/resources/view/' + img.slug)\">\n <img [src]=\"img.rectangular_picture.url\" alt=\"Vendor Rectangular Company Icon\" class=\"vendor-icon\" />\n </a>\n </ng-container>\n <ng-template #noLinkImage>\n <img [src]=\"img.rectangular_picture.url\" alt=\"Vendor Rectangular Company Icon\" class=\"vendor-icon\" />\n </ng-template>\n\n <pw-resource-edit-card\n *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n [id]=\"img?.id\"\n [resourceData]=\"img\"\n (updated)=\"getPosts.emit()\"></pw-resource-edit-card>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <ng-template #showPostName>\n <ng-container *ngIf=\"img?.showcase; else noLinkTitle\">\n <a class=\"vendor-link\" [href]=\"img.external_url || ('/resources/view/' + img.slug)\">\n <span class=\"vendor-name text-center mt-2\">{{ img?.title }}</span>\n </a>\n </ng-container>\n <ng-template #noLinkTitle>\n <span class=\"vendor-name text-center\">{{ img?.title }}</span>\n </ng-template>\n\n <pw-resource-edit-card\n *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n [id]=\"img?.id\"\n [resourceData]=\"img\"\n (updated)=\"getPosts.emit()\"></pw-resource-edit-card>\n </ng-template>\n </div>\n </div>\n\n <div class=\"customPaginator d-flex align-items-center mt-5 justify-content-center\"\n *ngIf=\"filteredData.length > 0\"\n >\n <p-paginator\n [first]=\"first\"\n [rows]=\"rows\"\n [totalRecords]=\"filteredData.length\"\n (onPageChange)=\"onPageChange($event)\"></p-paginator>\n </div>\n </div>\n</div>\n", styles: [".top-search-input{color:#000!important;border:3px solid #d4d4d4!important;padding:5px 30px!important;border-radius:29px!important}::placeholder{color:#d4d4d4}.vendors-distributor-wrapper{margin-top:5rem!important}.vendor-icon{max-width:180px;max-height:100%;width:100%!important}.vendor-name{font-size:3rem;line-height:3rem;color:var(--text-color, black)}::ng-deep .customPaginator .p-paginator{border:none!important}::ng-deep .customPaginator .p-paginator button{border:none!important}.int-span{text-transform:uppercase;font-size:2.5rem;color:var(--first)}.boxes{width:100%;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;padding:15px;border:1px dashed #ccc;border-radius:8px;word-break:break-word;white-space:normal;height:100%}a.vendor-link{display:inline-block;transition:transform .2s ease}a.vendor-link:hover{transform:scale(1.05);cursor:pointer}.search-wrapper{position:relative;width:300px}.search-input{width:100%;padding:10px 20px 10px 40px;border:2px solid #d4d4d4;border-radius:30px;font-size:1rem;color:#000;background-color:#fff}.search-input::placeholder{color:silver}.search-input:focus{outline:none;border-color:var(--first)}.search-icon{position:absolute;top:50%;left:14px;transform:translateY(-50%);color:#d4d4d4;font-size:1.1rem}@media (width <= 768px){.vendor-icon{width:50!important}.search-container{flex-wrap:wrap!important;gap:2rem}.int-span{font-size:1.75rem}}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "style", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "appendTo", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first"], outputs: ["onPageChange"] }, { kind: "component", type: i5.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i8.LazyImgDirective, selector: "img" }, { kind: "component", type: ResourceEditCardComponent, selector: "pw-resource-edit-card", inputs: ["id", "resourceData"], outputs: ["updated"] }, { kind: "pipe", type: i3.SlicePipe, name: "slice" }, { kind: "pipe", type: i10$1.TranslocoPipe, name: "transloco" }] }); }
|
|
1023
1031
|
}
|
|
1024
1032
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceCompanyCardComponent, decorators: [{
|
|
1025
1033
|
type: Component,
|
|
1026
|
-
args: [{ selector: 'pw-resource-company-card', template: "<div [ngClass]=\"{ 'vendors-distributor-wrapper': !vendor }\">\n <div class=\"d-flex justify-content-between align-items-center mb-3 search-container\">\n <div>\n <span class=\"int-span\">{{header}}</span>\n </div>\n <div class=\"search-wrapper position-relative\" *ngIf=\"integrationCountDisplay > 0\">\n <i class=\"fa fa-search search-icon\"></i>\n <input type=\"text\"\n\n (keyup)=\"search($event.target.value)\"\n placeholder=\"Search eg security\"\n class=\"search-input top-search-input\" />\n </div>\n\n </div>\n\n <div *ngIf=\"postData\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n\n <div class=\"row\" *ngIf=\"!postData && integrationCountDisplay > 0\">\n <div class=\"col-md-3 mt-4\"\n
|
|
1034
|
+
args: [{ selector: 'pw-resource-company-card', template: "<div [ngClass]=\"{ 'vendors-distributor-wrapper': !vendor }\">\n <div class=\"d-flex justify-content-between align-items-center mb-3 search-container\">\n <div>\n <span class=\"int-span\">{{header}}</span>\n </div>\n <div class=\"search-wrapper position-relative\" *ngIf=\"integrationCountDisplay > 0\">\n <i class=\"fa fa-search search-icon\"></i>\n <input type=\"text\"\n\n (keyup)=\"search($event.target.value)\"\n placeholder=\"Search eg security\"\n class=\"search-input top-search-input\" />\n </div>\n\n </div>\n\n <div *ngIf=\"postData\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\"> </pw-no-data>\n </div>\n\n <div class=\"row\" *ngIf=\"!postData && integrationCountDisplay > 0\">\n <div class=\"col-md-3 mt-4\"\n *ngFor=\"let img of filteredData | slice:first:(first + rows)\">\n <div class=\"boxes d-flex align-items-center justify-content-center\">\n <ng-container *ngIf=\"img?.companyImg; else checkRectangular\">\n <img [src]=\"img.companyImg\" alt=\"Vendor Company Icon\" class=\"vendor-icon\" />\n </ng-container>\n\n <ng-template #checkRectangular>\n <ng-container *ngIf=\"img?.rectangular_picture?.url; else noImage\">\n <ng-container *ngIf=\"!img.rectangular_picture.url.includes('default-photo'); else showPostName\">\n <ng-container *ngIf=\"img?.showcase; else noLinkImage\">\n <a class=\"vendor-link\" [href]=\"img.external_url || ('/resources/view/' + img.slug)\">\n <img [src]=\"img.rectangular_picture.url\" alt=\"Vendor Rectangular Company Icon\" class=\"vendor-icon\" />\n </a>\n </ng-container>\n <ng-template #noLinkImage>\n <img [src]=\"img.rectangular_picture.url\" alt=\"Vendor Rectangular Company Icon\" class=\"vendor-icon\" />\n </ng-template>\n\n <pw-resource-edit-card\n *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n [id]=\"img?.id\"\n [resourceData]=\"img\"\n (updated)=\"getPosts.emit()\"></pw-resource-edit-card>\n </ng-container>\n </ng-container>\n </ng-template>\n\n <ng-template #showPostName>\n <ng-container *ngIf=\"img?.showcase; else noLinkTitle\">\n <a class=\"vendor-link\" [href]=\"img.external_url || ('/resources/view/' + img.slug)\">\n <span class=\"vendor-name text-center mt-2\">{{ img?.title }}</span>\n </a>\n </ng-container>\n <ng-template #noLinkTitle>\n <span class=\"vendor-name text-center\">{{ img?.title }}</span>\n </ng-template>\n\n <pw-resource-edit-card\n *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n [id]=\"img?.id\"\n [resourceData]=\"img\"\n (updated)=\"getPosts.emit()\"></pw-resource-edit-card>\n </ng-template>\n </div>\n </div>\n\n <div class=\"customPaginator d-flex align-items-center mt-5 justify-content-center\"\n *ngIf=\"filteredData.length > 0\"\n >\n <p-paginator\n [first]=\"first\"\n [rows]=\"rows\"\n [totalRecords]=\"filteredData.length\"\n (onPageChange)=\"onPageChange($event)\"></p-paginator>\n </div>\n </div>\n</div>\n", styles: [".top-search-input{color:#000!important;border:3px solid #d4d4d4!important;padding:5px 30px!important;border-radius:29px!important}::placeholder{color:#d4d4d4}.vendors-distributor-wrapper{margin-top:5rem!important}.vendor-icon{max-width:180px;max-height:100%;width:100%!important}.vendor-name{font-size:3rem;line-height:3rem;color:var(--text-color, black)}::ng-deep .customPaginator .p-paginator{border:none!important}::ng-deep .customPaginator .p-paginator button{border:none!important}.int-span{text-transform:uppercase;font-size:2.5rem;color:var(--first)}.boxes{width:100%;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;padding:15px;border:1px dashed #ccc;border-radius:8px;word-break:break-word;white-space:normal;height:100%}a.vendor-link{display:inline-block;transition:transform .2s ease}a.vendor-link:hover{transform:scale(1.05);cursor:pointer}.search-wrapper{position:relative;width:300px}.search-input{width:100%;padding:10px 20px 10px 40px;border:2px solid #d4d4d4;border-radius:30px;font-size:1rem;color:#000;background-color:#fff}.search-input::placeholder{color:silver}.search-input:focus{outline:none;border-color:var(--first)}.search-icon{position:absolute;top:50%;left:14px;transform:translateY(-50%);color:#d4d4d4;font-size:1.1rem}@media (width <= 768px){.vendor-icon{width:50!important}.search-container{flex-wrap:wrap!important;gap:2rem}.int-span{font-size:1.75rem}}\n"] }]
|
|
1027
1035
|
}], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { getPosts: [{
|
|
1028
1036
|
type: Output
|
|
1029
1037
|
}], header: [{
|
|
@@ -1158,6 +1166,19 @@ class ResourceIntegrationComponent extends AppBaseComponent {
|
|
|
1158
1166
|
windowClass: 'modal-holder'
|
|
1159
1167
|
});
|
|
1160
1168
|
}
|
|
1169
|
+
showIntegrations() {
|
|
1170
|
+
if (this.userLoggedIn) {
|
|
1171
|
+
return true;
|
|
1172
|
+
}
|
|
1173
|
+
if (Array.isArray(this.guideData?.items) && this.guideData.items.length) {
|
|
1174
|
+
const item = this.guideData.items[0];
|
|
1175
|
+
return (!!item?.title ||
|
|
1176
|
+
!!item?.description ||
|
|
1177
|
+
!!item?.guide_url ||
|
|
1178
|
+
(!!item?.image_url && !item.image_url.includes('default-image.png')));
|
|
1179
|
+
}
|
|
1180
|
+
return false;
|
|
1181
|
+
}
|
|
1161
1182
|
getPostTags() {
|
|
1162
1183
|
this.tagService
|
|
1163
1184
|
.getTagsByType('post_categories', {}, this.subscriptionId || this.masterSubscriptionId)
|
|
@@ -1172,14 +1193,8 @@ class ResourceIntegrationComponent extends AppBaseComponent {
|
|
|
1172
1193
|
vendorResponse: this.resourceService.getPublicPosts(this.subscriptionId || this.masterSubscriptionId, 1, 100, '', '', this.blogPostVendorTag?.id),
|
|
1173
1194
|
distributorResponse: this.resourceService.getPublicPosts(this.subscriptionId || this.masterSubscriptionId, 1, 100, '', '', this.blogPostTag?.id)
|
|
1174
1195
|
}).subscribe(({ vendorResponse, distributorResponse }) => {
|
|
1175
|
-
this.posts = vendorResponse.posts
|
|
1176
|
-
|
|
1177
|
-
.sort((a, b) => new Date(b.published_at).getTime() -
|
|
1178
|
-
new Date(a.published_at).getTime());
|
|
1179
|
-
this.distributerPosts = distributorResponse.posts
|
|
1180
|
-
.filter(post => post.showcase === true)
|
|
1181
|
-
.sort((a, b) => new Date(b.published_at).getTime() -
|
|
1182
|
-
new Date(a.published_at).getTime());
|
|
1196
|
+
this.posts = vendorResponse.posts.sort((a, b) => new Date(b.published_at).getTime() - new Date(a.published_at).getTime());
|
|
1197
|
+
this.distributerPosts = distributorResponse.posts.sort((a, b) => new Date(b.published_at).getTime() - new Date(a.published_at).getTime());
|
|
1183
1198
|
const vendorCount = vendorResponse?.object_count ?? 0;
|
|
1184
1199
|
const distributorCount = distributorResponse?.object_count ?? 0;
|
|
1185
1200
|
const total = vendorCount + distributorCount;
|
|
@@ -1262,11 +1277,11 @@ class ResourceIntegrationComponent extends AppBaseComponent {
|
|
|
1262
1277
|
moveItemInArray(this.editingGuides.items, event.previousIndex, event.currentIndex);
|
|
1263
1278
|
}
|
|
1264
1279
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceIntegrationComponent, deps: [{ token: i2$3.DomSanitizer }, { token: ResourceService }, { token: i2$1.NgbModal }, { token: i2.TagService }, { token: i5$2.AdminService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1265
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourceIntegrationComponent, selector: "pw-resource-integration", viewQueries: [{ propertyName: "editIntegrationsModal", first: true, predicate: ["editIntegrationsModal"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<pw-resource-header></pw-resource-header>\n<pw-integration-top-banner></pw-integration-top-banner>\n<div class=\"bg-white\">\n <section class=\"cloudolive-guide-section bg-white py-5 section-outer\">\n <div class=\"container sec-container\">\n <div *ngIf=\"isLoaded && integrationCountDisplay > 0\">\n <h1 class=\"int-title mb-0\">{{ integrationCountDisplay }}+ integrations (& counting)</h1>\n <p class=\"int-text\"> Search the current list of {{companyName}} vendor and distributor integrations below. <br />\n </p>\n </div>\n <pw-resource-company-card *ngIf=\"isLoaded\" [header]=\"'integrated vendors'\"\n (getPosts)=\"getPostTags()\"\n [integrationCountDisplay]=\"integrationCountDisplay\"\n [data]=\"posts\"></pw-resource-company-card>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"integrationCountDisplay === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n </div>\n <div class=\"text-center pt-3 mt-4\" *ngIf=\"isLoaded && integrationCountDisplay > 0\">\n <p class=\"see-span\"> Don\u2019t see what you\u2019re after? <a [href]=\"contactUsUrl\"\n target=\"_blank\"\n class=\"int-span team-span\">Speak with our team to request a connection >\n </a>\n </p>\n </div>\n </div>\n\n </section>\n <section class=\"cloudolive-guide-section bg-white py-5 section-outer\">\n <div class=\"container\">\n <pw-resource-company-card [header]=\"'integrated Distributors'\"\n [integrationCountDisplay]=\"integrationCountDisplay\"\n *ngIf=\"isLoaded\"\n [vendor]=\"true\"\n (getPosts)=\"getPostTags()\"\n [data]=\"distributerPosts\"></pw-resource-company-card>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"integrationCountDisplay === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n </div>\n </div>\n\n </section>\n <section class=\"cloudolive-guide-section bg-white py-5 section-outer\" *ngIf=\"integrations\">\n <div class=\"container\">\n\n <div class=\"how-it-works-wrapper\">\n <div class=\"d-flex\">\n <h1 class=\"it-works-title mb-0\">{{integrations?.title || 'How it works'}}</h1>\n <i *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n class=\"fa fa-edit in-page-edit-icon text-black ms-4 mt-3 cursor-pointer\"\n (click)=\"openEditIntegrationsModal(editIntegrationsModal)\"\n title=\"Edit Integrations Section\"></i>\n </div>\n <p class=\"pb-20\" [innerHTML]=\"integrations?.description || 'View short example videos to understand how these integrations can work for you:'\"></p>\n <div class=\"row section-row\">\n <ng-container *ngIf=\"integrations?.items?.length > 0; else noIntegrations\">\n <ng-container *ngFor=\"let integration of integrations?.items\">\n <div\n class=\"col-md-6\"\n *ngIf=\"integration?.image_url || integration?.title || integration?.description\"\n >\n <ng-container *ngIf=\"integration?.video_url && integration?.video_url.includes('https'); else noVideo\">\n <div class=\"d-flex justify-content-center\">\n <img\n *ngIf=\"integration?.video_url\"\n [src]=\"integration?.image_url\"\n (click)=\"loadMicrosoftVideo(integration?.video_url)\"\n (keydown.enter)=\"loadMicrosoftVideo(integration?.video_url)\"\n class=\"how-it-works-img\"\n alt=\"Integration Video Thumbnail\"\n />\n </div>\n </ng-container>\n\n <ng-template #noVideo>\n <div class=\"d-flex justify-content-center\">\n <div class=\"w-100\">\n <pw-no-data [withImage]=\"true\" [message]=\"'No video found' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </ng-template>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #noIntegrations>\n <div class=\"w-100 text-center\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Integration.NoDataMessage' | transloco\"></pw-no-data>\n </div>\n </ng-template>\n\n </div>\n </div>\n </div>\n\n </section>\n <section class=\"cloudolive-guide-section bg-white py-5 section-outer\">\n <div class=\"container\">\n <div class=\"row align-items-start\">\n <div class=\"col-md-6 text-md-start text-center\">\n <div class=\"d-flex\">\n <h1 class=\"guide-title mb-3\">{{guideData?.items[0]?.title || '--UPDATE ME ON THE ADMIN/DOMAINS MODULE--'}}</h1>\n <i *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n class=\"fa fa-edit in-page-edit-icon text-black ms-4 mt-3 cursor-pointer\"\n (click)=\"openGuidesModal(guidesEditModal)\"\n title=\"Edit Integrations Section\"></i>\n </div>\n <p class=\"guide-subtext\"\n [innerHTML]=\"guideData?.items[0]?.description || '--UPDATE ME ON THE ADMIN/DOMAINS MODULE--'\">\n </p>\n <a class=\"vault-btn\"\n [href]=\"guideData?.items[0]?.guide_url\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n {{guideData?.items[0]?.button_text || 'View the guide'}}\n </a>\n\n </div>\n\n <div class=\"col-md-6 text-center\">\n <ng-container *ngIf=\"guideData?.items[0]?.image_url && !guideData?.items[0].image_url.includes('default-photo.jpg'); else noDataTemplate\">\n <img\n [src]=\"guideData?.items[0].image_url\"\n alt=\"Guide\"\n class=\"guide-img\" />\n </ng-container>\n\n <ng-template #noDataTemplate>\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'--ADD ME ON THE ADMIN/DOMAINS MODULE--' | transloco\" />\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n </section>\n</div>\n\n<pw-resource-note-card *ngIf=\"resourcePostTag?.tag_category_id\" [categoryId]=\"resourcePostTag?.tag_category_id\" [tag]=\"resourcePostTag\" [releaseHeader]=\"true\" [resourceTitle]=\"resourcePostTag?.title\"></pw-resource-note-card>\n\n<pw-trial-4-contact-us></pw-trial-4-contact-us>\n\n\n\n<ng-template #editIntegrationsModal let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Edit Integrations Section</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n\n <div class=\"modal-body\">\n <div class=\"mb-3\">\n <label class=\"form-label\">Title</label>\n <input class=\"form-control\" [(ngModel)]=\"editingIntegrations.title\" />\n </div>\n\n <div class=\"mb-3\">\n <label class=\"form-label\">Description</label>\n <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"editingIntegrations.description\"></textarea>\n </div>\n\n <div cdkDropList (cdkDropListDropped)=\"dropIntegrationItems($event)\">\n <div *ngFor=\"let integration of editingIntegrations.items; let i = index\" class=\"border p-3 mb-3\" cdkDrag>\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <label class=\"form-label mb-0\">Integration Item</label>\n <i class=\"fa fa-bars cursor-move in-page-bars-icon\" cdkDragHandle></i>\n </div>\n\n <div class=\"row\">\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Title</label>\n <input class=\"form-control\" [(ngModel)]=\"integration.title\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Description</label>\n <input class=\"form-control\" [(ngModel)]=\"integration.description\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Blog URL</label>\n <input class=\"form-control\" [(ngModel)]=\"integration.blog_url\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Image URL</label>\n <input class=\"form-control\" [(ngModel)]=\"integration.image_url\" />\n </div>\n <div class=\"col-md-12 mb-2\">\n <label class=\"form-label\">Video URL</label>\n <input class=\"form-control\" [(ngModel)]=\"integration.video_url\" />\n </div>\n </div>\n\n <div class=\"d-flex justify-content-end\">\n <i class=\"fa fa-trash text-danger cursor-pointer\" (click)=\"removeIntegrationItem(i)\"></i>\n </div>\n </div>\n </div>\n\n <button class=\"btn btn-outline-primary btn-sm\" (click)=\"addIntegrationItem()\">+ Add Integration</button>\n </div>\n\n <div class=\"modal-footer\">\n <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n <button class=\"btn btn-primary\" (click)=\"saveIntegrations(modal)\">Save</button>\n </div>\n</ng-template>\n\n\n\n<ng-template #guidesEditModal let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Edit Guides</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n\n <div class=\"modal-body\">\n <h4 class=\"mb-3\">Guides Section</h4>\n\n <div cdkDropList (cdkDropListDropped)=\"dropGuides($event)\">\n <div *ngFor=\"let guide of editingGuides.items; let i = index\" class=\"border p-3 mb-3\" cdkDrag>\n <div class=\"row\">\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Title</label>\n <input class=\"form-control\" [(ngModel)]=\"guide.title\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Button Text</label>\n <input class=\"form-control\" [(ngModel)]=\"guide.button_text\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Image URL</label>\n <input class=\"form-control\" [(ngModel)]=\"guide.image_url\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Guide URL</label>\n <input class=\"form-control\" [(ngModel)]=\"guide.guide_url\" />\n </div>\n <div class=\"col-12 mb-2\">\n <label class=\"form-label\">Description</label>\n <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"guide.description\"></textarea>\n </div>\n <div class=\"d-flex justify-content-between align-items-center mt-2\">\n <i class=\"fa fa-trash text-danger cursor-pointer\" (click)=\"removeGuide(i)\"></i>\n <i class=\"fa fa-bars cursor-move\" cdkDragHandle></i>\n </div>\n </div>\n </div>\n </div>\n\n <button class=\"btn btn-primary mt-2\" (click)=\"addGuide()\">+ Add Guide</button>\n </div>\n\n <div class=\"modal-footer\">\n <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n <button class=\"btn btn-primary\" (click)=\"saveGuides(modal)\">Save</button>\n </div>\n</ng-template>\n", styles: [".int-span{font-size:3rem;color:#3d8fbe}.team-span{font-size:2rem;color:#3d8fbe;font-weight:100}.see-span{font-size:2rem;font-weight:100}::ng-deep .edit-card .in-page-edit-icon{margin-left:1rem!important;margin-top:.5rem!important}::ng-deep .modal-content{margin-top:5rem!important}.how-it-works-wrapper .it-works-title{font-size:3rem;margin-bottom:2rem;color:var(--text-color, black);font-weight:200!important;padding-bottom:12px!important}.how-it-works-wrapper .how-it-works-img{width:85%!important;margin:0 auto!important}.how-it-works-wrapper p{padding-top:1rem;font-size:2rem;color:#000;font-weight:100;margin-bottom:4rem}.guide-wrapper{padding:55px 47px 220px}.guide-wrapper .horizontal{position:absolute;left:0;bottom:24%;width:100%}.guide-wrapper .pb-20{padding-bottom:20px}.guide-wrapper .flex{display:flex}.guide-wrapper .guideimg{margin:0 auto}.guide-wrapper .guide-title{font: 500 28px Montserrat-Regular,sans-serif}.guide-wrapper p{font: 400 17px Montserrat-Regular,sans-serif;color:#182527}.cloudolive-guide-section{box-shadow:0 4px 32px -14px #40576d4d!important;position:relative}.cloudolive-guide-section .integration-fadeout{position:absolute;bottom:0;left:0;width:100%;height:80px;background:linear-gradient(to bottom,#fff0,#f8f9fa);pointer-events:none}@media (width >= 768px){.cloudolive-guide-section .container-section{padding:20px 190px 20px 120px!important}}@media (width <= 768px){.cloudolive-guide-section .container-section{padding:3rem!important}.cloudolive-guide-section .guide-title{font-size:3.25rem!important}.cloudolive-guide-section .vault-btn{width:90%!important;margin-bottom:3rem!important}.cloudolive-guide-section .guide-subtext{padding:2rem;line-height:2rem!important}}.cloudolive-guide-section .guide-title{font-size:3rem;font-weight:200}.cloudolive-guide-section .guide-subtext{font-size:1.7rem;line-height:3rem;color:var(--text-color, black);font-weight:200;margin-bottom:2rem}.cloudolive-guide-section .guide-note{font-size:1.7rem;color:#000;font-weight:100}.cloudolive-guide-section .vault-btn{display:inline-block;background:var(--text-color, black);color:#fff;padding:1rem 2rem;border-radius:40px;font-weight:500;text-decoration:none;margin-top:1rem!important;font-size:1.4rem;border:1px solid;box-shadow:none!important;border-color:var(--text-color, textColor)}.cloudolive-guide-section .vault-btn:hover{background:#fff;color:var(--text-color, black)!important}.cloudolive-guide-section .guide-img{max-width:536px!important;max-height:536px!important;height:auto}.int-title{color:var(--text-color, black);font-size:4rem!important;font-weight:400}.int-text{font-size:1.3rem;font-weight:300}@media (width >= 991px){.section-outer{padding-top:7rem!important}}\n", ".bold{font-weight:700}.nce-heading{margin-bottom:2rem}.nce-note{margin-top:1rem;font-size:.85rem;color:#555}.nce-divider{border:0;height:40px;width:100%;background:linear-gradient(to bottom,#0000,#00000026);margin:0}.press-release-icon{height:auto!important;margin:0 11px 1.9rem;display:block;align-self:center;width:auto!important;aspect-ratio:0!important;object-fit:cover;margin-top:auto;margin-right:0!important}.msp-vault-section{padding:60px 0;background:#fff;padding-bottom:9rem!important;padding-top:7rem!important;box-shadow:0 4px 32px -14px #40576d4d!important}.msp-vault-section .vault-heading{font-size:3rem;font-weight:300}.msp-vault-section .explore-link{color:#000;font-weight:400;text-decoration:none;font-size:1.5rem}.msp-vault-section .resource-blog-card{display:flex;flex-direction:column;justify-content:space-between;background-color:#fff;border-radius:30px;box-shadow:0 20px 40px #00000014;padding:25px;text-align:center;width:338px;height:auto!important}.msp-vault-section .resource-blog-card h5{font-size:1.5rem;font-weight:400;margin-bottom:.5rem;color:var(--text-color, black)}.msp-vault-section .resource-blog-card p{font-size:1.5rem;color:var(--text-color, black);line-height:2rem}.msp-vault-section .resource-blog-card img{width:100%;border-radius:10px;aspect-ratio:1/1;object-fit:cover;margin-top:auto;margin-right:0!important;max-width:250px!important;align-self:center!important}.msp-vault-section .resource-blog-card iframe{height:210px;border-radius:10px;object-fit:cover;margin-right:0!important;max-width:280px!important}.msp-vault-section .resource-blog-card .resource-btn{background-color:var(--text-color, black);color:#fff;margin-top:auto;padding:10px 24px;border-radius:24px;font-size:1.5rem;font-weight:500;width:100%;max-width:240px;cursor:pointer;transition:background .3s ease;display:flex;justify-content:space-between;align-self:center;align-items:center;text-align:left;text-decoration:none;border:1px solid;box-shadow:none!important;border-color:var(--text-color, black)}.msp-vault-section .resource-blog-card .resource-btn:hover{background:#fff;color:var(--text-color, black)!important}.msp-vault-section .vault-description{text-align:left;max-width:657px;color:#182527;line-height:2.3rem!important;font-size:1.65rem}@media (width <= 1200px){.msp-vault-section .vault-heading{font-size:3.5rem}.msp-vault-section .vault-description{margin-top:1.35rem}.msp-vault-section .resource-btn{margin-left:0!important}}.video-row{gap:5.5rem!important;margin-top:3rem!important}@media (width >= 991px){section.bg-white.text-center.extra-top-padding{position:relative;overflow:hidden}section.bg-white.text-center.extra-top-padding .banner-header{margin-bottom:4rem!important}}.vault-header{text-align:left}@media (width >= 768px) and (width <= 1200px){.container{padding:0 6rem!important}}@media (width <= 768px){.video-row{gap:3rem!important}}@media (width <= 768px){.vault-header{text-align:center!important}.vault-heading{font-size:3rem!important}}@media (width <= 1200px){.container{padding:1rem 3rem!important}}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.Trial4ContactUsComponent, selector: "pw-trial-4-contact-us", inputs: ["subscriptionId", "sourceId", "masterSubscriptionId", "experimentName", "microserviceName", "shardName"] }, { kind: "component", type: i5.ResourceHeaderComponent, selector: "pw-resource-header" }, { kind: "component", type: i6$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i11.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i11.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i11.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i5.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i8.LazyImgDirective, selector: "img" }, { kind: "component", type: IntegrationTopBannerComponent, selector: "pw-integration-top-banner" }, { kind: "component", type: ResourceNoteCardComponent, selector: "pw-resource-note-card", inputs: ["releaseHeader", "categoryId", "isReleasePress", "postSlice", "resourceTitle", "tag"] }, { kind: "component", type: ResourceCompanyCardComponent, selector: "pw-resource-company-card", inputs: ["header", "data", "integrationCountDisplay", "vendor"], outputs: ["getPosts"] }, { kind: "pipe", type: i10$1.TranslocoPipe, name: "transloco" }] }); }
|
|
1280
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourceIntegrationComponent, selector: "pw-resource-integration", viewQueries: [{ propertyName: "editIntegrationsModal", first: true, predicate: ["editIntegrationsModal"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<pw-resource-header></pw-resource-header>\n<pw-integration-top-banner></pw-integration-top-banner>\n<div class=\"bg-white\">\n <section class=\"cloudolive-guide-section bg-white py-5 section-outer\">\n <div class=\"container sec-container\">\n <div *ngIf=\"isLoaded && integrationCountDisplay > 0\">\n <h1 class=\"int-title mb-0\">{{ integrationCountDisplay }}+ integrations (& counting)</h1>\n <p class=\"int-text\"> Search the current list of {{companyName}} vendor and distributor integrations below. <br />\n </p>\n </div>\n <pw-resource-company-card *ngIf=\"isLoaded\" [header]=\"'integrated vendors'\"\n (getPosts)=\"getPostTags()\"\n [integrationCountDisplay]=\"integrationCountDisplay\"\n [data]=\"posts\"></pw-resource-company-card>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"integrationCountDisplay === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n </div>\n <div class=\"text-center pt-3 mt-4\" *ngIf=\"isLoaded && integrationCountDisplay > 0\">\n <p class=\"see-span\"> Don\u2019t see what you\u2019re after? <a [href]=\"contactUsUrl\"\n target=\"_blank\"\n class=\"int-span team-span\">Speak with our team to request a connection >\n </a>\n </p>\n </div>\n </div>\n\n </section>\n <section class=\"cloudolive-guide-section bg-white py-5 section-outer\">\n <div class=\"container\">\n <pw-resource-company-card [header]=\"'integrated Distributors'\"\n [integrationCountDisplay]=\"integrationCountDisplay\"\n *ngIf=\"isLoaded\"\n [vendor]=\"true\"\n (getPosts)=\"getPostTags()\"\n [data]=\"distributerPosts\"></pw-resource-company-card>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"integrationCountDisplay === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n </div>\n </div>\n\n </section>\n <section class=\"cloudolive-guide-section bg-white py-5 section-outer\" *ngIf=\"integrations\">\n <div class=\"container\">\n\n <div class=\"how-it-works-wrapper\">\n <div class=\"d-flex\">\n <h1 class=\"it-works-title mb-0\">{{integrations?.title || 'How it works'}}</h1>\n <i *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n class=\"fa fa-edit in-page-edit-icon text-black ms-4 mt-3 cursor-pointer\"\n (click)=\"openEditIntegrationsModal(editIntegrationsModal)\"\n title=\"Edit Integrations Section\"></i>\n </div>\n <p class=\"pb-20\" [innerHTML]=\"integrations?.description || 'View short example videos to understand how these integrations can work for you:'\"></p>\n <div class=\"row section-row\" [ngClass]=\"{ 'justify-content-center': integrations?.items?.length === 1 }\">\n <ng-container *ngIf=\"integrations?.items?.length > 0; else noIntegrations\">\n <ng-container *ngFor=\"let integration of integrations?.items\">\n <div\n class=\"col-md-6\"\n *ngIf=\"integration?.image_url || integration?.title || integration?.description\"\n >\n <ng-container *ngIf=\"integration?.video_url && integration?.video_url.includes('https'); else noVideo\">\n <div class=\"d-flex justify-content-center\">\n <img\n *ngIf=\"integration?.video_url\"\n [src]=\"integration?.image_url\"\n (click)=\"loadMicrosoftVideo(integration?.video_url)\"\n (keydown.enter)=\"loadMicrosoftVideo(integration?.video_url)\"\n class=\"how-it-works-img\"\n alt=\"Integration Video Thumbnail\"\n />\n </div>\n </ng-container>\n\n <ng-template #noVideo>\n <div class=\"d-flex justify-content-center\">\n <div class=\"w-100\">\n <pw-no-data [withImage]=\"true\" [message]=\"'No video found' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </ng-template>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #noIntegrations>\n <div class=\"w-100 text-center\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Integration.NoDataMessage' | transloco\"></pw-no-data>\n </div>\n </ng-template>\n\n </div>\n </div>\n </div>\n\n </section>\n <section class=\"cloudolive-guide-section bg-white py-5 section-outer\" *ngIf=\"showIntegrations()\">\n <div class=\"container\">\n <div class=\"row align-items-start\">\n <div class=\"col-md-6 text-md-start text-center\">\n <div class=\"d-flex\">\n <h1 class=\"guide-title mb-3\">{{guideData?.items[0]?.title || '--UPDATE ME ON THE ADMIN/DOMAINS MODULE--'}}</h1>\n <i *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n class=\"fa fa-edit in-page-edit-icon text-black ms-4 mt-3 cursor-pointer\"\n (click)=\"openGuidesModal(guidesEditModal)\"\n title=\"Edit Integrations Section\"></i>\n </div>\n <p class=\"guide-subtext\"\n [innerHTML]=\"guideData?.items[0]?.description || '--UPDATE ME ON THE ADMIN/DOMAINS MODULE--'\">\n </p>\n <a class=\"vault-btn\"\n [href]=\"guideData?.items[0]?.guide_url\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n {{guideData?.items[0]?.button_text || 'View the guide'}}\n </a>\n\n </div>\n\n <div class=\"col-md-6 text-center\">\n <ng-container *ngIf=\"guideData?.items[0]?.image_url && !guideData?.items[0].image_url.includes('default-photo.jpg'); else noDataTemplate\">\n <img\n [src]=\"guideData?.items[0].image_url\"\n alt=\"Guide\"\n class=\"guide-img\" />\n </ng-container>\n\n <ng-template #noDataTemplate>\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'--ADD ME ON THE ADMIN/DOMAINS MODULE--' | transloco\" />\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n </section>\n</div>\n\n<pw-resource-note-card *ngIf=\"resourcePostTag?.tag_category_id\" [categoryId]=\"resourcePostTag?.tag_category_id\" [tag]=\"resourcePostTag\" [releaseHeader]=\"true\" [resourceTitle]=\"resourcePostTag?.title\"></pw-resource-note-card>\n\n<pw-trial-4-contact-us></pw-trial-4-contact-us>\n\n\n\n<ng-template #editIntegrationsModal let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Edit Integrations Section</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n\n <div class=\"modal-body\">\n <div class=\"mb-3\">\n <label class=\"form-label\">Title</label>\n <input class=\"form-control\" [(ngModel)]=\"editingIntegrations.title\" />\n </div>\n\n <div class=\"mb-3\">\n <label class=\"form-label\">Description</label>\n <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"editingIntegrations.description\"></textarea>\n </div>\n\n <div cdkDropList (cdkDropListDropped)=\"dropIntegrationItems($event)\">\n <div *ngFor=\"let integration of editingIntegrations.items; let i = index\" class=\"border p-3 mb-3\" cdkDrag>\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <label class=\"form-label mb-0\">Integration Item</label>\n <i class=\"fa fa-bars cursor-move in-page-bars-icon\" cdkDragHandle></i>\n </div>\n\n <div class=\"row\">\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Title</label>\n <input class=\"form-control\" [(ngModel)]=\"integration.title\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Description</label>\n <input class=\"form-control\" [(ngModel)]=\"integration.description\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Blog URL</label>\n <input class=\"form-control\" [(ngModel)]=\"integration.blog_url\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Image URL</label>\n <input class=\"form-control\" [(ngModel)]=\"integration.image_url\" />\n </div>\n <div class=\"col-md-12 mb-2\">\n <label class=\"form-label\">Video URL</label>\n <input class=\"form-control\" [(ngModel)]=\"integration.video_url\" />\n </div>\n </div>\n\n <div class=\"d-flex justify-content-end\">\n <i class=\"fa fa-trash text-danger cursor-pointer\" (click)=\"removeIntegrationItem(i)\"></i>\n </div>\n </div>\n </div>\n\n <button class=\"btn btn-outline-primary btn-sm\" (click)=\"addIntegrationItem()\">+ Add Integration</button>\n </div>\n\n <div class=\"modal-footer\">\n <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n <button class=\"btn btn-primary\" (click)=\"saveIntegrations(modal)\">Save</button>\n </div>\n</ng-template>\n\n\n\n<ng-template #guidesEditModal let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Edit Guides</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n\n <div class=\"modal-body\">\n <h4 class=\"mb-3\">Guides Section</h4>\n\n <div cdkDropList (cdkDropListDropped)=\"dropGuides($event)\">\n <div *ngFor=\"let guide of editingGuides.items; let i = index\" class=\"border p-3 mb-3\" cdkDrag>\n <div class=\"row\">\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Title</label>\n <input class=\"form-control\" [(ngModel)]=\"guide.title\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Button Text</label>\n <input class=\"form-control\" [(ngModel)]=\"guide.button_text\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Image URL</label>\n <input class=\"form-control\" [(ngModel)]=\"guide.image_url\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Guide URL</label>\n <input class=\"form-control\" [(ngModel)]=\"guide.guide_url\" />\n </div>\n <div class=\"col-12 mb-2\">\n <label class=\"form-label\">Description</label>\n <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"guide.description\"></textarea>\n </div>\n <div class=\"d-flex justify-content-between align-items-center mt-2\">\n <i class=\"fa fa-trash text-danger cursor-pointer\" (click)=\"removeGuide(i)\"></i>\n <i class=\"fa fa-bars cursor-move\" cdkDragHandle></i>\n </div>\n </div>\n </div>\n </div>\n\n <button class=\"btn btn-primary mt-2\" (click)=\"addGuide()\">+ Add Guide</button>\n </div>\n\n <div class=\"modal-footer\">\n <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n <button class=\"btn btn-primary\" (click)=\"saveGuides(modal)\">Save</button>\n </div>\n</ng-template>\n", styles: [".int-span{font-size:3rem;color:#3d8fbe}.team-span{font-size:2rem;color:#3d8fbe;font-weight:100}.see-span{font-size:2rem;font-weight:100}::ng-deep .edit-card .in-page-edit-icon{margin-left:1rem!important;margin-top:.5rem!important}::ng-deep .modal-content{margin-top:5rem!important}.how-it-works-wrapper .it-works-title{font-size:3rem;margin-bottom:2rem;color:var(--text-color, black);font-weight:200!important;padding-bottom:12px!important}.how-it-works-wrapper .how-it-works-img{width:85%!important;margin:0 auto!important}.how-it-works-wrapper p{padding-top:1rem;font-size:2rem;color:#000;font-weight:100;margin-bottom:4rem}.guide-wrapper{padding:55px 47px 220px}.guide-wrapper .horizontal{position:absolute;left:0;bottom:24%;width:100%}.guide-wrapper .pb-20{padding-bottom:20px}.guide-wrapper .flex{display:flex}.guide-wrapper .guideimg{margin:0 auto}.guide-wrapper .guide-title{font: 500 28px Montserrat-Regular,sans-serif}.guide-wrapper p{font: 400 17px Montserrat-Regular,sans-serif;color:#182527}.cloudolive-guide-section{box-shadow:0 4px 32px -14px #40576d4d!important;position:relative}.cloudolive-guide-section .integration-fadeout{position:absolute;bottom:0;left:0;width:100%;height:80px;background:linear-gradient(to bottom,#fff0,#f8f9fa);pointer-events:none}@media (width >= 768px){.cloudolive-guide-section .container-section{padding:20px 190px 20px 120px!important}}@media (width <= 768px){.cloudolive-guide-section .container-section{padding:3rem!important}.cloudolive-guide-section .guide-title{font-size:3.25rem!important}.cloudolive-guide-section .vault-btn{width:90%!important;margin-bottom:3rem!important}.cloudolive-guide-section .guide-subtext{padding:2rem;line-height:2rem!important}}.cloudolive-guide-section .guide-title{font-size:3rem;font-weight:200}.cloudolive-guide-section .guide-subtext{font-size:1.7rem;line-height:3rem;color:var(--text-color, black);font-weight:200;margin-bottom:2rem}.cloudolive-guide-section .guide-note{font-size:1.7rem;color:#000;font-weight:100}.cloudolive-guide-section .vault-btn{display:inline-block;background:var(--text-color, black);color:#fff;padding:1rem 2rem;border-radius:40px;font-weight:500;text-decoration:none;margin-top:1rem!important;font-size:1.4rem;border:1px solid;box-shadow:none!important;border-color:var(--text-color, textColor)}.cloudolive-guide-section .vault-btn:hover{background:#fff;color:var(--text-color, black)!important}.cloudolive-guide-section .guide-img{max-width:536px!important;max-height:536px!important;height:auto}.int-title{color:var(--text-color, black);font-size:4rem!important;font-weight:400}.int-text{font-size:1.3rem;font-weight:300}@media (width >= 991px){.section-outer{padding-top:7rem!important}}\n", ".bold{font-weight:700}.nce-heading{margin-bottom:2rem}.nce-note{margin-top:1rem;font-size:.85rem;color:#555}.nce-divider{border:0;height:40px;width:100%;background:linear-gradient(to bottom,#0000,#00000026);margin:0}.press-release-icon{height:auto!important;margin:0 11px 1.9rem;display:block;align-self:center;width:auto!important;aspect-ratio:0!important;object-fit:cover;margin-top:auto;margin-right:0!important}.msp-vault-section{padding:60px 0;background:#fff;padding-bottom:9rem!important;padding-top:7rem!important;box-shadow:0 4px 32px -14px #40576d4d!important}.msp-vault-section .vault-heading{font-size:3rem;font-weight:300}.msp-vault-section .explore-link{color:#000;font-weight:400;text-decoration:none;font-size:1.5rem}.msp-vault-section .resource-blog-card{display:flex;flex-direction:column;justify-content:space-between;background-color:#fff;border-radius:30px;box-shadow:0 20px 40px #00000014;padding:25px;text-align:center;width:338px;height:auto!important}.msp-vault-section .resource-blog-card h5{font-size:1.5rem;font-weight:400;margin-bottom:.5rem;color:var(--text-color, black)}.msp-vault-section .resource-blog-card p{font-size:1.5rem;color:var(--text-color, black);line-height:2rem}.msp-vault-section .resource-blog-card img{width:100%;border-radius:10px;aspect-ratio:1/1;object-fit:cover;margin-top:auto;margin-right:0!important;max-width:250px!important;align-self:center!important}.msp-vault-section .resource-blog-card iframe{height:210px;border-radius:10px;object-fit:cover;margin-right:0!important;max-width:280px!important}.msp-vault-section .resource-blog-card .resource-btn{background-color:var(--text-color, black);color:#fff;margin-top:auto;padding:10px 24px;border-radius:24px;font-size:1.5rem;font-weight:500;width:100%;max-width:240px;cursor:pointer;transition:background .3s ease;display:flex;justify-content:space-between;align-self:center;align-items:center;text-align:left;text-decoration:none;border:1px solid;box-shadow:none!important;border-color:var(--text-color, black)}.msp-vault-section .resource-blog-card .resource-btn:hover{background:#fff;color:var(--text-color, black)!important}.msp-vault-section .vault-description{text-align:left;max-width:657px;color:#182527;line-height:2.3rem!important;font-size:1.65rem}@media (width <= 1200px){.msp-vault-section .vault-heading{font-size:3.5rem}.msp-vault-section .vault-description{margin-top:1.35rem}.msp-vault-section .resource-btn{margin-left:0!important}}.video-row{gap:5.5rem!important;margin-top:3rem!important}@media (width >= 991px){section.bg-white.text-center.extra-top-padding{position:relative;overflow:hidden}section.bg-white.text-center.extra-top-padding .banner-header{margin-bottom:4rem!important}}.vault-header{text-align:left}@media (width >= 768px) and (width <= 1200px){.container{padding:0 6rem!important}}@media (width <= 768px){.video-row{gap:3rem!important}}@media (width <= 768px){.vault-header{text-align:center!important}.vault-heading{font-size:3rem!important}}@media (width <= 1200px){.container{padding:1rem 3rem!important}}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.Trial4ContactUsComponent, selector: "pw-trial-4-contact-us", inputs: ["subscriptionId", "sourceId", "masterSubscriptionId", "experimentName", "microserviceName", "shardName"] }, { kind: "component", type: i5.ResourceHeaderComponent, selector: "pw-resource-header" }, { kind: "component", type: i6$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i11.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i11.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i11.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i5.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i8.LazyImgDirective, selector: "img" }, { kind: "component", type: IntegrationTopBannerComponent, selector: "pw-integration-top-banner" }, { kind: "component", type: ResourceNoteCardComponent, selector: "pw-resource-note-card", inputs: ["releaseHeader", "categoryId", "isReleasePress", "postSlice", "resourceTitle", "tag"] }, { kind: "component", type: ResourceCompanyCardComponent, selector: "pw-resource-company-card", inputs: ["header", "data", "integrationCountDisplay", "vendor"], outputs: ["getPosts"] }, { kind: "pipe", type: i10$1.TranslocoPipe, name: "transloco" }] }); }
|
|
1266
1281
|
}
|
|
1267
1282
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceIntegrationComponent, decorators: [{
|
|
1268
1283
|
type: Component,
|
|
1269
|
-
args: [{ selector: 'pw-resource-integration', template: "<pw-resource-header></pw-resource-header>\n<pw-integration-top-banner></pw-integration-top-banner>\n<div class=\"bg-white\">\n <section class=\"cloudolive-guide-section bg-white py-5 section-outer\">\n <div class=\"container sec-container\">\n <div *ngIf=\"isLoaded && integrationCountDisplay > 0\">\n <h1 class=\"int-title mb-0\">{{ integrationCountDisplay }}+ integrations (& counting)</h1>\n <p class=\"int-text\"> Search the current list of {{companyName}} vendor and distributor integrations below. <br />\n </p>\n </div>\n <pw-resource-company-card *ngIf=\"isLoaded\" [header]=\"'integrated vendors'\"\n (getPosts)=\"getPostTags()\"\n [integrationCountDisplay]=\"integrationCountDisplay\"\n [data]=\"posts\"></pw-resource-company-card>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"integrationCountDisplay === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n </div>\n <div class=\"text-center pt-3 mt-4\" *ngIf=\"isLoaded && integrationCountDisplay > 0\">\n <p class=\"see-span\"> Don\u2019t see what you\u2019re after? <a [href]=\"contactUsUrl\"\n target=\"_blank\"\n class=\"int-span team-span\">Speak with our team to request a connection >\n </a>\n </p>\n </div>\n </div>\n\n </section>\n <section class=\"cloudolive-guide-section bg-white py-5 section-outer\">\n <div class=\"container\">\n <pw-resource-company-card [header]=\"'integrated Distributors'\"\n [integrationCountDisplay]=\"integrationCountDisplay\"\n *ngIf=\"isLoaded\"\n [vendor]=\"true\"\n (getPosts)=\"getPostTags()\"\n [data]=\"distributerPosts\"></pw-resource-company-card>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"integrationCountDisplay === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n </div>\n </div>\n\n </section>\n <section class=\"cloudolive-guide-section bg-white py-5 section-outer\" *ngIf=\"integrations\">\n <div class=\"container\">\n\n <div class=\"how-it-works-wrapper\">\n <div class=\"d-flex\">\n <h1 class=\"it-works-title mb-0\">{{integrations?.title || 'How it works'}}</h1>\n <i *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n class=\"fa fa-edit in-page-edit-icon text-black ms-4 mt-3 cursor-pointer\"\n (click)=\"openEditIntegrationsModal(editIntegrationsModal)\"\n title=\"Edit Integrations Section\"></i>\n </div>\n <p class=\"pb-20\" [innerHTML]=\"integrations?.description || 'View short example videos to understand how these integrations can work for you:'\"></p>\n <div class=\"row section-row\">\n <ng-container *ngIf=\"integrations?.items?.length > 0; else noIntegrations\">\n <ng-container *ngFor=\"let integration of integrations?.items\">\n <div\n class=\"col-md-6\"\n *ngIf=\"integration?.image_url || integration?.title || integration?.description\"\n >\n <ng-container *ngIf=\"integration?.video_url && integration?.video_url.includes('https'); else noVideo\">\n <div class=\"d-flex justify-content-center\">\n <img\n *ngIf=\"integration?.video_url\"\n [src]=\"integration?.image_url\"\n (click)=\"loadMicrosoftVideo(integration?.video_url)\"\n (keydown.enter)=\"loadMicrosoftVideo(integration?.video_url)\"\n class=\"how-it-works-img\"\n alt=\"Integration Video Thumbnail\"\n />\n </div>\n </ng-container>\n\n <ng-template #noVideo>\n <div class=\"d-flex justify-content-center\">\n <div class=\"w-100\">\n <pw-no-data [withImage]=\"true\" [message]=\"'No video found' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </ng-template>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #noIntegrations>\n <div class=\"w-100 text-center\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Integration.NoDataMessage' | transloco\"></pw-no-data>\n </div>\n </ng-template>\n\n </div>\n </div>\n </div>\n\n </section>\n <section class=\"cloudolive-guide-section bg-white py-5 section-outer\">\n <div class=\"container\">\n <div class=\"row align-items-start\">\n <div class=\"col-md-6 text-md-start text-center\">\n <div class=\"d-flex\">\n <h1 class=\"guide-title mb-3\">{{guideData?.items[0]?.title || '--UPDATE ME ON THE ADMIN/DOMAINS MODULE--'}}</h1>\n <i *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n class=\"fa fa-edit in-page-edit-icon text-black ms-4 mt-3 cursor-pointer\"\n (click)=\"openGuidesModal(guidesEditModal)\"\n title=\"Edit Integrations Section\"></i>\n </div>\n <p class=\"guide-subtext\"\n [innerHTML]=\"guideData?.items[0]?.description || '--UPDATE ME ON THE ADMIN/DOMAINS MODULE--'\">\n </p>\n <a class=\"vault-btn\"\n [href]=\"guideData?.items[0]?.guide_url\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n {{guideData?.items[0]?.button_text || 'View the guide'}}\n </a>\n\n </div>\n\n <div class=\"col-md-6 text-center\">\n <ng-container *ngIf=\"guideData?.items[0]?.image_url && !guideData?.items[0].image_url.includes('default-photo.jpg'); else noDataTemplate\">\n <img\n [src]=\"guideData?.items[0].image_url\"\n alt=\"Guide\"\n class=\"guide-img\" />\n </ng-container>\n\n <ng-template #noDataTemplate>\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'--ADD ME ON THE ADMIN/DOMAINS MODULE--' | transloco\" />\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n </section>\n</div>\n\n<pw-resource-note-card *ngIf=\"resourcePostTag?.tag_category_id\" [categoryId]=\"resourcePostTag?.tag_category_id\" [tag]=\"resourcePostTag\" [releaseHeader]=\"true\" [resourceTitle]=\"resourcePostTag?.title\"></pw-resource-note-card>\n\n<pw-trial-4-contact-us></pw-trial-4-contact-us>\n\n\n\n<ng-template #editIntegrationsModal let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Edit Integrations Section</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n\n <div class=\"modal-body\">\n <div class=\"mb-3\">\n <label class=\"form-label\">Title</label>\n <input class=\"form-control\" [(ngModel)]=\"editingIntegrations.title\" />\n </div>\n\n <div class=\"mb-3\">\n <label class=\"form-label\">Description</label>\n <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"editingIntegrations.description\"></textarea>\n </div>\n\n <div cdkDropList (cdkDropListDropped)=\"dropIntegrationItems($event)\">\n <div *ngFor=\"let integration of editingIntegrations.items; let i = index\" class=\"border p-3 mb-3\" cdkDrag>\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <label class=\"form-label mb-0\">Integration Item</label>\n <i class=\"fa fa-bars cursor-move in-page-bars-icon\" cdkDragHandle></i>\n </div>\n\n <div class=\"row\">\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Title</label>\n <input class=\"form-control\" [(ngModel)]=\"integration.title\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Description</label>\n <input class=\"form-control\" [(ngModel)]=\"integration.description\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Blog URL</label>\n <input class=\"form-control\" [(ngModel)]=\"integration.blog_url\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Image URL</label>\n <input class=\"form-control\" [(ngModel)]=\"integration.image_url\" />\n </div>\n <div class=\"col-md-12 mb-2\">\n <label class=\"form-label\">Video URL</label>\n <input class=\"form-control\" [(ngModel)]=\"integration.video_url\" />\n </div>\n </div>\n\n <div class=\"d-flex justify-content-end\">\n <i class=\"fa fa-trash text-danger cursor-pointer\" (click)=\"removeIntegrationItem(i)\"></i>\n </div>\n </div>\n </div>\n\n <button class=\"btn btn-outline-primary btn-sm\" (click)=\"addIntegrationItem()\">+ Add Integration</button>\n </div>\n\n <div class=\"modal-footer\">\n <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n <button class=\"btn btn-primary\" (click)=\"saveIntegrations(modal)\">Save</button>\n </div>\n</ng-template>\n\n\n\n<ng-template #guidesEditModal let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Edit Guides</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n\n <div class=\"modal-body\">\n <h4 class=\"mb-3\">Guides Section</h4>\n\n <div cdkDropList (cdkDropListDropped)=\"dropGuides($event)\">\n <div *ngFor=\"let guide of editingGuides.items; let i = index\" class=\"border p-3 mb-3\" cdkDrag>\n <div class=\"row\">\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Title</label>\n <input class=\"form-control\" [(ngModel)]=\"guide.title\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Button Text</label>\n <input class=\"form-control\" [(ngModel)]=\"guide.button_text\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Image URL</label>\n <input class=\"form-control\" [(ngModel)]=\"guide.image_url\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Guide URL</label>\n <input class=\"form-control\" [(ngModel)]=\"guide.guide_url\" />\n </div>\n <div class=\"col-12 mb-2\">\n <label class=\"form-label\">Description</label>\n <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"guide.description\"></textarea>\n </div>\n <div class=\"d-flex justify-content-between align-items-center mt-2\">\n <i class=\"fa fa-trash text-danger cursor-pointer\" (click)=\"removeGuide(i)\"></i>\n <i class=\"fa fa-bars cursor-move\" cdkDragHandle></i>\n </div>\n </div>\n </div>\n </div>\n\n <button class=\"btn btn-primary mt-2\" (click)=\"addGuide()\">+ Add Guide</button>\n </div>\n\n <div class=\"modal-footer\">\n <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n <button class=\"btn btn-primary\" (click)=\"saveGuides(modal)\">Save</button>\n </div>\n</ng-template>\n", styles: [".int-span{font-size:3rem;color:#3d8fbe}.team-span{font-size:2rem;color:#3d8fbe;font-weight:100}.see-span{font-size:2rem;font-weight:100}::ng-deep .edit-card .in-page-edit-icon{margin-left:1rem!important;margin-top:.5rem!important}::ng-deep .modal-content{margin-top:5rem!important}.how-it-works-wrapper .it-works-title{font-size:3rem;margin-bottom:2rem;color:var(--text-color, black);font-weight:200!important;padding-bottom:12px!important}.how-it-works-wrapper .how-it-works-img{width:85%!important;margin:0 auto!important}.how-it-works-wrapper p{padding-top:1rem;font-size:2rem;color:#000;font-weight:100;margin-bottom:4rem}.guide-wrapper{padding:55px 47px 220px}.guide-wrapper .horizontal{position:absolute;left:0;bottom:24%;width:100%}.guide-wrapper .pb-20{padding-bottom:20px}.guide-wrapper .flex{display:flex}.guide-wrapper .guideimg{margin:0 auto}.guide-wrapper .guide-title{font: 500 28px Montserrat-Regular,sans-serif}.guide-wrapper p{font: 400 17px Montserrat-Regular,sans-serif;color:#182527}.cloudolive-guide-section{box-shadow:0 4px 32px -14px #40576d4d!important;position:relative}.cloudolive-guide-section .integration-fadeout{position:absolute;bottom:0;left:0;width:100%;height:80px;background:linear-gradient(to bottom,#fff0,#f8f9fa);pointer-events:none}@media (width >= 768px){.cloudolive-guide-section .container-section{padding:20px 190px 20px 120px!important}}@media (width <= 768px){.cloudolive-guide-section .container-section{padding:3rem!important}.cloudolive-guide-section .guide-title{font-size:3.25rem!important}.cloudolive-guide-section .vault-btn{width:90%!important;margin-bottom:3rem!important}.cloudolive-guide-section .guide-subtext{padding:2rem;line-height:2rem!important}}.cloudolive-guide-section .guide-title{font-size:3rem;font-weight:200}.cloudolive-guide-section .guide-subtext{font-size:1.7rem;line-height:3rem;color:var(--text-color, black);font-weight:200;margin-bottom:2rem}.cloudolive-guide-section .guide-note{font-size:1.7rem;color:#000;font-weight:100}.cloudolive-guide-section .vault-btn{display:inline-block;background:var(--text-color, black);color:#fff;padding:1rem 2rem;border-radius:40px;font-weight:500;text-decoration:none;margin-top:1rem!important;font-size:1.4rem;border:1px solid;box-shadow:none!important;border-color:var(--text-color, textColor)}.cloudolive-guide-section .vault-btn:hover{background:#fff;color:var(--text-color, black)!important}.cloudolive-guide-section .guide-img{max-width:536px!important;max-height:536px!important;height:auto}.int-title{color:var(--text-color, black);font-size:4rem!important;font-weight:400}.int-text{font-size:1.3rem;font-weight:300}@media (width >= 991px){.section-outer{padding-top:7rem!important}}\n", ".bold{font-weight:700}.nce-heading{margin-bottom:2rem}.nce-note{margin-top:1rem;font-size:.85rem;color:#555}.nce-divider{border:0;height:40px;width:100%;background:linear-gradient(to bottom,#0000,#00000026);margin:0}.press-release-icon{height:auto!important;margin:0 11px 1.9rem;display:block;align-self:center;width:auto!important;aspect-ratio:0!important;object-fit:cover;margin-top:auto;margin-right:0!important}.msp-vault-section{padding:60px 0;background:#fff;padding-bottom:9rem!important;padding-top:7rem!important;box-shadow:0 4px 32px -14px #40576d4d!important}.msp-vault-section .vault-heading{font-size:3rem;font-weight:300}.msp-vault-section .explore-link{color:#000;font-weight:400;text-decoration:none;font-size:1.5rem}.msp-vault-section .resource-blog-card{display:flex;flex-direction:column;justify-content:space-between;background-color:#fff;border-radius:30px;box-shadow:0 20px 40px #00000014;padding:25px;text-align:center;width:338px;height:auto!important}.msp-vault-section .resource-blog-card h5{font-size:1.5rem;font-weight:400;margin-bottom:.5rem;color:var(--text-color, black)}.msp-vault-section .resource-blog-card p{font-size:1.5rem;color:var(--text-color, black);line-height:2rem}.msp-vault-section .resource-blog-card img{width:100%;border-radius:10px;aspect-ratio:1/1;object-fit:cover;margin-top:auto;margin-right:0!important;max-width:250px!important;align-self:center!important}.msp-vault-section .resource-blog-card iframe{height:210px;border-radius:10px;object-fit:cover;margin-right:0!important;max-width:280px!important}.msp-vault-section .resource-blog-card .resource-btn{background-color:var(--text-color, black);color:#fff;margin-top:auto;padding:10px 24px;border-radius:24px;font-size:1.5rem;font-weight:500;width:100%;max-width:240px;cursor:pointer;transition:background .3s ease;display:flex;justify-content:space-between;align-self:center;align-items:center;text-align:left;text-decoration:none;border:1px solid;box-shadow:none!important;border-color:var(--text-color, black)}.msp-vault-section .resource-blog-card .resource-btn:hover{background:#fff;color:var(--text-color, black)!important}.msp-vault-section .vault-description{text-align:left;max-width:657px;color:#182527;line-height:2.3rem!important;font-size:1.65rem}@media (width <= 1200px){.msp-vault-section .vault-heading{font-size:3.5rem}.msp-vault-section .vault-description{margin-top:1.35rem}.msp-vault-section .resource-btn{margin-left:0!important}}.video-row{gap:5.5rem!important;margin-top:3rem!important}@media (width >= 991px){section.bg-white.text-center.extra-top-padding{position:relative;overflow:hidden}section.bg-white.text-center.extra-top-padding .banner-header{margin-bottom:4rem!important}}.vault-header{text-align:left}@media (width >= 768px) and (width <= 1200px){.container{padding:0 6rem!important}}@media (width <= 768px){.video-row{gap:3rem!important}}@media (width <= 768px){.vault-header{text-align:center!important}.vault-heading{font-size:3rem!important}}@media (width <= 1200px){.container{padding:1rem 3rem!important}}\n"] }]
|
|
1284
|
+
args: [{ selector: 'pw-resource-integration', template: "<pw-resource-header></pw-resource-header>\n<pw-integration-top-banner></pw-integration-top-banner>\n<div class=\"bg-white\">\n <section class=\"cloudolive-guide-section bg-white py-5 section-outer\">\n <div class=\"container sec-container\">\n <div *ngIf=\"isLoaded && integrationCountDisplay > 0\">\n <h1 class=\"int-title mb-0\">{{ integrationCountDisplay }}+ integrations (& counting)</h1>\n <p class=\"int-text\"> Search the current list of {{companyName}} vendor and distributor integrations below. <br />\n </p>\n </div>\n <pw-resource-company-card *ngIf=\"isLoaded\" [header]=\"'integrated vendors'\"\n (getPosts)=\"getPostTags()\"\n [integrationCountDisplay]=\"integrationCountDisplay\"\n [data]=\"posts\"></pw-resource-company-card>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"integrationCountDisplay === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n </div>\n <div class=\"text-center pt-3 mt-4\" *ngIf=\"isLoaded && integrationCountDisplay > 0\">\n <p class=\"see-span\"> Don\u2019t see what you\u2019re after? <a [href]=\"contactUsUrl\"\n target=\"_blank\"\n class=\"int-span team-span\">Speak with our team to request a connection >\n </a>\n </p>\n </div>\n </div>\n\n </section>\n <section class=\"cloudolive-guide-section bg-white py-5 section-outer\">\n <div class=\"container\">\n <pw-resource-company-card [header]=\"'integrated Distributors'\"\n [integrationCountDisplay]=\"integrationCountDisplay\"\n *ngIf=\"isLoaded\"\n [vendor]=\"true\"\n (getPosts)=\"getPostTags()\"\n [data]=\"distributerPosts\"></pw-resource-company-card>\n <div class=\"w-100 text-center mt-3\"\n *ngIf=\"!isLoaded\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n <div *ngIf=\"integrationCountDisplay === 0 && isLoaded\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n </div>\n </div>\n\n </section>\n <section class=\"cloudolive-guide-section bg-white py-5 section-outer\" *ngIf=\"integrations\">\n <div class=\"container\">\n\n <div class=\"how-it-works-wrapper\">\n <div class=\"d-flex\">\n <h1 class=\"it-works-title mb-0\">{{integrations?.title || 'How it works'}}</h1>\n <i *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n class=\"fa fa-edit in-page-edit-icon text-black ms-4 mt-3 cursor-pointer\"\n (click)=\"openEditIntegrationsModal(editIntegrationsModal)\"\n title=\"Edit Integrations Section\"></i>\n </div>\n <p class=\"pb-20\" [innerHTML]=\"integrations?.description || 'View short example videos to understand how these integrations can work for you:'\"></p>\n <div class=\"row section-row\" [ngClass]=\"{ 'justify-content-center': integrations?.items?.length === 1 }\">\n <ng-container *ngIf=\"integrations?.items?.length > 0; else noIntegrations\">\n <ng-container *ngFor=\"let integration of integrations?.items\">\n <div\n class=\"col-md-6\"\n *ngIf=\"integration?.image_url || integration?.title || integration?.description\"\n >\n <ng-container *ngIf=\"integration?.video_url && integration?.video_url.includes('https'); else noVideo\">\n <div class=\"d-flex justify-content-center\">\n <img\n *ngIf=\"integration?.video_url\"\n [src]=\"integration?.image_url\"\n (click)=\"loadMicrosoftVideo(integration?.video_url)\"\n (keydown.enter)=\"loadMicrosoftVideo(integration?.video_url)\"\n class=\"how-it-works-img\"\n alt=\"Integration Video Thumbnail\"\n />\n </div>\n </ng-container>\n\n <ng-template #noVideo>\n <div class=\"d-flex justify-content-center\">\n <div class=\"w-100\">\n <pw-no-data [withImage]=\"true\" [message]=\"'No video found' | transloco\">\n </pw-no-data>\n </div>\n </div>\n </ng-template>\n </div>\n </ng-container>\n </ng-container>\n <ng-template #noIntegrations>\n <div class=\"w-100 text-center\">\n <pw-no-data [withImage]=\"true\" [message]=\"'Integration.NoDataMessage' | transloco\"></pw-no-data>\n </div>\n </ng-template>\n\n </div>\n </div>\n </div>\n\n </section>\n <section class=\"cloudolive-guide-section bg-white py-5 section-outer\" *ngIf=\"showIntegrations()\">\n <div class=\"container\">\n <div class=\"row align-items-start\">\n <div class=\"col-md-6 text-md-start text-center\">\n <div class=\"d-flex\">\n <h1 class=\"guide-title mb-3\">{{guideData?.items[0]?.title || '--UPDATE ME ON THE ADMIN/DOMAINS MODULE--'}}</h1>\n <i *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n class=\"fa fa-edit in-page-edit-icon text-black ms-4 mt-3 cursor-pointer\"\n (click)=\"openGuidesModal(guidesEditModal)\"\n title=\"Edit Integrations Section\"></i>\n </div>\n <p class=\"guide-subtext\"\n [innerHTML]=\"guideData?.items[0]?.description || '--UPDATE ME ON THE ADMIN/DOMAINS MODULE--'\">\n </p>\n <a class=\"vault-btn\"\n [href]=\"guideData?.items[0]?.guide_url\"\n target=\"_blank\"\n rel=\"noopener noreferrer\">\n {{guideData?.items[0]?.button_text || 'View the guide'}}\n </a>\n\n </div>\n\n <div class=\"col-md-6 text-center\">\n <ng-container *ngIf=\"guideData?.items[0]?.image_url && !guideData?.items[0].image_url.includes('default-photo.jpg'); else noDataTemplate\">\n <img\n [src]=\"guideData?.items[0].image_url\"\n alt=\"Guide\"\n class=\"guide-img\" />\n </ng-container>\n\n <ng-template #noDataTemplate>\n <div>\n <pw-no-data [withImage]=\"true\" [message]=\"'--ADD ME ON THE ADMIN/DOMAINS MODULE--' | transloco\" />\n </div>\n </ng-template>\n </div>\n </div>\n </div>\n </section>\n</div>\n\n<pw-resource-note-card *ngIf=\"resourcePostTag?.tag_category_id\" [categoryId]=\"resourcePostTag?.tag_category_id\" [tag]=\"resourcePostTag\" [releaseHeader]=\"true\" [resourceTitle]=\"resourcePostTag?.title\"></pw-resource-note-card>\n\n<pw-trial-4-contact-us></pw-trial-4-contact-us>\n\n\n\n<ng-template #editIntegrationsModal let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Edit Integrations Section</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n\n <div class=\"modal-body\">\n <div class=\"mb-3\">\n <label class=\"form-label\">Title</label>\n <input class=\"form-control\" [(ngModel)]=\"editingIntegrations.title\" />\n </div>\n\n <div class=\"mb-3\">\n <label class=\"form-label\">Description</label>\n <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"editingIntegrations.description\"></textarea>\n </div>\n\n <div cdkDropList (cdkDropListDropped)=\"dropIntegrationItems($event)\">\n <div *ngFor=\"let integration of editingIntegrations.items; let i = index\" class=\"border p-3 mb-3\" cdkDrag>\n <div class=\"d-flex justify-content-between align-items-center mb-2\">\n <label class=\"form-label mb-0\">Integration Item</label>\n <i class=\"fa fa-bars cursor-move in-page-bars-icon\" cdkDragHandle></i>\n </div>\n\n <div class=\"row\">\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Title</label>\n <input class=\"form-control\" [(ngModel)]=\"integration.title\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Description</label>\n <input class=\"form-control\" [(ngModel)]=\"integration.description\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Blog URL</label>\n <input class=\"form-control\" [(ngModel)]=\"integration.blog_url\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Image URL</label>\n <input class=\"form-control\" [(ngModel)]=\"integration.image_url\" />\n </div>\n <div class=\"col-md-12 mb-2\">\n <label class=\"form-label\">Video URL</label>\n <input class=\"form-control\" [(ngModel)]=\"integration.video_url\" />\n </div>\n </div>\n\n <div class=\"d-flex justify-content-end\">\n <i class=\"fa fa-trash text-danger cursor-pointer\" (click)=\"removeIntegrationItem(i)\"></i>\n </div>\n </div>\n </div>\n\n <button class=\"btn btn-outline-primary btn-sm\" (click)=\"addIntegrationItem()\">+ Add Integration</button>\n </div>\n\n <div class=\"modal-footer\">\n <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n <button class=\"btn btn-primary\" (click)=\"saveIntegrations(modal)\">Save</button>\n </div>\n</ng-template>\n\n\n\n<ng-template #guidesEditModal let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Edit Guides</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n\n <div class=\"modal-body\">\n <h4 class=\"mb-3\">Guides Section</h4>\n\n <div cdkDropList (cdkDropListDropped)=\"dropGuides($event)\">\n <div *ngFor=\"let guide of editingGuides.items; let i = index\" class=\"border p-3 mb-3\" cdkDrag>\n <div class=\"row\">\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Title</label>\n <input class=\"form-control\" [(ngModel)]=\"guide.title\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Button Text</label>\n <input class=\"form-control\" [(ngModel)]=\"guide.button_text\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Image URL</label>\n <input class=\"form-control\" [(ngModel)]=\"guide.image_url\" />\n </div>\n <div class=\"col-md-6 mb-2\">\n <label class=\"form-label\">Guide URL</label>\n <input class=\"form-control\" [(ngModel)]=\"guide.guide_url\" />\n </div>\n <div class=\"col-12 mb-2\">\n <label class=\"form-label\">Description</label>\n <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"guide.description\"></textarea>\n </div>\n <div class=\"d-flex justify-content-between align-items-center mt-2\">\n <i class=\"fa fa-trash text-danger cursor-pointer\" (click)=\"removeGuide(i)\"></i>\n <i class=\"fa fa-bars cursor-move\" cdkDragHandle></i>\n </div>\n </div>\n </div>\n </div>\n\n <button class=\"btn btn-primary mt-2\" (click)=\"addGuide()\">+ Add Guide</button>\n </div>\n\n <div class=\"modal-footer\">\n <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n <button class=\"btn btn-primary\" (click)=\"saveGuides(modal)\">Save</button>\n </div>\n</ng-template>\n", styles: [".int-span{font-size:3rem;color:#3d8fbe}.team-span{font-size:2rem;color:#3d8fbe;font-weight:100}.see-span{font-size:2rem;font-weight:100}::ng-deep .edit-card .in-page-edit-icon{margin-left:1rem!important;margin-top:.5rem!important}::ng-deep .modal-content{margin-top:5rem!important}.how-it-works-wrapper .it-works-title{font-size:3rem;margin-bottom:2rem;color:var(--text-color, black);font-weight:200!important;padding-bottom:12px!important}.how-it-works-wrapper .how-it-works-img{width:85%!important;margin:0 auto!important}.how-it-works-wrapper p{padding-top:1rem;font-size:2rem;color:#000;font-weight:100;margin-bottom:4rem}.guide-wrapper{padding:55px 47px 220px}.guide-wrapper .horizontal{position:absolute;left:0;bottom:24%;width:100%}.guide-wrapper .pb-20{padding-bottom:20px}.guide-wrapper .flex{display:flex}.guide-wrapper .guideimg{margin:0 auto}.guide-wrapper .guide-title{font: 500 28px Montserrat-Regular,sans-serif}.guide-wrapper p{font: 400 17px Montserrat-Regular,sans-serif;color:#182527}.cloudolive-guide-section{box-shadow:0 4px 32px -14px #40576d4d!important;position:relative}.cloudolive-guide-section .integration-fadeout{position:absolute;bottom:0;left:0;width:100%;height:80px;background:linear-gradient(to bottom,#fff0,#f8f9fa);pointer-events:none}@media (width >= 768px){.cloudolive-guide-section .container-section{padding:20px 190px 20px 120px!important}}@media (width <= 768px){.cloudolive-guide-section .container-section{padding:3rem!important}.cloudolive-guide-section .guide-title{font-size:3.25rem!important}.cloudolive-guide-section .vault-btn{width:90%!important;margin-bottom:3rem!important}.cloudolive-guide-section .guide-subtext{padding:2rem;line-height:2rem!important}}.cloudolive-guide-section .guide-title{font-size:3rem;font-weight:200}.cloudolive-guide-section .guide-subtext{font-size:1.7rem;line-height:3rem;color:var(--text-color, black);font-weight:200;margin-bottom:2rem}.cloudolive-guide-section .guide-note{font-size:1.7rem;color:#000;font-weight:100}.cloudolive-guide-section .vault-btn{display:inline-block;background:var(--text-color, black);color:#fff;padding:1rem 2rem;border-radius:40px;font-weight:500;text-decoration:none;margin-top:1rem!important;font-size:1.4rem;border:1px solid;box-shadow:none!important;border-color:var(--text-color, textColor)}.cloudolive-guide-section .vault-btn:hover{background:#fff;color:var(--text-color, black)!important}.cloudolive-guide-section .guide-img{max-width:536px!important;max-height:536px!important;height:auto}.int-title{color:var(--text-color, black);font-size:4rem!important;font-weight:400}.int-text{font-size:1.3rem;font-weight:300}@media (width >= 991px){.section-outer{padding-top:7rem!important}}\n", ".bold{font-weight:700}.nce-heading{margin-bottom:2rem}.nce-note{margin-top:1rem;font-size:.85rem;color:#555}.nce-divider{border:0;height:40px;width:100%;background:linear-gradient(to bottom,#0000,#00000026);margin:0}.press-release-icon{height:auto!important;margin:0 11px 1.9rem;display:block;align-self:center;width:auto!important;aspect-ratio:0!important;object-fit:cover;margin-top:auto;margin-right:0!important}.msp-vault-section{padding:60px 0;background:#fff;padding-bottom:9rem!important;padding-top:7rem!important;box-shadow:0 4px 32px -14px #40576d4d!important}.msp-vault-section .vault-heading{font-size:3rem;font-weight:300}.msp-vault-section .explore-link{color:#000;font-weight:400;text-decoration:none;font-size:1.5rem}.msp-vault-section .resource-blog-card{display:flex;flex-direction:column;justify-content:space-between;background-color:#fff;border-radius:30px;box-shadow:0 20px 40px #00000014;padding:25px;text-align:center;width:338px;height:auto!important}.msp-vault-section .resource-blog-card h5{font-size:1.5rem;font-weight:400;margin-bottom:.5rem;color:var(--text-color, black)}.msp-vault-section .resource-blog-card p{font-size:1.5rem;color:var(--text-color, black);line-height:2rem}.msp-vault-section .resource-blog-card img{width:100%;border-radius:10px;aspect-ratio:1/1;object-fit:cover;margin-top:auto;margin-right:0!important;max-width:250px!important;align-self:center!important}.msp-vault-section .resource-blog-card iframe{height:210px;border-radius:10px;object-fit:cover;margin-right:0!important;max-width:280px!important}.msp-vault-section .resource-blog-card .resource-btn{background-color:var(--text-color, black);color:#fff;margin-top:auto;padding:10px 24px;border-radius:24px;font-size:1.5rem;font-weight:500;width:100%;max-width:240px;cursor:pointer;transition:background .3s ease;display:flex;justify-content:space-between;align-self:center;align-items:center;text-align:left;text-decoration:none;border:1px solid;box-shadow:none!important;border-color:var(--text-color, black)}.msp-vault-section .resource-blog-card .resource-btn:hover{background:#fff;color:var(--text-color, black)!important}.msp-vault-section .vault-description{text-align:left;max-width:657px;color:#182527;line-height:2.3rem!important;font-size:1.65rem}@media (width <= 1200px){.msp-vault-section .vault-heading{font-size:3.5rem}.msp-vault-section .vault-description{margin-top:1.35rem}.msp-vault-section .resource-btn{margin-left:0!important}}.video-row{gap:5.5rem!important;margin-top:3rem!important}@media (width >= 991px){section.bg-white.text-center.extra-top-padding{position:relative;overflow:hidden}section.bg-white.text-center.extra-top-padding .banner-header{margin-bottom:4rem!important}}.vault-header{text-align:left}@media (width >= 768px) and (width <= 1200px){.container{padding:0 6rem!important}}@media (width <= 768px){.video-row{gap:3rem!important}}@media (width <= 768px){.vault-header{text-align:center!important}.vault-heading{font-size:3rem!important}}@media (width <= 1200px){.container{padding:1rem 3rem!important}}\n"] }]
|
|
1270
1285
|
}], ctorParameters: () => [{ type: i2$3.DomSanitizer }, { type: ResourceService }, { type: i2$1.NgbModal }, { type: i2.TagService }, { type: i5$2.AdminService }, { type: i0.Injector }], propDecorators: { editIntegrationsModal: [{
|
|
1271
1286
|
type: ViewChild,
|
|
1272
1287
|
args: ['editIntegrationsModal']
|
|
@@ -1373,11 +1388,11 @@ class RelatedResourcesComponent extends AppBaseComponent {
|
|
|
1373
1388
|
return item.id;
|
|
1374
1389
|
}
|
|
1375
1390
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: RelatedResourcesComponent, deps: [{ token: ResourceService }, { token: i0.Injector }, { token: i2$3.DomSanitizer }, { token: i2.TagService }, { token: i2.CustomToastService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1376
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: RelatedResourcesComponent, selector: "pw-related-resources", usesInheritance: true, ngImport: i0, template: "\n\n<section class=\"resource-body-section\">\n <div class=\"container\">\n <div class=\"ql-snow body-quill\"\n >\n <div class=\"ql-editor body post-body-text\"\n [innerHTML]=\"post?.body\">\n </div>\n </div>\n <section class=\"nce-offer-section\">\n\n <div class=\"row mt-5 mb-4 response-row\">\n <div class=\"col-12\">\n <form\n class=\"p-fluid mb-5\"\n [formGroup]=\"commentForm\"\n (ngSubmit)=\"onComment()\"\n *ngIf=\"userLoggedIn; else userLoggedOut\"\n >\n <div class=\"card shadow-sm border-0 p-4\">\n <div class=\"field\">\n <label for=\"comment\" class=\"font-bold text-lg mb-4 comment-label\">\uD83D\uDCAC Leave a comment</label>\n <textarea\n pInputTextarea\n formControlName=\"comment\"\n rows=\"6\"\n autoResize=\"true\"\n class=\"p-inputtext p-component p-inputtextarea\"\n placeholder=\"What's on your mind?\"\n ></textarea>\n <small\n class=\"text-danger\"\n *ngIf=\"commentForm.get('comment')?.invalid && commentForm.get('comment')?.touched\"\n >Please enter comment</small\n >\n </div>\n <div class=\"text-end mt-3\">\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"sign-btn sign-header-btn\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </form>\n <ng-template #userLoggedOut>\n <p class=\"text-center pt-3 pb-3 user-not-logged-in text-muted shadow-sm mb-5\">\n <a [routerLink]=\"['/login']\" class=\"text-primary fw-bold\">Log in</a> to leave a comment!\n </p>\n </ng-template>\n </div>\n </div>\n\n <div class=\"row mt-5 comment-row\">\n <div class=\"col-12\" *ngFor=\"let comment of postComments; trackBy: trackByComment\">\n <div class=\"card border-0 shadow-sm p-3 mb-3\">\n <div class=\"d-flex align-items-start\">\n <img\n [src]=\"comment?.author?.avatar?.[0]?.url || 'assets/img/icons/male.png'\"\n alt=\"avatar\"\n class=\"rounded-circle me-3\"\n width=\"50\"\n height=\"50\"\n (error)=\"handleImageError($event, 'assets/img/icons/male.png')\"\n />\n <div class=\"flex-grow-1\">\n <div class=\"fw-bold text-dark\">\n {{ comment.user?.first_name || '' }} {{ comment.user?.last_name || '' }}\n </div>\n <div class=\"text-muted small mb-2\">{{ comment.created_at | date: 'dd MMM yyyy, h:mm a' }}</div>\n <div class=\"text-body\">\n {{ comment.comment }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n </section>\n </div>\n <hr class=\"nce-divider\" />\n</section>\n\n<section class=\"nce-book-section\" *ngIf=\"hasValidDemoLinks\">\n <div class=\"container\">\n\n <p class=\"nce-contact\">\n Any questions, get in touch <a href=\"mailto:{{ company_email }}\">here</a>,\n <a [href]=\"linkedInUrl\" target=\"_blank\">connect on LinkedIn</a>, or book a meeting below:\n </p>\n </div>\n <pw-book-a-demo [isBlog]=\"true\"></pw-book-a-demo>\n <hr class=\"nce-divider\" />\n</section>\n\n\n<pw-resource-cards *ngIf=\"blogPostTag?.tag_category_id\" [tag]=\"blogPostTag\" [categoryId]=\"blogPostTag?.tag_category_id\" [resourceTitle]=\"blogPostTag?.title\" [isHeaderVisible]=\"true\" resourceLink=\"/resources/blogs\" [isRelated]=\"true\" [resourceTitle]=\"'Other resources you may be interested in:'\"></pw-resource-cards>\n", styles: [".video-row{gap:5.5rem!important;margin-top:3rem!important}::ng-deep .resource-section{box-shadow:0 4px 32px -14px #40576d4d!important}.release-icon{height:auto;margin:0 11px 1.9rem;display:block;align-self:center}@media (width >= 768px) and (width <= 1200px){.resource-title{font-size:1.4rem!important}}textarea{font-size:1.4rem!important}@media (width <= 768px){.resource-title{font-size:1.2rem!important}.container{padding:7rem 3rem 1rem!important}}@media (width >= 768px) and (width <= 1200px){.container{padding:1rem 3rem!important}}@media (width <= 1200px){.msp-vault-section .vault-heading{font-size:3.5rem}.msp-vault-section .vault-description{margin-top:1.35rem}.msp-vault-section .vault-card{width:100%!important}.msp-vault-section .vault-btn{margin-left:0!important;width:100%!important}}@media (width >= 991px){::ng-deep .trial-meeting-section:before{top:600px!important}::ng-deep .dashboard{margin-bottom:1rem!important}section.bg-white.text-center.extra-top-padding{position:relative;overflow:hidden}section.bg-white.text-center.extra-top-padding .banner-header{margin-bottom:4rem!important}section.bg-white.text-center.extra-top-padding:before,section.bg-white.text-center.extra-top-padding:after{content:\"\";position:absolute;background:url(/assets/img/logos/background-banner.png) no-repeat;background-size:contain;width:160px;height:450px;z-index:0;opacity:.8}section.bg-white.text-center.extra-top-padding:before{top:500px;left:0}section.bg-white.text-center.extra-top-padding:after{top:90px;right:0}}.vault-header{text-align:left}@media (width >= 768px) and (width <= 1200px){.container{padding:0 6rem!important}}@media (width <= 1200px){.resource-card{width:100%!important}.release-notes-section{padding:7rem 0!important}}@media (width >= 768px) and (width <= 1200px){.nce-hero-section{padding:0 6rem!important}.cards-row{justify-content:center}}.resource-body-section{background-color:#fff}.resource-body-section .container{padding:0 1.5rem;padding-bottom:4rem!important;padding-top:7rem!important;max-width:850px;margin:0 auto;text-align:left}.user-not-logged-in{background:#f7f7f7;border:1px solid rgb(238,238,238);font-weight:400}.user-not-logged-in a{color:var(--first)!important;text-decoration:none;font-weight:500}.nce-book-section{background:#fff;padding-top:7rem;padding-bottom:0}.nce-book-section .container{max-width:850px;margin:0 auto;padding:0 1.5rem;text-align:left}.nce-book-section .nce-contact{line-height:1.6;font-size:1.5rem}.nce-book-section .nce-contact a{text-decoration:underline;color:#000;margin:0 .2rem}.nce-book-section .nce-contact a:hover{color:var(--first)!important}.nce-offer-section{background:#fff;padding-top:2rem}.nce-offer-section .container{max-width:850px;margin:0 auto;padding:0 1.5rem;text-align:left}.nce-offer-section .nce-title{font-size:2rem;font-weight:700;color:#000;margin-bottom:.25em!important}.nce-offer-section .nce-title strong{font-weight:700}.nce-offer-section .nce-description{font-size:1.5rem;line-height:1.8rem;color:#333;margin-bottom:1.5rem}.nce-offer-section .nce-offer-list{font-size:1.1rem;line-height:1.5rem;margin-bottom:2.5rem;margin-top:2.5rem}.nce-offer-section .nce-offer-list p{font-size:1.5rem;margin:.5rem 0;font-weight:400}.nce-offer-section .nce-signup{margin-bottom:2.5rem}.nce-offer-section .nce-signup .signup-link{font-size:1.5rem;font-weight:400;text-decoration:underline;color:#000}@media (width <= 768px){.nce-offer-section .nce-book-section{padding-top:5rem!important}.nce-offer-section .container{text-align:left}.nce-offer-section .nce-title{font-size:1.5rem}.nce-offer-section .nce-description,.nce-offer-section .nce-offer-list,.nce-offer-section .nce-signup,.nce-offer-section .signup-link,.nce-offer-section .nce-contact,.nce-offer-section .nce-offer-list p{font-size:1.2rem!important}}.nce-offer-intro{font-size:1.5rem;font-weight:400}.outer-section-fadeout{position:absolute;top:139rem;height:40px;width:100%;background:linear-gradient(to bottom,#fff0,#f8f9fa)}.body-divider{border:0;height:40px;width:100%;background:linear-gradient(to bottom,#0000,#00000026);margin:0}@media (width <= 768px){.nce-book-section{padding-top:5rem!important}.nce-contact{font-size:1.2rem!important}}::ng-deep .body-quill{border-width:0!important;max-width:900px;display:block;margin-left:auto;margin-right:auto}::ng-deep .p-inputtextarea{border-radius:.5rem;border-color:#ced4da;font-size:1rem}.card{background-color:#fff;border-radius:12px}.comment-row{gap:2rem;padding-bottom:5rem;max-width:1000px;display:block;margin-left:auto;margin-right:auto}.comment-label{font-size:1.5rem!important}.response-row{max-width:1000px;display:block;margin-left:auto;margin-right:auto;margin-top:6rem!important}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.HubSpotMeetingsComponent, selector: "pw-book-a-demo", inputs: ["isBlog"] }, { kind: "directive", type: i5$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i8.LazyImgDirective, selector: "img" }, { kind: "component", type: ResourceCardComponent, selector: "pw-resource-cards", inputs: ["categoryId", "isHeaderVisible", "isRelated", "resourceTitle", "postSlice", "header", "tag", "resourceLink"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i10$1.TranslocoPipe, name: "transloco" }] }); }
|
|
1391
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: RelatedResourcesComponent, selector: "pw-related-resources", usesInheritance: true, ngImport: i0, template: "\n\n<section class=\"resource-body-section\">\n <div class=\"container\">\n <div class=\"ql-snow body-quill\"\n >\n <div class=\"ql-editor body post-body-text\"\n [innerHTML]=\"post?.body\">\n </div>\n </div>\n <section class=\"nce-offer-section\">\n\n <div class=\"row mt-5 mb-4 response-row\">\n <div class=\"col-12\">\n <form\n class=\"p-fluid mb-5\"\n [formGroup]=\"commentForm\"\n (ngSubmit)=\"onComment()\"\n *ngIf=\"userLoggedIn; else userLoggedOut\"\n >\n <div class=\"card shadow-sm no-border p-4\">\n <div class=\"field\">\n <label for=\"comment\" class=\"font-bold text-lg mb-4 comment-label\">\uD83D\uDCAC Leave a comment</label>\n <textarea\n pInputTextarea\n formControlName=\"comment\"\n rows=\"6\"\n autoResize=\"true\"\n class=\"p-inputtext p-component p-inputtextarea\"\n placeholder=\"What's on your mind?\"\n ></textarea>\n <small\n class=\"text-danger\"\n *ngIf=\"commentForm.get('comment')?.invalid && commentForm.get('comment')?.touched\"\n >Please enter comment</small\n >\n </div>\n <div class=\"text-end mt-3\">\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"sign-btn sign-header-btn\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </form>\n <ng-template #userLoggedOut>\n <p class=\"text-center pt-3 pb-3 user-not-logged-in text-muted shadow-sm mb-5\">\n <a [routerLink]=\"['/login']\" class=\"text-primary fw-bold\">Log in</a> to leave a comment!\n </p>\n </ng-template>\n </div>\n </div>\n\n <div class=\"row mt-5 comment-row\">\n <div class=\"col-12\" *ngFor=\"let comment of postComments; trackBy: trackByComment\">\n <div class=\"card no-border shadow-sm p-3 mb-3\">\n <div class=\"d-flex align-items-start\">\n <img\n [src]=\"comment?.author?.avatar?.[0]?.url || 'assets/img/icons/male.png'\"\n alt=\"avatar\"\n class=\"rounded-circle me-3\"\n width=\"50\"\n height=\"50\"\n (error)=\"handleImageError($event, 'assets/img/icons/male.png')\"\n />\n <div class=\"flex-grow-1\">\n <div class=\"fw-bold text-dark\">\n {{ comment.user?.first_name || '' }} {{ comment.user?.last_name || '' }}\n </div>\n <div class=\"text-muted small mb-2\">{{ comment.created_at | date: 'dd MMM yyyy, h:mm a' }}</div>\n <div class=\"text-body\">\n {{ comment.comment }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n </section>\n </div>\n <hr class=\"nce-divider\" />\n</section>\n\n<section class=\"nce-book-section\" *ngIf=\"hasValidDemoLinks\">\n <div class=\"container\">\n\n <p class=\"nce-contact\">\n Any questions, get in touch <a href=\"mailto:{{ company_email }}\">here</a>,\n <a [href]=\"linkedInUrl\" target=\"_blank\">connect on LinkedIn</a>, or book a meeting below:\n </p>\n </div>\n <pw-book-a-demo [isBlog]=\"true\"></pw-book-a-demo>\n <hr class=\"nce-divider\" />\n</section>\n\n\n<pw-resource-cards *ngIf=\"blogPostTag?.tag_category_id\" [tag]=\"blogPostTag\" [categoryId]=\"blogPostTag?.tag_category_id\" [resourceTitle]=\"blogPostTag?.title\" [isHeaderVisible]=\"true\" resourceLink=\"/resources/blogs\" [isRelated]=\"true\" [resourceTitle]=\"'Other resources you may be interested in:'\"></pw-resource-cards>\n", styles: [".video-row{gap:5.5rem!important;margin-top:3rem!important}::ng-deep .resource-section{box-shadow:0 4px 32px -14px #40576d4d!important}.release-icon{height:auto;margin:0 11px 1.9rem;display:block;align-self:center}@media (width >= 768px) and (width <= 1200px){.resource-title{font-size:1.4rem!important}}textarea{font-size:1.4rem!important}@media (width <= 768px){.resource-title{font-size:1.2rem!important}.container{padding:7rem 3rem 1rem!important}}@media (width >= 768px) and (width <= 1200px){.container{padding:1rem 3rem!important}}@media (width <= 1200px){.msp-vault-section .vault-heading{font-size:3.5rem}.msp-vault-section .vault-description{margin-top:1.35rem}.msp-vault-section .vault-card{width:100%!important}.msp-vault-section .vault-btn{margin-left:0!important;width:100%!important}}@media (width >= 991px){::ng-deep .trial-meeting-section:before{top:600px!important}::ng-deep .dashboard{margin-bottom:1rem!important}section.bg-white.text-center.extra-top-padding{position:relative;overflow:hidden}section.bg-white.text-center.extra-top-padding .banner-header{margin-bottom:4rem!important}section.bg-white.text-center.extra-top-padding:before,section.bg-white.text-center.extra-top-padding:after{content:\"\";position:absolute;background:url(/assets/img/logos/background-banner.png) no-repeat;background-size:contain;width:160px;height:450px;z-index:0;opacity:.8}section.bg-white.text-center.extra-top-padding:before{top:500px;left:0}section.bg-white.text-center.extra-top-padding:after{top:90px;right:0}}.vault-header{text-align:left}@media (width >= 768px) and (width <= 1200px){.container{padding:0 6rem!important}}@media (width <= 1200px){.resource-card{width:100%!important}.release-notes-section{padding:7rem 0!important}}@media (width >= 768px) and (width <= 1200px){.nce-hero-section{padding:0 6rem!important}.cards-row{justify-content:center}}.resource-body-section{background-color:#fff}.resource-body-section .container{padding:0 1.5rem;padding-bottom:4rem!important;padding-top:7rem!important;max-width:850px;margin:0 auto;text-align:left}.user-not-logged-in{background:#f7f7f7;border:1px solid rgb(238,238,238);font-weight:400}.user-not-logged-in a{color:var(--first)!important;text-decoration:none;font-weight:500}.nce-book-section{background:#fff;padding-top:7rem;padding-bottom:0}.nce-book-section .container{max-width:850px;margin:0 auto;padding:0 1.5rem;text-align:left}.nce-book-section .nce-contact{line-height:1.6;font-size:1.5rem}.nce-book-section .nce-contact a{text-decoration:underline;color:#000;margin:0 .2rem}.nce-book-section .nce-contact a:hover{color:var(--first)!important}.nce-offer-section{background:#fff;padding-top:2rem}.nce-offer-section .container{max-width:850px;margin:0 auto;padding:0 1.5rem;text-align:left}.nce-offer-section .nce-title{font-size:2rem;font-weight:700;color:#000;margin-bottom:.25em!important}.nce-offer-section .nce-title strong{font-weight:700}.nce-offer-section .nce-description{font-size:1.5rem;line-height:1.8rem;color:#333;margin-bottom:1.5rem}.nce-offer-section .nce-offer-list{font-size:1.1rem;line-height:1.5rem;margin-bottom:2.5rem;margin-top:2.5rem}.nce-offer-section .nce-offer-list p{font-size:1.5rem;margin:.5rem 0;font-weight:400}.nce-offer-section .nce-signup{margin-bottom:2.5rem}.nce-offer-section .nce-signup .signup-link{font-size:1.5rem;font-weight:400;text-decoration:underline;color:#000}@media (width <= 768px){.nce-offer-section .nce-book-section{padding-top:5rem!important}.nce-offer-section .container{text-align:left}.nce-offer-section .nce-title{font-size:1.5rem}.nce-offer-section .nce-description,.nce-offer-section .nce-offer-list,.nce-offer-section .nce-signup,.nce-offer-section .signup-link,.nce-offer-section .nce-contact,.nce-offer-section .nce-offer-list p{font-size:1.2rem!important}}.nce-offer-intro{font-size:1.5rem;font-weight:400}.outer-section-fadeout{position:absolute;top:139rem;height:40px;width:100%;background:linear-gradient(to bottom,#fff0,#f8f9fa)}.body-divider{border:0;height:40px;width:100%;background:linear-gradient(to bottom,#0000,#00000026);margin:0}@media (width <= 768px){.nce-book-section{padding-top:5rem!important}.nce-contact{font-size:1.2rem!important}}::ng-deep .body-quill{border-width:0!important;max-width:900px;display:block;margin-left:auto;margin-right:auto}::ng-deep .p-inputtextarea{border-radius:.5rem;border-color:#ced4da;font-size:1rem}.card{background-color:#fff;border-radius:12px}.comment-row{gap:2rem;padding-bottom:5rem;max-width:1000px;display:block;margin-left:auto;margin-right:auto}.comment-label{font-size:1.5rem!important}.response-row{max-width:1000px;display:block;margin-left:auto;margin-right:auto;margin-top:6rem!important}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4$1.HubSpotMeetingsComponent, selector: "pw-book-a-demo", inputs: ["isBlog"] }, { kind: "directive", type: i5$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i4.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i8.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i8.LazyImgDirective, selector: "img" }, { kind: "component", type: ResourceCardComponent, selector: "pw-resource-cards", inputs: ["categoryId", "isHeaderVisible", "isRelated", "resourceTitle", "postSlice", "header", "tag", "resourceLink"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i10$1.TranslocoPipe, name: "transloco" }] }); }
|
|
1377
1392
|
}
|
|
1378
1393
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: RelatedResourcesComponent, decorators: [{
|
|
1379
1394
|
type: Component,
|
|
1380
|
-
args: [{ selector: 'pw-related-resources', template: "\n\n<section class=\"resource-body-section\">\n <div class=\"container\">\n <div class=\"ql-snow body-quill\"\n >\n <div class=\"ql-editor body post-body-text\"\n [innerHTML]=\"post?.body\">\n </div>\n </div>\n <section class=\"nce-offer-section\">\n\n <div class=\"row mt-5 mb-4 response-row\">\n <div class=\"col-12\">\n <form\n class=\"p-fluid mb-5\"\n [formGroup]=\"commentForm\"\n (ngSubmit)=\"onComment()\"\n *ngIf=\"userLoggedIn; else userLoggedOut\"\n >\n <div class=\"card shadow-sm border
|
|
1395
|
+
args: [{ selector: 'pw-related-resources', template: "\n\n<section class=\"resource-body-section\">\n <div class=\"container\">\n <div class=\"ql-snow body-quill\"\n >\n <div class=\"ql-editor body post-body-text\"\n [innerHTML]=\"post?.body\">\n </div>\n </div>\n <section class=\"nce-offer-section\">\n\n <div class=\"row mt-5 mb-4 response-row\">\n <div class=\"col-12\">\n <form\n class=\"p-fluid mb-5\"\n [formGroup]=\"commentForm\"\n (ngSubmit)=\"onComment()\"\n *ngIf=\"userLoggedIn; else userLoggedOut\"\n >\n <div class=\"card shadow-sm no-border p-4\">\n <div class=\"field\">\n <label for=\"comment\" class=\"font-bold text-lg mb-4 comment-label\">\uD83D\uDCAC Leave a comment</label>\n <textarea\n pInputTextarea\n formControlName=\"comment\"\n rows=\"6\"\n autoResize=\"true\"\n class=\"p-inputtext p-component p-inputtextarea\"\n placeholder=\"What's on your mind?\"\n ></textarea>\n <small\n class=\"text-danger\"\n *ngIf=\"commentForm.get('comment')?.invalid && commentForm.get('comment')?.touched\"\n >Please enter comment</small\n >\n </div>\n <div class=\"text-end mt-3\">\n <button type=\"submit\"\n [buttonBusy]=\"buttonBusy\"\n class=\"sign-btn sign-header-btn\">\n {{ 'Button.Submit' | transloco }}\n </button>\n </div>\n </div>\n </form>\n <ng-template #userLoggedOut>\n <p class=\"text-center pt-3 pb-3 user-not-logged-in text-muted shadow-sm mb-5\">\n <a [routerLink]=\"['/login']\" class=\"text-primary fw-bold\">Log in</a> to leave a comment!\n </p>\n </ng-template>\n </div>\n </div>\n\n <div class=\"row mt-5 comment-row\">\n <div class=\"col-12\" *ngFor=\"let comment of postComments; trackBy: trackByComment\">\n <div class=\"card no-border shadow-sm p-3 mb-3\">\n <div class=\"d-flex align-items-start\">\n <img\n [src]=\"comment?.author?.avatar?.[0]?.url || 'assets/img/icons/male.png'\"\n alt=\"avatar\"\n class=\"rounded-circle me-3\"\n width=\"50\"\n height=\"50\"\n (error)=\"handleImageError($event, 'assets/img/icons/male.png')\"\n />\n <div class=\"flex-grow-1\">\n <div class=\"fw-bold text-dark\">\n {{ comment.user?.first_name || '' }} {{ comment.user?.last_name || '' }}\n </div>\n <div class=\"text-muted small mb-2\">{{ comment.created_at | date: 'dd MMM yyyy, h:mm a' }}</div>\n <div class=\"text-body\">\n {{ comment.comment }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n\n </section>\n </div>\n <hr class=\"nce-divider\" />\n</section>\n\n<section class=\"nce-book-section\" *ngIf=\"hasValidDemoLinks\">\n <div class=\"container\">\n\n <p class=\"nce-contact\">\n Any questions, get in touch <a href=\"mailto:{{ company_email }}\">here</a>,\n <a [href]=\"linkedInUrl\" target=\"_blank\">connect on LinkedIn</a>, or book a meeting below:\n </p>\n </div>\n <pw-book-a-demo [isBlog]=\"true\"></pw-book-a-demo>\n <hr class=\"nce-divider\" />\n</section>\n\n\n<pw-resource-cards *ngIf=\"blogPostTag?.tag_category_id\" [tag]=\"blogPostTag\" [categoryId]=\"blogPostTag?.tag_category_id\" [resourceTitle]=\"blogPostTag?.title\" [isHeaderVisible]=\"true\" resourceLink=\"/resources/blogs\" [isRelated]=\"true\" [resourceTitle]=\"'Other resources you may be interested in:'\"></pw-resource-cards>\n", styles: [".video-row{gap:5.5rem!important;margin-top:3rem!important}::ng-deep .resource-section{box-shadow:0 4px 32px -14px #40576d4d!important}.release-icon{height:auto;margin:0 11px 1.9rem;display:block;align-self:center}@media (width >= 768px) and (width <= 1200px){.resource-title{font-size:1.4rem!important}}textarea{font-size:1.4rem!important}@media (width <= 768px){.resource-title{font-size:1.2rem!important}.container{padding:7rem 3rem 1rem!important}}@media (width >= 768px) and (width <= 1200px){.container{padding:1rem 3rem!important}}@media (width <= 1200px){.msp-vault-section .vault-heading{font-size:3.5rem}.msp-vault-section .vault-description{margin-top:1.35rem}.msp-vault-section .vault-card{width:100%!important}.msp-vault-section .vault-btn{margin-left:0!important;width:100%!important}}@media (width >= 991px){::ng-deep .trial-meeting-section:before{top:600px!important}::ng-deep .dashboard{margin-bottom:1rem!important}section.bg-white.text-center.extra-top-padding{position:relative;overflow:hidden}section.bg-white.text-center.extra-top-padding .banner-header{margin-bottom:4rem!important}section.bg-white.text-center.extra-top-padding:before,section.bg-white.text-center.extra-top-padding:after{content:\"\";position:absolute;background:url(/assets/img/logos/background-banner.png) no-repeat;background-size:contain;width:160px;height:450px;z-index:0;opacity:.8}section.bg-white.text-center.extra-top-padding:before{top:500px;left:0}section.bg-white.text-center.extra-top-padding:after{top:90px;right:0}}.vault-header{text-align:left}@media (width >= 768px) and (width <= 1200px){.container{padding:0 6rem!important}}@media (width <= 1200px){.resource-card{width:100%!important}.release-notes-section{padding:7rem 0!important}}@media (width >= 768px) and (width <= 1200px){.nce-hero-section{padding:0 6rem!important}.cards-row{justify-content:center}}.resource-body-section{background-color:#fff}.resource-body-section .container{padding:0 1.5rem;padding-bottom:4rem!important;padding-top:7rem!important;max-width:850px;margin:0 auto;text-align:left}.user-not-logged-in{background:#f7f7f7;border:1px solid rgb(238,238,238);font-weight:400}.user-not-logged-in a{color:var(--first)!important;text-decoration:none;font-weight:500}.nce-book-section{background:#fff;padding-top:7rem;padding-bottom:0}.nce-book-section .container{max-width:850px;margin:0 auto;padding:0 1.5rem;text-align:left}.nce-book-section .nce-contact{line-height:1.6;font-size:1.5rem}.nce-book-section .nce-contact a{text-decoration:underline;color:#000;margin:0 .2rem}.nce-book-section .nce-contact a:hover{color:var(--first)!important}.nce-offer-section{background:#fff;padding-top:2rem}.nce-offer-section .container{max-width:850px;margin:0 auto;padding:0 1.5rem;text-align:left}.nce-offer-section .nce-title{font-size:2rem;font-weight:700;color:#000;margin-bottom:.25em!important}.nce-offer-section .nce-title strong{font-weight:700}.nce-offer-section .nce-description{font-size:1.5rem;line-height:1.8rem;color:#333;margin-bottom:1.5rem}.nce-offer-section .nce-offer-list{font-size:1.1rem;line-height:1.5rem;margin-bottom:2.5rem;margin-top:2.5rem}.nce-offer-section .nce-offer-list p{font-size:1.5rem;margin:.5rem 0;font-weight:400}.nce-offer-section .nce-signup{margin-bottom:2.5rem}.nce-offer-section .nce-signup .signup-link{font-size:1.5rem;font-weight:400;text-decoration:underline;color:#000}@media (width <= 768px){.nce-offer-section .nce-book-section{padding-top:5rem!important}.nce-offer-section .container{text-align:left}.nce-offer-section .nce-title{font-size:1.5rem}.nce-offer-section .nce-description,.nce-offer-section .nce-offer-list,.nce-offer-section .nce-signup,.nce-offer-section .signup-link,.nce-offer-section .nce-contact,.nce-offer-section .nce-offer-list p{font-size:1.2rem!important}}.nce-offer-intro{font-size:1.5rem;font-weight:400}.outer-section-fadeout{position:absolute;top:139rem;height:40px;width:100%;background:linear-gradient(to bottom,#fff0,#f8f9fa)}.body-divider{border:0;height:40px;width:100%;background:linear-gradient(to bottom,#0000,#00000026);margin:0}@media (width <= 768px){.nce-book-section{padding-top:5rem!important}.nce-contact{font-size:1.2rem!important}}::ng-deep .body-quill{border-width:0!important;max-width:900px;display:block;margin-left:auto;margin-right:auto}::ng-deep .p-inputtextarea{border-radius:.5rem;border-color:#ced4da;font-size:1rem}.card{background-color:#fff;border-radius:12px}.comment-row{gap:2rem;padding-bottom:5rem;max-width:1000px;display:block;margin-left:auto;margin-right:auto}.comment-label{font-size:1.5rem!important}.response-row{max-width:1000px;display:block;margin-left:auto;margin-right:auto;margin-top:6rem!important}\n"] }]
|
|
1381
1396
|
}], ctorParameters: () => [{ type: ResourceService }, { type: i0.Injector }, { type: i2$3.DomSanitizer }, { type: i2.TagService }, { type: i2.CustomToastService }] });
|
|
1382
1397
|
|
|
1383
1398
|
class ResourcePostDetailsComponent extends AppBaseComponent {
|
|
@@ -2098,11 +2113,11 @@ class ResourceTagComponent extends AppBaseComponent {
|
|
|
2098
2113
|
});
|
|
2099
2114
|
}
|
|
2100
2115
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceTagComponent, deps: [{ token: i2.TagService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2101
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourceTagComponent, selector: "pw-resource-tags", outputs: { tagsLoaded: "tagsLoaded", tagSelected: "tagSelected" }, usesInheritance: true, ngImport: i0, template: "<section class=\"tag-section py-5 bg-white\" *ngIf=\"tags?.length\">\n <div class=\"container\">\n <i *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.SuperAdmin']\"\n class=\"fa fa-edit in-page-edit-icon cursor-pointer text-black d-flex justify-content-end mb-3\"\n (click)=\"navigateToTagList()\"\n title=\"Edit Tags\"></i>\n <div class=\"row g-4\">\n <div class=\"col-md-3 col-sm-6 mb-4\" *ngFor=\"let tag of tags\">\n <div (click)=\"selectTag(tag)\" (keydown.enter)=\"selectTag(tag)\" class=\"resource-card d-flex align-items-center p-3\" [ngClass]=\"{ 'selected': selectedTag?.name === tag.name }\">\n <i *ngIf=\"tag?.icon_name\" class=\"fa\" [ngClass]=\"tag.icon_name + ' resource-icon me-3'\"></i>\n <span class=\"resource-text\">{{ tag.name }}</span>\n </div>\n </div>\n </div>\n </div>\n</section>\n", styles: [".selected{border:4px dashed #d4d4d4;border-color:var(--first)!important}.tag-section{padding-top:4.5rem!important}\n", ":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}body{background:#fff}.edit-card .in-page-edit-icon{margin-top:1rem!important}.blog-listing{border:1px solid rgb(238,238,238);cursor:pointer;box-shadow:0 4px 12px #00000026}.all-posts{margin:2.5em auto 0;max-width:980px;padding:14px 20px;width:100%}.tag-div{height:100%;display:flex;flex-direction:column;justify-content:space-between}ul.tags{display:inline-flex;font-size:16px;font-weight:400}ul.tags li{color:#337ab7;cursor:pointer;font-weight:600;margin-right:20px}ul.tags li:hover{color:#000}.search{position:relative}.search input{border:0;border-bottom:1px solid rgb(213,206,206)}.search i{position:absolute;right:5px}.scroll-container{max-height:70vh;overflow-y:auto}.blog-list .blog-listing h4{color:#000;font:28px/1.3 Roboto,sans-serif;transition:all .5s}.blog-list .blog-listing h4:hover{color:#0045c7}.blog-list .blog-listing p.body{color:#b3b3b3;font:16px/1.4 Roboto,sans-serif;transition:all .5s;min-height:120px!important;word-break:break-word;overflow-wrap:break-word;white-space:normal}.blog-list .blog-listing p.body:hover{color:#0045c7}.blog-list .blog-listing p.body p{color:inherit;font:inherit;transition:inherit}.blog-list .blog-listing p.body p:hover{color:#0045c7}.blog-list .blog-listing .list-blog-image img{padding:7px 25px 25px}.blog-list .blog-listing .author{padding-top:1.5rem}.blog-list .blog-listing .author .avatar-image{border:1px solid rgb(0,0,0);border-radius:50px;height:50px;clip-path:circle(50% at 50% 50%);width:50px}.blog-list .blog-listing .author .avatar-image img{left:50%;position:relative;top:50%;transform:translate(-50%,-50%)}.blog-list .blog-listing .author .avatar-image .default-user-image{width:50px}.blog-list .blog-listing .author .author-name p.name{color:#000;font:14px/1 Roboto,sans-serif;margin:0;transition:all .5s}.blog-list .blog-listing .author .author-name p.name:hover{color:#0045c7}.blog-list .blog-listing .author .author-name p.name i{color:#000}.blog-list .blog-listing .author .author-name ul li{display:inline-block;padding-right:10px;vertical-align:middle}.blog-list .blog-listing .author .author-name ul li a{color:#b3b3b3;font:12px/1 Roboto,sans-serif}.blog-list .blog-listing .author .share-post{flex-grow:3;position:relative;text-align:right}.blog-list .blog-listing .author .share-post i{color:var(--first)}.blog-list .blog-listing .author .share-post .dropdown-menu{border:0 0;box-shadow:0 3px 8px #0003;left:auto!important;right:12px;top:26px!important;transform:translate(0)!important}.blog-list .blog-listing .blog-view{border-top:1px solid rgb(238,238,238)}.blog-list .blog-listing .blog-view ul li{color:#b3b3b3;font:12px/1 Roboto,sans-serif;padding-right:14px}.blog-list .blog-listing .blog-view ul li a{color:inherit;font:inherit;transition:all .5s}.blog-list .blog-listing .blog-view ul li a:hover{color:#0045c7}.blog-list .blog-listing .blog-view ul li:last-child{flex-grow:3;padding-right:0;text-align:right}.blog-list .blog-listing .blog-view ul li:last-child i{color:#e84a43;font-size:14px}@media only screen and (width <= 1024px){.cust-mt{padding:14px 5px}.cust-mt .blog-list .blog-listing h4{font:20px/1.3 Roboto,sans-serif}.cust-mt .blog-list .blog-listing p.body{font:.9rem/1.3 Roboto,sans-serif}.cust-mt .blog-list .blog-listing p.body p{font:inherit}.cust-mt .blog-list .blog-listing .blog-image{height:300px}}@media only screen and (width <= 767px){.blog-list .blog-listing{height:auto;max-height:none;overflow:visible}.blog-list .blog-listing .blog-view{padding-bottom:1rem}}@media (width >= 768px){.blog-view{bottom:0;width:92%}}.post-body-text:hover{color:var(--titles)!important}.resource-card{border:2px dashed #d4d4d4;border-radius:16px;background-color:#fff;transition:box-shadow .3s ease;cursor:pointer;min-height:95px;padding:1.5rem!important}.resource-card:hover{box-shadow:0 0 30px #00000014}.selected{border:4px dashed #d4d4d4;border-color:var(--first)!important}.resource-icon{font-size:2.5rem;color:var(--first)}.resource-text{font-size:1.4rem;font-weight:500;color:var(--text-color);line-height:2rem}.three-dots-wrapper{width:32px;height:32px;display:flex;margin-top:.25rem!important;justify-content:center;cursor:pointer;position:relative;z-index:2}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
2116
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourceTagComponent, selector: "pw-resource-tags", outputs: { tagsLoaded: "tagsLoaded", tagSelected: "tagSelected" }, usesInheritance: true, ngImport: i0, template: "<section class=\"tag-section py-5 bg-white\" *ngIf=\"tags?.length\">\n <div class=\"container\">\n <i *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.SuperAdmin']\"\n class=\"fa fa-edit in-page-edit-icon cursor-pointer text-black d-flex justify-content-end mb-3\"\n (click)=\"navigateToTagList()\"\n title=\"Edit Tags\"></i>\n <div class=\"row g-4\">\n <div class=\"col-md-3 col-sm-6 mb-4\" *ngFor=\"let tag of tags\">\n <div (click)=\"selectTag(tag)\" (keydown.enter)=\"selectTag(tag)\" class=\"resource-card d-flex align-items-center p-3\" [ngClass]=\"{ 'selected': selectedTag?.name === tag.name }\">\n <i *ngIf=\"tag?.icon_name\" class=\"fa\" [ngClass]=\"tag.icon_name + ' resource-icon me-3'\"></i>\n <span class=\"resource-text\">{{ tag.name }}</span>\n </div>\n </div>\n </div>\n </div>\n</section>\n", styles: [".selected{border:4px dashed #d4d4d4;border-color:var(--first)!important}.tag-section{padding-top:4.5rem!important}\n", ":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}body{background:#fff}.edit-card .in-page-edit-icon{margin-top:1rem!important}.blog-listing{border:1px solid rgb(238,238,238);cursor:pointer;box-shadow:0 4px 12px #00000026}.all-posts{margin:2.5em auto 0;max-width:980px;padding:14px 20px;width:100%}.tag-div{height:100%;display:flex;flex-direction:column;justify-content:space-between}ul.tags{display:inline-flex;font-size:16px;font-weight:400}ul.tags li{color:#337ab7;cursor:pointer;font-weight:600;margin-right:20px}ul.tags li:hover{color:#000}.search{position:relative}.search input{border:0;border-bottom:1px solid rgb(213,206,206)}.search i{position:absolute;right:5px}.scroll-container{max-height:70vh;overflow-y:auto}.blog-list .blog-listing h4{color:#000;font:28px/1.3 Roboto,sans-serif;transition:all .5s}.blog-list .blog-listing h4:hover{color:#0045c7}.blog-list .blog-listing p.body{color:#b3b3b3;font:16px/1.4 Roboto,sans-serif;transition:all .5s;min-height:120px!important;word-break:break-word;overflow-wrap:break-word;white-space:normal}.blog-list .blog-listing p.body:hover{color:#0045c7}.blog-list .blog-listing p.body p{color:inherit;font:inherit;transition:inherit}.blog-list .blog-listing p.body p:hover{color:#0045c7}.blog-list .blog-listing .list-blog-image img{padding:7px 25px 25px}.blog-list .blog-listing .author{padding-top:1.5rem}.blog-list .blog-listing .author .avatar-image{border:1px solid rgb(0,0,0);border-radius:50px;height:50px;clip-path:circle(50% at 50% 50%);width:50px}.blog-list .blog-listing .author .avatar-image img{left:50%;position:relative;top:50%;transform:translate(-50%,-50%)}.blog-list .blog-listing .author .avatar-image .default-user-image{width:50px}.blog-list .blog-listing .author .author-name p.name{color:#000;font:14px/1 Roboto,sans-serif;margin:0;transition:all .5s}.blog-list .blog-listing .author .author-name p.name:hover{color:#0045c7}.blog-list .blog-listing .author .author-name p.name i{color:#000}.blog-list .blog-listing .author .author-name ul li{display:inline-block;padding-right:10px;vertical-align:middle}.blog-list .blog-listing .author .author-name ul li a{color:#b3b3b3;font:12px/1 Roboto,sans-serif}.blog-list .blog-listing .author .share-post{flex-grow:3;position:relative;text-align:right}.blog-list .blog-listing .author .share-post i{color:var(--first)}.blog-list .blog-listing .author .share-post .dropdown-menu{border:0 0;box-shadow:0 3px 8px #0003;left:auto!important;right:12px;top:26px!important;transform:translate(0)!important}.blog-list .blog-listing .blog-view{border-top:1px solid rgb(238,238,238)}.blog-list .blog-listing .blog-view ul li{color:#b3b3b3;font:12px/1 Roboto,sans-serif;padding-right:14px}.blog-list .blog-listing .blog-view ul li a{color:inherit;font:inherit;transition:all .5s}.blog-list .blog-listing .blog-view ul li a:hover{color:#0045c7}.blog-list .blog-listing .blog-view ul li:last-child{flex-grow:3;padding-right:0;text-align:right}.blog-list .blog-listing .blog-view ul li:last-child i{color:#e84a43;font-size:14px}@media only screen and (width <= 1024px){.cust-mt{padding:14px 5px}.cust-mt .blog-list .blog-listing h4{font:20px/1.3 Roboto,sans-serif}.cust-mt .blog-list .blog-listing p.body{font:.9rem/1.3 Roboto,sans-serif}.cust-mt .blog-list .blog-listing p.body p{font:inherit}.cust-mt .blog-list .blog-listing .blog-image{height:300px}}@media only screen and (width <= 767px){.blog-list .blog-listing{height:auto;max-height:none;overflow:visible}.blog-list .blog-listing .blog-view{padding-bottom:1rem}}@media (width >= 768px){.blog-view{bottom:0;width:92%}}.post-body-text:hover{color:var(--titles)!important}.resource-card{border:2px dashed #d4d4d4;border-radius:16px;background-color:#fff;transition:box-shadow .3s ease;cursor:pointer;min-height:95px;padding:1.5rem!important}.resource-card:hover{box-shadow:0 0 30px #00000014}.selected{border:4px dashed #d4d4d4;border-color:var(--first)!important}.resource-icon{font-size:2.5rem;color:var(--first)}.resource-text{font-size:1.4rem;font-weight:500;color:var(--text-color);line-height:2rem}.three-dots-wrapper{width:32px;height:32px;display:flex;margin-top:.25rem!important;justify-content:center;cursor:pointer;position:relative;z-index:2}.expand-tags{font-size:1.2rem}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
|
|
2102
2117
|
}
|
|
2103
2118
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceTagComponent, decorators: [{
|
|
2104
2119
|
type: Component,
|
|
2105
|
-
args: [{ selector: 'pw-resource-tags', template: "<section class=\"tag-section py-5 bg-white\" *ngIf=\"tags?.length\">\n <div class=\"container\">\n <i *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.SuperAdmin']\"\n class=\"fa fa-edit in-page-edit-icon cursor-pointer text-black d-flex justify-content-end mb-3\"\n (click)=\"navigateToTagList()\"\n title=\"Edit Tags\"></i>\n <div class=\"row g-4\">\n <div class=\"col-md-3 col-sm-6 mb-4\" *ngFor=\"let tag of tags\">\n <div (click)=\"selectTag(tag)\" (keydown.enter)=\"selectTag(tag)\" class=\"resource-card d-flex align-items-center p-3\" [ngClass]=\"{ 'selected': selectedTag?.name === tag.name }\">\n <i *ngIf=\"tag?.icon_name\" class=\"fa\" [ngClass]=\"tag.icon_name + ' resource-icon me-3'\"></i>\n <span class=\"resource-text\">{{ tag.name }}</span>\n </div>\n </div>\n </div>\n </div>\n</section>\n", styles: [".selected{border:4px dashed #d4d4d4;border-color:var(--first)!important}.tag-section{padding-top:4.5rem!important}\n", ":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}body{background:#fff}.edit-card .in-page-edit-icon{margin-top:1rem!important}.blog-listing{border:1px solid rgb(238,238,238);cursor:pointer;box-shadow:0 4px 12px #00000026}.all-posts{margin:2.5em auto 0;max-width:980px;padding:14px 20px;width:100%}.tag-div{height:100%;display:flex;flex-direction:column;justify-content:space-between}ul.tags{display:inline-flex;font-size:16px;font-weight:400}ul.tags li{color:#337ab7;cursor:pointer;font-weight:600;margin-right:20px}ul.tags li:hover{color:#000}.search{position:relative}.search input{border:0;border-bottom:1px solid rgb(213,206,206)}.search i{position:absolute;right:5px}.scroll-container{max-height:70vh;overflow-y:auto}.blog-list .blog-listing h4{color:#000;font:28px/1.3 Roboto,sans-serif;transition:all .5s}.blog-list .blog-listing h4:hover{color:#0045c7}.blog-list .blog-listing p.body{color:#b3b3b3;font:16px/1.4 Roboto,sans-serif;transition:all .5s;min-height:120px!important;word-break:break-word;overflow-wrap:break-word;white-space:normal}.blog-list .blog-listing p.body:hover{color:#0045c7}.blog-list .blog-listing p.body p{color:inherit;font:inherit;transition:inherit}.blog-list .blog-listing p.body p:hover{color:#0045c7}.blog-list .blog-listing .list-blog-image img{padding:7px 25px 25px}.blog-list .blog-listing .author{padding-top:1.5rem}.blog-list .blog-listing .author .avatar-image{border:1px solid rgb(0,0,0);border-radius:50px;height:50px;clip-path:circle(50% at 50% 50%);width:50px}.blog-list .blog-listing .author .avatar-image img{left:50%;position:relative;top:50%;transform:translate(-50%,-50%)}.blog-list .blog-listing .author .avatar-image .default-user-image{width:50px}.blog-list .blog-listing .author .author-name p.name{color:#000;font:14px/1 Roboto,sans-serif;margin:0;transition:all .5s}.blog-list .blog-listing .author .author-name p.name:hover{color:#0045c7}.blog-list .blog-listing .author .author-name p.name i{color:#000}.blog-list .blog-listing .author .author-name ul li{display:inline-block;padding-right:10px;vertical-align:middle}.blog-list .blog-listing .author .author-name ul li a{color:#b3b3b3;font:12px/1 Roboto,sans-serif}.blog-list .blog-listing .author .share-post{flex-grow:3;position:relative;text-align:right}.blog-list .blog-listing .author .share-post i{color:var(--first)}.blog-list .blog-listing .author .share-post .dropdown-menu{border:0 0;box-shadow:0 3px 8px #0003;left:auto!important;right:12px;top:26px!important;transform:translate(0)!important}.blog-list .blog-listing .blog-view{border-top:1px solid rgb(238,238,238)}.blog-list .blog-listing .blog-view ul li{color:#b3b3b3;font:12px/1 Roboto,sans-serif;padding-right:14px}.blog-list .blog-listing .blog-view ul li a{color:inherit;font:inherit;transition:all .5s}.blog-list .blog-listing .blog-view ul li a:hover{color:#0045c7}.blog-list .blog-listing .blog-view ul li:last-child{flex-grow:3;padding-right:0;text-align:right}.blog-list .blog-listing .blog-view ul li:last-child i{color:#e84a43;font-size:14px}@media only screen and (width <= 1024px){.cust-mt{padding:14px 5px}.cust-mt .blog-list .blog-listing h4{font:20px/1.3 Roboto,sans-serif}.cust-mt .blog-list .blog-listing p.body{font:.9rem/1.3 Roboto,sans-serif}.cust-mt .blog-list .blog-listing p.body p{font:inherit}.cust-mt .blog-list .blog-listing .blog-image{height:300px}}@media only screen and (width <= 767px){.blog-list .blog-listing{height:auto;max-height:none;overflow:visible}.blog-list .blog-listing .blog-view{padding-bottom:1rem}}@media (width >= 768px){.blog-view{bottom:0;width:92%}}.post-body-text:hover{color:var(--titles)!important}.resource-card{border:2px dashed #d4d4d4;border-radius:16px;background-color:#fff;transition:box-shadow .3s ease;cursor:pointer;min-height:95px;padding:1.5rem!important}.resource-card:hover{box-shadow:0 0 30px #00000014}.selected{border:4px dashed #d4d4d4;border-color:var(--first)!important}.resource-icon{font-size:2.5rem;color:var(--first)}.resource-text{font-size:1.4rem;font-weight:500;color:var(--text-color);line-height:2rem}.three-dots-wrapper{width:32px;height:32px;display:flex;margin-top:.25rem!important;justify-content:center;cursor:pointer;position:relative;z-index:2}\n"] }]
|
|
2120
|
+
args: [{ selector: 'pw-resource-tags', template: "<section class=\"tag-section py-5 bg-white\" *ngIf=\"tags?.length\">\n <div class=\"container\">\n <i *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.SuperAdmin']\"\n class=\"fa fa-edit in-page-edit-icon cursor-pointer text-black d-flex justify-content-end mb-3\"\n (click)=\"navigateToTagList()\"\n title=\"Edit Tags\"></i>\n <div class=\"row g-4\">\n <div class=\"col-md-3 col-sm-6 mb-4\" *ngFor=\"let tag of tags\">\n <div (click)=\"selectTag(tag)\" (keydown.enter)=\"selectTag(tag)\" class=\"resource-card d-flex align-items-center p-3\" [ngClass]=\"{ 'selected': selectedTag?.name === tag.name }\">\n <i *ngIf=\"tag?.icon_name\" class=\"fa\" [ngClass]=\"tag.icon_name + ' resource-icon me-3'\"></i>\n <span class=\"resource-text\">{{ tag.name }}</span>\n </div>\n </div>\n </div>\n </div>\n</section>\n", styles: [".selected{border:4px dashed #d4d4d4;border-color:var(--first)!important}.tag-section{padding-top:4.5rem!important}\n", ":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}body{background:#fff}.edit-card .in-page-edit-icon{margin-top:1rem!important}.blog-listing{border:1px solid rgb(238,238,238);cursor:pointer;box-shadow:0 4px 12px #00000026}.all-posts{margin:2.5em auto 0;max-width:980px;padding:14px 20px;width:100%}.tag-div{height:100%;display:flex;flex-direction:column;justify-content:space-between}ul.tags{display:inline-flex;font-size:16px;font-weight:400}ul.tags li{color:#337ab7;cursor:pointer;font-weight:600;margin-right:20px}ul.tags li:hover{color:#000}.search{position:relative}.search input{border:0;border-bottom:1px solid rgb(213,206,206)}.search i{position:absolute;right:5px}.scroll-container{max-height:70vh;overflow-y:auto}.blog-list .blog-listing h4{color:#000;font:28px/1.3 Roboto,sans-serif;transition:all .5s}.blog-list .blog-listing h4:hover{color:#0045c7}.blog-list .blog-listing p.body{color:#b3b3b3;font:16px/1.4 Roboto,sans-serif;transition:all .5s;min-height:120px!important;word-break:break-word;overflow-wrap:break-word;white-space:normal}.blog-list .blog-listing p.body:hover{color:#0045c7}.blog-list .blog-listing p.body p{color:inherit;font:inherit;transition:inherit}.blog-list .blog-listing p.body p:hover{color:#0045c7}.blog-list .blog-listing .list-blog-image img{padding:7px 25px 25px}.blog-list .blog-listing .author{padding-top:1.5rem}.blog-list .blog-listing .author .avatar-image{border:1px solid rgb(0,0,0);border-radius:50px;height:50px;clip-path:circle(50% at 50% 50%);width:50px}.blog-list .blog-listing .author .avatar-image img{left:50%;position:relative;top:50%;transform:translate(-50%,-50%)}.blog-list .blog-listing .author .avatar-image .default-user-image{width:50px}.blog-list .blog-listing .author .author-name p.name{color:#000;font:14px/1 Roboto,sans-serif;margin:0;transition:all .5s}.blog-list .blog-listing .author .author-name p.name:hover{color:#0045c7}.blog-list .blog-listing .author .author-name p.name i{color:#000}.blog-list .blog-listing .author .author-name ul li{display:inline-block;padding-right:10px;vertical-align:middle}.blog-list .blog-listing .author .author-name ul li a{color:#b3b3b3;font:12px/1 Roboto,sans-serif}.blog-list .blog-listing .author .share-post{flex-grow:3;position:relative;text-align:right}.blog-list .blog-listing .author .share-post i{color:var(--first)}.blog-list .blog-listing .author .share-post .dropdown-menu{border:0 0;box-shadow:0 3px 8px #0003;left:auto!important;right:12px;top:26px!important;transform:translate(0)!important}.blog-list .blog-listing .blog-view{border-top:1px solid rgb(238,238,238)}.blog-list .blog-listing .blog-view ul li{color:#b3b3b3;font:12px/1 Roboto,sans-serif;padding-right:14px}.blog-list .blog-listing .blog-view ul li a{color:inherit;font:inherit;transition:all .5s}.blog-list .blog-listing .blog-view ul li a:hover{color:#0045c7}.blog-list .blog-listing .blog-view ul li:last-child{flex-grow:3;padding-right:0;text-align:right}.blog-list .blog-listing .blog-view ul li:last-child i{color:#e84a43;font-size:14px}@media only screen and (width <= 1024px){.cust-mt{padding:14px 5px}.cust-mt .blog-list .blog-listing h4{font:20px/1.3 Roboto,sans-serif}.cust-mt .blog-list .blog-listing p.body{font:.9rem/1.3 Roboto,sans-serif}.cust-mt .blog-list .blog-listing p.body p{font:inherit}.cust-mt .blog-list .blog-listing .blog-image{height:300px}}@media only screen and (width <= 767px){.blog-list .blog-listing{height:auto;max-height:none;overflow:visible}.blog-list .blog-listing .blog-view{padding-bottom:1rem}}@media (width >= 768px){.blog-view{bottom:0;width:92%}}.post-body-text:hover{color:var(--titles)!important}.resource-card{border:2px dashed #d4d4d4;border-radius:16px;background-color:#fff;transition:box-shadow .3s ease;cursor:pointer;min-height:95px;padding:1.5rem!important}.resource-card:hover{box-shadow:0 0 30px #00000014}.selected{border:4px dashed #d4d4d4;border-color:var(--first)!important}.resource-icon{font-size:2.5rem;color:var(--first)}.resource-text{font-size:1.4rem;font-weight:500;color:var(--text-color);line-height:2rem}.three-dots-wrapper{width:32px;height:32px;display:flex;margin-top:.25rem!important;justify-content:center;cursor:pointer;position:relative;z-index:2}.expand-tags{font-size:1.2rem}\n"] }]
|
|
2106
2121
|
}], ctorParameters: () => [{ type: i2.TagService }, { type: i0.Injector }], propDecorators: { tagsLoaded: [{
|
|
2107
2122
|
type: Output
|
|
2108
2123
|
}], tagSelected: [{
|
|
@@ -2181,11 +2196,11 @@ class VaultSectionComponent extends AppBaseComponent {
|
|
|
2181
2196
|
this.file = null;
|
|
2182
2197
|
}
|
|
2183
2198
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: VaultSectionComponent, deps: [{ token: i0.Injector }, { token: i2$1.NgbModal }, { token: i5$2.AdminService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2184
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: VaultSectionComponent, selector: "pw-vault-section", viewQueries: [{ propertyName: "editResourceModalRef", first: true, predicate: ["editResourceModal"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"vault-section\">\n <div class=\"skewed-bg\"></div>\n\n <!-- Edit Icon (top-right) -->\n\n <div class=\"container\">\n <div class=\"row align-items-center vault-row\">\n <!-- Left Content -->\n <div class=\"col-lg-6 col-12 text-content\">\n <div class=\"d-flex\">\n <h2 class=\"headline\">{{resourceTagLine || 'UPDATE ME ON ADMIN/DOMAINS MODULE'}}</h2>\n <i\n *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n class=\"fa fa-edit tag-edit-icon in-page-edit-icon mt-4 ms-3 cursor-pointer\"\n title=\"Edit Resource\"\n (click)=\"openEditResourceModal()\"\n ></i>\n </div>\n <div class=\"description-content\">\n <p class=\"description\" [innerHTML]=\"resourceDescription || 'UPDATE ME ON ADMIN/DOMAINS MODULE.'\">\n </p>\n </div>\n </div>\n\n <!-- Right Content -->\n <div class=\"col-lg-6 col-12 img-wrapper\">\n <ng-container *ngIf=\"resourceImage; else noVideo\">\n <img [src]=\"resourceImage\" alt=\"Vault Mockup\" class=\"img-fluid\" />\n </ng-container>\n\n <ng-template #noVideo>\n <pw-no-data [withImage]=\"true\" [message]=\"'ADD ME ON ADMIN/DOMAINS MODULE' | transloco\"></pw-no-data>\n </ng-template>\n </div>\n </div>\n </div>\n</section>\n\n<!-- Edit Modal -->\n<ng-template #editResourceModal let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Edit Resources</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n <div class=\"modal-body\">\n <div class=\"mb-3\">\n <label class=\"form-label\">Tagline</label>\n <input [(ngModel)]=\"editingTagline\" class=\"form-control\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label\">Description</label>\n <textarea [(ngModel)]=\"editingDescription\" rows=\"4\" class=\"form-control\"></textarea>\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label\">Resource Image</label>\n <div class=\"text-center d-flex flex-column align-items-center\">\n <img\n [src]=\"image || 'assets/img/resource/blog.png'\"\n (click)=\"openImageModal(imageCropContent)\"\n (keydown.enter)=\"openImageModal(imageCropContent)\"\n class=\"image w-100 mb-2\"\n alt=\"Resource Image\"\n (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n\n <div class=\"d-flex justify-content-between align-items-center mt-2\">\n <a class=\"d-inline-block\" (click)=\"openImageModal(imageCropContent)\">\n {{ file || image ? 'Edit' : 'Add' }} Picture\n </a>\n <i *ngIf=\"image\"\n class=\"fa fa-trash delete-icon text-danger ms-2\"\n title=\"Remove Image\"\n (click)=\"removeImage()\"\n (keydown.enter)=\"removeImage()\"
|
|
2199
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: VaultSectionComponent, selector: "pw-vault-section", viewQueries: [{ propertyName: "editResourceModalRef", first: true, predicate: ["editResourceModal"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<section class=\"vault-section\">\n <div class=\"skewed-bg\"></div>\n\n <!-- Edit Icon (top-right) -->\n\n <div class=\"container\">\n <div class=\"row align-items-center vault-row\">\n <!-- Left Content -->\n <div class=\"col-lg-6 col-12 text-content\">\n <div class=\"d-flex\">\n <h2 class=\"headline\">{{resourceTagLine || 'UPDATE ME ON ADMIN/DOMAINS MODULE'}}</h2>\n <i\n *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n class=\"fa fa-edit tag-edit-icon in-page-edit-icon mt-4 ms-3 cursor-pointer\"\n title=\"Edit Resource\"\n (click)=\"openEditResourceModal()\"\n ></i>\n </div>\n <div class=\"description-content\">\n <p class=\"description\" [innerHTML]=\"resourceDescription || 'UPDATE ME ON ADMIN/DOMAINS MODULE.'\">\n </p>\n </div>\n </div>\n\n <!-- Right Content -->\n <div class=\"col-lg-6 col-12 img-wrapper\">\n <ng-container *ngIf=\"resourceImage; else noVideo\">\n <img [src]=\"resourceImage\" alt=\"Vault Mockup\" class=\"img-fluid\" />\n </ng-container>\n\n <ng-template #noVideo>\n <pw-no-data [withImage]=\"true\" [message]=\"'ADD ME ON ADMIN/DOMAINS MODULE' | transloco\"></pw-no-data>\n </ng-template>\n </div>\n </div>\n </div>\n</section>\n\n<!-- Edit Modal -->\n<ng-template #editResourceModal let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Edit Resources</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n <div class=\"modal-body\">\n <div class=\"mb-3\">\n <label class=\"form-label\">Tagline</label>\n <input [(ngModel)]=\"editingTagline\" class=\"form-control\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label\">Description</label>\n <textarea [(ngModel)]=\"editingDescription\" rows=\"4\" class=\"form-control\"></textarea>\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label\">Resource Image</label>\n <div class=\"text-center d-flex flex-column align-items-center\">\n <img\n [src]=\"image || 'assets/img/resource/blog.png'\"\n (click)=\"openImageModal(imageCropContent)\"\n (keydown.enter)=\"openImageModal(imageCropContent)\"\n class=\"image w-100 mb-2\"\n alt=\"Resource Image\"\n (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n\n <div class=\"d-flex justify-content-between align-items-center mt-2\">\n <a class=\"d-inline-block\" (click)=\"openImageModal(imageCropContent)\">\n {{ file || image ? 'Edit' : 'Add' }} Picture\n </a>\n <i *ngIf=\"image\"\n class=\"fa fa-trash delete-icon text-danger ms-2 cursor-pointer\"\n title=\"Remove Image\"\n (click)=\"removeImage()\"\n (keydown.enter)=\"removeImage()\"></i>\n </div>\n </div>\n </div>\n\n </div>\n <div class=\"modal-footer\">\n <button class=\"btn btn-primary\" (click)=\"saveResourceContent(modal)\">Save</button>\n <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n </div>\n</ng-template>\n\n\n\n<ng-template #imageCropContent let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Picture</h5>\n <button type=\"button\" class=\"btn-close\" (click)=\"modal.dismiss()\"></button>\n </div>\n <div class=\"modal-body\">\n <small>You can upload a JPG, GIF, or PNG file.</small>\n <pw-image-cropper\n [aspectRatio]=\"'dynamic'\"\n (imageSelectionEvent)=\"onImageSelected($event)\"\n (closeEvent)=\"modal.close()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n", styles: [".vault-section{position:relative;padding:5rem 0;color:#fff;background:linear-gradient(90deg,var(--first) 0%,#a8e1fb 100%);overflow:hidden}.vault-section:after{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:61%;background:#fff;clip-path:polygon(0 18%,100% 0%,100% 100%,0% 100%);z-index:1}.vault-section .container{position:relative;z-index:2}.vault-section .row{min-height:600px;align-items:center}.vault-section .text-content{max-width:550px;height:100%;display:flex;flex-direction:column;justify-content:center}.vault-section .text-content .headline{font-weight:500;color:#fff!important;font-size:4.5rem!important}.vault-section .text-content .description{font-size:2rem;line-height:3rem;font-weight:400;color:var(--text-color, black);margin-bottom:1rem}.vault-section .text-content .description strong{font-weight:700}.vault-section .text-content .cta-btn{display:inline-block;background:var(--text-color, black);color:#fff;padding:1rem 2rem;border-radius:40px;font-weight:500;text-decoration:none;font-size:1.4rem;border:1px solid;box-shadow:none!important;border-color:var(--text-color, textColor)}.vault-section .text-content .cta-btn:hover{background-color:#fff!important;color:var(--text-color, black)!important}.vault-section .img-wrapper{text-align:center}.vault-section .img-wrapper img,.vault-section .img-wrapper pw-no-data{max-width:800px;max-height:800px;height:auto}@media (width >= 991px){.vault-section img,.vault-section pw-no-data{max-width:800px;width:100%;height:auto;position:relative;top:11.6rem}.vault-section .description-content{max-width:500px;position:absolute;margin-top:31rem!important}.vault-section .headline{margin-bottom:21rem!important}}@media (width >= 1100px){.vault-section img,.vault-section pw-no-data{left:25%}}@media (width >= 991px) and (width <= 1100px){.vault-section img,.vault-section pw-no-data{top:12.9rem!important;left:19%}}@media (width <= 991px){.vault-section .vault-row{text-align:center;justify-content:center}.vault-section img,.vault-section pw-no-data{top:5rem!important;position:relative}}@media (width <= 768px){.vault-section .text-content{text-align:center;margin-bottom:2rem;margin-top:3rem!important}.vault-section .text-content .headline{font-size:3rem!important}.vault-section .text-content .description{font-size:1.5rem;line-height:2rem}}.tag-edit-icon{margin-top:2rem!important}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i5.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i8.LazyImgDirective, selector: "img" }, { kind: "pipe", type: i10$1.TranslocoPipe, name: "transloco" }] }); }
|
|
2185
2200
|
}
|
|
2186
2201
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: VaultSectionComponent, decorators: [{
|
|
2187
2202
|
type: Component,
|
|
2188
|
-
args: [{ selector: 'pw-vault-section', template: "<section class=\"vault-section\">\n <div class=\"skewed-bg\"></div>\n\n <!-- Edit Icon (top-right) -->\n\n <div class=\"container\">\n <div class=\"row align-items-center vault-row\">\n <!-- Left Content -->\n <div class=\"col-lg-6 col-12 text-content\">\n <div class=\"d-flex\">\n <h2 class=\"headline\">{{resourceTagLine || 'UPDATE ME ON ADMIN/DOMAINS MODULE'}}</h2>\n <i\n *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n class=\"fa fa-edit tag-edit-icon in-page-edit-icon mt-4 ms-3 cursor-pointer\"\n title=\"Edit Resource\"\n (click)=\"openEditResourceModal()\"\n ></i>\n </div>\n <div class=\"description-content\">\n <p class=\"description\" [innerHTML]=\"resourceDescription || 'UPDATE ME ON ADMIN/DOMAINS MODULE.'\">\n </p>\n </div>\n </div>\n\n <!-- Right Content -->\n <div class=\"col-lg-6 col-12 img-wrapper\">\n <ng-container *ngIf=\"resourceImage; else noVideo\">\n <img [src]=\"resourceImage\" alt=\"Vault Mockup\" class=\"img-fluid\" />\n </ng-container>\n\n <ng-template #noVideo>\n <pw-no-data [withImage]=\"true\" [message]=\"'ADD ME ON ADMIN/DOMAINS MODULE' | transloco\"></pw-no-data>\n </ng-template>\n </div>\n </div>\n </div>\n</section>\n\n<!-- Edit Modal -->\n<ng-template #editResourceModal let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Edit Resources</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n <div class=\"modal-body\">\n <div class=\"mb-3\">\n <label class=\"form-label\">Tagline</label>\n <input [(ngModel)]=\"editingTagline\" class=\"form-control\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label\">Description</label>\n <textarea [(ngModel)]=\"editingDescription\" rows=\"4\" class=\"form-control\"></textarea>\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label\">Resource Image</label>\n <div class=\"text-center d-flex flex-column align-items-center\">\n <img\n [src]=\"image || 'assets/img/resource/blog.png'\"\n (click)=\"openImageModal(imageCropContent)\"\n (keydown.enter)=\"openImageModal(imageCropContent)\"\n class=\"image w-100 mb-2\"\n alt=\"Resource Image\"\n (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n\n <div class=\"d-flex justify-content-between align-items-center mt-2\">\n <a class=\"d-inline-block\" (click)=\"openImageModal(imageCropContent)\">\n {{ file || image ? 'Edit' : 'Add' }} Picture\n </a>\n <i *ngIf=\"image\"\n class=\"fa fa-trash delete-icon text-danger ms-2\"\n title=\"Remove Image\"\n (click)=\"removeImage()\"\n (keydown.enter)=\"removeImage()\"
|
|
2203
|
+
args: [{ selector: 'pw-vault-section', template: "<section class=\"vault-section\">\n <div class=\"skewed-bg\"></div>\n\n <!-- Edit Icon (top-right) -->\n\n <div class=\"container\">\n <div class=\"row align-items-center vault-row\">\n <!-- Left Content -->\n <div class=\"col-lg-6 col-12 text-content\">\n <div class=\"d-flex\">\n <h2 class=\"headline\">{{resourceTagLine || 'UPDATE ME ON ADMIN/DOMAINS MODULE'}}</h2>\n <i\n *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n class=\"fa fa-edit tag-edit-icon in-page-edit-icon mt-4 ms-3 cursor-pointer\"\n title=\"Edit Resource\"\n (click)=\"openEditResourceModal()\"\n ></i>\n </div>\n <div class=\"description-content\">\n <p class=\"description\" [innerHTML]=\"resourceDescription || 'UPDATE ME ON ADMIN/DOMAINS MODULE.'\">\n </p>\n </div>\n </div>\n\n <!-- Right Content -->\n <div class=\"col-lg-6 col-12 img-wrapper\">\n <ng-container *ngIf=\"resourceImage; else noVideo\">\n <img [src]=\"resourceImage\" alt=\"Vault Mockup\" class=\"img-fluid\" />\n </ng-container>\n\n <ng-template #noVideo>\n <pw-no-data [withImage]=\"true\" [message]=\"'ADD ME ON ADMIN/DOMAINS MODULE' | transloco\"></pw-no-data>\n </ng-template>\n </div>\n </div>\n </div>\n</section>\n\n<!-- Edit Modal -->\n<ng-template #editResourceModal let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Edit Resources</h5>\n <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n </div>\n <div class=\"modal-body\">\n <div class=\"mb-3\">\n <label class=\"form-label\">Tagline</label>\n <input [(ngModel)]=\"editingTagline\" class=\"form-control\" />\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label\">Description</label>\n <textarea [(ngModel)]=\"editingDescription\" rows=\"4\" class=\"form-control\"></textarea>\n </div>\n <div class=\"mb-3\">\n <label class=\"form-label\">Resource Image</label>\n <div class=\"text-center d-flex flex-column align-items-center\">\n <img\n [src]=\"image || 'assets/img/resource/blog.png'\"\n (click)=\"openImageModal(imageCropContent)\"\n (keydown.enter)=\"openImageModal(imageCropContent)\"\n class=\"image w-100 mb-2\"\n alt=\"Resource Image\"\n (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n\n <div class=\"d-flex justify-content-between align-items-center mt-2\">\n <a class=\"d-inline-block\" (click)=\"openImageModal(imageCropContent)\">\n {{ file || image ? 'Edit' : 'Add' }} Picture\n </a>\n <i *ngIf=\"image\"\n class=\"fa fa-trash delete-icon text-danger ms-2 cursor-pointer\"\n title=\"Remove Image\"\n (click)=\"removeImage()\"\n (keydown.enter)=\"removeImage()\"></i>\n </div>\n </div>\n </div>\n\n </div>\n <div class=\"modal-footer\">\n <button class=\"btn btn-primary\" (click)=\"saveResourceContent(modal)\">Save</button>\n <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n </div>\n</ng-template>\n\n\n\n<ng-template #imageCropContent let-modal>\n <div class=\"modal-header\">\n <h5 class=\"modal-title\">Upload Picture</h5>\n <button type=\"button\" class=\"btn-close\" (click)=\"modal.dismiss()\"></button>\n </div>\n <div class=\"modal-body\">\n <small>You can upload a JPG, GIF, or PNG file.</small>\n <pw-image-cropper\n [aspectRatio]=\"'dynamic'\"\n (imageSelectionEvent)=\"onImageSelected($event)\"\n (closeEvent)=\"modal.close()\">\n </pw-image-cropper>\n </div>\n</ng-template>\n", styles: [".vault-section{position:relative;padding:5rem 0;color:#fff;background:linear-gradient(90deg,var(--first) 0%,#a8e1fb 100%);overflow:hidden}.vault-section:after{content:\"\";position:absolute;bottom:0;left:0;width:100%;height:61%;background:#fff;clip-path:polygon(0 18%,100% 0%,100% 100%,0% 100%);z-index:1}.vault-section .container{position:relative;z-index:2}.vault-section .row{min-height:600px;align-items:center}.vault-section .text-content{max-width:550px;height:100%;display:flex;flex-direction:column;justify-content:center}.vault-section .text-content .headline{font-weight:500;color:#fff!important;font-size:4.5rem!important}.vault-section .text-content .description{font-size:2rem;line-height:3rem;font-weight:400;color:var(--text-color, black);margin-bottom:1rem}.vault-section .text-content .description strong{font-weight:700}.vault-section .text-content .cta-btn{display:inline-block;background:var(--text-color, black);color:#fff;padding:1rem 2rem;border-radius:40px;font-weight:500;text-decoration:none;font-size:1.4rem;border:1px solid;box-shadow:none!important;border-color:var(--text-color, textColor)}.vault-section .text-content .cta-btn:hover{background-color:#fff!important;color:var(--text-color, black)!important}.vault-section .img-wrapper{text-align:center}.vault-section .img-wrapper img,.vault-section .img-wrapper pw-no-data{max-width:800px;max-height:800px;height:auto}@media (width >= 991px){.vault-section img,.vault-section pw-no-data{max-width:800px;width:100%;height:auto;position:relative;top:11.6rem}.vault-section .description-content{max-width:500px;position:absolute;margin-top:31rem!important}.vault-section .headline{margin-bottom:21rem!important}}@media (width >= 1100px){.vault-section img,.vault-section pw-no-data{left:25%}}@media (width >= 991px) and (width <= 1100px){.vault-section img,.vault-section pw-no-data{top:12.9rem!important;left:19%}}@media (width <= 991px){.vault-section .vault-row{text-align:center;justify-content:center}.vault-section img,.vault-section pw-no-data{top:5rem!important;position:relative}}@media (width <= 768px){.vault-section .text-content{text-align:center;margin-bottom:2rem;margin-top:3rem!important}.vault-section .text-content .headline{font-size:3rem!important}.vault-section .text-content .description{font-size:1.5rem;line-height:2rem}}.tag-edit-icon{margin-top:2rem!important}\n"] }]
|
|
2189
2204
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: i2$1.NgbModal }, { type: i5$2.AdminService }], propDecorators: { editResourceModalRef: [{
|
|
2190
2205
|
type: ViewChild,
|
|
2191
2206
|
args: ['editResourceModal']
|
|
@@ -2276,10 +2291,10 @@ class ResourceHubComponent extends AppBaseComponent {
|
|
|
2276
2291
|
const data = res ? JSON.parse(res) : null;
|
|
2277
2292
|
this.subscriptionId = data?.subscriptionId;
|
|
2278
2293
|
});
|
|
2294
|
+
this.userSub = this.userService.getUserInfo().subscribe(data => {
|
|
2295
|
+
this.user = data;
|
|
2296
|
+
});
|
|
2279
2297
|
}
|
|
2280
|
-
this.userService.getUserInfo().subscribe(data => {
|
|
2281
|
-
this.user = data;
|
|
2282
|
-
});
|
|
2283
2298
|
});
|
|
2284
2299
|
this.masterSubscriptionId = this.appConfig.master_subscription.subscription_id;
|
|
2285
2300
|
this.getPostsAndTags();
|
|
@@ -2393,14 +2408,15 @@ class ResourceHubComponent extends AppBaseComponent {
|
|
|
2393
2408
|
return '';
|
|
2394
2409
|
}
|
|
2395
2410
|
ngOnDestroy() {
|
|
2411
|
+
this.userSub?.unsubscribe();
|
|
2396
2412
|
super.ngOnDestroy();
|
|
2397
2413
|
}
|
|
2398
2414
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceHubComponent, deps: [{ token: ResourceService }, { token: i2.TagService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2399
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourceHubComponent, selector: "pw-posts-list", host: { listeners: { "window:scroll": "onWindowScroll()" } }, usesInheritance: true, ngImport: i0, template: "<pw-resource-header></pw-resource-header>\n<div class=\"all-posts py-5\">\n\n <div class=\"row mt-1 mb-4 px-2\">\n <div class=\"col-md-8\">\n </div>\n <div class=\"col-md-4\">\n <div class=\"text-end mt-0 mt-sm-3 d-flex\">\n <i *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.SuperAdmin']\"\n class=\"fa fa-edit in-page-edit-icon cursor-pointer mt-2 me-3\"\n (click)=\"navigateToTagList()\"\n title=\"Edit Logo\"></i>\n <div class=\"search-wrapper position-relative\">\n <i class=\"fa fa-search search-icon\"></i>\n <input type=\"text\" [(ngModel)]=\"searchTextItems\" pInputText size=\"50\" placeholder=\"Search resources...\"\n (input)=\"onSearch(1)\"\n class=\"search-input top-search-input\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"row resource-row\">\n <!-- All Resources Card -->\n <div class=\"col-md-3 col-sm-6 mb-4\">\n <div class=\"resource-card d-flex align-items-center p-3\"\n (keydown.enter)=\"getPosts(1, 20, true)\"\n [ngClass]=\"{ 'selected': selectedTags.length === 0 }\"\n (click)=\"getPosts(1, 20, true)\">\n <i class=\"fa fa-layer-group resource-icon me-3\"></i>\n <span class=\"resource-text\">All Resources</span>\n </div>\n </div>\n\n <!-- Dynamic Tags -->\n <div class=\"col-md-3 col-sm-6 mb-4\"\n *ngFor=\"let tag of tags\">\n <div\n class=\"resource-card d-flex align-items-center p-3\"\n (keydown.enter)=\"tagPost(tag)\"\n [ngClass]=\"{ 'selected': isSelected(tag.id) }\"\n (click)=\"tagPost(tag)\">\n <i *ngIf=\"tag?.icon_name\" class=\"fa\" [ngClass]=\"tag.icon_name + ' resource-icon me-3'\"></i>\n <span class=\"resource-text\">{{ tag.name }}</span>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"loading && !loaded\">\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n </ng-container>\n <ng-container *ngIf=\"posts?.length && !loading\">\n <div>\n <div class=\"blog-list\">\n <div class=\"row mt-4 mb-5 ms-1 me-1 blog-listing\"\n *ngFor=\"let post of data\">\n <div class=\"col-md-6 col-sm-12 col-xs-12 my-auto\">\n <pw-resource-edit-card\n *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n [id]=\"post?.id\"\n [resourceData]=\"post\"\n (updated)=\"getPosts(1, pageSize)\">\n </pw-resource-edit-card>\n <div class=\"list-blog-image\" [routerLink]=\"['/resources/view', post.slug]\">\n <img [src]=\"post.picture?.url\"\n alt=\"Post List\"\n class=\"img-fluid\" />\n </div>\n </div>\n <div class=\"col-md-6 col-sm-12 col-xs-12 px-4 position-relative\">\n <div class=\"tag-div\">\n <div class=\"author d-flex\">\n <div class=\"avatar-image\">\n <a [attr.disabled]=\"!userLoggedIn\"\n [routerLink]=\"['/members', post?.author?.slug]\">\n <img *ngIf=\"post.author?.avatar\"\n [src]=\"post.author?.avatar[0]?.url\"\n alt=\"Author\" />\n <img *ngIf=\"!post.author?.avatar\"\n src=\"/assets/img/icons/male.png\"\n alt=\"Author\"\n class=\"default-user-image\" />\n </a>\n </div>\n\n <div class=\"author-name ps-2\">\n <a [attr.disabled]=\"!userLoggedIn\"\n [routerLink]=\"['/members', post?.author?.slug]\"\n class=\"name\">\n {{ post.author.first_name }}\n <i class=\"fas fa-crown\" aria-hidden=\"true\"></i></a>\n <ul>\n <li>\n <a href=\"javascript:void(0);\">\n {{ post.published_at | date: 'dd/MM/yyyy' }}\n </a>\n </li>\n <li>.</li>\n <li>\n <a href=\"javascript:void(0);\">{{ thisPostReadingTime(post.body) }}\n </a>\n </li>\n </ul>\n </div>\n <div class=\"share-post\">\n <div class=\"dropdown position-relative d-flex justify-content-end\" (clickOutside)=\"post.showDropdown = false\">\n <div class=\"three-dots-wrapper\" (keydown.enter)=\"toggleDropdown($event, post)\" (click)=\"toggleDropdown($event, post)\">\n <i class=\"fas fa-ellipsis-v\"></i>\n </div>\n\n <div class=\"dropdown-menu show\"\n *ngIf=\"post.showDropdown\">\n <a class=\"dropdown-item\"\n href=\"http://www.facebook.com/\"\n rel=\"noopener noreferrer\"\n target=\"_blank\">\n <i class=\"fas fa-share\"></i> Share Post\n </a>\n </div>\n </div>\n\n </div>\n </div>\n <h4 [routerLink]=\"['/resources/view', post.slug]\"\n class=\"title my-3\">{{ post.title }}</h4>\n <p [routerLink]=\"['/resources/view', post.slug]\"\n class=\"body mb-3 pb-3 post-body-text\">\n {{ post.body | removeHtml: 'quill' | textTruncate: 200 }}\n </p>\n <div class=\"d-flex flex-wrap align-items-center gap-2 mt-auto mb-3\">\n <ng-container *ngIf=\"post?.tags?.length\">\n <ng-container *ngFor=\"let tag of post?.tags?.slice(0, 4)\">\n <span class=\"badge m-1\"\n [appDynamicBadge]=\"{ itemsArray: post?.tags, item: tag }\"\n [colorByName]=\"true\"\n [dataName]=\"tag.name\"\n color=\"blue-grey\">\n {{ tag.name }}\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"post.expandedTags\">\n <ng-container *ngFor=\"let tag of post?.tags?.slice(4)\">\n <span class=\"badge m-1\"\n [appDynamicBadge]=\"{ itemsArray: post?.tags, item: tag }\"\n [colorByName]=\"true\"\n [dataName]=\"tag.name\"\n color=\"blue-grey\">\n {{ tag.name }}\n </span>\n </ng-container>\n </ng-container>\n\n <span *ngIf=\"post?.tags?.length > 4\"\n (click)=\"post.expandedTags = !post.expandedTags\"\n (keydown.enter)=\"post.expandedTags = !post.expandedTags\"\n class=\"fw-bold cursor-pointer m-1\"\n style=\"font-size: 1.2rem;\">...</span>\n </ng-container>\n </div>\n\n\n <div class=\"blog-view py-3 blog-list-write-view\">\n <ul class=\"d-flex\">\n <li>{{ post.view !== null ? post.view : '0' }} View</li>\n <li><a [routerLink]=\"['/resources/view', post.slug]\">Write Comment</a></li>\n <li>\n <a [routerLink]=\"['/resources/view', post.slug]\" aria-label=\"Blog\"><i class=\"far fa-heart\" aria-hidden=\"true\"></i></a>\n </li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!posts?.length && loaded\">\n <pw-no-data [withImage]=\"true\" message=\"We couldn't find any resources.\" > </pw-no-data>\n </ng-container>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}body{background:#fff}.edit-card .in-page-edit-icon{margin-top:1rem!important}.blog-listing{border:1px solid rgb(238,238,238);cursor:pointer;box-shadow:0 4px 12px #00000026}.all-posts{margin:2.5em auto 0;max-width:980px;padding:14px 20px;width:100%}.tag-div{height:100%;display:flex;flex-direction:column;justify-content:space-between}ul.tags{display:inline-flex;font-size:16px;font-weight:400}ul.tags li{color:#337ab7;cursor:pointer;font-weight:600;margin-right:20px}ul.tags li:hover{color:#000}.search{position:relative}.search input{border:0;border-bottom:1px solid rgb(213,206,206)}.search i{position:absolute;right:5px}.scroll-container{max-height:70vh;overflow-y:auto}.blog-list .blog-listing h4{color:#000;font:28px/1.3 Roboto,sans-serif;transition:all .5s}.blog-list .blog-listing h4:hover{color:#0045c7}.blog-list .blog-listing p.body{color:#b3b3b3;font:16px/1.4 Roboto,sans-serif;transition:all .5s;min-height:120px!important;word-break:break-word;overflow-wrap:break-word;white-space:normal}.blog-list .blog-listing p.body:hover{color:#0045c7}.blog-list .blog-listing p.body p{color:inherit;font:inherit;transition:inherit}.blog-list .blog-listing p.body p:hover{color:#0045c7}.blog-list .blog-listing .list-blog-image img{padding:7px 25px 25px}.blog-list .blog-listing .author{padding-top:1.5rem}.blog-list .blog-listing .author .avatar-image{border:1px solid rgb(0,0,0);border-radius:50px;height:50px;clip-path:circle(50% at 50% 50%);width:50px}.blog-list .blog-listing .author .avatar-image img{left:50%;position:relative;top:50%;transform:translate(-50%,-50%)}.blog-list .blog-listing .author .avatar-image .default-user-image{width:50px}.blog-list .blog-listing .author .author-name p.name{color:#000;font:14px/1 Roboto,sans-serif;margin:0;transition:all .5s}.blog-list .blog-listing .author .author-name p.name:hover{color:#0045c7}.blog-list .blog-listing .author .author-name p.name i{color:#000}.blog-list .blog-listing .author .author-name ul li{display:inline-block;padding-right:10px;vertical-align:middle}.blog-list .blog-listing .author .author-name ul li a{color:#b3b3b3;font:12px/1 Roboto,sans-serif}.blog-list .blog-listing .author .share-post{flex-grow:3;position:relative;text-align:right}.blog-list .blog-listing .author .share-post i{color:var(--first)}.blog-list .blog-listing .author .share-post .dropdown-menu{border:0 0;box-shadow:0 3px 8px #0003;left:auto!important;right:12px;top:26px!important;transform:translate(0)!important}.blog-list .blog-listing .blog-view{border-top:1px solid rgb(238,238,238)}.blog-list .blog-listing .blog-view ul li{color:#b3b3b3;font:12px/1 Roboto,sans-serif;padding-right:14px}.blog-list .blog-listing .blog-view ul li a{color:inherit;font:inherit;transition:all .5s}.blog-list .blog-listing .blog-view ul li a:hover{color:#0045c7}.blog-list .blog-listing .blog-view ul li:last-child{flex-grow:3;padding-right:0;text-align:right}.blog-list .blog-listing .blog-view ul li:last-child i{color:#e84a43;font-size:14px}@media only screen and (width <= 1024px){.cust-mt{padding:14px 5px}.cust-mt .blog-list .blog-listing h4{font:20px/1.3 Roboto,sans-serif}.cust-mt .blog-list .blog-listing p.body{font:.9rem/1.3 Roboto,sans-serif}.cust-mt .blog-list .blog-listing p.body p{font:inherit}.cust-mt .blog-list .blog-listing .blog-image{height:300px}}@media only screen and (width <= 767px){.blog-list .blog-listing{height:auto;max-height:none;overflow:visible}.blog-list .blog-listing .blog-view{padding-bottom:1rem}}@media (width >= 768px){.blog-view{bottom:0;width:92%}}.post-body-text:hover{color:var(--titles)!important}.resource-card{border:2px dashed #d4d4d4;border-radius:16px;background-color:#fff;transition:box-shadow .3s ease;cursor:pointer;min-height:95px;padding:1.5rem!important}.resource-card:hover{box-shadow:0 0 30px #00000014}.selected{border:4px dashed #d4d4d4;border-color:var(--first)!important}.resource-icon{font-size:2.5rem;color:var(--first)}.resource-text{font-size:1.4rem;font-weight:500;color:var(--text-color);line-height:2rem}.three-dots-wrapper{width:32px;height:32px;display:flex;margin-top:.25rem!important;justify-content:center;cursor:pointer;position:relative;z-index:2}\n", ".top-search-input{color:#000!important;border:3px solid #d4d4d4!important;padding:5px 30px!important;border-radius:29px!important}::placeholder{color:#d4d4d4}.vendors-distributor-wrapper{margin-top:5rem!important}.vendor-icon{max-width:180px;max-height:100%;width:100%!important}.vendor-name{font-size:3rem;line-height:3rem;color:var(--text-color, black)}::ng-deep .customPaginator .p-paginator{border:none!important}::ng-deep .customPaginator .p-paginator button{border:none!important}.int-span{text-transform:uppercase;font-size:2.5rem;color:var(--first)}.boxes{width:100%;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;padding:15px;border:1px dashed #ccc;border-radius:8px;word-break:break-word;white-space:normal;height:100%}a.vendor-link{display:inline-block;transition:transform .2s ease}a.vendor-link:hover{transform:scale(1.05);cursor:pointer}.search-wrapper{position:relative;width:300px}.search-input{width:100%;padding:10px 20px 10px 40px;border:2px solid #d4d4d4;border-radius:30px;font-size:1rem;color:#000;background-color:#fff}.search-input::placeholder{color:silver}.search-input:focus{outline:none;border-color:var(--first)}.search-icon{position:absolute;top:50%;left:14px;transform:translateY(-50%);color:#d4d4d4;font-size:1.1rem}@media (width <= 768px){.vendor-icon{width:50!important}.search-container{flex-wrap:wrap!important;gap:2rem}.int-span{font-size:1.75rem}}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.ResourceHeaderComponent, selector: "pw-resource-header" }, { kind: "directive", type: i5$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i5.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i8.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i8.LazyImgDirective, selector: "img" }, { kind: "component", type: ResourceEditCardComponent, selector: "pw-resource-edit-card", inputs: ["id", "resourceData"], outputs: ["updated"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i10$2.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i10$2.TextTruncatePipe, name: "textTruncate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2415
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourceHubComponent, selector: "pw-posts-list", host: { listeners: { "window:scroll": "onWindowScroll()" } }, usesInheritance: true, ngImport: i0, template: "<pw-resource-header></pw-resource-header>\n<div class=\"all-posts py-5\">\n\n <div class=\"row mt-1 mb-4 px-2\">\n <div class=\"col-md-8\">\n </div>\n <div class=\"col-md-4\">\n <div class=\"text-end mt-0 mt-sm-3 d-flex\">\n <i *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.SuperAdmin']\"\n class=\"fa fa-edit in-page-edit-icon cursor-pointer mt-2 me-3\"\n (click)=\"navigateToTagList()\"\n title=\"Edit Logo\"></i>\n <div class=\"search-wrapper position-relative\">\n <i class=\"fa fa-search search-icon\"></i>\n <input type=\"text\" [(ngModel)]=\"searchTextItems\" pInputText size=\"50\" placeholder=\"Search resources...\"\n (input)=\"onSearch(1)\"\n class=\"search-input top-search-input\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"row resource-row\">\n <!-- All Resources Card -->\n <div class=\"col-md-3 col-sm-6 mb-4\">\n <div class=\"resource-card d-flex align-items-center p-3\"\n (keydown.enter)=\"getPosts(1, 20, true)\"\n [ngClass]=\"{ 'selected': selectedTags.length === 0 }\"\n (click)=\"getPosts(1, 20, true)\">\n <i class=\"fa fa-layer-group resource-icon me-3\"></i>\n <span class=\"resource-text\">All Resources</span>\n </div>\n </div>\n\n <!-- Dynamic Tags -->\n <div class=\"col-md-3 col-sm-6 mb-4\"\n *ngFor=\"let tag of tags\">\n <div\n class=\"resource-card d-flex align-items-center p-3\"\n (keydown.enter)=\"tagPost(tag)\"\n [ngClass]=\"{ 'selected': isSelected(tag.id) }\"\n (click)=\"tagPost(tag)\">\n <i *ngIf=\"tag?.icon_name\" class=\"fa\" [ngClass]=\"tag.icon_name + ' resource-icon me-3'\"></i>\n <span class=\"resource-text\">{{ tag.name }}</span>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"loading && !loaded\">\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n </ng-container>\n <ng-container *ngIf=\"posts?.length && !loading\">\n <div>\n <div class=\"blog-list\">\n <div class=\"row mt-4 mb-5 ms-1 me-1 blog-listing\"\n *ngFor=\"let post of data\">\n <div class=\"col-md-6 col-sm-12 col-xs-12 my-auto\">\n <pw-resource-edit-card\n *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n [id]=\"post?.id\"\n [resourceData]=\"post\"\n (updated)=\"getPosts(1, pageSize)\">\n </pw-resource-edit-card>\n <div class=\"list-blog-image\" [routerLink]=\"['/resources/view', post.slug]\">\n <img [src]=\"post.picture?.url\"\n alt=\"Post List\"\n class=\"img-fluid\" />\n </div>\n </div>\n <div class=\"col-md-6 col-sm-12 col-xs-12 px-4 position-relative\">\n <div class=\"tag-div\">\n <div class=\"author d-flex\">\n <div class=\"avatar-image\">\n <a [attr.disabled]=\"!userLoggedIn\"\n [routerLink]=\"['/members', post?.author?.slug]\">\n <img *ngIf=\"post.author?.avatar\"\n [src]=\"post.author?.avatar[0]?.url\"\n alt=\"Author\" />\n <img *ngIf=\"!post.author?.avatar\"\n src=\"/assets/img/icons/male.png\"\n alt=\"Author\"\n class=\"default-user-image\" />\n </a>\n </div>\n\n <div class=\"author-name ps-2\">\n <a [attr.disabled]=\"!userLoggedIn\"\n [routerLink]=\"['/members', post?.author?.slug]\"\n class=\"name\">\n {{ post.author.first_name }}\n <i class=\"fas fa-crown\" aria-hidden=\"true\"></i></a>\n <ul>\n <li>\n <a href=\"javascript:void(0);\">\n {{ post.published_at | date: 'dd/MM/yyyy' }}\n </a>\n </li>\n <li>.</li>\n <li>\n <a href=\"javascript:void(0);\">{{ thisPostReadingTime(post.body) }}\n </a>\n </li>\n </ul>\n </div>\n <div class=\"share-post\">\n <div class=\"dropdown position-relative d-flex justify-content-end\" (clickOutside)=\"post.showDropdown = false\">\n <div class=\"three-dots-wrapper\" (keydown.enter)=\"toggleDropdown($event, post)\" (click)=\"toggleDropdown($event, post)\">\n <i class=\"fas fa-ellipsis-v\"></i>\n </div>\n\n <div class=\"dropdown-menu show\"\n *ngIf=\"post.showDropdown\">\n <a class=\"dropdown-item\"\n href=\"http://www.facebook.com/\"\n rel=\"noopener noreferrer\"\n target=\"_blank\">\n <i class=\"fas fa-share\"></i> Share Post\n </a>\n </div>\n </div>\n\n </div>\n </div>\n <h4 [routerLink]=\"['/resources/view', post.slug]\"\n class=\"title my-3\">{{ post.title }}</h4>\n <p [routerLink]=\"['/resources/view', post.slug]\"\n class=\"body mb-3 pb-3 post-body-text\">\n {{ post.body | removeHtml: 'quill' | textTruncate: 200 }}\n </p>\n <div class=\"d-flex flex-wrap align-items-center gap-2 mt-auto mb-3\">\n <ng-container *ngIf=\"post?.tags?.length\">\n <ng-container *ngFor=\"let tag of post?.tags?.slice(0, 4)\">\n <span class=\"badge m-1\"\n [appDynamicBadge]=\"{ itemsArray: post?.tags, item: tag }\"\n [colorByName]=\"true\"\n [dataName]=\"tag.name\"\n color=\"blue-grey\">\n {{ tag.name }}\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"post.expandedTags\">\n <ng-container *ngFor=\"let tag of post?.tags?.slice(4)\">\n <span class=\"badge m-1\"\n [appDynamicBadge]=\"{ itemsArray: post?.tags, item: tag }\"\n [colorByName]=\"true\"\n [dataName]=\"tag.name\"\n color=\"blue-grey\">\n {{ tag.name }}\n </span>\n </ng-container>\n </ng-container>\n\n <span *ngIf=\"post?.tags?.length > 4\"\n (click)=\"post.expandedTags = !post.expandedTags\"\n (keydown.enter)=\"post.expandedTags = !post.expandedTags\"\n class=\"fw-bold cursor-pointer m-1 expand-tags\">...</span>\n </ng-container>\n </div>\n\n\n <div class=\"blog-view py-3 blog-list-write-view\">\n <ul class=\"d-flex\">\n <li>{{ post.view !== null ? post.view : '0' }} View</li>\n <li><a [routerLink]=\"['/resources/view', post.slug]\">Write Comment</a></li>\n <li>\n <a [routerLink]=\"['/resources/view', post.slug]\" aria-label=\"Blog\"><i class=\"far fa-heart\" aria-hidden=\"true\"></i></a>\n </li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!posts?.length && loaded\">\n <pw-no-data [withImage]=\"true\" message=\"We couldn't find any resources.\" > </pw-no-data>\n </ng-container>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}body{background:#fff}.edit-card .in-page-edit-icon{margin-top:1rem!important}.blog-listing{border:1px solid rgb(238,238,238);cursor:pointer;box-shadow:0 4px 12px #00000026}.all-posts{margin:2.5em auto 0;max-width:980px;padding:14px 20px;width:100%}.tag-div{height:100%;display:flex;flex-direction:column;justify-content:space-between}ul.tags{display:inline-flex;font-size:16px;font-weight:400}ul.tags li{color:#337ab7;cursor:pointer;font-weight:600;margin-right:20px}ul.tags li:hover{color:#000}.search{position:relative}.search input{border:0;border-bottom:1px solid rgb(213,206,206)}.search i{position:absolute;right:5px}.scroll-container{max-height:70vh;overflow-y:auto}.blog-list .blog-listing h4{color:#000;font:28px/1.3 Roboto,sans-serif;transition:all .5s}.blog-list .blog-listing h4:hover{color:#0045c7}.blog-list .blog-listing p.body{color:#b3b3b3;font:16px/1.4 Roboto,sans-serif;transition:all .5s;min-height:120px!important;word-break:break-word;overflow-wrap:break-word;white-space:normal}.blog-list .blog-listing p.body:hover{color:#0045c7}.blog-list .blog-listing p.body p{color:inherit;font:inherit;transition:inherit}.blog-list .blog-listing p.body p:hover{color:#0045c7}.blog-list .blog-listing .list-blog-image img{padding:7px 25px 25px}.blog-list .blog-listing .author{padding-top:1.5rem}.blog-list .blog-listing .author .avatar-image{border:1px solid rgb(0,0,0);border-radius:50px;height:50px;clip-path:circle(50% at 50% 50%);width:50px}.blog-list .blog-listing .author .avatar-image img{left:50%;position:relative;top:50%;transform:translate(-50%,-50%)}.blog-list .blog-listing .author .avatar-image .default-user-image{width:50px}.blog-list .blog-listing .author .author-name p.name{color:#000;font:14px/1 Roboto,sans-serif;margin:0;transition:all .5s}.blog-list .blog-listing .author .author-name p.name:hover{color:#0045c7}.blog-list .blog-listing .author .author-name p.name i{color:#000}.blog-list .blog-listing .author .author-name ul li{display:inline-block;padding-right:10px;vertical-align:middle}.blog-list .blog-listing .author .author-name ul li a{color:#b3b3b3;font:12px/1 Roboto,sans-serif}.blog-list .blog-listing .author .share-post{flex-grow:3;position:relative;text-align:right}.blog-list .blog-listing .author .share-post i{color:var(--first)}.blog-list .blog-listing .author .share-post .dropdown-menu{border:0 0;box-shadow:0 3px 8px #0003;left:auto!important;right:12px;top:26px!important;transform:translate(0)!important}.blog-list .blog-listing .blog-view{border-top:1px solid rgb(238,238,238)}.blog-list .blog-listing .blog-view ul li{color:#b3b3b3;font:12px/1 Roboto,sans-serif;padding-right:14px}.blog-list .blog-listing .blog-view ul li a{color:inherit;font:inherit;transition:all .5s}.blog-list .blog-listing .blog-view ul li a:hover{color:#0045c7}.blog-list .blog-listing .blog-view ul li:last-child{flex-grow:3;padding-right:0;text-align:right}.blog-list .blog-listing .blog-view ul li:last-child i{color:#e84a43;font-size:14px}@media only screen and (width <= 1024px){.cust-mt{padding:14px 5px}.cust-mt .blog-list .blog-listing h4{font:20px/1.3 Roboto,sans-serif}.cust-mt .blog-list .blog-listing p.body{font:.9rem/1.3 Roboto,sans-serif}.cust-mt .blog-list .blog-listing p.body p{font:inherit}.cust-mt .blog-list .blog-listing .blog-image{height:300px}}@media only screen and (width <= 767px){.blog-list .blog-listing{height:auto;max-height:none;overflow:visible}.blog-list .blog-listing .blog-view{padding-bottom:1rem}}@media (width >= 768px){.blog-view{bottom:0;width:92%}}.post-body-text:hover{color:var(--titles)!important}.resource-card{border:2px dashed #d4d4d4;border-radius:16px;background-color:#fff;transition:box-shadow .3s ease;cursor:pointer;min-height:95px;padding:1.5rem!important}.resource-card:hover{box-shadow:0 0 30px #00000014}.selected{border:4px dashed #d4d4d4;border-color:var(--first)!important}.resource-icon{font-size:2.5rem;color:var(--first)}.resource-text{font-size:1.4rem;font-weight:500;color:var(--text-color);line-height:2rem}.three-dots-wrapper{width:32px;height:32px;display:flex;margin-top:.25rem!important;justify-content:center;cursor:pointer;position:relative;z-index:2}.expand-tags{font-size:1.2rem}\n", ".top-search-input{color:#000!important;border:3px solid #d4d4d4!important;padding:5px 30px!important;border-radius:29px!important}::placeholder{color:#d4d4d4}.vendors-distributor-wrapper{margin-top:5rem!important}.vendor-icon{max-width:180px;max-height:100%;width:100%!important}.vendor-name{font-size:3rem;line-height:3rem;color:var(--text-color, black)}::ng-deep .customPaginator .p-paginator{border:none!important}::ng-deep .customPaginator .p-paginator button{border:none!important}.int-span{text-transform:uppercase;font-size:2.5rem;color:var(--first)}.boxes{width:100%;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;padding:15px;border:1px dashed #ccc;border-radius:8px;word-break:break-word;white-space:normal;height:100%}a.vendor-link{display:inline-block;transition:transform .2s ease}a.vendor-link:hover{transform:scale(1.05);cursor:pointer}.search-wrapper{position:relative;width:300px}.search-input{width:100%;padding:10px 20px 10px 40px;border:2px solid #d4d4d4;border-radius:30px;font-size:1rem;color:#000;background-color:#fff}.search-input::placeholder{color:silver}.search-input:focus{outline:none;border-color:var(--first)}.search-icon{position:absolute;top:50%;left:14px;transform:translateY(-50%);color:#d4d4d4;font-size:1.1rem}@media (width <= 768px){.vendor-icon{width:50!important}.search-container{flex-wrap:wrap!important;gap:2rem}.int-span{font-size:1.75rem}}\n"], dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i5.ResourceHeaderComponent, selector: "pw-resource-header" }, { kind: "directive", type: i5$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6$1.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i5.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i8.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i8.LazyImgDirective, selector: "img" }, { kind: "component", type: ResourceEditCardComponent, selector: "pw-resource-edit-card", inputs: ["id", "resourceData"], outputs: ["updated"] }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i10$2.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i10$2.TextTruncatePipe, name: "textTruncate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
2400
2416
|
}
|
|
2401
2417
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceHubComponent, decorators: [{
|
|
2402
2418
|
type: Component,
|
|
2403
|
-
args: [{ selector: 'pw-posts-list', encapsulation: ViewEncapsulation.None, template: "<pw-resource-header></pw-resource-header>\n<div class=\"all-posts py-5\">\n\n <div class=\"row mt-1 mb-4 px-2\">\n <div class=\"col-md-8\">\n </div>\n <div class=\"col-md-4\">\n <div class=\"text-end mt-0 mt-sm-3 d-flex\">\n <i *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.SuperAdmin']\"\n class=\"fa fa-edit in-page-edit-icon cursor-pointer mt-2 me-3\"\n (click)=\"navigateToTagList()\"\n title=\"Edit Logo\"></i>\n <div class=\"search-wrapper position-relative\">\n <i class=\"fa fa-search search-icon\"></i>\n <input type=\"text\" [(ngModel)]=\"searchTextItems\" pInputText size=\"50\" placeholder=\"Search resources...\"\n (input)=\"onSearch(1)\"\n class=\"search-input top-search-input\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"row resource-row\">\n <!-- All Resources Card -->\n <div class=\"col-md-3 col-sm-6 mb-4\">\n <div class=\"resource-card d-flex align-items-center p-3\"\n (keydown.enter)=\"getPosts(1, 20, true)\"\n [ngClass]=\"{ 'selected': selectedTags.length === 0 }\"\n (click)=\"getPosts(1, 20, true)\">\n <i class=\"fa fa-layer-group resource-icon me-3\"></i>\n <span class=\"resource-text\">All Resources</span>\n </div>\n </div>\n\n <!-- Dynamic Tags -->\n <div class=\"col-md-3 col-sm-6 mb-4\"\n *ngFor=\"let tag of tags\">\n <div\n class=\"resource-card d-flex align-items-center p-3\"\n (keydown.enter)=\"tagPost(tag)\"\n [ngClass]=\"{ 'selected': isSelected(tag.id) }\"\n (click)=\"tagPost(tag)\">\n <i *ngIf=\"tag?.icon_name\" class=\"fa\" [ngClass]=\"tag.icon_name + ' resource-icon me-3'\"></i>\n <span class=\"resource-text\">{{ tag.name }}</span>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"loading && !loaded\">\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n </ng-container>\n <ng-container *ngIf=\"posts?.length && !loading\">\n <div>\n <div class=\"blog-list\">\n <div class=\"row mt-4 mb-5 ms-1 me-1 blog-listing\"\n *ngFor=\"let post of data\">\n <div class=\"col-md-6 col-sm-12 col-xs-12 my-auto\">\n <pw-resource-edit-card\n *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n [id]=\"post?.id\"\n [resourceData]=\"post\"\n (updated)=\"getPosts(1, pageSize)\">\n </pw-resource-edit-card>\n <div class=\"list-blog-image\" [routerLink]=\"['/resources/view', post.slug]\">\n <img [src]=\"post.picture?.url\"\n alt=\"Post List\"\n class=\"img-fluid\" />\n </div>\n </div>\n <div class=\"col-md-6 col-sm-12 col-xs-12 px-4 position-relative\">\n <div class=\"tag-div\">\n <div class=\"author d-flex\">\n <div class=\"avatar-image\">\n <a [attr.disabled]=\"!userLoggedIn\"\n [routerLink]=\"['/members', post?.author?.slug]\">\n <img *ngIf=\"post.author?.avatar\"\n [src]=\"post.author?.avatar[0]?.url\"\n alt=\"Author\" />\n <img *ngIf=\"!post.author?.avatar\"\n src=\"/assets/img/icons/male.png\"\n alt=\"Author\"\n class=\"default-user-image\" />\n </a>\n </div>\n\n <div class=\"author-name ps-2\">\n <a [attr.disabled]=\"!userLoggedIn\"\n [routerLink]=\"['/members', post?.author?.slug]\"\n class=\"name\">\n {{ post.author.first_name }}\n <i class=\"fas fa-crown\" aria-hidden=\"true\"></i></a>\n <ul>\n <li>\n <a href=\"javascript:void(0);\">\n {{ post.published_at | date: 'dd/MM/yyyy' }}\n </a>\n </li>\n <li>.</li>\n <li>\n <a href=\"javascript:void(0);\">{{ thisPostReadingTime(post.body) }}\n </a>\n </li>\n </ul>\n </div>\n <div class=\"share-post\">\n <div class=\"dropdown position-relative d-flex justify-content-end\" (clickOutside)=\"post.showDropdown = false\">\n <div class=\"three-dots-wrapper\" (keydown.enter)=\"toggleDropdown($event, post)\" (click)=\"toggleDropdown($event, post)\">\n <i class=\"fas fa-ellipsis-v\"></i>\n </div>\n\n <div class=\"dropdown-menu show\"\n *ngIf=\"post.showDropdown\">\n <a class=\"dropdown-item\"\n href=\"http://www.facebook.com/\"\n rel=\"noopener noreferrer\"\n target=\"_blank\">\n <i class=\"fas fa-share\"></i> Share Post\n </a>\n </div>\n </div>\n\n </div>\n </div>\n <h4 [routerLink]=\"['/resources/view', post.slug]\"\n class=\"title my-3\">{{ post.title }}</h4>\n <p [routerLink]=\"['/resources/view', post.slug]\"\n class=\"body mb-3 pb-3 post-body-text\">\n {{ post.body | removeHtml: 'quill' | textTruncate: 200 }}\n </p>\n <div class=\"d-flex flex-wrap align-items-center gap-2 mt-auto mb-3\">\n <ng-container *ngIf=\"post?.tags?.length\">\n <ng-container *ngFor=\"let tag of post?.tags?.slice(0, 4)\">\n <span class=\"badge m-1\"\n [appDynamicBadge]=\"{ itemsArray: post?.tags, item: tag }\"\n [colorByName]=\"true\"\n [dataName]=\"tag.name\"\n color=\"blue-grey\">\n {{ tag.name }}\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"post.expandedTags\">\n <ng-container *ngFor=\"let tag of post?.tags?.slice(4)\">\n <span class=\"badge m-1\"\n [appDynamicBadge]=\"{ itemsArray: post?.tags, item: tag }\"\n [colorByName]=\"true\"\n [dataName]=\"tag.name\"\n color=\"blue-grey\">\n {{ tag.name }}\n </span>\n </ng-container>\n </ng-container>\n\n <span *ngIf=\"post?.tags?.length > 4\"\n (click)=\"post.expandedTags = !post.expandedTags\"\n (keydown.enter)=\"post.expandedTags = !post.expandedTags\"\n class=\"fw-bold cursor-pointer m-1\"\n style=\"font-size: 1.2rem;\">...</span>\n </ng-container>\n </div>\n\n\n <div class=\"blog-view py-3 blog-list-write-view\">\n <ul class=\"d-flex\">\n <li>{{ post.view !== null ? post.view : '0' }} View</li>\n <li><a [routerLink]=\"['/resources/view', post.slug]\">Write Comment</a></li>\n <li>\n <a [routerLink]=\"['/resources/view', post.slug]\" aria-label=\"Blog\"><i class=\"far fa-heart\" aria-hidden=\"true\"></i></a>\n </li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!posts?.length && loaded\">\n <pw-no-data [withImage]=\"true\" message=\"We couldn't find any resources.\" > </pw-no-data>\n </ng-container>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}body{background:#fff}.edit-card .in-page-edit-icon{margin-top:1rem!important}.blog-listing{border:1px solid rgb(238,238,238);cursor:pointer;box-shadow:0 4px 12px #00000026}.all-posts{margin:2.5em auto 0;max-width:980px;padding:14px 20px;width:100%}.tag-div{height:100%;display:flex;flex-direction:column;justify-content:space-between}ul.tags{display:inline-flex;font-size:16px;font-weight:400}ul.tags li{color:#337ab7;cursor:pointer;font-weight:600;margin-right:20px}ul.tags li:hover{color:#000}.search{position:relative}.search input{border:0;border-bottom:1px solid rgb(213,206,206)}.search i{position:absolute;right:5px}.scroll-container{max-height:70vh;overflow-y:auto}.blog-list .blog-listing h4{color:#000;font:28px/1.3 Roboto,sans-serif;transition:all .5s}.blog-list .blog-listing h4:hover{color:#0045c7}.blog-list .blog-listing p.body{color:#b3b3b3;font:16px/1.4 Roboto,sans-serif;transition:all .5s;min-height:120px!important;word-break:break-word;overflow-wrap:break-word;white-space:normal}.blog-list .blog-listing p.body:hover{color:#0045c7}.blog-list .blog-listing p.body p{color:inherit;font:inherit;transition:inherit}.blog-list .blog-listing p.body p:hover{color:#0045c7}.blog-list .blog-listing .list-blog-image img{padding:7px 25px 25px}.blog-list .blog-listing .author{padding-top:1.5rem}.blog-list .blog-listing .author .avatar-image{border:1px solid rgb(0,0,0);border-radius:50px;height:50px;clip-path:circle(50% at 50% 50%);width:50px}.blog-list .blog-listing .author .avatar-image img{left:50%;position:relative;top:50%;transform:translate(-50%,-50%)}.blog-list .blog-listing .author .avatar-image .default-user-image{width:50px}.blog-list .blog-listing .author .author-name p.name{color:#000;font:14px/1 Roboto,sans-serif;margin:0;transition:all .5s}.blog-list .blog-listing .author .author-name p.name:hover{color:#0045c7}.blog-list .blog-listing .author .author-name p.name i{color:#000}.blog-list .blog-listing .author .author-name ul li{display:inline-block;padding-right:10px;vertical-align:middle}.blog-list .blog-listing .author .author-name ul li a{color:#b3b3b3;font:12px/1 Roboto,sans-serif}.blog-list .blog-listing .author .share-post{flex-grow:3;position:relative;text-align:right}.blog-list .blog-listing .author .share-post i{color:var(--first)}.blog-list .blog-listing .author .share-post .dropdown-menu{border:0 0;box-shadow:0 3px 8px #0003;left:auto!important;right:12px;top:26px!important;transform:translate(0)!important}.blog-list .blog-listing .blog-view{border-top:1px solid rgb(238,238,238)}.blog-list .blog-listing .blog-view ul li{color:#b3b3b3;font:12px/1 Roboto,sans-serif;padding-right:14px}.blog-list .blog-listing .blog-view ul li a{color:inherit;font:inherit;transition:all .5s}.blog-list .blog-listing .blog-view ul li a:hover{color:#0045c7}.blog-list .blog-listing .blog-view ul li:last-child{flex-grow:3;padding-right:0;text-align:right}.blog-list .blog-listing .blog-view ul li:last-child i{color:#e84a43;font-size:14px}@media only screen and (width <= 1024px){.cust-mt{padding:14px 5px}.cust-mt .blog-list .blog-listing h4{font:20px/1.3 Roboto,sans-serif}.cust-mt .blog-list .blog-listing p.body{font:.9rem/1.3 Roboto,sans-serif}.cust-mt .blog-list .blog-listing p.body p{font:inherit}.cust-mt .blog-list .blog-listing .blog-image{height:300px}}@media only screen and (width <= 767px){.blog-list .blog-listing{height:auto;max-height:none;overflow:visible}.blog-list .blog-listing .blog-view{padding-bottom:1rem}}@media (width >= 768px){.blog-view{bottom:0;width:92%}}.post-body-text:hover{color:var(--titles)!important}.resource-card{border:2px dashed #d4d4d4;border-radius:16px;background-color:#fff;transition:box-shadow .3s ease;cursor:pointer;min-height:95px;padding:1.5rem!important}.resource-card:hover{box-shadow:0 0 30px #00000014}.selected{border:4px dashed #d4d4d4;border-color:var(--first)!important}.resource-icon{font-size:2.5rem;color:var(--first)}.resource-text{font-size:1.4rem;font-weight:500;color:var(--text-color);line-height:2rem}.three-dots-wrapper{width:32px;height:32px;display:flex;margin-top:.25rem!important;justify-content:center;cursor:pointer;position:relative;z-index:2}\n", ".top-search-input{color:#000!important;border:3px solid #d4d4d4!important;padding:5px 30px!important;border-radius:29px!important}::placeholder{color:#d4d4d4}.vendors-distributor-wrapper{margin-top:5rem!important}.vendor-icon{max-width:180px;max-height:100%;width:100%!important}.vendor-name{font-size:3rem;line-height:3rem;color:var(--text-color, black)}::ng-deep .customPaginator .p-paginator{border:none!important}::ng-deep .customPaginator .p-paginator button{border:none!important}.int-span{text-transform:uppercase;font-size:2.5rem;color:var(--first)}.boxes{width:100%;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;padding:15px;border:1px dashed #ccc;border-radius:8px;word-break:break-word;white-space:normal;height:100%}a.vendor-link{display:inline-block;transition:transform .2s ease}a.vendor-link:hover{transform:scale(1.05);cursor:pointer}.search-wrapper{position:relative;width:300px}.search-input{width:100%;padding:10px 20px 10px 40px;border:2px solid #d4d4d4;border-radius:30px;font-size:1rem;color:#000;background-color:#fff}.search-input::placeholder{color:silver}.search-input:focus{outline:none;border-color:var(--first)}.search-icon{position:absolute;top:50%;left:14px;transform:translateY(-50%);color:#d4d4d4;font-size:1.1rem}@media (width <= 768px){.vendor-icon{width:50!important}.search-container{flex-wrap:wrap!important;gap:2rem}.int-span{font-size:1.75rem}}\n"] }]
|
|
2419
|
+
args: [{ selector: 'pw-posts-list', encapsulation: ViewEncapsulation.None, template: "<pw-resource-header></pw-resource-header>\n<div class=\"all-posts py-5\">\n\n <div class=\"row mt-1 mb-4 px-2\">\n <div class=\"col-md-8\">\n </div>\n <div class=\"col-md-4\">\n <div class=\"text-end mt-0 mt-sm-3 d-flex\">\n <i *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.SuperAdmin']\"\n class=\"fa fa-edit in-page-edit-icon cursor-pointer mt-2 me-3\"\n (click)=\"navigateToTagList()\"\n title=\"Edit Logo\"></i>\n <div class=\"search-wrapper position-relative\">\n <i class=\"fa fa-search search-icon\"></i>\n <input type=\"text\" [(ngModel)]=\"searchTextItems\" pInputText size=\"50\" placeholder=\"Search resources...\"\n (input)=\"onSearch(1)\"\n class=\"search-input top-search-input\" />\n </div>\n </div>\n </div>\n </div>\n <div class=\"row resource-row\">\n <!-- All Resources Card -->\n <div class=\"col-md-3 col-sm-6 mb-4\">\n <div class=\"resource-card d-flex align-items-center p-3\"\n (keydown.enter)=\"getPosts(1, 20, true)\"\n [ngClass]=\"{ 'selected': selectedTags.length === 0 }\"\n (click)=\"getPosts(1, 20, true)\">\n <i class=\"fa fa-layer-group resource-icon me-3\"></i>\n <span class=\"resource-text\">All Resources</span>\n </div>\n </div>\n\n <!-- Dynamic Tags -->\n <div class=\"col-md-3 col-sm-6 mb-4\"\n *ngFor=\"let tag of tags\">\n <div\n class=\"resource-card d-flex align-items-center p-3\"\n (keydown.enter)=\"tagPost(tag)\"\n [ngClass]=\"{ 'selected': isSelected(tag.id) }\"\n (click)=\"tagPost(tag)\">\n <i *ngIf=\"tag?.icon_name\" class=\"fa\" [ngClass]=\"tag.icon_name + ' resource-icon me-3'\"></i>\n <span class=\"resource-text\">{{ tag.name }}</span>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"loading && !loaded\">\n <div class=\"w-100 text-center mt-3\">\n <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n </div>\n </ng-container>\n <ng-container *ngIf=\"posts?.length && !loading\">\n <div>\n <div class=\"blog-list\">\n <div class=\"row mt-4 mb-5 ms-1 me-1 blog-listing\"\n *ngFor=\"let post of data\">\n <div class=\"col-md-6 col-sm-12 col-xs-12 my-auto\">\n <pw-resource-edit-card\n *ngIf=\"userLoggedIn && user?.auth?.granted['Pages.Admin']\"\n [id]=\"post?.id\"\n [resourceData]=\"post\"\n (updated)=\"getPosts(1, pageSize)\">\n </pw-resource-edit-card>\n <div class=\"list-blog-image\" [routerLink]=\"['/resources/view', post.slug]\">\n <img [src]=\"post.picture?.url\"\n alt=\"Post List\"\n class=\"img-fluid\" />\n </div>\n </div>\n <div class=\"col-md-6 col-sm-12 col-xs-12 px-4 position-relative\">\n <div class=\"tag-div\">\n <div class=\"author d-flex\">\n <div class=\"avatar-image\">\n <a [attr.disabled]=\"!userLoggedIn\"\n [routerLink]=\"['/members', post?.author?.slug]\">\n <img *ngIf=\"post.author?.avatar\"\n [src]=\"post.author?.avatar[0]?.url\"\n alt=\"Author\" />\n <img *ngIf=\"!post.author?.avatar\"\n src=\"/assets/img/icons/male.png\"\n alt=\"Author\"\n class=\"default-user-image\" />\n </a>\n </div>\n\n <div class=\"author-name ps-2\">\n <a [attr.disabled]=\"!userLoggedIn\"\n [routerLink]=\"['/members', post?.author?.slug]\"\n class=\"name\">\n {{ post.author.first_name }}\n <i class=\"fas fa-crown\" aria-hidden=\"true\"></i></a>\n <ul>\n <li>\n <a href=\"javascript:void(0);\">\n {{ post.published_at | date: 'dd/MM/yyyy' }}\n </a>\n </li>\n <li>.</li>\n <li>\n <a href=\"javascript:void(0);\">{{ thisPostReadingTime(post.body) }}\n </a>\n </li>\n </ul>\n </div>\n <div class=\"share-post\">\n <div class=\"dropdown position-relative d-flex justify-content-end\" (clickOutside)=\"post.showDropdown = false\">\n <div class=\"three-dots-wrapper\" (keydown.enter)=\"toggleDropdown($event, post)\" (click)=\"toggleDropdown($event, post)\">\n <i class=\"fas fa-ellipsis-v\"></i>\n </div>\n\n <div class=\"dropdown-menu show\"\n *ngIf=\"post.showDropdown\">\n <a class=\"dropdown-item\"\n href=\"http://www.facebook.com/\"\n rel=\"noopener noreferrer\"\n target=\"_blank\">\n <i class=\"fas fa-share\"></i> Share Post\n </a>\n </div>\n </div>\n\n </div>\n </div>\n <h4 [routerLink]=\"['/resources/view', post.slug]\"\n class=\"title my-3\">{{ post.title }}</h4>\n <p [routerLink]=\"['/resources/view', post.slug]\"\n class=\"body mb-3 pb-3 post-body-text\">\n {{ post.body | removeHtml: 'quill' | textTruncate: 200 }}\n </p>\n <div class=\"d-flex flex-wrap align-items-center gap-2 mt-auto mb-3\">\n <ng-container *ngIf=\"post?.tags?.length\">\n <ng-container *ngFor=\"let tag of post?.tags?.slice(0, 4)\">\n <span class=\"badge m-1\"\n [appDynamicBadge]=\"{ itemsArray: post?.tags, item: tag }\"\n [colorByName]=\"true\"\n [dataName]=\"tag.name\"\n color=\"blue-grey\">\n {{ tag.name }}\n </span>\n </ng-container>\n\n <ng-container *ngIf=\"post.expandedTags\">\n <ng-container *ngFor=\"let tag of post?.tags?.slice(4)\">\n <span class=\"badge m-1\"\n [appDynamicBadge]=\"{ itemsArray: post?.tags, item: tag }\"\n [colorByName]=\"true\"\n [dataName]=\"tag.name\"\n color=\"blue-grey\">\n {{ tag.name }}\n </span>\n </ng-container>\n </ng-container>\n\n <span *ngIf=\"post?.tags?.length > 4\"\n (click)=\"post.expandedTags = !post.expandedTags\"\n (keydown.enter)=\"post.expandedTags = !post.expandedTags\"\n class=\"fw-bold cursor-pointer m-1 expand-tags\">...</span>\n </ng-container>\n </div>\n\n\n <div class=\"blog-view py-3 blog-list-write-view\">\n <ul class=\"d-flex\">\n <li>{{ post.view !== null ? post.view : '0' }} View</li>\n <li><a [routerLink]=\"['/resources/view', post.slug]\">Write Comment</a></li>\n <li>\n <a [routerLink]=\"['/resources/view', post.slug]\" aria-label=\"Blog\"><i class=\"far fa-heart\" aria-hidden=\"true\"></i></a>\n </li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"!posts?.length && loaded\">\n <pw-no-data [withImage]=\"true\" message=\"We couldn't find any resources.\" > </pw-no-data>\n </ng-container>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}body{background:#fff}.edit-card .in-page-edit-icon{margin-top:1rem!important}.blog-listing{border:1px solid rgb(238,238,238);cursor:pointer;box-shadow:0 4px 12px #00000026}.all-posts{margin:2.5em auto 0;max-width:980px;padding:14px 20px;width:100%}.tag-div{height:100%;display:flex;flex-direction:column;justify-content:space-between}ul.tags{display:inline-flex;font-size:16px;font-weight:400}ul.tags li{color:#337ab7;cursor:pointer;font-weight:600;margin-right:20px}ul.tags li:hover{color:#000}.search{position:relative}.search input{border:0;border-bottom:1px solid rgb(213,206,206)}.search i{position:absolute;right:5px}.scroll-container{max-height:70vh;overflow-y:auto}.blog-list .blog-listing h4{color:#000;font:28px/1.3 Roboto,sans-serif;transition:all .5s}.blog-list .blog-listing h4:hover{color:#0045c7}.blog-list .blog-listing p.body{color:#b3b3b3;font:16px/1.4 Roboto,sans-serif;transition:all .5s;min-height:120px!important;word-break:break-word;overflow-wrap:break-word;white-space:normal}.blog-list .blog-listing p.body:hover{color:#0045c7}.blog-list .blog-listing p.body p{color:inherit;font:inherit;transition:inherit}.blog-list .blog-listing p.body p:hover{color:#0045c7}.blog-list .blog-listing .list-blog-image img{padding:7px 25px 25px}.blog-list .blog-listing .author{padding-top:1.5rem}.blog-list .blog-listing .author .avatar-image{border:1px solid rgb(0,0,0);border-radius:50px;height:50px;clip-path:circle(50% at 50% 50%);width:50px}.blog-list .blog-listing .author .avatar-image img{left:50%;position:relative;top:50%;transform:translate(-50%,-50%)}.blog-list .blog-listing .author .avatar-image .default-user-image{width:50px}.blog-list .blog-listing .author .author-name p.name{color:#000;font:14px/1 Roboto,sans-serif;margin:0;transition:all .5s}.blog-list .blog-listing .author .author-name p.name:hover{color:#0045c7}.blog-list .blog-listing .author .author-name p.name i{color:#000}.blog-list .blog-listing .author .author-name ul li{display:inline-block;padding-right:10px;vertical-align:middle}.blog-list .blog-listing .author .author-name ul li a{color:#b3b3b3;font:12px/1 Roboto,sans-serif}.blog-list .blog-listing .author .share-post{flex-grow:3;position:relative;text-align:right}.blog-list .blog-listing .author .share-post i{color:var(--first)}.blog-list .blog-listing .author .share-post .dropdown-menu{border:0 0;box-shadow:0 3px 8px #0003;left:auto!important;right:12px;top:26px!important;transform:translate(0)!important}.blog-list .blog-listing .blog-view{border-top:1px solid rgb(238,238,238)}.blog-list .blog-listing .blog-view ul li{color:#b3b3b3;font:12px/1 Roboto,sans-serif;padding-right:14px}.blog-list .blog-listing .blog-view ul li a{color:inherit;font:inherit;transition:all .5s}.blog-list .blog-listing .blog-view ul li a:hover{color:#0045c7}.blog-list .blog-listing .blog-view ul li:last-child{flex-grow:3;padding-right:0;text-align:right}.blog-list .blog-listing .blog-view ul li:last-child i{color:#e84a43;font-size:14px}@media only screen and (width <= 1024px){.cust-mt{padding:14px 5px}.cust-mt .blog-list .blog-listing h4{font:20px/1.3 Roboto,sans-serif}.cust-mt .blog-list .blog-listing p.body{font:.9rem/1.3 Roboto,sans-serif}.cust-mt .blog-list .blog-listing p.body p{font:inherit}.cust-mt .blog-list .blog-listing .blog-image{height:300px}}@media only screen and (width <= 767px){.blog-list .blog-listing{height:auto;max-height:none;overflow:visible}.blog-list .blog-listing .blog-view{padding-bottom:1rem}}@media (width >= 768px){.blog-view{bottom:0;width:92%}}.post-body-text:hover{color:var(--titles)!important}.resource-card{border:2px dashed #d4d4d4;border-radius:16px;background-color:#fff;transition:box-shadow .3s ease;cursor:pointer;min-height:95px;padding:1.5rem!important}.resource-card:hover{box-shadow:0 0 30px #00000014}.selected{border:4px dashed #d4d4d4;border-color:var(--first)!important}.resource-icon{font-size:2.5rem;color:var(--first)}.resource-text{font-size:1.4rem;font-weight:500;color:var(--text-color);line-height:2rem}.three-dots-wrapper{width:32px;height:32px;display:flex;margin-top:.25rem!important;justify-content:center;cursor:pointer;position:relative;z-index:2}.expand-tags{font-size:1.2rem}\n", ".top-search-input{color:#000!important;border:3px solid #d4d4d4!important;padding:5px 30px!important;border-radius:29px!important}::placeholder{color:#d4d4d4}.vendors-distributor-wrapper{margin-top:5rem!important}.vendor-icon{max-width:180px;max-height:100%;width:100%!important}.vendor-name{font-size:3rem;line-height:3rem;color:var(--text-color, black)}::ng-deep .customPaginator .p-paginator{border:none!important}::ng-deep .customPaginator .p-paginator button{border:none!important}.int-span{text-transform:uppercase;font-size:2.5rem;color:var(--first)}.boxes{width:100%;min-height:150px;display:flex;align-items:center;justify-content:center;text-align:center;padding:15px;border:1px dashed #ccc;border-radius:8px;word-break:break-word;white-space:normal;height:100%}a.vendor-link{display:inline-block;transition:transform .2s ease}a.vendor-link:hover{transform:scale(1.05);cursor:pointer}.search-wrapper{position:relative;width:300px}.search-input{width:100%;padding:10px 20px 10px 40px;border:2px solid #d4d4d4;border-radius:30px;font-size:1rem;color:#000;background-color:#fff}.search-input::placeholder{color:silver}.search-input:focus{outline:none;border-color:var(--first)}.search-icon{position:absolute;top:50%;left:14px;transform:translateY(-50%);color:#d4d4d4;font-size:1.1rem}@media (width <= 768px){.vendor-icon{width:50!important}.search-container{flex-wrap:wrap!important;gap:2rem}.int-span{font-size:1.75rem}}\n"] }]
|
|
2404
2420
|
}], ctorParameters: () => [{ type: ResourceService }, { type: i2.TagService }, { type: i0.Injector }], propDecorators: { onWindowScroll: [{
|
|
2405
2421
|
type: HostListener,
|
|
2406
2422
|
args: ['window:scroll', []]
|