@posiwise/resource-module 0.0.196 → 0.0.197

package/fesm2022/{posiwise-resource-module-resource-cards.module-Bp4BgXL2.mjs → posiwise-resource-module-resource-cards.module-BX8R0Cng.mjs}

@@ -1,6 +1,6 @@
-import { t as ResourceService } from "./posiwise-resource-module-resource.service-DjeMJX1O.mjs";
+import { t as ResourceService } from "./posiwise-resource-module-resource.service-B09CoD3d.mjs";
 import * as i0 from "@angular/core";
-import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, EventEmitter, Input, NgModule, Output, ViewChild, ViewContainerRef } from "@angular/core";
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, NgModule, Output, ViewChild, ViewContainerRef } from "@angular/core";
 import { HelperService } from "@posiwise/helper-service";
 import * as i2 from "@posiwise/common-services";
 import * as i4 from "@angular/router";
@@ -179,6 +179,89 @@ i0.ɵɵngDeclareClassMetadata({
 		updated: [{ type: Output }]
 	}
 });
+const NEWEST_PUBLISHED_FIRST = {
+	order_by: "published_at",
+	order_direction: "desc"
+};
+const SCROLL_THRESHOLD = 300;
+var ResourcePager = class ResourcePager {
+	constructor(fetchPage, onChange, keep = () => true, pageSize = 15) {
+		this.fetchPage = fetchPage;
+		this.onChange = onChange;
+		this.keep = keep;
+		this.pageSize = pageSize;
+		this.items = [];
+		this.isLoaded = false;
+		this.isLoadingMore = false;
+		this.page = 0;
+		this.fetched = 0;
+		this.total = 0;
+		this.generation = 0;
+	}
+	static forPublicPosts(service, query, onChange, keep, pageSize = 15) {
+		const fetchPage = (page, size) => {
+			const q = query();
+			return service.getPublicPosts(q.subscriptionId, page, size, "", q.tagCategoryIds, q.tagIds, NEWEST_PUBLISHED_FIRST);
+		};
+		return new ResourcePager(fetchPage, onChange, keep, pageSize);
+	}
+	get hasMore() {
+		return this.fetched < this.total;
+	}
+	reset() {
+		this.generation += 1;
+		this.items = [];
+		this.page = 0;
+		this.fetched = 0;
+		this.total = 0;
+		this.isLoaded = false;
+		this.isLoadingMore = false;
+		this.fetchNext(this.generation, 0);
+	}
+	loadMore() {
+		if (!this.isLoaded || this.isLoadingMore || !this.hasMore) return;
+		this.isLoadingMore = true;
+		this.onChange();
+		this.fetchNext(this.generation, 0);
+	}
+	loadMoreIfNearBottom() {
+		if (typeof window === "undefined" || !this.isLoaded || !this.hasMore) return;
+		if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - SCROLL_THRESHOLD) this.loadMore();
+	}
+	fetchNext(generation, added) {
+		this.page += 1;
+		this.fetchPage(this.page, this.pageSize).subscribe({
+			next: (response) => {
+				if (generation !== this.generation) return;
+				const posts = response?.posts ?? [];
+				this.fetched += posts.length;
+				this.total = posts.length ? response.object_count ?? this.fetched : this.fetched;
+				const kept = posts.filter(this.keep);
+				this.items = [...this.items, ...kept];
+				const addedNow = added + kept.length;
+				if (addedNow < this.pageSize && this.hasMore) {
+					this.fetchNext(generation, addedNow);
+					return;
+				}
+				this.finish();
+			},
+			error: () => {
+				if (generation !== this.generation) return;
+				this.page -= 1;
+				this.finish();
+			}
+		});
+	}
+	finish() {
+		this.isLoaded = true;
+		this.isLoadingMore = false;
+		this.onChange();
+	}
+};
+const RELEASE_TAG_NAMES = {
+	product: "Product Release Notes",
+	press: "Press Release Notes"
+};
 var ResourceNoteCardComponent = class ResourceNoteCardComponent extends AppBaseComponent {
 	constructor(injector, resourceService, tagService, cdr) {
 		super(injector);
@@ -194,6 +277,8 @@ var ResourceNoteCardComponent = class ResourceNoteCardComponent extends AppBaseC
 		this.masterSubscriptionId = this.appConfig.master_subscription.subscription_id;
 		this.postTags = {};
 		this.releasePosts = {};
+		this.pagers = {};
+		this.isLoadingMore = {};
 	}
 	ngOnInit() {
 		if (this.userLoggedIn) this.localStorage.getItem$("product").subscribe((res) => {
@@ -204,9 +289,7 @@ var ResourceNoteCardComponent = class ResourceNoteCardComponent extends AppBaseC
 		this.getTags();
 	}
 	ngOnChanges(changes) {
-		if (changes["user"] || changes["userLoggedIn"]) {
-			if (this.userLoggedIn && this.user) this.updateCanEditResourcesValue();
-		}
+		if ((changes["user"] || changes["userLoggedIn"]) && this.userLoggedIn && this.user) this.updateCanEditResourcesValue();
 	}
 	getTags() {
 		this.isLoaded = false;
@@ -218,17 +301,13 @@ var ResourceNoteCardComponent = class ResourceNoteCardComponent extends AppBaseC
 	}
 	getPostTags() {
 		this.tagService.getTagsByType("post_categories", {}, this.getEffectiveSubscriptionId()).subscribe((response) => {
-			this.postTags["product"] = this.findTag(response.tags, "Product Release Notes", this.tagCategory?.id);
-			this.postTags["press"] = this.findTag(response.tags, "Press Release Notes", this.tagCategory?.id);
-			if (this.postTags["product"]?.id) this.getProductReleasePosts(1, 100);
-			else {
-				this.isLoaded = true;
-				this.releasePosts["product"] = [];
-			}
-			if (this.postTags["press"]?.id) this.getPressReleasePosts(1, 100);
-			else {
-				this.isLoaded = true;
-				this.releasePosts["press"] = [];
+			for (const [type, name] of Object.entries(RELEASE_TAG_NAMES)) {
+				this.postTags[type] = this.findTag(response.tags, name, this.tagCategory?.id);
+				if (this.postTags[type]?.id) this.loadReleases(type);
+				else {
+					this.isLoaded = true;
+					this.releasePosts[type] = [];
+				}
 			}
 			this.cdr.markForCheck();
 		});
@@ -236,37 +315,23 @@ var ResourceNoteCardComponent = class ResourceNoteCardComponent extends AppBaseC
 	findTag(tags, name, categoryId) {
 		return tags.find((tag) => tag.name === name && tag.tag_category_id === categoryId);
 	}
-	hasPressReleases() {
-		return this.releasePosts["press"]?.length !== 0 && this.isLoaded;
-	}
-	hasProductReleases() {
-		return this.releasePosts["product"]?.length !== 0 && this.isLoaded;
+	hasReleases(type) {
+		return this.releasePosts[type]?.length !== 0 && this.isLoaded;
 	}
-	getProductReleasePosts(page, pageSize) {
+	loadReleases(type) {
 		this.isLoaded = false;
-		this.resourceService.getPublicPosts(this.getEffectiveSubscriptionId(), page, pageSize, "", "", this.postTags["product"]?.id).subscribe((response) => {
-			const sortedPosts = response.posts.filter((post) => post.showcase === true).sort((a, b) => new Date(b.published_at).getTime() - new Date(a.published_at).getTime());
-			this.releasePosts["product"] = this.getProcessedPosts(sortedPosts);
-			this.cdr.markForCheck();
-		}).add(() => {
-			this.isLoaded = true;
-			this.cdr.markForCheck();
-		});
-	}
-	getPressReleasePosts(page, pageSize) {
-		this.isLoaded = false;
-		this.resourceService.getPublicPosts(this.getEffectiveSubscriptionId(), page, pageSize, "", "", this.postTags["press"]?.id).subscribe((response) => {
-			const sortedPosts = response?.posts.filter((post) => post.showcase === true).sort((a, b) => new Date(b.published_at).getTime() - new Date(a.published_at).getTime());
-			this.releasePosts["press"] = this.getProcessedPosts(sortedPosts);
-			this.cdr.markForCheck();
-		}).add(() => {
-			this.isLoaded = true;
-			this.cdr.markForCheck();
-		});
-	}
-	getProcessedPosts(posts, sliceCount = 3) {
-		const cloned = [...posts];
-		return this.postSlice ? cloned.reverse() : cloned.slice(0, sliceCount).reverse();
+		this.pagers[type] = ResourcePager.forPublicPosts(this.resourceService, () => ({
+			subscriptionId: this.getEffectiveSubscriptionId(),
+			tagIds: this.postTags[type]?.id
+		}), () => this.syncFromPager(type), (post) => post.showcase === true, this.postSlice ? 15 : 3);
+		this.pagers[type].reset();
+	}
+	syncFromPager(type) {
+		const pager = this.pagers[type];
+		this.releasePosts[type] = this.postSlice ? pager.items : pager.items.slice(0, 3).reverse();
+		this.isLoadingMore[type] = pager.isLoadingMore;
+		this.isLoaded = Object.values(this.pagers).every((p) => p.isLoaded);
+		this.cdr.markForCheck();
 	}
 	toggleEditTitle() {
 		this.isEditingTitle = true;
@@ -329,8 +394,8 @@ var ResourceNoteCardComponent = class ResourceNoteCardComponent extends AppBaseC
 			usesInheritance: true,
 			usesOnChanges: true,
 			ngImport: i0,
-			template: "@if (hasProductReleases()) {\n<section class=\"resource-vault-section bg-white\">\n  <div class=\"container\">\n    <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n      <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n        @if (!isEditingTitle) {\n          @if (postTags['product']?.title) {\n            <span [innerHTML]=\"postTags['product']?.title\"></span>\n          } @else {\n            Product Release Notes\n          }\n          @if (canEditResourcesValue) {\n            <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleEditTitle()\" (keydown.enter)=\"toggleEditTitle()\" (keydown.space)=\"toggleEditTitle()\" title=\"Edit Title\"></i>\n          }\n        } @else {\n          <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_9216\" name=\"input_editedTitle_9216\"\n              aria-label=\"Input Edited Title 9216\" />\n          <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle('product')\">Save</button>\n          <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n        }\n      </h2>\n      @if (!postSlice) {\n        <a class=\"view-all\" routerLink=\"/resources/release-notes\">VIEW ALL ></a>\n      }\n    </div>\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (releasePosts['product']?.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n    @if (hasProductReleases()) {\n      <div class=\"row mt-5 d-flex flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of releasePosts['product']; track post.id; let i = $index) {\n          <div class=\"resource-blog-card p-4\">\n            <pw-resource-edit-card-lazy\n            [canEdit]=\"canEditResourcesValue\"\n            [id]=\"post.id\"\n            [resourceData]=\"post\"\n            (updated)=\"getProductReleasePosts(1, 100)\">\n            </pw-resource-edit-card-lazy>\n            <p class=\"resource-title\" [innerHTML]=\"post.title\"></p>\n            @if (!post.picture?.url?.includes('default-photo.jpg')) {\n              <img\n              src=\"{{ post.picture.url }}\"\n              class=\"resource-image mt-auto\"\n              alt=\"Product Resource Icon\"\n              width=\"240\"\n              height=\"240\"\n              [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n              [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n              decoding=\"async\" />\n            } @else {\n              <img\n                src=\"assets/img/resource/rocket-box.png\"\n                class=\"press-release-icon mt-auto\"\n                alt=\"Product Resource Default Icon\"\n                width=\"240\"\n                height=\"240\"\n                [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n                decoding=\"async\" />\n            }\n            @if (post?.external_url) {\n              <a\n                class=\"resource-btn mt-3\"\n                [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                [href]=\"post.external_url\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now' }}</span>\n                <span class=\"visually-hidden\">external</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            } @else {\n              <a class=\"resource-btn mt-3\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [routerLink]=\"['/resources/view', post?.slug]\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now' }}</span>\n                <span class=\"visually-hidden\">on site</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</section>\n}\n@if (isReleasePress && hasPressReleases()) {\n<section class=\"resource-vault-section bg-white\">\n  <div class=\"container\">\n    <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n      <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isPressEditingTitle }\">\n        @if (!isPressEditingTitle) {\n          @if (postTags['press']?.title) {\n            <span [innerHTML]=\"postTags['press']?.title\"></span>\n          } @else {\n            Press Release Notes\n          }\n          @if (canEditResourcesValue) {\n            <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleEditPressTitle()\" (keydown.enter)=\"toggleEditPressTitle()\" (keydown.space)=\"toggleEditPressTitle()\" title=\"Edit Title\"></i>\n          }\n        } @else {\n          <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isPressEditingTitle }\" id=\"input_editedTitle_1600\" name=\"input_editedTitle_1600\"\n              aria-label=\"Input Edited Title 1600\" />\n          <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle('press')\">Save</button>\n          <button class=\"btn btn-sm btn-secondary\" (click)=\"isPressEditingTitle = false\">Cancel</button>\n        }\n      </h2>\n      @if (!postSlice) {\n        <a class=\"view-all\" routerLink=\"/resources/release-notes\">VIEW ALL ></a>\n      }\n    </div>\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (releasePosts['press']?.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n    @if (hasPressReleases()) {\n      <div class=\"row mt-5 d-flex flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of releasePosts['press']; track post.id; let i = $index) {\n          <div class=\"resource-blog-card p-4\">\n            <pw-resource-edit-card-lazy\n            [canEdit]=\"canEditResourcesValue\"\n            [id]=\"post.id\"\n            [resourceData]=\"post\"\n            (updated)=\"getPressReleasePosts(1, 100)\">\n            </pw-resource-edit-card-lazy>\n            <p class=\"resource-title\" [innerHTML]=\"post.title\"></p>\n            @if (!post.picture?.url.includes('default-photo.jpg')) {\n              <img\n              src=\"{{ post.picture.url }}\"\n              class=\"resource-image mt-auto\"\n              alt=\"Press Resource Icon\"\n              width=\"240\"\n              height=\"240\"\n              [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n              [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n              decoding=\"async\" />\n            } @else {\n              <img\n                src=\"assets/img/resource/rocket-box.png\"\n                class=\"press-release-icon mt-auto\"\n                alt=\"Press Resource Default Icon\"\n                width=\"240\"\n                height=\"240\"\n                [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n                decoding=\"async\" />\n            }\n            @if (post?.external_url) {\n              <a\n                class=\"resource-btn mt-3\"\n                [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                [href]=\"post.external_url\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">external</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            } @else {\n              <a class=\"resource-btn mt-3\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [routerLink]=\"['/resources/view', post?.slug]\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">on site</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</section>\n}\n",
-			styles: [".bold{font-weight:700}.resource-heading{margin-bottom:2rem}.resource-note{margin-top:1rem;font-size:.85rem;color:#555}.resource-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}.resource-vault-section{padding:60px 0;background:#fff;padding-bottom:9rem!important;padding-top:7rem!important;box-shadow:0 4px 32px -14px #40576d4d!important}.resource-vault-section .vault-heading{font-size:3rem;font-weight:300}.resource-vault-section .explore-link{color:#000;font-weight:400;text-decoration:none;font-size:1.5rem}.resource-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}.resource-vault-section .resource-blog-card h5{font-size:1.5rem;font-weight:400;margin-bottom:.5rem;color:var(--text-color, black)}.resource-vault-section .resource-blog-card p{font-size:1.5rem;color:var(--text-color, black);line-height:2rem}.resource-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}.resource-vault-section .resource-blog-card iframe{height:210px;border-radius:10px;object-fit:cover;margin-right:0!important;max-width:280px!important}.resource-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)}.resource-vault-section .resource-blog-card .resource-btn:hover{background:#fff;color:var(--text-color, black)!important}.resource-vault-section .vault-description{text-align:left;max-width:657px;color:#182527;line-height:2.3rem!important;font-size:1.65rem}@media(width<=1200px){.resource-vault-section .vault-heading{font-size:3.5rem}.resource-vault-section .vault-description{margin-top:1.35rem}.resource-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(max-width:768px){.resource-vault-section{padding-bottom:6rem!important}.resource-vault-section .container{padding-top:0rem!important;padding-bottom:0rem!important}.vault-header{text-align:center!important}.vault-heading{font-size:3rem!important}}@media(width<=1200px){.container{padding:7rem 3rem 1rem!important}}\n"],
+			template: "@if (hasReleases('product')) {\n<section class=\"resource-vault-section bg-white\">\n  <div class=\"container\">\n    <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n      <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n        @if (!isEditingTitle) {\n          @if (postTags['product']?.title) {\n            <span [innerHTML]=\"postTags['product']?.title\"></span>\n          } @else {\n            Product Release Notes\n          }\n          @if (canEditResourcesValue) {\n            <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleEditTitle()\" (keydown.enter)=\"toggleEditTitle()\" (keydown.space)=\"toggleEditTitle()\" title=\"Edit Title\"></i>\n          }\n        } @else {\n          <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_9216\" name=\"input_editedTitle_9216\"\n              aria-label=\"Input Edited Title 9216\" />\n          <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle('product')\">Save</button>\n          <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n        }\n      </h2>\n      @if (!postSlice) {\n        <a class=\"view-all\" routerLink=\"/resources/release-notes\">VIEW ALL ></a>\n      }\n    </div>\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (releasePosts['product']?.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n    @if (hasReleases('product')) {\n      <div class=\"row mt-5 d-flex flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of releasePosts['product']; track post.id; let i = $index) {\n          <div class=\"resource-blog-card p-4\">\n            <pw-resource-edit-card-lazy\n            [canEdit]=\"canEditResourcesValue\"\n            [id]=\"post.id\"\n            [resourceData]=\"post\"\n            (updated)=\"loadReleases('product')\">\n            </pw-resource-edit-card-lazy>\n            <p class=\"resource-title\" [innerHTML]=\"post.title\"></p>\n            @if (!post.picture?.url?.includes('default-photo.jpg')) {\n              <img\n              src=\"{{ post.picture.url }}\"\n              class=\"resource-image mt-auto\"\n              alt=\"Product Resource Icon\"\n              width=\"240\"\n              height=\"240\"\n              [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n              [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n              decoding=\"async\" />\n            } @else {\n              <img\n                src=\"assets/img/resource/rocket-box.png\"\n                class=\"press-release-icon mt-auto\"\n                alt=\"Product Resource Default Icon\"\n                width=\"240\"\n                height=\"240\"\n                [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n                decoding=\"async\" />\n            }\n            @if (post?.external_url) {\n              <a\n                class=\"resource-btn mt-3\"\n                [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                [href]=\"post.external_url\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now' }}</span>\n                <span class=\"visually-hidden\">external</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            } @else {\n              <a class=\"resource-btn mt-3\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [routerLink]=\"['/resources/view', post?.slug]\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now' }}</span>\n                <span class=\"visually-hidden\">on site</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n      @if (postSlice && pagers['product']?.hasMore) {\n        <button type=\"button\" class=\"resource-load-more\" [disabled]=\"isLoadingMore['product']\" (click)=\"pagers['product'].loadMore()\">\n          {{ 'Resource.LoadMore' | transloco }}\n        </button>\n      }\n    }\n  </div>\n</section>\n}\n@if (isReleasePress && hasReleases('press')) {\n<section class=\"resource-vault-section bg-white\">\n  <div class=\"container\">\n    <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n      <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isPressEditingTitle }\">\n        @if (!isPressEditingTitle) {\n          @if (postTags['press']?.title) {\n            <span [innerHTML]=\"postTags['press']?.title\"></span>\n          } @else {\n            Press Release Notes\n          }\n          @if (canEditResourcesValue) {\n            <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleEditPressTitle()\" (keydown.enter)=\"toggleEditPressTitle()\" (keydown.space)=\"toggleEditPressTitle()\" title=\"Edit Title\"></i>\n          }\n        } @else {\n          <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isPressEditingTitle }\" id=\"input_editedTitle_1600\" name=\"input_editedTitle_1600\"\n              aria-label=\"Input Edited Title 1600\" />\n          <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle('press')\">Save</button>\n          <button class=\"btn btn-sm btn-secondary\" (click)=\"isPressEditingTitle = false\">Cancel</button>\n        }\n      </h2>\n      @if (!postSlice) {\n        <a class=\"view-all\" routerLink=\"/resources/release-notes\">VIEW ALL ></a>\n      }\n    </div>\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (releasePosts['press']?.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n    @if (hasReleases('press')) {\n      <div class=\"row mt-5 d-flex flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of releasePosts['press']; track post.id; let i = $index) {\n          <div class=\"resource-blog-card p-4\">\n            <pw-resource-edit-card-lazy\n            [canEdit]=\"canEditResourcesValue\"\n            [id]=\"post.id\"\n            [resourceData]=\"post\"\n            (updated)=\"loadReleases('press')\">\n            </pw-resource-edit-card-lazy>\n            <p class=\"resource-title\" [innerHTML]=\"post.title\"></p>\n            @if (!post.picture?.url.includes('default-photo.jpg')) {\n              <img\n              src=\"{{ post.picture.url }}\"\n              class=\"resource-image mt-auto\"\n              alt=\"Press Resource Icon\"\n              width=\"240\"\n              height=\"240\"\n              [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n              [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n              decoding=\"async\" />\n            } @else {\n              <img\n                src=\"assets/img/resource/rocket-box.png\"\n                class=\"press-release-icon mt-auto\"\n                alt=\"Press Resource Default Icon\"\n                width=\"240\"\n                height=\"240\"\n                [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n                decoding=\"async\" />\n            }\n            @if (post?.external_url) {\n              <a\n                class=\"resource-btn mt-3\"\n                [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                [href]=\"post.external_url\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">external</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            } @else {\n              <a class=\"resource-btn mt-3\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [routerLink]=\"['/resources/view', post?.slug]\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">on site</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n      @if (postSlice && pagers['press']?.hasMore) {\n        <button type=\"button\" class=\"resource-load-more\" [disabled]=\"isLoadingMore['press']\" (click)=\"pagers['press'].loadMore()\">\n          {{ 'Resource.LoadMore' | transloco }}\n        </button>\n      }\n    }\n  </div>\n</section>\n}\n",
+			styles: [".bold{font-weight:700}.resource-heading{margin-bottom:2rem}.resource-note{margin-top:1rem;font-size:.85rem;color:#555}.resource-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}.resource-vault-section{padding:60px 0;background:#fff;padding-bottom:9rem!important;padding-top:7rem!important;box-shadow:0 4px 32px -14px #40576d4d!important}.resource-vault-section .vault-heading{font-size:3rem;font-weight:300}.resource-vault-section .explore-link{color:#000;font-weight:400;text-decoration:none;font-size:1.5rem}.resource-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}.resource-vault-section .resource-blog-card h5{font-size:1.5rem;font-weight:400;margin-bottom:.5rem;color:var(--text-color, black)}.resource-vault-section .resource-blog-card p{font-size:1.5rem;color:var(--text-color, black);line-height:2rem}.resource-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}.resource-vault-section .resource-blog-card iframe{height:210px;border-radius:10px;object-fit:cover;margin-right:0!important;max-width:280px!important}.resource-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)}.resource-vault-section .resource-blog-card .resource-btn:hover{background:#fff;color:var(--text-color, black)!important}.resource-vault-section .vault-description{text-align:left;max-width:657px;color:#182527;line-height:2.3rem!important;font-size:1.65rem}@media(width<=1200px){.resource-vault-section .vault-heading{font-size:3.5rem}.resource-vault-section .vault-description{margin-top:1.35rem}.resource-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(max-width:768px){.resource-vault-section{padding-bottom:6rem!important}.resource-vault-section .container{padding-top:0rem!important;padding-bottom:0rem!important}.vault-header{text-align:center!important}.vault-heading{font-size:3rem!important}}@media(width<=1200px){.container{padding:7rem 3rem 1rem!important}}\n", ".resource-load-more{display:block;margin:4rem auto 0;padding:10px 32px;border-radius:24px;border:1px solid var(--text-color, black);background-color:var(--text-color, black);color:#fff;font-size:1.5rem;font-weight:500;cursor:pointer;transition:background .3s ease}.resource-load-more:hover:not(:disabled){background:#fff;color:var(--text-color, black)}.resource-load-more:disabled{opacity:.6;cursor:default}\n"],
 			dependencies: [
 				{
 					kind: "directive",
@@ -441,8 +506,8 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "pw-resource-note-card",
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			standalone: false,
-			template: "@if (hasProductReleases()) {\n<section class=\"resource-vault-section bg-white\">\n  <div class=\"container\">\n    <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n      <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n        @if (!isEditingTitle) {\n          @if (postTags['product']?.title) {\n            <span [innerHTML]=\"postTags['product']?.title\"></span>\n          } @else {\n            Product Release Notes\n          }\n          @if (canEditResourcesValue) {\n            <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleEditTitle()\" (keydown.enter)=\"toggleEditTitle()\" (keydown.space)=\"toggleEditTitle()\" title=\"Edit Title\"></i>\n          }\n        } @else {\n          <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_9216\" name=\"input_editedTitle_9216\"\n              aria-label=\"Input Edited Title 9216\" />\n          <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle('product')\">Save</button>\n          <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n        }\n      </h2>\n      @if (!postSlice) {\n        <a class=\"view-all\" routerLink=\"/resources/release-notes\">VIEW ALL ></a>\n      }\n    </div>\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (releasePosts['product']?.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n    @if (hasProductReleases()) {\n      <div class=\"row mt-5 d-flex flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of releasePosts['product']; track post.id; let i = $index) {\n          <div class=\"resource-blog-card p-4\">\n            <pw-resource-edit-card-lazy\n            [canEdit]=\"canEditResourcesValue\"\n            [id]=\"post.id\"\n            [resourceData]=\"post\"\n            (updated)=\"getProductReleasePosts(1, 100)\">\n            </pw-resource-edit-card-lazy>\n            <p class=\"resource-title\" [innerHTML]=\"post.title\"></p>\n            @if (!post.picture?.url?.includes('default-photo.jpg')) {\n              <img\n              src=\"{{ post.picture.url }}\"\n              class=\"resource-image mt-auto\"\n              alt=\"Product Resource Icon\"\n              width=\"240\"\n              height=\"240\"\n              [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n              [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n              decoding=\"async\" />\n            } @else {\n              <img\n                src=\"assets/img/resource/rocket-box.png\"\n                class=\"press-release-icon mt-auto\"\n                alt=\"Product Resource Default Icon\"\n                width=\"240\"\n                height=\"240\"\n                [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n                decoding=\"async\" />\n            }\n            @if (post?.external_url) {\n              <a\n                class=\"resource-btn mt-3\"\n                [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                [href]=\"post.external_url\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now' }}</span>\n                <span class=\"visually-hidden\">external</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            } @else {\n              <a class=\"resource-btn mt-3\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [routerLink]=\"['/resources/view', post?.slug]\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now' }}</span>\n                <span class=\"visually-hidden\">on site</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</section>\n}\n@if (isReleasePress && hasPressReleases()) {\n<section class=\"resource-vault-section bg-white\">\n  <div class=\"container\">\n    <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n      <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isPressEditingTitle }\">\n        @if (!isPressEditingTitle) {\n          @if (postTags['press']?.title) {\n            <span [innerHTML]=\"postTags['press']?.title\"></span>\n          } @else {\n            Press Release Notes\n          }\n          @if (canEditResourcesValue) {\n            <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleEditPressTitle()\" (keydown.enter)=\"toggleEditPressTitle()\" (keydown.space)=\"toggleEditPressTitle()\" title=\"Edit Title\"></i>\n          }\n        } @else {\n          <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isPressEditingTitle }\" id=\"input_editedTitle_1600\" name=\"input_editedTitle_1600\"\n              aria-label=\"Input Edited Title 1600\" />\n          <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle('press')\">Save</button>\n          <button class=\"btn btn-sm btn-secondary\" (click)=\"isPressEditingTitle = false\">Cancel</button>\n        }\n      </h2>\n      @if (!postSlice) {\n        <a class=\"view-all\" routerLink=\"/resources/release-notes\">VIEW ALL ></a>\n      }\n    </div>\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (releasePosts['press']?.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n    @if (hasPressReleases()) {\n      <div class=\"row mt-5 d-flex flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of releasePosts['press']; track post.id; let i = $index) {\n          <div class=\"resource-blog-card p-4\">\n            <pw-resource-edit-card-lazy\n            [canEdit]=\"canEditResourcesValue\"\n            [id]=\"post.id\"\n            [resourceData]=\"post\"\n            (updated)=\"getPressReleasePosts(1, 100)\">\n            </pw-resource-edit-card-lazy>\n            <p class=\"resource-title\" [innerHTML]=\"post.title\"></p>\n            @if (!post.picture?.url.includes('default-photo.jpg')) {\n              <img\n              src=\"{{ post.picture.url }}\"\n              class=\"resource-image mt-auto\"\n              alt=\"Press Resource Icon\"\n              width=\"240\"\n              height=\"240\"\n              [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n              [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n              decoding=\"async\" />\n            } @else {\n              <img\n                src=\"assets/img/resource/rocket-box.png\"\n                class=\"press-release-icon mt-auto\"\n                alt=\"Press Resource Default Icon\"\n                width=\"240\"\n                height=\"240\"\n                [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n                decoding=\"async\" />\n            }\n            @if (post?.external_url) {\n              <a\n                class=\"resource-btn mt-3\"\n                [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                [href]=\"post.external_url\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">external</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            } @else {\n              <a class=\"resource-btn mt-3\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [routerLink]=\"['/resources/view', post?.slug]\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">on site</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</section>\n}\n",
-			styles: [".bold{font-weight:700}.resource-heading{margin-bottom:2rem}.resource-note{margin-top:1rem;font-size:.85rem;color:#555}.resource-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}.resource-vault-section{padding:60px 0;background:#fff;padding-bottom:9rem!important;padding-top:7rem!important;box-shadow:0 4px 32px -14px #40576d4d!important}.resource-vault-section .vault-heading{font-size:3rem;font-weight:300}.resource-vault-section .explore-link{color:#000;font-weight:400;text-decoration:none;font-size:1.5rem}.resource-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}.resource-vault-section .resource-blog-card h5{font-size:1.5rem;font-weight:400;margin-bottom:.5rem;color:var(--text-color, black)}.resource-vault-section .resource-blog-card p{font-size:1.5rem;color:var(--text-color, black);line-height:2rem}.resource-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}.resource-vault-section .resource-blog-card iframe{height:210px;border-radius:10px;object-fit:cover;margin-right:0!important;max-width:280px!important}.resource-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)}.resource-vault-section .resource-blog-card .resource-btn:hover{background:#fff;color:var(--text-color, black)!important}.resource-vault-section .vault-description{text-align:left;max-width:657px;color:#182527;line-height:2.3rem!important;font-size:1.65rem}@media(width<=1200px){.resource-vault-section .vault-heading{font-size:3.5rem}.resource-vault-section .vault-description{margin-top:1.35rem}.resource-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(max-width:768px){.resource-vault-section{padding-bottom:6rem!important}.resource-vault-section .container{padding-top:0rem!important;padding-bottom:0rem!important}.vault-header{text-align:center!important}.vault-heading{font-size:3rem!important}}@media(width<=1200px){.container{padding:7rem 3rem 1rem!important}}\n"]
+			template: "@if (hasReleases('product')) {\n<section class=\"resource-vault-section bg-white\">\n  <div class=\"container\">\n    <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n      <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n        @if (!isEditingTitle) {\n          @if (postTags['product']?.title) {\n            <span [innerHTML]=\"postTags['product']?.title\"></span>\n          } @else {\n            Product Release Notes\n          }\n          @if (canEditResourcesValue) {\n            <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleEditTitle()\" (keydown.enter)=\"toggleEditTitle()\" (keydown.space)=\"toggleEditTitle()\" title=\"Edit Title\"></i>\n          }\n        } @else {\n          <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_9216\" name=\"input_editedTitle_9216\"\n              aria-label=\"Input Edited Title 9216\" />\n          <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle('product')\">Save</button>\n          <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n        }\n      </h2>\n      @if (!postSlice) {\n        <a class=\"view-all\" routerLink=\"/resources/release-notes\">VIEW ALL ></a>\n      }\n    </div>\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (releasePosts['product']?.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n    @if (hasReleases('product')) {\n      <div class=\"row mt-5 d-flex flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of releasePosts['product']; track post.id; let i = $index) {\n          <div class=\"resource-blog-card p-4\">\n            <pw-resource-edit-card-lazy\n            [canEdit]=\"canEditResourcesValue\"\n            [id]=\"post.id\"\n            [resourceData]=\"post\"\n            (updated)=\"loadReleases('product')\">\n            </pw-resource-edit-card-lazy>\n            <p class=\"resource-title\" [innerHTML]=\"post.title\"></p>\n            @if (!post.picture?.url?.includes('default-photo.jpg')) {\n              <img\n              src=\"{{ post.picture.url }}\"\n              class=\"resource-image mt-auto\"\n              alt=\"Product Resource Icon\"\n              width=\"240\"\n              height=\"240\"\n              [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n              [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n              decoding=\"async\" />\n            } @else {\n              <img\n                src=\"assets/img/resource/rocket-box.png\"\n                class=\"press-release-icon mt-auto\"\n                alt=\"Product Resource Default Icon\"\n                width=\"240\"\n                height=\"240\"\n                [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n                decoding=\"async\" />\n            }\n            @if (post?.external_url) {\n              <a\n                class=\"resource-btn mt-3\"\n                [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                [href]=\"post.external_url\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now' }}</span>\n                <span class=\"visually-hidden\">external</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            } @else {\n              <a class=\"resource-btn mt-3\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [routerLink]=\"['/resources/view', post?.slug]\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now' }}</span>\n                <span class=\"visually-hidden\">on site</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n      @if (postSlice && pagers['product']?.hasMore) {\n        <button type=\"button\" class=\"resource-load-more\" [disabled]=\"isLoadingMore['product']\" (click)=\"pagers['product'].loadMore()\">\n          {{ 'Resource.LoadMore' | transloco }}\n        </button>\n      }\n    }\n  </div>\n</section>\n}\n@if (isReleasePress && hasReleases('press')) {\n<section class=\"resource-vault-section bg-white\">\n  <div class=\"container\">\n    <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n      <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isPressEditingTitle }\">\n        @if (!isPressEditingTitle) {\n          @if (postTags['press']?.title) {\n            <span [innerHTML]=\"postTags['press']?.title\"></span>\n          } @else {\n            Press Release Notes\n          }\n          @if (canEditResourcesValue) {\n            <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleEditPressTitle()\" (keydown.enter)=\"toggleEditPressTitle()\" (keydown.space)=\"toggleEditPressTitle()\" title=\"Edit Title\"></i>\n          }\n        } @else {\n          <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isPressEditingTitle }\" id=\"input_editedTitle_1600\" name=\"input_editedTitle_1600\"\n              aria-label=\"Input Edited Title 1600\" />\n          <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle('press')\">Save</button>\n          <button class=\"btn btn-sm btn-secondary\" (click)=\"isPressEditingTitle = false\">Cancel</button>\n        }\n      </h2>\n      @if (!postSlice) {\n        <a class=\"view-all\" routerLink=\"/resources/release-notes\">VIEW ALL ></a>\n      }\n    </div>\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (releasePosts['press']?.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n    @if (hasReleases('press')) {\n      <div class=\"row mt-5 d-flex flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of releasePosts['press']; track post.id; let i = $index) {\n          <div class=\"resource-blog-card p-4\">\n            <pw-resource-edit-card-lazy\n            [canEdit]=\"canEditResourcesValue\"\n            [id]=\"post.id\"\n            [resourceData]=\"post\"\n            (updated)=\"loadReleases('press')\">\n            </pw-resource-edit-card-lazy>\n            <p class=\"resource-title\" [innerHTML]=\"post.title\"></p>\n            @if (!post.picture?.url.includes('default-photo.jpg')) {\n              <img\n              src=\"{{ post.picture.url }}\"\n              class=\"resource-image mt-auto\"\n              alt=\"Press Resource Icon\"\n              width=\"240\"\n              height=\"240\"\n              [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n              [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n              decoding=\"async\" />\n            } @else {\n              <img\n                src=\"assets/img/resource/rocket-box.png\"\n                class=\"press-release-icon mt-auto\"\n                alt=\"Press Resource Default Icon\"\n                width=\"240\"\n                height=\"240\"\n                [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n                decoding=\"async\" />\n            }\n            @if (post?.external_url) {\n              <a\n                class=\"resource-btn mt-3\"\n                [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                [href]=\"post.external_url\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">external</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            } @else {\n              <a class=\"resource-btn mt-3\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [routerLink]=\"['/resources/view', post?.slug]\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">on site</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n      @if (postSlice && pagers['press']?.hasMore) {\n        <button type=\"button\" class=\"resource-load-more\" [disabled]=\"isLoadingMore['press']\" (click)=\"pagers['press'].loadMore()\">\n          {{ 'Resource.LoadMore' | transloco }}\n        </button>\n      }\n    }\n  </div>\n</section>\n}\n",
+			styles: [".bold{font-weight:700}.resource-heading{margin-bottom:2rem}.resource-note{margin-top:1rem;font-size:.85rem;color:#555}.resource-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}.resource-vault-section{padding:60px 0;background:#fff;padding-bottom:9rem!important;padding-top:7rem!important;box-shadow:0 4px 32px -14px #40576d4d!important}.resource-vault-section .vault-heading{font-size:3rem;font-weight:300}.resource-vault-section .explore-link{color:#000;font-weight:400;text-decoration:none;font-size:1.5rem}.resource-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}.resource-vault-section .resource-blog-card h5{font-size:1.5rem;font-weight:400;margin-bottom:.5rem;color:var(--text-color, black)}.resource-vault-section .resource-blog-card p{font-size:1.5rem;color:var(--text-color, black);line-height:2rem}.resource-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}.resource-vault-section .resource-blog-card iframe{height:210px;border-radius:10px;object-fit:cover;margin-right:0!important;max-width:280px!important}.resource-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)}.resource-vault-section .resource-blog-card .resource-btn:hover{background:#fff;color:var(--text-color, black)!important}.resource-vault-section .vault-description{text-align:left;max-width:657px;color:#182527;line-height:2.3rem!important;font-size:1.65rem}@media(width<=1200px){.resource-vault-section .vault-heading{font-size:3.5rem}.resource-vault-section .vault-description{margin-top:1.35rem}.resource-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(max-width:768px){.resource-vault-section{padding-bottom:6rem!important}.resource-vault-section .container{padding-top:0rem!important;padding-bottom:0rem!important}.vault-header{text-align:center!important}.vault-heading{font-size:3rem!important}}@media(width<=1200px){.container{padding:7rem 3rem 1rem!important}}\n", ".resource-load-more{display:block;margin:4rem auto 0;padding:10px 32px;border-radius:24px;border:1px solid var(--text-color, black);background-color:var(--text-color, black);color:#fff;font-size:1.5rem;font-weight:500;cursor:pointer;transition:background .3s ease}.resource-load-more:hover:not(:disabled){background:#fff;color:var(--text-color, black)}.resource-load-more:disabled{opacity:.6;cursor:default}\n"]
 		}]
 	}],
 	ctorParameters: () => [
@@ -464,6 +529,15 @@ i0.ɵɵngDeclareClassMetadata({
 	}
 });
 var CaseStudyCardComponent = class CaseStudyCardComponent extends AppBaseComponent {
+	get posts() {
+		return this.pager?.items ?? [];
+	}
+	get isLoaded() {
+		return this.pager?.isLoaded ?? false;
+	}
+	get isLoadingMore() {
+		return this.pager?.isLoadingMore ?? false;
+	}
 	constructor(injector, resourceService, tagService, cdr) {
 		super(injector);
 		this.resourceService = resourceService;
@@ -472,10 +546,8 @@ var CaseStudyCardComponent = class CaseStudyCardComponent extends AppBaseCompone
 		this.showCaseStudyHeader = false;
 		this.postSlice = false;
 		this.canEditResourcesValue = false;
-		this.isLoaded = false;
 		this.masterSubscriptionId = this.appConfig.master_subscription.subscription_id;
 		this.companyName = this.appConfig.company.name;
-		this.posts = [];
 		this.isEditingTitle = false;
 	}
 	ngOnInit() {
@@ -484,23 +556,22 @@ var CaseStudyCardComponent = class CaseStudyCardComponent extends AppBaseCompone
 			this.subscriptionId = data?.subscriptionId;
 			this.cdr.markForCheck();
 		});
-		this.getPosts(1, 10);
+		this.loadPosts();
 	}
 	ngOnChanges(changes) {
 		if (changes["user"] || changes["userLoggedIn"]) {
 			if (this.userLoggedIn && this.user) this.updateCanEditResourcesValue();
 		}
 	}
-	getPosts(page, pageSize) {
-		this.isLoaded = false;
-		this.resourceService.getPublicPosts(this.getEffectiveSubscriptionId(), page, pageSize, "", this.categoryId).subscribe((response) => {
-			const sortedPosts = (response.posts ?? []).filter((post) => post.showcase === true).sort((a, b) => new Date(b.published_at).getTime() - new Date(a.published_at).getTime());
-			this.posts = this.postSlice ? sortedPosts : [...sortedPosts].slice(0, 3);
-			this.cdr.markForCheck();
-		}).add(() => {
-			this.isLoaded = true;
-			this.cdr.markForCheck();
-		});
+	loadPosts() {
+		this.pager = ResourcePager.forPublicPosts(this.resourceService, () => ({
+			subscriptionId: this.getEffectiveSubscriptionId(),
+			tagCategoryIds: this.categoryId
+		}), () => this.cdr.markForCheck(), (post) => post.showcase === true, this.postSlice ? 15 : 3);
+		this.pager.reset();
+	}
+	onWindowScroll() {
+		if (this.postSlice) this.pager?.loadMoreIfNearBottom();
 	}
 	toggleEditTitle() {
 		this.isEditingTitle = true;
@@ -556,10 +627,11 @@ var CaseStudyCardComponent = class CaseStudyCardComponent extends AppBaseCompone
 				user: "user",
 				userLoggedIn: "userLoggedIn"
 			},
+			host: { listeners: { "window:scroll": "onWindowScroll()" } },
 			usesInheritance: true,
 			usesOnChanges: true,
 			ngImport: i0,
-			template: "<section class=\"resource-vault-section bg-white text-center py-5 extra-top-padding section-outer\" id=\"case-studies\">\n  <div class=\"container\">\n    @if (showCaseStudyHeader) {\n      <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n        <ng-container *ngTemplateOutlet=\"caseStudyHeaderTemplate\"></ng-container>\n        <a class=\"view-all\" routerLink=\"/resources/case-studies\">VIEW ALL ></a>\n      </div>\n    } @else {\n      <div class=\"d-md-flex justify-content-between align-items-start\">\n        <ng-container *ngTemplateOutlet=\"caseStudyHeaderTemplate\"></ng-container>\n      </div>\n    }\n\n\n    <ng-template #caseStudyHeaderTemplate>\n      <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n        @if (!isEditingTitle) {\n          @if (resourceTitle) {\n            <span>\n              <span [innerHTML]=\"resourceTitle\"></span>\n            </span>\n          } @else {\n            Case Studies\n          }\n          @if (canEditResourcesValue) {\n            <i\n              class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\"\n              (click)=\"toggleEditTitle()\"\n              (keydown.enter)=\"toggleEditTitle()\"\n              (keydown.space)=\"toggleEditTitle()\"\n            title=\"Edit Title\"></i>\n          }\n        } @else {\n          <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_9216\" name=\"input_editedTitle_9216\"\n              aria-label=\"Input Edited Title 9216\" />\n          <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n          <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n        }\n\n      </h2>\n    </ng-template>\n\n\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (posts.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n\n\n    @if (posts.length !== 0 && isLoaded) {\n      <div class=\"row d-flex flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of posts; track trackByPostId($index, post); let i = $index) {\n          <div class=\"testimonial-box\">\n            <pw-resource-edit-card-lazy\n              [canEdit]=\"canEditResourcesValue\"\n              [id]=\"post.id\"\n              [resourceData]=\"post\"\n              (updated)=\"getPosts(1, 100)\">\n            </pw-resource-edit-card-lazy>\n            <div>\n              @if (!post.rectangular_picture.url.includes('default-photo.jpg') ) {\n                <img [src]=\"post.rectangular_picture.url\"\n                  alt=\"IT Partners Logo\"\n                  class=\"company-logo mb-3\"\n                  width=\"320\"\n                  height=\"180\"\n                  [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                  [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n                  decoding=\"async\" />\n              }\n              <p class=\"mb-4 mt-3 testimonial-section\">\n                <span [innerHTML]=\"post.title\"></span>\n              </p>\n            </div>\n            <!-- BOTTOM AVATAR -->\n            <div class=\"avatar-container mt-5\">\n              @if (post.picture.url && !post.picture.url.includes('default-photo.jpg')) {\n                <img [src]=\"post.picture.url\"\n                  alt=\"User Avatar\"\n                  class=\"testimonial-avatar\"\n                  width=\"96\"\n                  height=\"96\"\n                  loading=\"lazy\"\n                  decoding=\"async\" />\n              }\n              @if (post?.external_url) {\n                <a\n                  class=\"read-more-btn-overlay\"\n                  [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                  [href]=\"post.external_url\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\">\n                  <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                  <span class=\"visually-hidden\">external</span>\n                  <span class=\"arrow\">→</span>\n                </a>\n              } @else {\n                <a class=\"read-more-btn-overlay\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [routerLink]=\"['/resources/view', post?.slug]\">\n                  <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                  <span class=\"visually-hidden\">on site</span>\n                  <span class=\"arrow\">→</span>\n                </a>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</section>\n",
+			template: "<section class=\"resource-vault-section bg-white text-center py-5 extra-top-padding section-outer\" id=\"case-studies\">\n  <div class=\"container\">\n    @if (showCaseStudyHeader) {\n      <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n        <ng-container *ngTemplateOutlet=\"caseStudyHeaderTemplate\"></ng-container>\n        <a class=\"view-all\" routerLink=\"/resources/case-studies\">VIEW ALL ></a>\n      </div>\n    } @else {\n      <div class=\"d-md-flex justify-content-between align-items-start\">\n        <ng-container *ngTemplateOutlet=\"caseStudyHeaderTemplate\"></ng-container>\n      </div>\n    }\n\n\n    <ng-template #caseStudyHeaderTemplate>\n      <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n        @if (!isEditingTitle) {\n          @if (resourceTitle) {\n            <span>\n              <span [innerHTML]=\"resourceTitle\"></span>\n            </span>\n          } @else {\n            Case Studies\n          }\n          @if (canEditResourcesValue) {\n            <i\n              class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\"\n              (click)=\"toggleEditTitle()\"\n              (keydown.enter)=\"toggleEditTitle()\"\n              (keydown.space)=\"toggleEditTitle()\"\n            title=\"Edit Title\"></i>\n          }\n        } @else {\n          <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_9216\" name=\"input_editedTitle_9216\"\n              aria-label=\"Input Edited Title 9216\" />\n          <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n          <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n        }\n\n      </h2>\n    </ng-template>\n\n\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (posts.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n\n\n    @if (posts.length !== 0 && isLoaded) {\n      <div class=\"row d-flex flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of posts; track trackByPostId($index, post); let i = $index) {\n          <div class=\"testimonial-box\">\n            <pw-resource-edit-card-lazy\n              [canEdit]=\"canEditResourcesValue\"\n              [id]=\"post.id\"\n              [resourceData]=\"post\"\n              (updated)=\"loadPosts()\">\n            </pw-resource-edit-card-lazy>\n            <div>\n              @if (!post.rectangular_picture.url.includes('default-photo.jpg') ) {\n                <img [src]=\"post.rectangular_picture.url\"\n                  alt=\"IT Partners Logo\"\n                  class=\"company-logo mb-3\"\n                  width=\"320\"\n                  height=\"180\"\n                  [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                  [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n                  decoding=\"async\" />\n              }\n              <p class=\"mb-4 mt-3 testimonial-section\">\n                <span [innerHTML]=\"post.title\"></span>\n              </p>\n            </div>\n            <!-- BOTTOM AVATAR -->\n            <div class=\"avatar-container mt-5\">\n              @if (post.picture.url && !post.picture.url.includes('default-photo.jpg')) {\n                <img [src]=\"post.picture.url\"\n                  alt=\"User Avatar\"\n                  class=\"testimonial-avatar\"\n                  width=\"96\"\n                  height=\"96\"\n                  loading=\"lazy\"\n                  decoding=\"async\" />\n              }\n              @if (post?.external_url) {\n                <a\n                  class=\"read-more-btn-overlay\"\n                  [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                  [href]=\"post.external_url\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\">\n                  <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                  <span class=\"visually-hidden\">external</span>\n                  <span class=\"arrow\">→</span>\n                </a>\n              } @else {\n                <a class=\"read-more-btn-overlay\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [routerLink]=\"['/resources/view', post?.slug]\">\n                  <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                  <span class=\"visually-hidden\">on site</span>\n                  <span class=\"arrow\">→</span>\n                </a>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\n    @if (isLoadingMore) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n  </div>\n</section>\n",
 			styles: [".resource-vault-section{background:#fff;text-align:center;padding:3rem 0}.section-outer,.container{padding:0 15px}.d-md-flex{display:flex}.justify-content-between{justify-content:space-between}.align-items-start{align-items:flex-start}.vault-heading{font-size:2rem;font-weight:700}.video-row{margin-top:3rem;gap:5.5rem!important}.row{display:flex;flex-wrap:wrap}.col-md-6,.col-lg-4{flex:0 0 auto;width:100%}@media(width>=768px){.col-md-6,.col-lg-4{width:50%}}@media(width>=992px){.col-md-6,.col-lg-4{width:33.3333%}}.mb-4{margin-bottom:1.5rem}.testimonial-box{display:flex;flex-direction:column;justify-content:space-between;background:#fff;color:#000;border-radius:20px;box-shadow:0 0 20px #0000001a;text-align:center;width:338px;height:auto;padding:2.5rem 1.5rem;font-size:1.1rem;min-height:421.4px!important}.testimonial-box .testimonial-section{font-size:1.5rem;line-height:2rem;font-weight:400;color:var(--text-color, black)}.testimonial-box .testimonial-section strong{display:block}.testimonial-box .company-logo{width:100%!important;height:auto!important;max-width:150px!important;object-fit:contain;align-self:center}.testimonial-box .avatar-container{margin-top:auto;position:relative;display:inline-block}.testimonial-box .avatar-container .testimonial-avatar{width:60%;aspect-ratio:1/1;height:auto;border-radius:50%;object-fit:fill}.testimonial-box .avatar-container .read-more-btn-overlay{position:absolute;text-decoration:none!important;bottom:0;left:50%;transform:translate(-50%);background-color:var(--text-color, black);color:#fff;width:240px;padding:10px 24px;border-radius:24px;font-size:1.5rem;font-weight:500;cursor:pointer;transition:background .3s ease;display:flex;justify-content:space-between;align-items:center;text-align:left;border:1px solid;box-shadow:none!important;border-color:var(--text-color, black)}.testimonial-box .avatar-container .read-more-btn-overlay:hover{background:#fff;color:var(--text-color, black)!important}.testimonial-box .avatar-container .read-more-btn-overlay .arrow{margin-bottom:.3rem}\n"],
 			dependencies: [
 				{
@@ -681,7 +753,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "pw-case-studies-card",
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			standalone: false,
-			template: "<section class=\"resource-vault-section bg-white text-center py-5 extra-top-padding section-outer\" id=\"case-studies\">\n  <div class=\"container\">\n    @if (showCaseStudyHeader) {\n      <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n        <ng-container *ngTemplateOutlet=\"caseStudyHeaderTemplate\"></ng-container>\n        <a class=\"view-all\" routerLink=\"/resources/case-studies\">VIEW ALL ></a>\n      </div>\n    } @else {\n      <div class=\"d-md-flex justify-content-between align-items-start\">\n        <ng-container *ngTemplateOutlet=\"caseStudyHeaderTemplate\"></ng-container>\n      </div>\n    }\n\n\n    <ng-template #caseStudyHeaderTemplate>\n      <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n        @if (!isEditingTitle) {\n          @if (resourceTitle) {\n            <span>\n              <span [innerHTML]=\"resourceTitle\"></span>\n            </span>\n          } @else {\n            Case Studies\n          }\n          @if (canEditResourcesValue) {\n            <i\n              class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\"\n              (click)=\"toggleEditTitle()\"\n              (keydown.enter)=\"toggleEditTitle()\"\n              (keydown.space)=\"toggleEditTitle()\"\n            title=\"Edit Title\"></i>\n          }\n        } @else {\n          <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_9216\" name=\"input_editedTitle_9216\"\n              aria-label=\"Input Edited Title 9216\" />\n          <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n          <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n        }\n\n      </h2>\n    </ng-template>\n\n\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (posts.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n\n\n    @if (posts.length !== 0 && isLoaded) {\n      <div class=\"row d-flex flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of posts; track trackByPostId($index, post); let i = $index) {\n          <div class=\"testimonial-box\">\n            <pw-resource-edit-card-lazy\n              [canEdit]=\"canEditResourcesValue\"\n              [id]=\"post.id\"\n              [resourceData]=\"post\"\n              (updated)=\"getPosts(1, 100)\">\n            </pw-resource-edit-card-lazy>\n            <div>\n              @if (!post.rectangular_picture.url.includes('default-photo.jpg') ) {\n                <img [src]=\"post.rectangular_picture.url\"\n                  alt=\"IT Partners Logo\"\n                  class=\"company-logo mb-3\"\n                  width=\"320\"\n                  height=\"180\"\n                  [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                  [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n                  decoding=\"async\" />\n              }\n              <p class=\"mb-4 mt-3 testimonial-section\">\n                <span [innerHTML]=\"post.title\"></span>\n              </p>\n            </div>\n            <!-- BOTTOM AVATAR -->\n            <div class=\"avatar-container mt-5\">\n              @if (post.picture.url && !post.picture.url.includes('default-photo.jpg')) {\n                <img [src]=\"post.picture.url\"\n                  alt=\"User Avatar\"\n                  class=\"testimonial-avatar\"\n                  width=\"96\"\n                  height=\"96\"\n                  loading=\"lazy\"\n                  decoding=\"async\" />\n              }\n              @if (post?.external_url) {\n                <a\n                  class=\"read-more-btn-overlay\"\n                  [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                  [href]=\"post.external_url\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\">\n                  <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                  <span class=\"visually-hidden\">external</span>\n                  <span class=\"arrow\">→</span>\n                </a>\n              } @else {\n                <a class=\"read-more-btn-overlay\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [routerLink]=\"['/resources/view', post?.slug]\">\n                  <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                  <span class=\"visually-hidden\">on site</span>\n                  <span class=\"arrow\">→</span>\n                </a>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</section>\n",
+			template: "<section class=\"resource-vault-section bg-white text-center py-5 extra-top-padding section-outer\" id=\"case-studies\">\n  <div class=\"container\">\n    @if (showCaseStudyHeader) {\n      <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n        <ng-container *ngTemplateOutlet=\"caseStudyHeaderTemplate\"></ng-container>\n        <a class=\"view-all\" routerLink=\"/resources/case-studies\">VIEW ALL ></a>\n      </div>\n    } @else {\n      <div class=\"d-md-flex justify-content-between align-items-start\">\n        <ng-container *ngTemplateOutlet=\"caseStudyHeaderTemplate\"></ng-container>\n      </div>\n    }\n\n\n    <ng-template #caseStudyHeaderTemplate>\n      <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n        @if (!isEditingTitle) {\n          @if (resourceTitle) {\n            <span>\n              <span [innerHTML]=\"resourceTitle\"></span>\n            </span>\n          } @else {\n            Case Studies\n          }\n          @if (canEditResourcesValue) {\n            <i\n              class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\"\n              (click)=\"toggleEditTitle()\"\n              (keydown.enter)=\"toggleEditTitle()\"\n              (keydown.space)=\"toggleEditTitle()\"\n            title=\"Edit Title\"></i>\n          }\n        } @else {\n          <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_9216\" name=\"input_editedTitle_9216\"\n              aria-label=\"Input Edited Title 9216\" />\n          <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n          <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n        }\n\n      </h2>\n    </ng-template>\n\n\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (posts.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n\n\n    @if (posts.length !== 0 && isLoaded) {\n      <div class=\"row d-flex flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of posts; track trackByPostId($index, post); let i = $index) {\n          <div class=\"testimonial-box\">\n            <pw-resource-edit-card-lazy\n              [canEdit]=\"canEditResourcesValue\"\n              [id]=\"post.id\"\n              [resourceData]=\"post\"\n              (updated)=\"loadPosts()\">\n            </pw-resource-edit-card-lazy>\n            <div>\n              @if (!post.rectangular_picture.url.includes('default-photo.jpg') ) {\n                <img [src]=\"post.rectangular_picture.url\"\n                  alt=\"IT Partners Logo\"\n                  class=\"company-logo mb-3\"\n                  width=\"320\"\n                  height=\"180\"\n                  [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                  [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n                  decoding=\"async\" />\n              }\n              <p class=\"mb-4 mt-3 testimonial-section\">\n                <span [innerHTML]=\"post.title\"></span>\n              </p>\n            </div>\n            <!-- BOTTOM AVATAR -->\n            <div class=\"avatar-container mt-5\">\n              @if (post.picture.url && !post.picture.url.includes('default-photo.jpg')) {\n                <img [src]=\"post.picture.url\"\n                  alt=\"User Avatar\"\n                  class=\"testimonial-avatar\"\n                  width=\"96\"\n                  height=\"96\"\n                  loading=\"lazy\"\n                  decoding=\"async\" />\n              }\n              @if (post?.external_url) {\n                <a\n                  class=\"read-more-btn-overlay\"\n                  [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                  [href]=\"post.external_url\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\">\n                  <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                  <span class=\"visually-hidden\">external</span>\n                  <span class=\"arrow\">→</span>\n                </a>\n              } @else {\n                <a class=\"read-more-btn-overlay\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [routerLink]=\"['/resources/view', post?.slug]\">\n                  <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                  <span class=\"visually-hidden\">on site</span>\n                  <span class=\"arrow\">→</span>\n                </a>\n              }\n            </div>\n          </div>\n        }\n      </div>\n    }\n    @if (isLoadingMore) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n  </div>\n</section>\n",
 			styles: [".resource-vault-section{background:#fff;text-align:center;padding:3rem 0}.section-outer,.container{padding:0 15px}.d-md-flex{display:flex}.justify-content-between{justify-content:space-between}.align-items-start{align-items:flex-start}.vault-heading{font-size:2rem;font-weight:700}.video-row{margin-top:3rem;gap:5.5rem!important}.row{display:flex;flex-wrap:wrap}.col-md-6,.col-lg-4{flex:0 0 auto;width:100%}@media(width>=768px){.col-md-6,.col-lg-4{width:50%}}@media(width>=992px){.col-md-6,.col-lg-4{width:33.3333%}}.mb-4{margin-bottom:1.5rem}.testimonial-box{display:flex;flex-direction:column;justify-content:space-between;background:#fff;color:#000;border-radius:20px;box-shadow:0 0 20px #0000001a;text-align:center;width:338px;height:auto;padding:2.5rem 1.5rem;font-size:1.1rem;min-height:421.4px!important}.testimonial-box .testimonial-section{font-size:1.5rem;line-height:2rem;font-weight:400;color:var(--text-color, black)}.testimonial-box .testimonial-section strong{display:block}.testimonial-box .company-logo{width:100%!important;height:auto!important;max-width:150px!important;object-fit:contain;align-self:center}.testimonial-box .avatar-container{margin-top:auto;position:relative;display:inline-block}.testimonial-box .avatar-container .testimonial-avatar{width:60%;aspect-ratio:1/1;height:auto;border-radius:50%;object-fit:fill}.testimonial-box .avatar-container .read-more-btn-overlay{position:absolute;text-decoration:none!important;bottom:0;left:50%;transform:translate(-50%);background-color:var(--text-color, black);color:#fff;width:240px;padding:10px 24px;border-radius:24px;font-size:1.5rem;font-weight:500;cursor:pointer;transition:background .3s ease;display:flex;justify-content:space-between;align-items:center;text-align:left;border:1px solid;box-shadow:none!important;border-color:var(--text-color, black)}.testimonial-box .avatar-container .read-more-btn-overlay:hover{background:#fff;color:var(--text-color, black)!important}.testimonial-box .avatar-container .read-more-btn-overlay .arrow{margin-bottom:.3rem}\n"]
 		}]
 	}],
@@ -698,7 +770,11 @@ i0.ɵɵngDeclareClassMetadata({
 		tag: [{ type: Input }],
 		resourceTitle: [{ type: Input }],
 		user: [{ type: Input }],
-		userLoggedIn: [{ type: Input }]
+		userLoggedIn: [{ type: Input }],
+		onWindowScroll: [{
+			type: HostListener,
+			args: ["window:scroll"]
+		}]
 	}
 });
 var ResourceCardComponent = class ResourceCardComponent extends AppBaseComponent {
@@ -710,9 +786,7 @@ var ResourceCardComponent = class ResourceCardComponent extends AppBaseComponent
 		this.isHeaderVisible = true;
 		this.isRelated = false;
 		this.postSlice = false;
-		this.isLoaded = false;
 		this.masterSubscriptionId = this.appConfig.master_subscription.subscription_id;
-		this.posts = [];
 		this.canEditResourcesValue = false;
 	}
 	ngOnInit() {
@@ -721,23 +795,34 @@ var ResourceCardComponent = class ResourceCardComponent extends AppBaseComponent
 			this.subscriptionId = data?.subscriptionId;
 			this.cdr.markForCheck();
 		});
-		this.getPosts(1, 10);
+		this.loadPosts();
 	}
 	ngOnChanges(changes) {
 		if (changes["user"] || changes["userLoggedIn"]) {
 			if (this.userLoggedIn && this.user) this.updateCanEditResourcesValue();
 		}
 	}
-	getPosts(page, pageSize) {
-		this.isLoaded = false;
-		this.resourceService.getPublicPosts(this.getEffectiveSubscriptionId(), page, pageSize, "", this.categoryId).subscribe((response) => {
-			const sortedPosts = (response.posts ?? []).filter((post) => post.showcase === true).sort((a, b) => new Date(b.published_at).getTime() - new Date(a.published_at).getTime());
-			this.posts = this.postSlice ? sortedPosts : [...sortedPosts].slice(0, 3);
-			this.cdr.markForCheck();
-		}).add(() => {
-			this.isLoaded = true;
-			this.cdr.markForCheck();
-		});
+	get posts() {
+		return this.pager?.items ?? [];
+	}
+	get isLoaded() {
+		return this.pager?.isLoaded ?? false;
+	}
+	get isLoadingMore() {
+		return this.pager?.isLoadingMore ?? false;
+	}
+	get hasMorePosts() {
+		return this.postSlice && !!this.pager?.hasMore;
+	}
+	loadPosts() {
+		this.pager = ResourcePager.forPublicPosts(this.resourceService, () => ({
+			subscriptionId: this.getEffectiveSubscriptionId(),
+			tagCategoryIds: this.categoryId
+		}), () => this.cdr.markForCheck(), (post) => post.showcase === true, this.postSlice ? 15 : 3);
+		this.pager.reset();
+	}
+	onWindowScroll() {
+		if (this.postSlice) this.pager?.loadMoreIfNearBottom();
 	}
 	toggleTagEditTitle() {
 		this.isEditingTitle = true;
@@ -793,10 +878,11 @@ var ResourceCardComponent = class ResourceCardComponent extends AppBaseComponent
 				user: "user",
 				userLoggedIn: "userLoggedIn"
 			},
+			host: { listeners: { "window:scroll": "onWindowScroll()" } },
 			usesInheritance: true,
 			usesOnChanges: true,
 			ngImport: i0,
-			template: "<section class=\"resource-vault-section bg-white\">\n  <div class=\"container\">\n    @if (isHeaderVisible) {\n      <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n        <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n          @if (!isEditingTitle) {\n            @if (resourceTitle) {\n              <span [innerHTML]=\"resourceTitle\"></span>\n            } @else {\n              Our team's articles\n            }\n            @if (!isRelated && canEditResourcesValue) {\n              <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleTagEditTitle()\" (keydown.enter)=\"toggleTagEditTitle()\" (keydown.space)=\"toggleTagEditTitle()\" title=\"Edit Title\"></i>\n            }\n          } @else {\n            <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_9056\" name=\"input_editedTitle_9056\"\n                aria-label=\"Input Edited Title 9056\" />\n            <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n            <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n          }\n        </h2>\n        <a class=\"view-all\" [routerLink]=\"resourceLink\">VIEW ALL ></a>\n      </div>\n    }\n\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (posts.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n\n    @if (posts.length !== 0 && isLoaded) {\n      <div class=\"row d-flex flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of posts; track post; let i = $index) {\n          <div class=\"resource-blog-card p-4\">\n            <pw-resource-edit-card-lazy\n              [canEdit]=\"canEditResourcesValue\"\n              [id]=\"post.id\"\n              [resourceData]=\"post\"\n              (updated)=\"getPosts(1, 100)\">\n            </pw-resource-edit-card-lazy>\n            <p class=\"resource-title\" [innerHTML]=\"post.title \"></p>\n            <a\n              [href]=\"post.external_url || ('/resources/view/' + post?.slug)\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              [attr.aria-label]=\"'Open resource card: ' + (post?.title || 'article')\"\n              >\n              <img\n                [src]=\"post.picture.url\"\n                class=\"img-fluid my-3 mt-auto\"\n                alt=\"Webinar\"\n                width=\"640\"\n                height=\"360\"\n                [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n                decoding=\"async\"\n              /></a>\n              @if (post?.external_url) {\n                <a\n                  class=\"resource-btn mt-3\"\n                  [href]=\"post.external_url\"\n                  [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">external</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            } @else {\n              <a class=\"resource-btn mt-3\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [href]=\"'/resources/view/' + post?.slug\" target=\"_blank\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">on site</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</section>",
+			template: "<section class=\"resource-vault-section bg-white\">\n  <div class=\"container\">\n    @if (isHeaderVisible) {\n      <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n        <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n          @if (!isEditingTitle) {\n            @if (resourceTitle) {\n              <span [innerHTML]=\"resourceTitle\"></span>\n            } @else {\n              Our team's articles\n            }\n            @if (!isRelated && canEditResourcesValue) {\n              <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleTagEditTitle()\" (keydown.enter)=\"toggleTagEditTitle()\" (keydown.space)=\"toggleTagEditTitle()\" title=\"Edit Title\"></i>\n            }\n          } @else {\n            <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_9056\" name=\"input_editedTitle_9056\"\n                aria-label=\"Input Edited Title 9056\" />\n            <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n            <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n          }\n        </h2>\n        <a class=\"view-all\" [routerLink]=\"resourceLink\">VIEW ALL ></a>\n      </div>\n    }\n\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (posts.length === 0 && isLoaded && !hasMorePosts && !isLoadingMore) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n\n    @if (posts.length !== 0 && isLoaded) {\n      <div class=\"row d-flex flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of posts; track post; let i = $index) {\n          <div class=\"resource-blog-card p-4\">\n            <pw-resource-edit-card-lazy\n              [canEdit]=\"canEditResourcesValue\"\n              [id]=\"post.id\"\n              [resourceData]=\"post\"\n              (updated)=\"loadPosts()\">\n            </pw-resource-edit-card-lazy>\n            <p class=\"resource-title\" [innerHTML]=\"post.title \"></p>\n            <a\n              [href]=\"post.external_url || ('/resources/view/' + post?.slug)\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              [attr.aria-label]=\"'Open resource card: ' + (post?.title || 'article')\"\n              >\n              <img\n                [src]=\"post.picture.url\"\n                class=\"img-fluid my-3 mt-auto\"\n                alt=\"Webinar\"\n                width=\"640\"\n                height=\"360\"\n                [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n                decoding=\"async\"\n              /></a>\n              @if (post?.external_url) {\n                <a\n                  class=\"resource-btn mt-3\"\n                  [href]=\"post.external_url\"\n                  [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">external</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            } @else {\n              <a class=\"resource-btn mt-3\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [href]=\"'/resources/view/' + post?.slug\" target=\"_blank\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">on site</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n      @if (isLoadingMore) {\n        <div class=\"w-100 text-center mt-3\">\n          <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n        </div>\n      }\n    }\n  </div>\n</section>",
 			styles: [".bold{font-weight:700}.resource-heading{margin-bottom:2rem}.resource-note{margin-top:1rem;font-size:.85rem;color:#555}.resource-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}.resource-vault-section{padding:60px 0;background:#fff;padding-bottom:9rem!important;padding-top:7rem!important;box-shadow:0 4px 32px -14px #40576d4d!important}.resource-vault-section .vault-heading{font-size:3rem;font-weight:300}.resource-vault-section .explore-link{color:#000;font-weight:400;text-decoration:none;font-size:1.5rem}.resource-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}.resource-vault-section .resource-blog-card h5{font-size:1.5rem;font-weight:400;margin-bottom:.5rem;color:var(--text-color, black)}.resource-vault-section .resource-blog-card p{font-size:1.5rem;color:var(--text-color, black);line-height:2rem}.resource-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}.resource-vault-section .resource-blog-card iframe{height:210px;border-radius:10px;object-fit:cover;margin-right:0!important;max-width:280px!important}.resource-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)}.resource-vault-section .resource-blog-card .resource-btn:hover{background:#fff;color:var(--text-color, black)!important}.resource-vault-section .vault-description{text-align:left;max-width:657px;color:#182527;line-height:2.3rem!important;font-size:1.65rem}@media(width<=1200px){.resource-vault-section .vault-heading{font-size:3.5rem}.resource-vault-section .vault-description{margin-top:1.35rem}.resource-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(max-width:768px){.resource-vault-section{padding-bottom:6rem!important}.resource-vault-section .container{padding-top:0rem!important;padding-bottom:0rem!important}.vault-header{text-align:center!important}.vault-heading{font-size:3rem!important}}@media(width<=1200px){.container{padding:7rem 3rem 1rem!important}}\n"],
 			dependencies: [
 				{
@@ -908,7 +994,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "pw-resource-cards",
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			standalone: false,
-			template: "<section class=\"resource-vault-section bg-white\">\n  <div class=\"container\">\n    @if (isHeaderVisible) {\n      <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n        <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n          @if (!isEditingTitle) {\n            @if (resourceTitle) {\n              <span [innerHTML]=\"resourceTitle\"></span>\n            } @else {\n              Our team's articles\n            }\n            @if (!isRelated && canEditResourcesValue) {\n              <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleTagEditTitle()\" (keydown.enter)=\"toggleTagEditTitle()\" (keydown.space)=\"toggleTagEditTitle()\" title=\"Edit Title\"></i>\n            }\n          } @else {\n            <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_9056\" name=\"input_editedTitle_9056\"\n                aria-label=\"Input Edited Title 9056\" />\n            <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n            <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n          }\n        </h2>\n        <a class=\"view-all\" [routerLink]=\"resourceLink\">VIEW ALL ></a>\n      </div>\n    }\n\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (posts.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n\n    @if (posts.length !== 0 && isLoaded) {\n      <div class=\"row d-flex flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of posts; track post; let i = $index) {\n          <div class=\"resource-blog-card p-4\">\n            <pw-resource-edit-card-lazy\n              [canEdit]=\"canEditResourcesValue\"\n              [id]=\"post.id\"\n              [resourceData]=\"post\"\n              (updated)=\"getPosts(1, 100)\">\n            </pw-resource-edit-card-lazy>\n            <p class=\"resource-title\" [innerHTML]=\"post.title \"></p>\n            <a\n              [href]=\"post.external_url || ('/resources/view/' + post?.slug)\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              [attr.aria-label]=\"'Open resource card: ' + (post?.title || 'article')\"\n              >\n              <img\n                [src]=\"post.picture.url\"\n                class=\"img-fluid my-3 mt-auto\"\n                alt=\"Webinar\"\n                width=\"640\"\n                height=\"360\"\n                [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n                decoding=\"async\"\n              /></a>\n              @if (post?.external_url) {\n                <a\n                  class=\"resource-btn mt-3\"\n                  [href]=\"post.external_url\"\n                  [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">external</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            } @else {\n              <a class=\"resource-btn mt-3\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [href]=\"'/resources/view/' + post?.slug\" target=\"_blank\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">on site</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</section>",
+			template: "<section class=\"resource-vault-section bg-white\">\n  <div class=\"container\">\n    @if (isHeaderVisible) {\n      <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n        <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n          @if (!isEditingTitle) {\n            @if (resourceTitle) {\n              <span [innerHTML]=\"resourceTitle\"></span>\n            } @else {\n              Our team's articles\n            }\n            @if (!isRelated && canEditResourcesValue) {\n              <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleTagEditTitle()\" (keydown.enter)=\"toggleTagEditTitle()\" (keydown.space)=\"toggleTagEditTitle()\" title=\"Edit Title\"></i>\n            }\n          } @else {\n            <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_9056\" name=\"input_editedTitle_9056\"\n                aria-label=\"Input Edited Title 9056\" />\n            <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n            <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n          }\n        </h2>\n        <a class=\"view-all\" [routerLink]=\"resourceLink\">VIEW ALL ></a>\n      </div>\n    }\n\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (posts.length === 0 && isLoaded && !hasMorePosts && !isLoadingMore) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n\n    @if (posts.length !== 0 && isLoaded) {\n      <div class=\"row d-flex flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of posts; track post; let i = $index) {\n          <div class=\"resource-blog-card p-4\">\n            <pw-resource-edit-card-lazy\n              [canEdit]=\"canEditResourcesValue\"\n              [id]=\"post.id\"\n              [resourceData]=\"post\"\n              (updated)=\"loadPosts()\">\n            </pw-resource-edit-card-lazy>\n            <p class=\"resource-title\" [innerHTML]=\"post.title \"></p>\n            <a\n              [href]=\"post.external_url || ('/resources/view/' + post?.slug)\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              [attr.aria-label]=\"'Open resource card: ' + (post?.title || 'article')\"\n              >\n              <img\n                [src]=\"post.picture.url\"\n                class=\"img-fluid my-3 mt-auto\"\n                alt=\"Webinar\"\n                width=\"640\"\n                height=\"360\"\n                [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n                decoding=\"async\"\n              /></a>\n              @if (post?.external_url) {\n                <a\n                  class=\"resource-btn mt-3\"\n                  [href]=\"post.external_url\"\n                  [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">external</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            } @else {\n              <a class=\"resource-btn mt-3\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [href]=\"'/resources/view/' + post?.slug\" target=\"_blank\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">on site</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n      @if (isLoadingMore) {\n        <div class=\"w-100 text-center mt-3\">\n          <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n        </div>\n      }\n    }\n  </div>\n</section>",
 			styles: [".bold{font-weight:700}.resource-heading{margin-bottom:2rem}.resource-note{margin-top:1rem;font-size:.85rem;color:#555}.resource-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}.resource-vault-section{padding:60px 0;background:#fff;padding-bottom:9rem!important;padding-top:7rem!important;box-shadow:0 4px 32px -14px #40576d4d!important}.resource-vault-section .vault-heading{font-size:3rem;font-weight:300}.resource-vault-section .explore-link{color:#000;font-weight:400;text-decoration:none;font-size:1.5rem}.resource-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}.resource-vault-section .resource-blog-card h5{font-size:1.5rem;font-weight:400;margin-bottom:.5rem;color:var(--text-color, black)}.resource-vault-section .resource-blog-card p{font-size:1.5rem;color:var(--text-color, black);line-height:2rem}.resource-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}.resource-vault-section .resource-blog-card iframe{height:210px;border-radius:10px;object-fit:cover;margin-right:0!important;max-width:280px!important}.resource-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)}.resource-vault-section .resource-blog-card .resource-btn:hover{background:#fff;color:var(--text-color, black)!important}.resource-vault-section .vault-description{text-align:left;max-width:657px;color:#182527;line-height:2.3rem!important;font-size:1.65rem}@media(width<=1200px){.resource-vault-section .vault-heading{font-size:3.5rem}.resource-vault-section .vault-description{margin-top:1.35rem}.resource-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(max-width:768px){.resource-vault-section{padding-bottom:6rem!important}.resource-vault-section .container{padding-top:0rem!important;padding-bottom:0rem!important}.vault-header{text-align:center!important}.vault-heading{font-size:3rem!important}}@media(width<=1200px){.container{padding:7rem 3rem 1rem!important}}\n"]
 		}]
 	}],
@@ -928,7 +1014,11 @@ i0.ɵɵngDeclareClassMetadata({
 		tag: [{ type: Input }],
 		resourceLink: [{ type: Input }],
 		user: [{ type: Input }],
-		userLoggedIn: [{ type: Input }]
+		userLoggedIn: [{ type: Input }],
+		onWindowScroll: [{
+			type: HostListener,
+			args: ["window:scroll"]
+		}]
 	}
 });
 var BaseResourceComponent = class BaseResourceComponent extends AppBaseComponent {
@@ -1095,26 +1185,35 @@ var ResourceVaultComponent = class ResourceVaultComponent extends BaseResourceCo
 		this.showVaultSection = false;
 		this.postSlice = false;
 		this.isLoadedChange = new EventEmitter();
+		this.isLoadingMore = false;
 		this.isEditingTitle = false;
 	}
 	ngOnInit() {
 		super.ngOnInit();
-		this.getPosts(1, 10);
+		this.getPosts();
 	}
 	getResourceType() {
 		return "Vault";
 	}
-	getPosts(page, pageSize) {
-		this.isLoaded = false;
-		this.resourceService.getPublicPosts(this.getEffectiveSubscriptionId(), page, pageSize, "", this.categoryId).subscribe((response) => {
-			const sortedPosts = (response.posts ?? []).filter((post) => post.showcase === true).sort((a, b) => new Date(b.published_at).getTime() - new Date(a.published_at).getTime());
-			this.posts = this.postSlice ? sortedPosts : [...sortedPosts].slice(0, 3);
-			this.cdr.markForCheck();
-		}).add(() => {
-			this.isLoaded = true;
-			this.isLoadedChange.emit(this.isLoaded);
-			this.cdr.markForCheck();
-		});
+	getPosts() {
+		this.pager = ResourcePager.forPublicPosts(this.resourceService, () => ({
+			subscriptionId: this.getEffectiveSubscriptionId(),
+			tagCategoryIds: this.categoryId
+		}), () => this.syncFromPager(), (post) => post.showcase === true, this.postSlice ? 15 : 3);
+		this.pager.reset();
+	}
+	onWindowScroll() {
+		if (this.postSlice) this.pager?.loadMoreIfNearBottom();
+	}
+	syncFromPager() {
+		this.posts = this.pager.items;
+		this.isLoaded = this.pager.isLoaded;
+		this.isLoadingMore = this.pager.isLoadingMore;
+		if (this.isLoaded && this.announcedPager !== this.pager) {
+			this.announcedPager = this.pager;
+			this.isLoadedChange.emit(true);
+		}
+		this.cdr.markForCheck();
 	}
 	toggleEditTitle() {
 		this.isEditingTitle = true;
@@ -1158,9 +1257,10 @@ var ResourceVaultComponent = class ResourceVaultComponent extends BaseResourceCo
 				tag: "tag"
 			},
 			outputs: { isLoadedChange: "isLoadedChange" },
+			host: { listeners: { "window:scroll": "onWindowScroll()" } },
 			usesInheritance: true,
 			ngImport: i0,
-			template: "<section class=\"resource-vault-section bg-white text-center py-5 extra-top-padding section-outer\">\n  <div class=\"container\">\n    @if (showVaultSection) {\n      <div class=\"d-flex justify-content-between align-items-center flex-wrap mb-5\">\n        <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n          @if (!isEditingTitle) {\n            @if (resourceTitle) {\n              <span [innerHTML]=\"resourceTitle\"></span>\n            } @else {\n              Whitepapers &amp; Tools\n            }\n            @if (canEditResourcesValue) {\n              <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleEditTitle()\" (keydown.enter)=\"toggleEditTitle()\" (keydown.space)=\"toggleEditTitle()\" title=\"Edit Title\"></i>\n            }\n          } @else {\n            <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_9216\" name=\"input_editedTitle_9216\"\n                aria-label=\"Input Edited Title 9216\" />\n            <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n            <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n          }\n        </h2>\n        <a class=\"view-all\" routerLink=\"/resources/white-papers\">VIEW ALL ></a>\n      </div>\n    }\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (posts.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n    @if (posts.length !== 0 && isLoaded) {\n      <div class=\"d-flex mt-2 flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of posts; track post) {\n          <div class=\"resource-blog-card text-center p-4\">\n            <pw-resource-edit-card-lazy\n              [canEdit]=\"canEditResourcesValue\"\n              [id]=\"post.id\"\n              [resourceData]=\"post\"\n              (updated)=\"getPosts(1, 100)\">\n            </pw-resource-edit-card-lazy>\n            <p class=\"mb-4\" [innerHTML]=\"post.title\"></p>\n            <a\n              [href]=\"post.external_url || ('/resources/view/' + post?.slug)\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              [attr.aria-label]=\"'Open resource card: ' + (post?.title || 'article')\"\n              >\n              <img\n                [src]=\"post.picture.url\"\n                class=\"img-fluid my-3 mt-auto\"\n                alt=\"Webinar\"\n                loading=\"lazy\"\n                />\n            </a>\n            @if (post?.external_url) {\n              <a\n                class=\"resource-btn mt-3\"\n                [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                [href]=\"post.external_url\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">external</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            } @else {\n              <a class=\"resource-btn mt-3\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [href]=\"'/resources/view/' + post?.slug\" target=\"_blank\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">on site</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</section>\n",
+			template: "<section class=\"resource-vault-section bg-white text-center py-5 extra-top-padding section-outer\">\n  <div class=\"container\">\n    @if (showVaultSection) {\n      <div class=\"d-flex justify-content-between align-items-center flex-wrap mb-5\">\n        <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n          @if (!isEditingTitle) {\n            @if (resourceTitle) {\n              <span [innerHTML]=\"resourceTitle\"></span>\n            } @else {\n              Whitepapers &amp; Tools\n            }\n            @if (canEditResourcesValue) {\n              <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleEditTitle()\" (keydown.enter)=\"toggleEditTitle()\" (keydown.space)=\"toggleEditTitle()\" title=\"Edit Title\"></i>\n            }\n          } @else {\n            <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_9216\" name=\"input_editedTitle_9216\"\n                aria-label=\"Input Edited Title 9216\" />\n            <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n            <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n          }\n        </h2>\n        <a class=\"view-all\" routerLink=\"/resources/white-papers\">VIEW ALL ></a>\n      </div>\n    }\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (posts.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n    @if (posts.length !== 0 && isLoaded) {\n      <div class=\"d-flex mt-2 flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of posts; track post) {\n          <div class=\"resource-blog-card text-center p-4\">\n            <pw-resource-edit-card-lazy\n              [canEdit]=\"canEditResourcesValue\"\n              [id]=\"post.id\"\n              [resourceData]=\"post\"\n              (updated)=\"loadPosts()\">\n            </pw-resource-edit-card-lazy>\n            <p class=\"mb-4\" [innerHTML]=\"post.title\"></p>\n            <a\n              [href]=\"post.external_url || ('/resources/view/' + post?.slug)\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              [attr.aria-label]=\"'Open resource card: ' + (post?.title || 'article')\"\n              >\n              <img\n                [src]=\"post.picture.url\"\n                class=\"img-fluid my-3 mt-auto\"\n                alt=\"Webinar\"\n                loading=\"lazy\"\n                />\n            </a>\n            @if (post?.external_url) {\n              <a\n                class=\"resource-btn mt-3\"\n                [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                [href]=\"post.external_url\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">external</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            } @else {\n              <a class=\"resource-btn mt-3\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [href]=\"'/resources/view/' + post?.slug\" target=\"_blank\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">on site</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n    }\n    @if (isLoadingMore) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n  </div>\n</section>\n",
 			styles: [".bold{font-weight:700}.resource-heading{margin-bottom:2rem}.resource-note{margin-top:1rem;font-size:.85rem;color:#555}.resource-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}.resource-vault-section{padding:60px 0;background:#fff;padding-bottom:9rem!important;padding-top:7rem!important;box-shadow:0 4px 32px -14px #40576d4d!important}.resource-vault-section .vault-heading{font-size:3rem;font-weight:300}.resource-vault-section .explore-link{color:#000;font-weight:400;text-decoration:none;font-size:1.5rem}.resource-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}.resource-vault-section .resource-blog-card h5{font-size:1.5rem;font-weight:400;margin-bottom:.5rem;color:var(--text-color, black)}.resource-vault-section .resource-blog-card p{font-size:1.5rem;color:var(--text-color, black);line-height:2rem}.resource-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}.resource-vault-section .resource-blog-card iframe{height:210px;border-radius:10px;object-fit:cover;margin-right:0!important;max-width:280px!important}.resource-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)}.resource-vault-section .resource-blog-card .resource-btn:hover{background:#fff;color:var(--text-color, black)!important}.resource-vault-section .vault-description{text-align:left;max-width:657px;color:#182527;line-height:2.3rem!important;font-size:1.65rem}@media(width<=1200px){.resource-vault-section .vault-heading{font-size:3.5rem}.resource-vault-section .vault-description{margin-top:1.35rem}.resource-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(max-width:768px){.resource-vault-section{padding-bottom:6rem!important}.resource-vault-section .container{padding-top:0rem!important;padding-bottom:0rem!important}.vault-header{text-align:center!important}.vault-heading{font-size:3rem!important}}@media(width<=1200px){.container{padding:7rem 3rem 1rem!important}}\n"],
 			dependencies: [
 				{
@@ -1272,7 +1372,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "pw-resource--vault",
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			standalone: false,
-			template: "<section class=\"resource-vault-section bg-white text-center py-5 extra-top-padding section-outer\">\n  <div class=\"container\">\n    @if (showVaultSection) {\n      <div class=\"d-flex justify-content-between align-items-center flex-wrap mb-5\">\n        <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n          @if (!isEditingTitle) {\n            @if (resourceTitle) {\n              <span [innerHTML]=\"resourceTitle\"></span>\n            } @else {\n              Whitepapers &amp; Tools\n            }\n            @if (canEditResourcesValue) {\n              <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleEditTitle()\" (keydown.enter)=\"toggleEditTitle()\" (keydown.space)=\"toggleEditTitle()\" title=\"Edit Title\"></i>\n            }\n          } @else {\n            <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_9216\" name=\"input_editedTitle_9216\"\n                aria-label=\"Input Edited Title 9216\" />\n            <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n            <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n          }\n        </h2>\n        <a class=\"view-all\" routerLink=\"/resources/white-papers\">VIEW ALL ></a>\n      </div>\n    }\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (posts.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n    @if (posts.length !== 0 && isLoaded) {\n      <div class=\"d-flex mt-2 flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of posts; track post) {\n          <div class=\"resource-blog-card text-center p-4\">\n            <pw-resource-edit-card-lazy\n              [canEdit]=\"canEditResourcesValue\"\n              [id]=\"post.id\"\n              [resourceData]=\"post\"\n              (updated)=\"getPosts(1, 100)\">\n            </pw-resource-edit-card-lazy>\n            <p class=\"mb-4\" [innerHTML]=\"post.title\"></p>\n            <a\n              [href]=\"post.external_url || ('/resources/view/' + post?.slug)\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              [attr.aria-label]=\"'Open resource card: ' + (post?.title || 'article')\"\n              >\n              <img\n                [src]=\"post.picture.url\"\n                class=\"img-fluid my-3 mt-auto\"\n                alt=\"Webinar\"\n                loading=\"lazy\"\n                />\n            </a>\n            @if (post?.external_url) {\n              <a\n                class=\"resource-btn mt-3\"\n                [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                [href]=\"post.external_url\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">external</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            } @else {\n              <a class=\"resource-btn mt-3\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [href]=\"'/resources/view/' + post?.slug\" target=\"_blank\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">on site</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</section>\n",
+			template: "<section class=\"resource-vault-section bg-white text-center py-5 extra-top-padding section-outer\">\n  <div class=\"container\">\n    @if (showVaultSection) {\n      <div class=\"d-flex justify-content-between align-items-center flex-wrap mb-5\">\n        <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n          @if (!isEditingTitle) {\n            @if (resourceTitle) {\n              <span [innerHTML]=\"resourceTitle\"></span>\n            } @else {\n              Whitepapers &amp; Tools\n            }\n            @if (canEditResourcesValue) {\n              <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleEditTitle()\" (keydown.enter)=\"toggleEditTitle()\" (keydown.space)=\"toggleEditTitle()\" title=\"Edit Title\"></i>\n            }\n          } @else {\n            <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_9216\" name=\"input_editedTitle_9216\"\n                aria-label=\"Input Edited Title 9216\" />\n            <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n            <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n          }\n        </h2>\n        <a class=\"view-all\" routerLink=\"/resources/white-papers\">VIEW ALL ></a>\n      </div>\n    }\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (posts.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n    @if (posts.length !== 0 && isLoaded) {\n      <div class=\"d-flex mt-2 flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of posts; track post) {\n          <div class=\"resource-blog-card text-center p-4\">\n            <pw-resource-edit-card-lazy\n              [canEdit]=\"canEditResourcesValue\"\n              [id]=\"post.id\"\n              [resourceData]=\"post\"\n              (updated)=\"loadPosts()\">\n            </pw-resource-edit-card-lazy>\n            <p class=\"mb-4\" [innerHTML]=\"post.title\"></p>\n            <a\n              [href]=\"post.external_url || ('/resources/view/' + post?.slug)\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              [attr.aria-label]=\"'Open resource card: ' + (post?.title || 'article')\"\n              >\n              <img\n                [src]=\"post.picture.url\"\n                class=\"img-fluid my-3 mt-auto\"\n                alt=\"Webinar\"\n                loading=\"lazy\"\n                />\n            </a>\n            @if (post?.external_url) {\n              <a\n                class=\"resource-btn mt-3\"\n                [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                [href]=\"post.external_url\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">external</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            } @else {\n              <a class=\"resource-btn mt-3\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [href]=\"'/resources/view/' + post?.slug\" target=\"_blank\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">on site</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n    }\n    @if (isLoadingMore) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n  </div>\n</section>\n",
 			styles: [".bold{font-weight:700}.resource-heading{margin-bottom:2rem}.resource-note{margin-top:1rem;font-size:.85rem;color:#555}.resource-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}.resource-vault-section{padding:60px 0;background:#fff;padding-bottom:9rem!important;padding-top:7rem!important;box-shadow:0 4px 32px -14px #40576d4d!important}.resource-vault-section .vault-heading{font-size:3rem;font-weight:300}.resource-vault-section .explore-link{color:#000;font-weight:400;text-decoration:none;font-size:1.5rem}.resource-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}.resource-vault-section .resource-blog-card h5{font-size:1.5rem;font-weight:400;margin-bottom:.5rem;color:var(--text-color, black)}.resource-vault-section .resource-blog-card p{font-size:1.5rem;color:var(--text-color, black);line-height:2rem}.resource-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}.resource-vault-section .resource-blog-card iframe{height:210px;border-radius:10px;object-fit:cover;margin-right:0!important;max-width:280px!important}.resource-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)}.resource-vault-section .resource-blog-card .resource-btn:hover{background:#fff;color:var(--text-color, black)!important}.resource-vault-section .vault-description{text-align:left;max-width:657px;color:#182527;line-height:2.3rem!important;font-size:1.65rem}@media(width<=1200px){.resource-vault-section .vault-heading{font-size:3.5rem}.resource-vault-section .vault-description{margin-top:1.35rem}.resource-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(max-width:768px){.resource-vault-section{padding-bottom:6rem!important}.resource-vault-section .container{padding-top:0rem!important;padding-bottom:0rem!important}.vault-header{text-align:center!important}.vault-heading{font-size:3rem!important}}@media(width<=1200px){.container{padding:7rem 3rem 1rem!important}}\n"]
 		}]
 	}],
@@ -1289,10 +1389,23 @@ i0.ɵɵngDeclareClassMetadata({
 		categoryId: [{ type: Input }],
 		resourceTitle: [{ type: Input }],
 		tag: [{ type: Input }],
-		isLoadedChange: [{ type: Output }]
+		isLoadedChange: [{ type: Output }],
+		onWindowScroll: [{
+			type: HostListener,
+			args: ["window:scroll"]
+		}]
 	}
 });
 var ResourceVideoCardComponent = class ResourceVideoCardComponent extends AppBaseComponent {
+	get posts() {
+		return this.pager?.items ?? [];
+	}
+	get isLoaded() {
+		return this.pager?.isLoaded ?? false;
+	}
+	get isLoadingMore() {
+		return this.pager?.isLoadingMore ?? false;
+	}
 	constructor(sanitizer, resourceService, tagService, cdr, injector) {
 		super(injector);
 		this.sanitizer = sanitizer;
@@ -1303,8 +1416,6 @@ var ResourceVideoCardComponent = class ResourceVideoCardComponent extends AppBas
 		this.postSlice = false;
 		this.canEditResourcesValue = false;
 		this.masterSubscriptionId = this.appConfig.master_subscription.subscription_id;
-		this.posts = [];
-		this.isLoaded = false;
 		this.videoStates = {};
 		this.isEditingTitle = false;
 	}
@@ -1314,7 +1425,7 @@ var ResourceVideoCardComponent = class ResourceVideoCardComponent extends AppBas
 			this.subscriptionId = data?.subscriptionId;
 			this.cdr.markForCheck();
 		});
-		this.getPosts(1, 10);
+		this.loadPosts();
 	}
 	ngOnChanges(changes) {
 		if (changes["user"] || changes["userLoggedIn"]) {
@@ -1328,21 +1439,25 @@ var ResourceVideoCardComponent = class ResourceVideoCardComponent extends AppBas
 		externalUrl += externalUrl.includes("?") ? "&autoplay=1" : "?autoplay=1";
 		this.videoStates[slug].url = this.sanitizer.bypassSecurityTrustResourceUrl(externalUrl);
 	}
-	getPosts(page, pageSize) {
-		this.isLoaded = false;
-		this.resourceService.getPublicPosts(this.getEffectiveSubscriptionId(), page, pageSize, "", this.categoryId).subscribe((response) => {
-			const sortedPosts = (response.posts ?? []).filter((post) => post.showcase === true).sort((a, b) => new Date(b.published_at).getTime() - new Date(a.published_at).getTime());
-			this.posts = this.postSlice ? sortedPosts : [...sortedPosts].slice(0, 3);
-			this.posts.forEach((post) => {
-				if (post.external_url) this.videoStates[post.slug] = {
-					loaded: true,
-					url: this.sanitizer.bypassSecurityTrustResourceUrl(post.external_url)
-				};
-			});
-			this.cdr.markForCheck();
-		}).add(() => {
-			this.isLoaded = true;
+	loadPosts() {
+		this.pager = ResourcePager.forPublicPosts(this.resourceService, () => ({
+			subscriptionId: this.getEffectiveSubscriptionId(),
+			tagCategoryIds: this.categoryId
+		}), () => {
+			this.syncVideoStates();
 			this.cdr.markForCheck();
+		}, (post) => post.showcase === true, this.postSlice ? 15 : 3);
+		this.pager.reset();
+	}
+	onWindowScroll() {
+		if (this.postSlice) this.pager?.loadMoreIfNearBottom();
+	}
+	syncVideoStates() {
+		this.posts.forEach((post) => {
+			if (post.external_url && !this.videoStates[post.slug]) this.videoStates[post.slug] = {
+				loaded: true,
+				url: this.sanitizer.bypassSecurityTrustResourceUrl(post.external_url)
+			};
 		});
 	}
 	toggleTagEditTitle() {
@@ -1400,10 +1515,11 @@ var ResourceVideoCardComponent = class ResourceVideoCardComponent extends AppBas
 				user: "user",
 				userLoggedIn: "userLoggedIn"
 			},
+			host: { listeners: { "window:scroll": "onWindowScroll()" } },
 			usesInheritance: true,
 			usesOnChanges: true,
 			ngImport: i0,
-			template: "<section class=\"resource-vault-section bg-white text-center py-5 extra-top-padding section-outer\">\n  <div class=\"container\">\n    @if (showVideoSection) {\n      <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n        <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n          @if (!isEditingTitle) {\n            @if (resourceTitle) {\n              <span [innerHTML]=\"resourceTitle\"></span>\n            } @else {\n              On-Demand Videos\n            }\n            @if (canEditResourcesValue) {\n              <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleTagEditTitle()\" (keydown.enter)=\"toggleTagEditTitle()\" (keydown.space)=\"toggleTagEditTitle()\" title=\"Edit Title\"></i>\n            }\n          } @else {\n            <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_9216\" name=\"input_editedTitle_9216\"\n                aria-label=\"Input Edited Title 9216\" />\n            <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n            <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n          }\n        </h2>\n        <a class=\"view-all\" routerLink=\"/resources/videos\">VIEW ALL ></a>\n      </div>\n    }\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (posts.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n    @if (posts.length !== 0 && isLoaded) {\n      <div class=\"row mt-5 d-flex flex-wrap justify-content-center video-row\">\n        @for (post of posts; track trackByPostId($index, post); let i = $index) {\n          <div class=\"resource-blog-card\">\n            <pw-resource-edit-card-lazy\n              [canEdit]=\"canEditResourcesValue\"\n              [id]=\"post.id\"\n              [resourceData]=\"post\"\n              (updated)=\"getPosts(1, 10)\">\n            </pw-resource-edit-card-lazy>\n            <p [innerHTML]=\"post.title\" class=\"mb-5\"></p>\n            <a [href]=\" post.external_url\"  target=\"_blank\">\n              <img\n                [src]=\"post.picture?.url\"\n                class=\"img-fluid mb-3\"\n                [alt]=\"post.title\"\n                width=\"640\"\n                height=\"360\"\n                [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n                decoding=\"async\" />\n            </a>\n            <a class=\"resource-btn mt-3\" [href]=\" post.external_url\" target=\"_blank\">\n              <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Watch now'  }}</span>\n              <span class=\"arrow\">→</span>\n            </a>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n</section>\n",
+			template: "<section class=\"resource-vault-section bg-white text-center py-5 extra-top-padding section-outer\">\n  <div class=\"container\">\n    @if (showVideoSection) {\n      <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n        <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n          @if (!isEditingTitle) {\n            @if (resourceTitle) {\n              <span [innerHTML]=\"resourceTitle\"></span>\n            } @else {\n              On-Demand Videos\n            }\n            @if (canEditResourcesValue) {\n              <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleTagEditTitle()\" (keydown.enter)=\"toggleTagEditTitle()\" (keydown.space)=\"toggleTagEditTitle()\" title=\"Edit Title\"></i>\n            }\n          } @else {\n            <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_9216\" name=\"input_editedTitle_9216\"\n                aria-label=\"Input Edited Title 9216\" />\n            <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n            <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n          }\n        </h2>\n        <a class=\"view-all\" routerLink=\"/resources/videos\">VIEW ALL ></a>\n      </div>\n    }\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (posts.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n    @if (posts.length !== 0 && isLoaded) {\n      <div class=\"row mt-5 d-flex flex-wrap justify-content-center video-row\">\n        @for (post of posts; track trackByPostId($index, post); let i = $index) {\n          <div class=\"resource-blog-card\">\n            <pw-resource-edit-card-lazy\n              [canEdit]=\"canEditResourcesValue\"\n              [id]=\"post.id\"\n              [resourceData]=\"post\"\n              (updated)=\"loadPosts()\">\n            </pw-resource-edit-card-lazy>\n            <p [innerHTML]=\"post.title\" class=\"mb-5\"></p>\n            <a [href]=\" post.external_url\"  target=\"_blank\">\n              <img\n                [src]=\"post.picture?.url\"\n                class=\"img-fluid mb-3\"\n                [alt]=\"post.title\"\n                width=\"640\"\n                height=\"360\"\n                [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n                decoding=\"async\" />\n            </a>\n            <a class=\"resource-btn mt-3\" [href]=\" post.external_url\" target=\"_blank\">\n              <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Watch now'  }}</span>\n              <span class=\"arrow\">→</span>\n            </a>\n          </div>\n        }\n      </div>\n    }\n    @if (isLoadingMore) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n  </div>\n\n</section>\n",
 			styles: [".bold{font-weight:700}.resource-heading{margin-bottom:2rem}.resource-note{margin-top:1rem;font-size:.85rem;color:#555}.resource-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}.resource-vault-section{padding:60px 0;background:#fff;padding-bottom:9rem!important;padding-top:7rem!important;box-shadow:0 4px 32px -14px #40576d4d!important}.resource-vault-section .vault-heading{font-size:3rem;font-weight:300}.resource-vault-section .explore-link{color:#000;font-weight:400;text-decoration:none;font-size:1.5rem}.resource-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}.resource-vault-section .resource-blog-card h5{font-size:1.5rem;font-weight:400;margin-bottom:.5rem;color:var(--text-color, black)}.resource-vault-section .resource-blog-card p{font-size:1.5rem;color:var(--text-color, black);line-height:2rem}.resource-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}.resource-vault-section .resource-blog-card iframe{height:210px;border-radius:10px;object-fit:cover;margin-right:0!important;max-width:280px!important}.resource-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)}.resource-vault-section .resource-blog-card .resource-btn:hover{background:#fff;color:var(--text-color, black)!important}.resource-vault-section .vault-description{text-align:left;max-width:657px;color:#182527;line-height:2.3rem!important;font-size:1.65rem}@media(width<=1200px){.resource-vault-section .vault-heading{font-size:3.5rem}.resource-vault-section .vault-description{margin-top:1.35rem}.resource-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(max-width:768px){.resource-vault-section{padding-bottom:6rem!important}.resource-vault-section .container{padding-top:0rem!important;padding-bottom:0rem!important}.vault-header{text-align:center!important}.vault-heading{font-size:3rem!important}}@media(width<=1200px){.container{padding:7rem 3rem 1rem!important}}\n"],
 			dependencies: [
 				{
@@ -1515,7 +1631,7 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "pw-resource-video-card",
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			standalone: false,
-			template: "<section class=\"resource-vault-section bg-white text-center py-5 extra-top-padding section-outer\">\n  <div class=\"container\">\n    @if (showVideoSection) {\n      <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n        <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n          @if (!isEditingTitle) {\n            @if (resourceTitle) {\n              <span [innerHTML]=\"resourceTitle\"></span>\n            } @else {\n              On-Demand Videos\n            }\n            @if (canEditResourcesValue) {\n              <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleTagEditTitle()\" (keydown.enter)=\"toggleTagEditTitle()\" (keydown.space)=\"toggleTagEditTitle()\" title=\"Edit Title\"></i>\n            }\n          } @else {\n            <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_9216\" name=\"input_editedTitle_9216\"\n                aria-label=\"Input Edited Title 9216\" />\n            <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n            <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n          }\n        </h2>\n        <a class=\"view-all\" routerLink=\"/resources/videos\">VIEW ALL ></a>\n      </div>\n    }\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (posts.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n    @if (posts.length !== 0 && isLoaded) {\n      <div class=\"row mt-5 d-flex flex-wrap justify-content-center video-row\">\n        @for (post of posts; track trackByPostId($index, post); let i = $index) {\n          <div class=\"resource-blog-card\">\n            <pw-resource-edit-card-lazy\n              [canEdit]=\"canEditResourcesValue\"\n              [id]=\"post.id\"\n              [resourceData]=\"post\"\n              (updated)=\"getPosts(1, 10)\">\n            </pw-resource-edit-card-lazy>\n            <p [innerHTML]=\"post.title\" class=\"mb-5\"></p>\n            <a [href]=\" post.external_url\"  target=\"_blank\">\n              <img\n                [src]=\"post.picture?.url\"\n                class=\"img-fluid mb-3\"\n                [alt]=\"post.title\"\n                width=\"640\"\n                height=\"360\"\n                [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n                decoding=\"async\" />\n            </a>\n            <a class=\"resource-btn mt-3\" [href]=\" post.external_url\" target=\"_blank\">\n              <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Watch now'  }}</span>\n              <span class=\"arrow\">→</span>\n            </a>\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n</section>\n",
+			template: "<section class=\"resource-vault-section bg-white text-center py-5 extra-top-padding section-outer\">\n  <div class=\"container\">\n    @if (showVideoSection) {\n      <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n        <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n          @if (!isEditingTitle) {\n            @if (resourceTitle) {\n              <span [innerHTML]=\"resourceTitle\"></span>\n            } @else {\n              On-Demand Videos\n            }\n            @if (canEditResourcesValue) {\n              <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleTagEditTitle()\" (keydown.enter)=\"toggleTagEditTitle()\" (keydown.space)=\"toggleTagEditTitle()\" title=\"Edit Title\"></i>\n            }\n          } @else {\n            <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_9216\" name=\"input_editedTitle_9216\"\n                aria-label=\"Input Edited Title 9216\" />\n            <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n            <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n          }\n        </h2>\n        <a class=\"view-all\" routerLink=\"/resources/videos\">VIEW ALL ></a>\n      </div>\n    }\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (posts.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n    @if (posts.length !== 0 && isLoaded) {\n      <div class=\"row mt-5 d-flex flex-wrap justify-content-center video-row\">\n        @for (post of posts; track trackByPostId($index, post); let i = $index) {\n          <div class=\"resource-blog-card\">\n            <pw-resource-edit-card-lazy\n              [canEdit]=\"canEditResourcesValue\"\n              [id]=\"post.id\"\n              [resourceData]=\"post\"\n              (updated)=\"loadPosts()\">\n            </pw-resource-edit-card-lazy>\n            <p [innerHTML]=\"post.title\" class=\"mb-5\"></p>\n            <a [href]=\" post.external_url\"  target=\"_blank\">\n              <img\n                [src]=\"post.picture?.url\"\n                class=\"img-fluid mb-3\"\n                [alt]=\"post.title\"\n                width=\"640\"\n                height=\"360\"\n                [attr.loading]=\"i === 0 ? 'eager' : 'lazy'\"\n                [attr.fetchpriority]=\"i === 0 ? 'high' : null\"\n                decoding=\"async\" />\n            </a>\n            <a class=\"resource-btn mt-3\" [href]=\" post.external_url\" target=\"_blank\">\n              <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Watch now'  }}</span>\n              <span class=\"arrow\">→</span>\n            </a>\n          </div>\n        }\n      </div>\n    }\n    @if (isLoadingMore) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n  </div>\n\n</section>\n",
 			styles: [".bold{font-weight:700}.resource-heading{margin-bottom:2rem}.resource-note{margin-top:1rem;font-size:.85rem;color:#555}.resource-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}.resource-vault-section{padding:60px 0;background:#fff;padding-bottom:9rem!important;padding-top:7rem!important;box-shadow:0 4px 32px -14px #40576d4d!important}.resource-vault-section .vault-heading{font-size:3rem;font-weight:300}.resource-vault-section .explore-link{color:#000;font-weight:400;text-decoration:none;font-size:1.5rem}.resource-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}.resource-vault-section .resource-blog-card h5{font-size:1.5rem;font-weight:400;margin-bottom:.5rem;color:var(--text-color, black)}.resource-vault-section .resource-blog-card p{font-size:1.5rem;color:var(--text-color, black);line-height:2rem}.resource-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}.resource-vault-section .resource-blog-card iframe{height:210px;border-radius:10px;object-fit:cover;margin-right:0!important;max-width:280px!important}.resource-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)}.resource-vault-section .resource-blog-card .resource-btn:hover{background:#fff;color:var(--text-color, black)!important}.resource-vault-section .vault-description{text-align:left;max-width:657px;color:#182527;line-height:2.3rem!important;font-size:1.65rem}@media(width<=1200px){.resource-vault-section .vault-heading{font-size:3.5rem}.resource-vault-section .vault-description{margin-top:1.35rem}.resource-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(max-width:768px){.resource-vault-section{padding-bottom:6rem!important}.resource-vault-section .container{padding-top:0rem!important;padding-bottom:0rem!important}.vault-header{text-align:center!important}.vault-heading{font-size:3rem!important}}@media(width<=1200px){.container{padding:7rem 3rem 1rem!important}}\n"]
 		}]
 	}],
@@ -1533,23 +1649,25 @@ i0.ɵɵngDeclareClassMetadata({
 		postSlice: [{ type: Input }],
 		resourceTitle: [{ type: Input }],
 		user: [{ type: Input }],
-		userLoggedIn: [{ type: Input }]
+		userLoggedIn: [{ type: Input }],
+		onWindowScroll: [{
+			type: HostListener,
+			args: ["window:scroll"]
+		}]
 	}
 });
-var UpcomingEventCardComponent = class UpcomingEventCardComponent extends AppBaseComponent {
+var ReplayEventCardComponent = class ReplayEventCardComponent extends AppBaseComponent {
 	constructor(resourceService, tagService, cdr, injector) {
 		super(injector);
 		this.resourceService = resourceService;
 		this.tagService = tagService;
 		this.cdr = cdr;
 		this.showEventContent = false;
-		this.postSlice = false;
 		this.canEditResourcesValue = false;
-		this.now = Date.now();
-		this.isEditingTitle = false;
 		this.masterSubscriptionId = this.appConfig.master_subscription.subscription_id;
 		this.posts = [];
 		this.isLoaded = false;
+		this.isLoadingMore = false;
 	}
 	ngOnInit() {
 		if (this.userLoggedIn) {
@@ -1569,27 +1687,220 @@ var UpcomingEventCardComponent = class UpcomingEventCardComponent extends AppBas
 	getPostTags() {
 		this.tagService.getTagsByType("post_categories", {}, this.getEffectiveSubscriptionId()).subscribe((response) => {
 			this.blogPostTag = response.tags.find((tag) => tag.name === "Events");
-			if (this.blogPostTag?.tag_category_id) {
-				if (this.postSlice) this.getPosts(1, 100);
-				else this.getAllPosts(1, 100);
-			} else {
-				this.isLoaded = true;
-				this.cdr.markForCheck();
-			}
+			if (this.blogPostTag?.tag_category_id) this.loadReplays();
+			else this.isLoaded = true;
 			this.cdr.markForCheck();
 		});
 	}
-	getPosts(page, pageSize) {
+	loadReplays() {
+		this.pager = ResourcePager.forPublicPosts(this.resourceService, () => ({
+			subscriptionId: this.getEffectiveSubscriptionId(),
+			tagCategoryIds: this.blogPostTag?.tag_category_id
+		}), () => this.syncFromPager(), (post) => post.showcase === true && new Date(post?.when).getTime() < Date.now());
+		this.pager.reset();
+	}
+	syncFromPager() {
+		this.posts = this.pager.items;
+		this.isLoaded = this.pager.isLoaded;
+		this.isLoadingMore = this.pager.isLoadingMore;
+		this.cdr.markForCheck();
+	}
+	getEffectiveSubscriptionId() {
+		return HelperService.getEffectiveSubscriptionId(this.user, this.subscriptionId, this.masterSubscriptionId);
+	}
+	updateCanEditResourcesValue() {
+		this.canEditResourcesValue = HelperService.canEditResources(this.user, this.userLoggedIn, this.permissionService);
+	}
+	canEditResources() {
+		return this.canEditResourcesValue;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.0",
+			ngImport: i0,
+			type: ReplayEventCardComponent,
+			deps: [
+				{ token: ResourceService },
+				{ token: i2.TagService },
+				{ token: i0.ChangeDetectorRef },
+				{ token: i0.Injector }
+			],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.0",
+			type: ReplayEventCardComponent,
+			isStandalone: false,
+			selector: "pw-replay-event-card",
+			inputs: {
+				showEventContent: "showEventContent",
+				categoryId: "categoryId",
+				resourceTitle: "resourceTitle",
+				user: "user",
+				userLoggedIn: "userLoggedIn"
+			},
+			usesInheritance: true,
+			usesOnChanges: true,
+			ngImport: i0,
+			template: "<section class=\"resource-vault-section bg-white text-center py-5 extra-top-padding section-outer\">\n  <div class=\"container\">\n    <div class=\"d-md-flex justify-content-between align-items-start\">\n      <div class=\"vault-header\">\n        @if (resourceTitle) {\n          <h2 class=\"vault-heading\">{{resourceTitle}} Replays</h2>\n        } @else {\n          <h2 class=\"vault-heading\">Events &amp; Webinars Replays</h2>\n        }\n      </div>\n    </div>\n\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (posts.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n\n    @if (posts.length !== 0 && isLoaded) {\n      <div class=\"row mt-5 d-flex flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of posts; track post) {\n          <div class=\"resource-blog-card vault-card text-center p-4\">\n            <pw-resource-edit-card-lazy\n              [canEdit]=\"canEditResourcesValue\"\n              [id]=\"post.id\"\n              [resourceData]=\"post\"\n              (updated)=\"loadReplays()\">\n            </pw-resource-edit-card-lazy>\n            <h5 class=\"badge-title fw-bold\">REPLAY:</h5>\n            <p class=\"event-title mb-4\" [innerHtml]=\"post?.title\"></p>\n            <img\n              [src]=\"post.picture.url\"\n              class=\"img-fluid my-3 mt-auto\"\n              alt=\"Webinar\" />\n            @if (post?.external_url) {\n              <a\n                class=\"resource-btn mt-3\"\n                [href]=\"post.external_url\"\n                [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">external</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            } @else {\n              <a class=\"resource-btn mt-3\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [routerLink]=\"['/resources/view', post?.slug]\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">on site</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n      @if (pager?.hasMore) {\n        <button type=\"button\" class=\"resource-load-more\" [disabled]=\"isLoadingMore\" (click)=\"pager.loadMore()\">\n          {{ 'Resource.LoadMore' | transloco }}\n        </button>\n      }\n    }\n  </div>\n</section>\n",
+			styles: [".bold{font-weight:700}.resource-heading{margin-bottom:2rem}.resource-note{margin-top:1rem;font-size:.85rem;color:#555}.resource-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}.resource-vault-section{padding:60px 0;background:#fff;padding-bottom:9rem!important;padding-top:7rem!important;box-shadow:0 4px 32px -14px #40576d4d!important}.resource-vault-section .vault-heading{font-size:3rem;font-weight:300}.resource-vault-section .explore-link{color:#000;font-weight:400;text-decoration:none;font-size:1.5rem}.resource-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}.resource-vault-section .resource-blog-card h5{font-size:1.5rem;font-weight:400;margin-bottom:.5rem;color:var(--text-color, black)}.resource-vault-section .resource-blog-card p{font-size:1.5rem;color:var(--text-color, black);line-height:2rem}.resource-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}.resource-vault-section .resource-blog-card iframe{height:210px;border-radius:10px;object-fit:cover;margin-right:0!important;max-width:280px!important}.resource-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)}.resource-vault-section .resource-blog-card .resource-btn:hover{background:#fff;color:var(--text-color, black)!important}.resource-vault-section .vault-description{text-align:left;max-width:657px;color:#182527;line-height:2.3rem!important;font-size:1.65rem}@media(width<=1200px){.resource-vault-section .vault-heading{font-size:3.5rem}.resource-vault-section .vault-description{margin-top:1.35rem}.resource-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(max-width:768px){.resource-vault-section{padding-bottom:6rem!important}.resource-vault-section .container{padding-top:0rem!important;padding-bottom:0rem!important}.vault-header{text-align:center!important}.vault-heading{font-size:3rem!important}}@media(width<=1200px){.container{padding:7rem 3rem 1rem!important}}\n", ".resource-load-more{display:block;margin:4rem auto 0;padding:10px 32px;border-radius:24px;border:1px solid var(--text-color, black);background-color:var(--text-color, black);color:#fff;font-size:1.5rem;font-weight:500;cursor:pointer;transition:background .3s ease}.resource-load-more:hover:not(:disabled){background:#fff;color:var(--text-color, black)}.resource-load-more:disabled{opacity:.6;cursor:default}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: i4.RouterLink,
+					selector: "[routerLink]",
+					inputs: [
+						"target",
+						"queryParams",
+						"fragment",
+						"queryParamsHandling",
+						"state",
+						"info",
+						"relativeTo",
+						"preserveFragment",
+						"skipLocationChange",
+						"replaceUrl",
+						"browserUrl",
+						"routerLink"
+					]
+				},
+				{
+					kind: "component",
+					type: i6.NoDataComponent,
+					selector: "pw-no-data",
+					inputs: [
+						"message",
+						"description",
+						"withImage"
+					]
+				},
+				{
+					kind: "component",
+					type: i7.ProgressSpinner,
+					selector: "p-progress-spinner, p-progressspinner",
+					inputs: [
+						"value",
+						"strokeWidth",
+						"animationDuration",
+						"min",
+						"max",
+						"ariaLabel",
+						"fill"
+					]
+				},
+				{
+					kind: "directive",
+					type: i8.LazyImgDirective,
+					selector: "img"
+				},
+				{
+					kind: "component",
+					type: ResourceEditCardLazyComponent,
+					selector: "pw-resource-edit-card-lazy",
+					inputs: [
+						"id",
+						"resourceData",
+						"canEdit"
+					],
+					outputs: ["updated"]
+				},
+				{
+					kind: "pipe",
+					type: i10.TranslocoPipe,
+					name: "transloco"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.0",
+	ngImport: i0,
+	type: ReplayEventCardComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "pw-replay-event-card",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			standalone: false,
+			template: "<section class=\"resource-vault-section bg-white text-center py-5 extra-top-padding section-outer\">\n  <div class=\"container\">\n    <div class=\"d-md-flex justify-content-between align-items-start\">\n      <div class=\"vault-header\">\n        @if (resourceTitle) {\n          <h2 class=\"vault-heading\">{{resourceTitle}} Replays</h2>\n        } @else {\n          <h2 class=\"vault-heading\">Events &amp; Webinars Replays</h2>\n        }\n      </div>\n    </div>\n\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (posts.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n\n    @if (posts.length !== 0 && isLoaded) {\n      <div class=\"row mt-5 d-flex flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of posts; track post) {\n          <div class=\"resource-blog-card vault-card text-center p-4\">\n            <pw-resource-edit-card-lazy\n              [canEdit]=\"canEditResourcesValue\"\n              [id]=\"post.id\"\n              [resourceData]=\"post\"\n              (updated)=\"loadReplays()\">\n            </pw-resource-edit-card-lazy>\n            <h5 class=\"badge-title fw-bold\">REPLAY:</h5>\n            <p class=\"event-title mb-4\" [innerHtml]=\"post?.title\"></p>\n            <img\n              [src]=\"post.picture.url\"\n              class=\"img-fluid my-3 mt-auto\"\n              alt=\"Webinar\" />\n            @if (post?.external_url) {\n              <a\n                class=\"resource-btn mt-3\"\n                [href]=\"post.external_url\"\n                [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">external</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            } @else {\n              <a class=\"resource-btn mt-3\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [routerLink]=\"['/resources/view', post?.slug]\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">on site</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n      @if (pager?.hasMore) {\n        <button type=\"button\" class=\"resource-load-more\" [disabled]=\"isLoadingMore\" (click)=\"pager.loadMore()\">\n          {{ 'Resource.LoadMore' | transloco }}\n        </button>\n      }\n    }\n  </div>\n</section>\n",
+			styles: [".bold{font-weight:700}.resource-heading{margin-bottom:2rem}.resource-note{margin-top:1rem;font-size:.85rem;color:#555}.resource-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}.resource-vault-section{padding:60px 0;background:#fff;padding-bottom:9rem!important;padding-top:7rem!important;box-shadow:0 4px 32px -14px #40576d4d!important}.resource-vault-section .vault-heading{font-size:3rem;font-weight:300}.resource-vault-section .explore-link{color:#000;font-weight:400;text-decoration:none;font-size:1.5rem}.resource-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}.resource-vault-section .resource-blog-card h5{font-size:1.5rem;font-weight:400;margin-bottom:.5rem;color:var(--text-color, black)}.resource-vault-section .resource-blog-card p{font-size:1.5rem;color:var(--text-color, black);line-height:2rem}.resource-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}.resource-vault-section .resource-blog-card iframe{height:210px;border-radius:10px;object-fit:cover;margin-right:0!important;max-width:280px!important}.resource-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)}.resource-vault-section .resource-blog-card .resource-btn:hover{background:#fff;color:var(--text-color, black)!important}.resource-vault-section .vault-description{text-align:left;max-width:657px;color:#182527;line-height:2.3rem!important;font-size:1.65rem}@media(width<=1200px){.resource-vault-section .vault-heading{font-size:3.5rem}.resource-vault-section .vault-description{margin-top:1.35rem}.resource-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(max-width:768px){.resource-vault-section{padding-bottom:6rem!important}.resource-vault-section .container{padding-top:0rem!important;padding-bottom:0rem!important}.vault-header{text-align:center!important}.vault-heading{font-size:3rem!important}}@media(width<=1200px){.container{padding:7rem 3rem 1rem!important}}\n", ".resource-load-more{display:block;margin:4rem auto 0;padding:10px 32px;border-radius:24px;border:1px solid var(--text-color, black);background-color:var(--text-color, black);color:#fff;font-size:1.5rem;font-weight:500;cursor:pointer;transition:background .3s ease}.resource-load-more:hover:not(:disabled){background:#fff;color:var(--text-color, black)}.resource-load-more:disabled{opacity:.6;cursor:default}\n"]
+		}]
+	}],
+	ctorParameters: () => [
+		{ type: ResourceService },
+		{ type: i2.TagService },
+		{ type: i0.ChangeDetectorRef },
+		{ type: i0.Injector }
+	],
+	propDecorators: {
+		showEventContent: [{ type: Input }],
+		categoryId: [{ type: Input }],
+		resourceTitle: [{ type: Input }],
+		user: [{ type: Input }],
+		userLoggedIn: [{ type: Input }]
+	}
+});
+var UpcomingEventCardComponent = class UpcomingEventCardComponent extends AppBaseComponent {
+	constructor(resourceService, tagService, cdr, injector) {
+		super(injector);
+		this.resourceService = resourceService;
+		this.tagService = tagService;
+		this.cdr = cdr;
+		this.showEventContent = false;
+		this.postSlice = false;
+		this.canEditResourcesValue = false;
+		this.now = Date.now();
+		this.isEditingTitle = false;
+		this.masterSubscriptionId = this.appConfig.master_subscription.subscription_id;
+		this.posts = [];
 		this.isLoaded = false;
-		this.resourceService.getPublicPosts(this.getEffectiveSubscriptionId(), page, pageSize, "", this.categoryId ?? this.blogPostTag?.tag_category_id).subscribe((response) => {
-			const sortedPosts = (response.posts ?? []).filter((post) => post.showcase === true && new Date(post?.when).getTime() > this.now).sort((a, b) => new Date(b.published_at).getTime() - new Date(a.published_at).getTime());
-			this.posts = sortedPosts;
+		this.isLoadingMore = false;
+	}
+	ngOnInit() {
+		if (this.userLoggedIn) this.localStorage.getItem$("product").subscribe((res) => {
+			const data = res ? JSON.parse(res) : null;
+			this.subscriptionId = data?.subscriptionId;
 			this.cdr.markForCheck();
-		}).add(() => {
-			this.isLoaded = true;
+		});
+		this.getPostTags();
+	}
+	ngOnChanges(changes) {
+		if (changes["user"] || changes["userLoggedIn"]) {
+			if (this.userLoggedIn && this.user) this.updateCanEditResourcesValue();
+		}
+	}
+	getPostTags() {
+		this.tagService.getTagsByType("post_categories", {}, this.getEffectiveSubscriptionId()).subscribe((response) => {
+			this.blogPostTag = response.tags.find((tag) => tag.name === "Events");
+			if (this.blogPostTag?.tag_category_id) this.refresh();
+			else this.isLoaded = true;
 			this.cdr.markForCheck();
 		});
 	}
+	refresh() {
+		if (this.postSlice) this.loadUpcoming();
+		else this.getAllPosts(1, 100);
+	}
+	loadUpcoming() {
+		this.pager = ResourcePager.forPublicPosts(this.resourceService, () => ({
+			subscriptionId: this.getEffectiveSubscriptionId(),
+			tagCategoryIds: this.categoryId ?? this.blogPostTag?.tag_category_id
+		}), () => this.syncFromPager(), (post) => post.showcase === true && this.isUpcoming(post));
+		this.pager.reset();
+	}
+	syncFromPager() {
+		this.posts = this.pager.items;
+		this.isLoaded = this.pager.isLoaded;
+		this.isLoadingMore = this.pager.isLoadingMore;
+		this.cdr.markForCheck();
+	}
 	isUpcoming(post) {
 		return new Date(post?.when).getTime() > this.now;
 	}
@@ -1661,8 +1972,8 @@ var UpcomingEventCardComponent = class UpcomingEventCardComponent extends AppBas
 			usesInheritance: true,
 			usesOnChanges: true,
 			ngImport: i0,
-			template: "<section class=\"resource-vault-section bg-white text-center py-5 extra-top-padding section-outer\">\n  <div class=\"container\">\n    @if (showEventContent) {\n      <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n        <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n          @if (!isEditingTitle) {\n            @if (resourceTitle) {\n              <span [innerHTML]=\"resourceTitle\"></span>\n            } @else {\n              Events &amp; Webinars\n            }\n            @if (canEditResourcesValue) {\n              <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleEditTitle()\" (keydown.enter)=\"toggleEditTitle()\" (keydown.space)=\"toggleEditTitle()\" title=\"Edit Title\"></i>\n            }\n          } @else {\n            <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_7936\" name=\"input_editedTitle_7936\"\n                aria-label=\"Input Edited Title 7936\" />\n            <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n            <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n          }\n        </h2>\n        <a class=\"view-all\" routerLink=\"/resources/events\">VIEW ALL ></a>\n      </div>\n    }\n    @if (!showEventContent) {\n      <div class=\"d-md-flex justify-content-between align-items-start\">\n        <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n          @if (!isEditingTitle) {\n            @if (resourceTitle) {\n              <span [innerHTML]=\"resourceTitle\"></span>\n            } @else {\n              Upcoming Events\n            }\n            @if (canEditResourcesValue) {\n              <i class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleEditTitle()\" (keydown.enter)=\"toggleEditTitle()\" (keydown.space)=\"toggleEditTitle()\" title=\"Edit Title\"></i>\n            }\n          } @else {\n            <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_7936\" name=\"input_editedTitle_7936\"\n                aria-label=\"Input Edited Title 7936\" />\n            <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n            <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n          }\n        </h2>\n      </div>\n    }\n\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (posts.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n\n    @if (posts.length !== 0 && isLoaded) {\n      <div class=\"row mt-5 d-flex flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of posts; track trackByPostId($index, post)) {\n          <div class=\"resource-blog-card d text-center p-4\">\n            <pw-resource-edit-card-lazy\n            [canEdit]=\"canEditResourcesValue\"\n            [id]=\"post.id\"\n            [resourceData]=\"post\"\n            (updated)=\"getAllPosts(1, 100)\">\n            </pw-resource-edit-card-lazy>\n            @if (postSlice) {\n              <h5 class=\"badge-title fw-bold\">UPCOMING:</h5>\n            } @else {\n              <h5 class=\"badge-title fw-bold\">\n                {{ isUpcoming(post) ? 'UPCOMING:' : 'REPLAY:' }}\n              </h5>\n            }\n\n            <p class=\"event-title mb-4\" [innerHtml]=\"post?.title\"></p>\n            <a\n              [href]=\"post.external_url || ('/resources/view/' + post?.slug)\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              [attr.aria-label]=\"'Open resource card: ' + (post?.title || 'article')\"\n            >\n              <img\n                [src]=\"post.picture?.url\"\n                class=\"img-fluid my-3 mt-auto\"\n                alt=\"Webinar\"\n                loading=\"lazy\"\n              />\n            </a>\n\n            @if (post?.external_url) {\n              <a\n                class=\"resource-btn mt-3\"\n                [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                [href]=\"post.external_url\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">external</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            } @else {\n              <a class=\"resource-btn mt-3\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [href]=\"'/resources/view/' + post?.slug\" target=\"_blank\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">on site</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</section>\n\n\n@if (!showEventContent) {\n<section class=\"bg-white\">\n  <pw-replay-event-card [resourceTitle]=\"resourceTitle\" [user]=\"user\" [userLoggedIn]=\"userLoggedIn\"></pw-replay-event-card>\n</section>\n}\n",
-			styles: [".bold{font-weight:700}.resource-heading{margin-bottom:2rem}.resource-note{margin-top:1rem;font-size:.85rem;color:#555}.resource-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}.resource-vault-section{padding:60px 0;background:#fff;padding-bottom:9rem!important;padding-top:7rem!important;box-shadow:0 4px 32px -14px #40576d4d!important}.resource-vault-section .vault-heading{font-size:3rem;font-weight:300}.resource-vault-section .explore-link{color:#000;font-weight:400;text-decoration:none;font-size:1.5rem}.resource-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}.resource-vault-section .resource-blog-card h5{font-size:1.5rem;font-weight:400;margin-bottom:.5rem;color:var(--text-color, black)}.resource-vault-section .resource-blog-card p{font-size:1.5rem;color:var(--text-color, black);line-height:2rem}.resource-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}.resource-vault-section .resource-blog-card iframe{height:210px;border-radius:10px;object-fit:cover;margin-right:0!important;max-width:280px!important}.resource-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)}.resource-vault-section .resource-blog-card .resource-btn:hover{background:#fff;color:var(--text-color, black)!important}.resource-vault-section .vault-description{text-align:left;max-width:657px;color:#182527;line-height:2.3rem!important;font-size:1.65rem}@media(width<=1200px){.resource-vault-section .vault-heading{font-size:3.5rem}.resource-vault-section .vault-description{margin-top:1.35rem}.resource-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(max-width:768px){.resource-vault-section{padding-bottom:6rem!important}.resource-vault-section .container{padding-top:0rem!important;padding-bottom:0rem!important}.vault-header{text-align:center!important}.vault-heading{font-size:3rem!important}}@media(width<=1200px){.container{padding:7rem 3rem 1rem!important}}\n"],
+			template: "<section class=\"resource-vault-section bg-white text-center py-5 extra-top-padding section-outer\">\n  <div class=\"container\">\n    @if (showEventContent) {\n      <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n        <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n          @if (!isEditingTitle) {\n            @if (resourceTitle) {\n              <span [innerHTML]=\"resourceTitle\"></span>\n            } @else {\n              Events &amp; Webinars\n            }\n            @if (canEditResourcesValue) {\n              <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleEditTitle()\" (keydown.enter)=\"toggleEditTitle()\" (keydown.space)=\"toggleEditTitle()\" title=\"Edit Title\"></i>\n            }\n          } @else {\n            <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_7936\" name=\"input_editedTitle_7936\"\n                aria-label=\"Input Edited Title 7936\" />\n            <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n            <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n          }\n        </h2>\n        <a class=\"view-all\" routerLink=\"/resources/events\">VIEW ALL ></a>\n      </div>\n    }\n    @if (!showEventContent) {\n      <div class=\"d-md-flex justify-content-between align-items-start\">\n        <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n          @if (!isEditingTitle) {\n            @if (resourceTitle) {\n              <span [innerHTML]=\"resourceTitle\"></span>\n            } @else {\n              Upcoming Events\n            }\n            @if (canEditResourcesValue) {\n              <i class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleEditTitle()\" (keydown.enter)=\"toggleEditTitle()\" (keydown.space)=\"toggleEditTitle()\" title=\"Edit Title\"></i>\n            }\n          } @else {\n            <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_7936\" name=\"input_editedTitle_7936\"\n                aria-label=\"Input Edited Title 7936\" />\n            <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n            <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n          }\n        </h2>\n      </div>\n    }\n\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (posts.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n\n    @if (posts.length !== 0 && isLoaded) {\n      <div class=\"row mt-5 d-flex flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of posts; track trackByPostId($index, post)) {\n          <div class=\"resource-blog-card d text-center p-4\">\n            <pw-resource-edit-card-lazy\n            [canEdit]=\"canEditResourcesValue\"\n            [id]=\"post.id\"\n            [resourceData]=\"post\"\n            (updated)=\"refresh()\">\n            </pw-resource-edit-card-lazy>\n            @if (postSlice) {\n              <h5 class=\"badge-title fw-bold\">UPCOMING:</h5>\n            } @else {\n              <h5 class=\"badge-title fw-bold\">\n                {{ isUpcoming(post) ? 'UPCOMING:' : 'REPLAY:' }}\n              </h5>\n            }\n\n            <p class=\"event-title mb-4\" [innerHtml]=\"post?.title\"></p>\n            <a\n              [href]=\"post.external_url || ('/resources/view/' + post?.slug)\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              [attr.aria-label]=\"'Open resource card: ' + (post?.title || 'article')\"\n            >\n              <img\n                [src]=\"post.picture?.url\"\n                class=\"img-fluid my-3 mt-auto\"\n                alt=\"Webinar\"\n                loading=\"lazy\"\n              />\n            </a>\n\n            @if (post?.external_url) {\n              <a\n                class=\"resource-btn mt-3\"\n                [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                [href]=\"post.external_url\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">external</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            } @else {\n              <a class=\"resource-btn mt-3\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [href]=\"'/resources/view/' + post?.slug\" target=\"_blank\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">on site</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n      @if (postSlice && pager?.hasMore) {\n        <button type=\"button\" class=\"resource-load-more\" [disabled]=\"isLoadingMore\" (click)=\"pager.loadMore()\">\n          {{ 'Resource.LoadMore' | transloco }}\n        </button>\n      }\n    }\n  </div>\n</section>\n\n\n@if (!showEventContent) {\n<section class=\"bg-white\">\n  <pw-replay-event-card [resourceTitle]=\"resourceTitle\" [user]=\"user\" [userLoggedIn]=\"userLoggedIn\"></pw-replay-event-card>\n</section>\n}\n",
+			styles: [".bold{font-weight:700}.resource-heading{margin-bottom:2rem}.resource-note{margin-top:1rem;font-size:.85rem;color:#555}.resource-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}.resource-vault-section{padding:60px 0;background:#fff;padding-bottom:9rem!important;padding-top:7rem!important;box-shadow:0 4px 32px -14px #40576d4d!important}.resource-vault-section .vault-heading{font-size:3rem;font-weight:300}.resource-vault-section .explore-link{color:#000;font-weight:400;text-decoration:none;font-size:1.5rem}.resource-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}.resource-vault-section .resource-blog-card h5{font-size:1.5rem;font-weight:400;margin-bottom:.5rem;color:var(--text-color, black)}.resource-vault-section .resource-blog-card p{font-size:1.5rem;color:var(--text-color, black);line-height:2rem}.resource-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}.resource-vault-section .resource-blog-card iframe{height:210px;border-radius:10px;object-fit:cover;margin-right:0!important;max-width:280px!important}.resource-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)}.resource-vault-section .resource-blog-card .resource-btn:hover{background:#fff;color:var(--text-color, black)!important}.resource-vault-section .vault-description{text-align:left;max-width:657px;color:#182527;line-height:2.3rem!important;font-size:1.65rem}@media(width<=1200px){.resource-vault-section .vault-heading{font-size:3.5rem}.resource-vault-section .vault-description{margin-top:1.35rem}.resource-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(max-width:768px){.resource-vault-section{padding-bottom:6rem!important}.resource-vault-section .container{padding-top:0rem!important;padding-bottom:0rem!important}.vault-header{text-align:center!important}.vault-heading{font-size:3rem!important}}@media(width<=1200px){.container{padding:7rem 3rem 1rem!important}}\n", ".resource-load-more{display:block;margin:4rem auto 0;padding:10px 32px;border-radius:24px;border:1px solid var(--text-color, black);background-color:var(--text-color, black);color:#fff;font-size:1.5rem;font-weight:500;cursor:pointer;transition:background .3s ease}.resource-load-more:hover:not(:disabled){background:#fff;color:var(--text-color, black)}.resource-load-more:disabled{opacity:.6;cursor:default}\n"],
 			dependencies: [
 				{
 					kind: "directive",
@@ -1741,6 +2052,18 @@ var UpcomingEventCardComponent = class UpcomingEventCardComponent extends AppBas
 					type: i8.LazyImgDirective,
 					selector: "img"
 				},
+				{
+					kind: "component",
+					type: ReplayEventCardComponent,
+					selector: "pw-replay-event-card",
+					inputs: [
+						"showEventContent",
+						"categoryId",
+						"resourceTitle",
+						"user",
+						"userLoggedIn"
+					]
+				},
 				{
 					kind: "component",
 					type: ResourceEditCardLazyComponent,
@@ -1773,8 +2096,8 @@ i0.ɵɵngDeclareClassMetadata({
 			selector: "pw-upcoming-event-card",
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			standalone: false,
-			template: "<section class=\"resource-vault-section bg-white text-center py-5 extra-top-padding section-outer\">\n  <div class=\"container\">\n    @if (showEventContent) {\n      <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n        <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n          @if (!isEditingTitle) {\n            @if (resourceTitle) {\n              <span [innerHTML]=\"resourceTitle\"></span>\n            } @else {\n              Events &amp; Webinars\n            }\n            @if (canEditResourcesValue) {\n              <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleEditTitle()\" (keydown.enter)=\"toggleEditTitle()\" (keydown.space)=\"toggleEditTitle()\" title=\"Edit Title\"></i>\n            }\n          } @else {\n            <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_7936\" name=\"input_editedTitle_7936\"\n                aria-label=\"Input Edited Title 7936\" />\n            <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n            <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n          }\n        </h2>\n        <a class=\"view-all\" routerLink=\"/resources/events\">VIEW ALL ></a>\n      </div>\n    }\n    @if (!showEventContent) {\n      <div class=\"d-md-flex justify-content-between align-items-start\">\n        <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n          @if (!isEditingTitle) {\n            @if (resourceTitle) {\n              <span [innerHTML]=\"resourceTitle\"></span>\n            } @else {\n              Upcoming Events\n            }\n            @if (canEditResourcesValue) {\n              <i class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleEditTitle()\" (keydown.enter)=\"toggleEditTitle()\" (keydown.space)=\"toggleEditTitle()\" title=\"Edit Title\"></i>\n            }\n          } @else {\n            <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_7936\" name=\"input_editedTitle_7936\"\n                aria-label=\"Input Edited Title 7936\" />\n            <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n            <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n          }\n        </h2>\n      </div>\n    }\n\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (posts.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n\n    @if (posts.length !== 0 && isLoaded) {\n      <div class=\"row mt-5 d-flex flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of posts; track trackByPostId($index, post)) {\n          <div class=\"resource-blog-card d text-center p-4\">\n            <pw-resource-edit-card-lazy\n            [canEdit]=\"canEditResourcesValue\"\n            [id]=\"post.id\"\n            [resourceData]=\"post\"\n            (updated)=\"getAllPosts(1, 100)\">\n            </pw-resource-edit-card-lazy>\n            @if (postSlice) {\n              <h5 class=\"badge-title fw-bold\">UPCOMING:</h5>\n            } @else {\n              <h5 class=\"badge-title fw-bold\">\n                {{ isUpcoming(post) ? 'UPCOMING:' : 'REPLAY:' }}\n              </h5>\n            }\n\n            <p class=\"event-title mb-4\" [innerHtml]=\"post?.title\"></p>\n            <a\n              [href]=\"post.external_url || ('/resources/view/' + post?.slug)\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              [attr.aria-label]=\"'Open resource card: ' + (post?.title || 'article')\"\n            >\n              <img\n                [src]=\"post.picture?.url\"\n                class=\"img-fluid my-3 mt-auto\"\n                alt=\"Webinar\"\n                loading=\"lazy\"\n              />\n            </a>\n\n            @if (post?.external_url) {\n              <a\n                class=\"resource-btn mt-3\"\n                [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                [href]=\"post.external_url\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">external</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            } @else {\n              <a class=\"resource-btn mt-3\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [href]=\"'/resources/view/' + post?.slug\" target=\"_blank\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">on site</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n</section>\n\n\n@if (!showEventContent) {\n<section class=\"bg-white\">\n  <pw-replay-event-card [resourceTitle]=\"resourceTitle\" [user]=\"user\" [userLoggedIn]=\"userLoggedIn\"></pw-replay-event-card>\n</section>\n}\n",
-			styles: [".bold{font-weight:700}.resource-heading{margin-bottom:2rem}.resource-note{margin-top:1rem;font-size:.85rem;color:#555}.resource-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}.resource-vault-section{padding:60px 0;background:#fff;padding-bottom:9rem!important;padding-top:7rem!important;box-shadow:0 4px 32px -14px #40576d4d!important}.resource-vault-section .vault-heading{font-size:3rem;font-weight:300}.resource-vault-section .explore-link{color:#000;font-weight:400;text-decoration:none;font-size:1.5rem}.resource-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}.resource-vault-section .resource-blog-card h5{font-size:1.5rem;font-weight:400;margin-bottom:.5rem;color:var(--text-color, black)}.resource-vault-section .resource-blog-card p{font-size:1.5rem;color:var(--text-color, black);line-height:2rem}.resource-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}.resource-vault-section .resource-blog-card iframe{height:210px;border-radius:10px;object-fit:cover;margin-right:0!important;max-width:280px!important}.resource-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)}.resource-vault-section .resource-blog-card .resource-btn:hover{background:#fff;color:var(--text-color, black)!important}.resource-vault-section .vault-description{text-align:left;max-width:657px;color:#182527;line-height:2.3rem!important;font-size:1.65rem}@media(width<=1200px){.resource-vault-section .vault-heading{font-size:3.5rem}.resource-vault-section .vault-description{margin-top:1.35rem}.resource-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(max-width:768px){.resource-vault-section{padding-bottom:6rem!important}.resource-vault-section .container{padding-top:0rem!important;padding-bottom:0rem!important}.vault-header{text-align:center!important}.vault-heading{font-size:3rem!important}}@media(width<=1200px){.container{padding:7rem 3rem 1rem!important}}\n"]
+			template: "<section class=\"resource-vault-section bg-white text-center py-5 extra-top-padding section-outer\">\n  <div class=\"container\">\n    @if (showEventContent) {\n      <div class=\"d-flex justify-content-between align-items-center flex-wrap\">\n        <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n          @if (!isEditingTitle) {\n            @if (resourceTitle) {\n              <span [innerHTML]=\"resourceTitle\"></span>\n            } @else {\n              Events &amp; Webinars\n            }\n            @if (canEditResourcesValue) {\n              <i  class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleEditTitle()\" (keydown.enter)=\"toggleEditTitle()\" (keydown.space)=\"toggleEditTitle()\" title=\"Edit Title\"></i>\n            }\n          } @else {\n            <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_7936\" name=\"input_editedTitle_7936\"\n                aria-label=\"Input Edited Title 7936\" />\n            <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n            <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n          }\n        </h2>\n        <a class=\"view-all\" routerLink=\"/resources/events\">VIEW ALL ></a>\n      </div>\n    }\n    @if (!showEventContent) {\n      <div class=\"d-md-flex justify-content-between align-items-start\">\n        <h2 class=\"section-heading d-flex align-items-center\" [ngClass]=\"{ 'w-50': isEditingTitle }\">\n          @if (!isEditingTitle) {\n            @if (resourceTitle) {\n              <span [innerHTML]=\"resourceTitle\"></span>\n            } @else {\n              Upcoming Events\n            }\n            @if (canEditResourcesValue) {\n              <i class=\"fa fa-edit in-page-edit-icon ms-3 cursor-pointer\" (click)=\"toggleEditTitle()\" (keydown.enter)=\"toggleEditTitle()\" (keydown.space)=\"toggleEditTitle()\" title=\"Edit Title\"></i>\n            }\n          } @else {\n            <input [(ngModel)]=\"editedTitle\" class=\"form-control d-inline w-auto me-2\" [ngClass]=\"{ 'w-100': isEditingTitle }\" id=\"input_editedTitle_7936\" name=\"input_editedTitle_7936\"\n                aria-label=\"Input Edited Title 7936\" />\n            <button class=\"btn btn-sm btn-primary me-1\" (click)=\"saveEditedTitle()\">Save</button>\n            <button class=\"btn btn-sm btn-secondary\" (click)=\"isEditingTitle = false\">Cancel</button>\n          }\n        </h2>\n      </div>\n    }\n\n    @if (!isLoaded) {\n      <div class=\"w-100 text-center mt-3\">\n        <p-progress-spinner strokeWidth=\"2\"> </p-progress-spinner>\n      </div>\n    }\n    @if (posts.length === 0 && isLoaded) {\n      <div>\n        <pw-no-data [withImage]=\"true\" [message]=\"'Resource.NoDataMessage' | transloco\"/>\n      </div>\n    }\n\n    @if (posts.length !== 0 && isLoaded) {\n      <div class=\"row mt-5 d-flex flex-wrap justify-content-center gap-4 video-row\">\n        @for (post of posts; track trackByPostId($index, post)) {\n          <div class=\"resource-blog-card d text-center p-4\">\n            <pw-resource-edit-card-lazy\n            [canEdit]=\"canEditResourcesValue\"\n            [id]=\"post.id\"\n            [resourceData]=\"post\"\n            (updated)=\"refresh()\">\n            </pw-resource-edit-card-lazy>\n            @if (postSlice) {\n              <h5 class=\"badge-title fw-bold\">UPCOMING:</h5>\n            } @else {\n              <h5 class=\"badge-title fw-bold\">\n                {{ isUpcoming(post) ? 'UPCOMING:' : 'REPLAY:' }}\n              </h5>\n            }\n\n            <p class=\"event-title mb-4\" [innerHtml]=\"post?.title\"></p>\n            <a\n              [href]=\"post.external_url || ('/resources/view/' + post?.slug)\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              [attr.aria-label]=\"'Open resource card: ' + (post?.title || 'article')\"\n            >\n              <img\n                [src]=\"post.picture?.url\"\n                class=\"img-fluid my-3 mt-auto\"\n                alt=\"Webinar\"\n                loading=\"lazy\"\n              />\n            </a>\n\n            @if (post?.external_url) {\n              <a\n                class=\"resource-btn mt-3\"\n                [attr.aria-label]=\"'Open external: ' + (post?.title || 'article')\"\n                [href]=\"post.external_url\"\n                target=\"_blank\"\n                rel=\"noopener noreferrer\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">external</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            } @else {\n              <a class=\"resource-btn mt-3\" [attr.aria-label]=\"'Read resource: ' + (post?.title || 'article')\" [href]=\"'/resources/view/' + post?.slug\" target=\"_blank\">\n                <span>{{ post?.cta_text && post.cta_text !== 'null' ? post.cta_text : 'Read Now'  }}</span>\n                <span class=\"visually-hidden\">on site</span>\n                <span class=\"arrow\">→</span>\n              </a>\n            }\n          </div>\n        }\n      </div>\n      @if (postSlice && pager?.hasMore) {\n        <button type=\"button\" class=\"resource-load-more\" [disabled]=\"isLoadingMore\" (click)=\"pager.loadMore()\">\n          {{ 'Resource.LoadMore' | transloco }}\n        </button>\n      }\n    }\n  </div>\n</section>\n\n\n@if (!showEventContent) {\n<section class=\"bg-white\">\n  <pw-replay-event-card [resourceTitle]=\"resourceTitle\" [user]=\"user\" [userLoggedIn]=\"userLoggedIn\"></pw-replay-event-card>\n</section>\n}\n",
+			styles: [".bold{font-weight:700}.resource-heading{margin-bottom:2rem}.resource-note{margin-top:1rem;font-size:.85rem;color:#555}.resource-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}.resource-vault-section{padding:60px 0;background:#fff;padding-bottom:9rem!important;padding-top:7rem!important;box-shadow:0 4px 32px -14px #40576d4d!important}.resource-vault-section .vault-heading{font-size:3rem;font-weight:300}.resource-vault-section .explore-link{color:#000;font-weight:400;text-decoration:none;font-size:1.5rem}.resource-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}.resource-vault-section .resource-blog-card h5{font-size:1.5rem;font-weight:400;margin-bottom:.5rem;color:var(--text-color, black)}.resource-vault-section .resource-blog-card p{font-size:1.5rem;color:var(--text-color, black);line-height:2rem}.resource-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}.resource-vault-section .resource-blog-card iframe{height:210px;border-radius:10px;object-fit:cover;margin-right:0!important;max-width:280px!important}.resource-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)}.resource-vault-section .resource-blog-card .resource-btn:hover{background:#fff;color:var(--text-color, black)!important}.resource-vault-section .vault-description{text-align:left;max-width:657px;color:#182527;line-height:2.3rem!important;font-size:1.65rem}@media(width<=1200px){.resource-vault-section .vault-heading{font-size:3.5rem}.resource-vault-section .vault-description{margin-top:1.35rem}.resource-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(max-width:768px){.resource-vault-section{padding-bottom:6rem!important}.resource-vault-section .container{padding-top:0rem!important;padding-bottom:0rem!important}.vault-header{text-align:center!important}.vault-heading{font-size:3rem!important}}@media(width<=1200px){.container{padding:7rem 3rem 1rem!important}}\n", ".resource-load-more{display:block;margin:4rem auto 0;padding:10px 32px;border-radius:24px;border:1px solid var(--text-color, black);background-color:var(--text-color, black);color:#fff;font-size:1.5rem;font-weight:500;cursor:pointer;transition:background .3s ease}.resource-load-more:hover:not(:disabled){background:#fff;color:var(--text-color, black)}.resource-load-more:disabled{opacity:.6;cursor:default}\n"]
 		}]
 	}],
 	ctorParameters: () => [
@@ -1813,6 +2136,7 @@ var ResourceCardsModule = class ResourceCardsModule {
 			declarations: [
 				ResourceVideoCardComponent,
 				UpcomingEventCardComponent,
+				ReplayEventCardComponent,
 				ResourceCardComponent,
 				CaseStudyCardComponent,
 				ResourceNoteCardComponent,
@@ -1886,6 +2210,7 @@ i0.ɵɵngDeclareClassMetadata({
 			declarations: [
 				ResourceVideoCardComponent,
 				UpcomingEventCardComponent,
+				ReplayEventCardComponent,
 				ResourceCardComponent,
 				CaseStudyCardComponent,
 				ResourceNoteCardComponent,
@@ -1925,4 +2250,4 @@ i0.ɵɵngDeclareClassMetadata({
 });
 export { BaseResourceComponent as a, ResourceNoteCardComponent as c, ResourceVaultComponent as i, ResourceEditCardLazyComponent as l, UpcomingEventCardComponent as n, ResourceCardComponent as o, ResourceVideoCardComponent as r, CaseStudyCardComponent as s, ResourceCardsModule as t, Trial4ContactUsModule as u };
 
-//# sourceMappingURL=posiwise-resource-module-resource-cards.module-Bp4BgXL2.mjs.map
+//# sourceMappingURL=posiwise-resource-module-resource-cards.module-BX8R0Cng.mjs.map