@posiwise/resource-module 0.0.92

package/fesm2022/posiwise-resource-module.mjs

@@ -0,0 +1,427 @@
+import * as i0 from '@angular/core';
+import { Injectable, Component, ViewEncapsulation, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import * as i3 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i8 from '@angular/forms';
+import { UntypedFormBuilder, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i2 from '@posiwise/common-services';
+import { GoogleAnalyticsService } from '@posiwise/common-services';
+import { CoreTranslocoModule } from '@posiwise/core-transloco';
+import * as i9 from '@posiwise/directives';
+import { DirectivesModule } from '@posiwise/directives';
+import * as i9$1 from '@posiwise/pipes';
+import { PipesModule } from '@posiwise/pipes';
+import { PublicModule } from '@posiwise/public-modules';
+import * as i6 from '@posiwise/shared-components';
+import { SharedComponentsModule } from '@posiwise/shared-components';
+import * as i1 from 'ngx-quill';
+import { QuillModule } from 'ngx-quill';
+import * as i7 from 'ngx-sharebuttons/buttons';
+import { ShareButtonsModule } from 'ngx-sharebuttons/buttons';
+import { ShareIconsModule } from 'ngx-sharebuttons/icons';
+import { NgxUploaderModule } from 'ngx-uploader';
+import * as i10 from '@jsverse/transloco';
+import { TranslocoModule } from '@jsverse/transloco';
+import { HelperService } from '@posiwise/helper-service';
+import { AppBaseComponent } from '@posiwise/app-base-component';
+import { TOKEN_KEY } from '@posiwise/common-utilities';
+import { forkJoin } from 'rxjs';
+import * as i4 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i5 from 'primeng/progressspinner';
+import * as i3$1 from '@angular/platform-browser';
+
+class ResourceService {
+    constructor(api) {
+        this.api = api;
+        this.resource = '/posts';
+        this.comments = '/comments';
+    }
+    getPublicPosts(master_subscription_id, page, pageSize, search) {
+        return this.api.get(`${this.resource}/get_all?master_subscription_id=${master_subscription_id}&page=${page}&page_size=${pageSize}&search=${search}`);
+    }
+    getAdminPosts(subscriptionId, paging) {
+        return this.api.getWithParams(`${this.resource}/admin_get_all`, {
+            ...HelperService.getPagingParams(paging),
+            subscription_id: subscriptionId
+        });
+    }
+    addPost(post) {
+        const formData = new FormData();
+        // eslint-disable-next-line no-restricted-syntax
+        for (const key in post) {
+            if (key in post) {
+                formData.append(key, post[key]);
+            }
+        }
+        return this.api.post(this.resource, formData);
+    }
+    getPostBySlug(slug) {
+        return this.api.get(`${this.resource}/${slug}`);
+    }
+    deletePost(id) {
+        return this.api.delete(`${this.resource}/${id}`);
+    }
+    updatePost(post, id) {
+        const formData = new FormData();
+        // eslint-disable-next-line no-restricted-syntax
+        for (const key in post) {
+            if (key in post) {
+                formData.append(key, post[key]);
+            }
+        }
+        return this.api.put(`${this.resource}/${id}`, formData);
+    }
+    getComments() {
+        return this.api.get(`${this.comments}/get_all`);
+    }
+    postComments(post) {
+        return this.api.post(this.comments, post);
+    }
+    getResourceInsight(subscription_id, starting_at, ending_at) {
+        return this.api.getWithParams(`/admin/posts_analytics?type=views&subscription_id=${subscription_id}`, { starting_at, ending_at });
+    }
+    getResourcePostsInsight(id) {
+        return this.api.get(`${this.resource}/${id}/insights`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceService, deps: [{ token: i2.MainApiHttpService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i2.MainApiHttpService }] });
+
+class ResourceListComponent extends AppBaseComponent {
+    constructor(resourceService, tagService, injector) {
+        super(injector);
+        this.resourceService = resourceService;
+        this.tagService = tagService;
+        this.delayTimeout = null;
+        this.data = [];
+        this.posts = [];
+        this.tags = [];
+        this.searchTextItems = '';
+        this.searchInput = false;
+        this.loading = true;
+        this.loaded = false;
+    }
+    ngOnInit() {
+        this.localStorage.getItem$(TOKEN_KEY).subscribe(res => {
+            this.userLoggedIn = !!res;
+            if (this.userLoggedIn) {
+                this.localStorage.getItem$('product').subscribe(res => {
+                    const data = res ? JSON.parse(res) : null;
+                    this.subscriptionId = data?.subscriptionId;
+                });
+            }
+        });
+        this.masterSubscriptionId = this.appConfig.master_subscription.subscription_id;
+        this.getPostsAndTags();
+        this.readingTime = 0;
+    }
+    getPostsAndTags() {
+        this.loading = true;
+        this.loaded = false;
+        forkJoin({
+            resPosts: this.resourceService.getPublicPosts(this.masterSubscriptionId, 1, 100, this.searchTextItems),
+            resTags: this.tagService.getTagsByType('post_categories', {}, this.subscriptionId || this.masterSubscriptionId)
+        })
+            .subscribe(res => {
+            // posts
+            this.posts = res?.resPosts?.posts;
+            this.data = res?.resPosts?.posts;
+            this.totalRecords = this.posts?.length;
+            // tags
+            this.tags = res?.resTags?.tags;
+        })
+            .add(() => {
+            this.loading = false;
+            this.loaded = true;
+        });
+    }
+    getPosts(page, pageSize) {
+        this.loading = true;
+        this.loaded = false;
+        this.resourceService
+            .getPublicPosts(this.masterSubscriptionId, page, pageSize, this.searchTextItems)
+            .subscribe(response => {
+            this.posts = response.posts;
+            this.data = response.posts;
+            this.totalRecords = this.posts?.length;
+        })
+            .add(() => {
+            this.loading = false;
+            this.loaded = true;
+        });
+    }
+    showSearch(close) {
+        this.searchInput = !this.searchInput;
+        if (close) {
+            this.searchTextItems = '';
+            this.getPosts(1, 100);
+        }
+    }
+    onSearch(seconds) {
+        let delay = 0;
+        delay = seconds * 1000;
+        clearTimeout(this.delayTimeout);
+        // wait for timeout before get posts
+        const delayTimeout = setTimeout(() => {
+            this.getPosts(1, 100);
+        }, delay);
+        this.delayTimeout = delayTimeout;
+    }
+    tagPost(selectedTag) {
+        let filtered;
+        this.data = [];
+        this.posts.forEach(element => {
+            if (element.tags.length > 0) {
+                filtered = element.tags.filter(tag => tag.id === selectedTag.id);
+                if (filtered.length > 0) {
+                    this.data.push(element);
+                }
+            }
+        });
+    }
+    thisPostReadingTime(text) {
+        if (text) {
+            const wordsPerMinute = 200;
+            const noOfWords = text.split(/\s/g).length;
+            const minutes = noOfWords / wordsPerMinute;
+            const readTime = Math.ceil(minutes);
+            return `${readTime} minute read`;
+        }
+        return '';
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceListComponent, deps: [{ token: ResourceService }, { token: i2.TagService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourceListComponent, selector: "pw-posts-list", usesInheritance: true, ngImport: i0, template: "<pw-header/>\n<div class=\"all-posts py-5\">\n  <div class=\"row mt-5 mb-4 px-2\">\n    <div class=\"col-md-9\">\n      <ul class=\"tags\">\n        <li (keydown.enter)=\"getPosts(1, 100)\" (click)=\"getPosts(1, 100)\">All Resources</li>\n        <li *ngFor=\"let tag of tags\"\n          (keydown.enter)=\"tagPost(tag)\"\n          (click)=\"tagPost(tag)\">{{ tag.name }}</li>\n      </ul>\n    </div>\n    <div class=\"col-md-3\">\n      <div class=\"search\"\n        *ngIf=\"searchInput; else searchIcon\">\n        <input type=\"text\"\n          class=\"w-100\"\n          placeholder=\"search...\"\n          [(ngModel)]=\"searchTextItems\"\n          (keydown.enter)=\"onSearch(0.5)\" />\n        <i class=\"fa fa-times\" (click)=\"showSearch('close')\" (keydown.enter)=\"showSearch('close')\"  aria-hidden=\"true\"></i>\n      </div>\n      <ng-template #searchIcon>\n        <i\n                    class=\"fa fa-search w-100 text-end\"\n                    (click)=\"showSearch('open')\"\n                    (keydown.enter)=\"showSearch('open')\"\n                    aria-hidden=\"true\"\n                ></i>\n      </ng-template>\n    </div>\n  </div>\n  <ng-container *ngIf=\"loading && !loaded\">\n    <div class=\"w-100 text-center mt-3\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"posts?.length && !loading\">\n    <div class=\"blog-list\">\n      <div class=\"row mt-4 ms-1 me-1 blog-listing\"\n        *ngFor=\"let post of data\">\n        <div class=\"col-md-6 col-sm-12 col-xs-12 my-auto\"\n          [routerLink]=\"['/resource', post.slug]\">\n          <div class=\"list-blog-image\">\n            <img [src]=\"post.picture?.url\"\n              alt=\"Post List\"\n              class=\"img-fluid\" />\n          </div>\n        </div>\n        <div class=\"col-md-6 col-sm-12 col-xs-12 px-4 position-relative\">\n          <div class=\"mt-4\">\n            <div class=\"author mb-3 d-flex\">\n              <div class=\"avatar-image\">\n                <a [attr.disabled]=\"!userLoggedIn\"\n                  [routerLink]=\"['/members', post?.author?.slug]\">\n                  <img *ngIf=\"post.author?.avatar\"\n                    [src]=\"post.author?.avatar[0]?.url\"\n                    alt=\"Author\" />\n                  <img *ngIf=\"!post.author?.avatar\"\n                    src=\"/assets/img/icons/male.png\"\n                    alt=\"Author\"\n                    class=\"default-user-image\" />\n                </a>\n              </div>\n\n              <div class=\"author-name ps-2\">\n                <a [attr.disabled]=\"!userLoggedIn\"\n                  [routerLink]=\"['/members', post?.author?.slug]\"\n                  class=\"name\">\n                  {{ post.author.first_name }}\n                  <i class=\"fas fa-crown\" aria-hidden=\"true\"></i></a>\n                <ul>\n                  <li>\n                    <a href=\"javascript:void(0);\">\n                      {{ post.published_at | date: 'dd/MM/yyyy' }}\n                    </a>\n                  </li>\n                  <li>.</li>\n                  <li>\n                    <a href=\"javascript:void(0);\">{{ thisPostReadingTime(post.body) }}\n                    </a>\n                  </li>\n                </ul>\n              </div>\n              <div class=\"share-post\">\n                <div class=\"dropdown\">\n                  <a href=\"#\"\n                    aria-label=\"Post Menu\"\n                    id=\"dropdownMenuLink\"\n                    data-bs-toggle=\"dropdown\"\n                    aria-haspopup=\"true\"\n                    (keydown.enter)=\"$event.preventDefault(); $event.target.click()\"\n                    (keydown.space)=\"$event.preventDefault(); $event.target.click()\"\n                    aria-expanded=\"false\">\n                    <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n                  </a>\n                  <div class=\"dropdown-menu\"\n                    aria-labelledby=\"dropdownMenuLink\">\n                    <a class=\"dropdown-item\"\n                      href=\"http://www.facebook.com/\"\n                      rel=\"noopener noreferrer\"\n                      target=\"_blank\">\n                      <i class=\"fas fa-share\" aria-hidden=\"true\"></i> Share Post\n                    </a>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <h4 [routerLink]=\"['/resource', post.slug]\"\n              class=\"title my-3\">{{ post.title }}</h4>\n            <p [routerLink]=\"['/resource', post.slug]\"\n              class=\"body mb-5 pb-3 post-body-text\">\n              {{ post.body | removeHtml: 'quill' | textTruncate: 200 }}\n            </p>\n            <div class=\"blog-view py-3 blog-list-write-view\">\n              <ul class=\"d-flex\">\n                <li>{{ post.view !== null ? post.view : '0' }} View</li>\n                <li><a [routerLink]=\"['/resource', post.slug]\">Write Comment</a></li>\n                <li>\n                  <a [routerLink]=\"['/resource', post.slug]\" aria-label=\"Blog\"><i class=\"far fa-heart\" aria-hidden=\"true\"></i></a>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!posts?.length && loaded\">\n    <p>No blog posts available</p>\n  </ng-container>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}body{background:#fff}.blog-listing{border:1px solid rgb(238,238,238);cursor:pointer}.all-posts{margin:5em auto 0;max-width:980px;padding:14px 20px;width:100%}ul.tags{display:inline-flex;font-size:16px;font-weight:400}ul.tags li{color:#337ab7;cursor:pointer;font-weight:600;margin-right:20px}ul.tags li:hover{color:#000}.search{position:relative}.search input{border:0;border-bottom:1px solid rgb(213,206,206)}.search i{position:absolute;right:5px}.blog-list .blog-listing h4{color:#000;font:28px/1.3 Roboto,sans-serif;transition:all .5s}.blog-list .blog-listing h4:hover{color:#0045c7}.blog-list .blog-listing p.body{color:#b3b3b3;font:16px/1.4 Roboto,sans-serif;transition:all .5s}.blog-list .blog-listing p.body:hover{color:#0045c7}.blog-list .blog-listing p.body p{color:inherit;font:inherit;transition:inherit}.blog-list .blog-listing p.body p:hover{color:#0045c7}.blog-list .blog-listing .list-blog-image img{padding:25px}.blog-list .blog-listing .author .avatar-image{border:1px solid rgb(0,0,0);border-radius:50px;height:50px;clip-path:circle(50% at 50% 50%);width:50px}.blog-list .blog-listing .author .avatar-image img{left:50%;position:relative;top:50%;transform:translate(-50%,-50%)}.blog-list .blog-listing .author .avatar-image .default-user-image{width:50px}.blog-list .blog-listing .author .author-name p.name{color:#000;font:14px/1 Roboto,sans-serif;margin:0;transition:all .5s}.blog-list .blog-listing .author .author-name p.name:hover{color:#0045c7}.blog-list .blog-listing .author .author-name p.name i{color:#000}.blog-list .blog-listing .author .author-name ul li{display:inline-block;padding-right:10px;vertical-align:middle}.blog-list .blog-listing .author .author-name ul li a{color:#b3b3b3;font:12px/1 Roboto,sans-serif}.blog-list .blog-listing .author .share-post{flex-grow:3;position:relative;text-align:right}.blog-list .blog-listing .author .share-post i{color:var(--first)}.blog-list .blog-listing .author .share-post .dropdown-menu{border:0 0;box-shadow:0 3px 8px #0003;left:auto!important;right:0;top:20px!important;transform:translate(0)!important}.blog-list .blog-listing .blog-view{border-top:1px solid rgb(238,238,238)}.blog-list .blog-listing .blog-view ul li{color:#b3b3b3;font:12px/1 Roboto,sans-serif;padding-right:14px}.blog-list .blog-listing .blog-view ul li a{color:inherit;font:inherit;transition:all .5s}.blog-list .blog-listing .blog-view ul li a:hover{color:#0045c7}.blog-list .blog-listing .blog-view ul li:last-child{flex-grow:3;padding-right:0;text-align:right}.blog-list .blog-listing .blog-view ul li:last-child i{color:#e84a43;font-size:14px}@media only screen and (max-width: 1024px){.cust-mt{padding:14px 5px}.cust-mt .blog-list .blog-listing h4{font:20px/1.3 Roboto,sans-serif}.cust-mt .blog-list .blog-listing p.body{font:.9rem/1.3 Roboto,sans-serif}.cust-mt .blog-list .blog-listing p.body p{font:inherit}.cust-mt .blog-list .blog-listing .blog-image{height:300px}}@media only screen and (max-width: 767px){.blog-list .blog-listing{height:auto;max-height:none;overflow:visible}.blog-list .blog-listing .blog-view{padding-bottom:1rem}}@media (min-width: 768px){.blog-list-write-view{position:absolute}.blog-view{bottom:0;width:92%}}.post-body-text:hover{color:var(--titles)!important}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i6.HeaderComponent, selector: "pw-header", inputs: ["landing"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i9.LazyImgDirective, selector: "img" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i9$1.RemoveHtmlPipe, name: "removeHtml" }, { kind: "pipe", type: i9$1.TextTruncatePipe, name: "textTruncate" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pw-posts-list', encapsulation: ViewEncapsulation.None, template: "<pw-header/>\n<div class=\"all-posts py-5\">\n  <div class=\"row mt-5 mb-4 px-2\">\n    <div class=\"col-md-9\">\n      <ul class=\"tags\">\n        <li (keydown.enter)=\"getPosts(1, 100)\" (click)=\"getPosts(1, 100)\">All Resources</li>\n        <li *ngFor=\"let tag of tags\"\n          (keydown.enter)=\"tagPost(tag)\"\n          (click)=\"tagPost(tag)\">{{ tag.name }}</li>\n      </ul>\n    </div>\n    <div class=\"col-md-3\">\n      <div class=\"search\"\n        *ngIf=\"searchInput; else searchIcon\">\n        <input type=\"text\"\n          class=\"w-100\"\n          placeholder=\"search...\"\n          [(ngModel)]=\"searchTextItems\"\n          (keydown.enter)=\"onSearch(0.5)\" />\n        <i class=\"fa fa-times\" (click)=\"showSearch('close')\" (keydown.enter)=\"showSearch('close')\"  aria-hidden=\"true\"></i>\n      </div>\n      <ng-template #searchIcon>\n        <i\n                    class=\"fa fa-search w-100 text-end\"\n                    (click)=\"showSearch('open')\"\n                    (keydown.enter)=\"showSearch('open')\"\n                    aria-hidden=\"true\"\n                ></i>\n      </ng-template>\n    </div>\n  </div>\n  <ng-container *ngIf=\"loading && !loaded\">\n    <div class=\"w-100 text-center mt-3\">\n      <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"posts?.length && !loading\">\n    <div class=\"blog-list\">\n      <div class=\"row mt-4 ms-1 me-1 blog-listing\"\n        *ngFor=\"let post of data\">\n        <div class=\"col-md-6 col-sm-12 col-xs-12 my-auto\"\n          [routerLink]=\"['/resource', post.slug]\">\n          <div class=\"list-blog-image\">\n            <img [src]=\"post.picture?.url\"\n              alt=\"Post List\"\n              class=\"img-fluid\" />\n          </div>\n        </div>\n        <div class=\"col-md-6 col-sm-12 col-xs-12 px-4 position-relative\">\n          <div class=\"mt-4\">\n            <div class=\"author mb-3 d-flex\">\n              <div class=\"avatar-image\">\n                <a [attr.disabled]=\"!userLoggedIn\"\n                  [routerLink]=\"['/members', post?.author?.slug]\">\n                  <img *ngIf=\"post.author?.avatar\"\n                    [src]=\"post.author?.avatar[0]?.url\"\n                    alt=\"Author\" />\n                  <img *ngIf=\"!post.author?.avatar\"\n                    src=\"/assets/img/icons/male.png\"\n                    alt=\"Author\"\n                    class=\"default-user-image\" />\n                </a>\n              </div>\n\n              <div class=\"author-name ps-2\">\n                <a [attr.disabled]=\"!userLoggedIn\"\n                  [routerLink]=\"['/members', post?.author?.slug]\"\n                  class=\"name\">\n                  {{ post.author.first_name }}\n                  <i class=\"fas fa-crown\" aria-hidden=\"true\"></i></a>\n                <ul>\n                  <li>\n                    <a href=\"javascript:void(0);\">\n                      {{ post.published_at | date: 'dd/MM/yyyy' }}\n                    </a>\n                  </li>\n                  <li>.</li>\n                  <li>\n                    <a href=\"javascript:void(0);\">{{ thisPostReadingTime(post.body) }}\n                    </a>\n                  </li>\n                </ul>\n              </div>\n              <div class=\"share-post\">\n                <div class=\"dropdown\">\n                  <a href=\"#\"\n                    aria-label=\"Post Menu\"\n                    id=\"dropdownMenuLink\"\n                    data-bs-toggle=\"dropdown\"\n                    aria-haspopup=\"true\"\n                    (keydown.enter)=\"$event.preventDefault(); $event.target.click()\"\n                    (keydown.space)=\"$event.preventDefault(); $event.target.click()\"\n                    aria-expanded=\"false\">\n                    <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n                  </a>\n                  <div class=\"dropdown-menu\"\n                    aria-labelledby=\"dropdownMenuLink\">\n                    <a class=\"dropdown-item\"\n                      href=\"http://www.facebook.com/\"\n                      rel=\"noopener noreferrer\"\n                      target=\"_blank\">\n                      <i class=\"fas fa-share\" aria-hidden=\"true\"></i> Share Post\n                    </a>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <h4 [routerLink]=\"['/resource', post.slug]\"\n              class=\"title my-3\">{{ post.title }}</h4>\n            <p [routerLink]=\"['/resource', post.slug]\"\n              class=\"body mb-5 pb-3 post-body-text\">\n              {{ post.body | removeHtml: 'quill' | textTruncate: 200 }}\n            </p>\n            <div class=\"blog-view py-3 blog-list-write-view\">\n              <ul class=\"d-flex\">\n                <li>{{ post.view !== null ? post.view : '0' }} View</li>\n                <li><a [routerLink]=\"['/resource', post.slug]\">Write Comment</a></li>\n                <li>\n                  <a [routerLink]=\"['/resource', post.slug]\" aria-label=\"Blog\"><i class=\"far fa-heart\" aria-hidden=\"true\"></i></a>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"!posts?.length && loaded\">\n    <p>No blog posts available</p>\n  </ng-container>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}body{background:#fff}.blog-listing{border:1px solid rgb(238,238,238);cursor:pointer}.all-posts{margin:5em auto 0;max-width:980px;padding:14px 20px;width:100%}ul.tags{display:inline-flex;font-size:16px;font-weight:400}ul.tags li{color:#337ab7;cursor:pointer;font-weight:600;margin-right:20px}ul.tags li:hover{color:#000}.search{position:relative}.search input{border:0;border-bottom:1px solid rgb(213,206,206)}.search i{position:absolute;right:5px}.blog-list .blog-listing h4{color:#000;font:28px/1.3 Roboto,sans-serif;transition:all .5s}.blog-list .blog-listing h4:hover{color:#0045c7}.blog-list .blog-listing p.body{color:#b3b3b3;font:16px/1.4 Roboto,sans-serif;transition:all .5s}.blog-list .blog-listing p.body:hover{color:#0045c7}.blog-list .blog-listing p.body p{color:inherit;font:inherit;transition:inherit}.blog-list .blog-listing p.body p:hover{color:#0045c7}.blog-list .blog-listing .list-blog-image img{padding:25px}.blog-list .blog-listing .author .avatar-image{border:1px solid rgb(0,0,0);border-radius:50px;height:50px;clip-path:circle(50% at 50% 50%);width:50px}.blog-list .blog-listing .author .avatar-image img{left:50%;position:relative;top:50%;transform:translate(-50%,-50%)}.blog-list .blog-listing .author .avatar-image .default-user-image{width:50px}.blog-list .blog-listing .author .author-name p.name{color:#000;font:14px/1 Roboto,sans-serif;margin:0;transition:all .5s}.blog-list .blog-listing .author .author-name p.name:hover{color:#0045c7}.blog-list .blog-listing .author .author-name p.name i{color:#000}.blog-list .blog-listing .author .author-name ul li{display:inline-block;padding-right:10px;vertical-align:middle}.blog-list .blog-listing .author .author-name ul li a{color:#b3b3b3;font:12px/1 Roboto,sans-serif}.blog-list .blog-listing .author .share-post{flex-grow:3;position:relative;text-align:right}.blog-list .blog-listing .author .share-post i{color:var(--first)}.blog-list .blog-listing .author .share-post .dropdown-menu{border:0 0;box-shadow:0 3px 8px #0003;left:auto!important;right:0;top:20px!important;transform:translate(0)!important}.blog-list .blog-listing .blog-view{border-top:1px solid rgb(238,238,238)}.blog-list .blog-listing .blog-view ul li{color:#b3b3b3;font:12px/1 Roboto,sans-serif;padding-right:14px}.blog-list .blog-listing .blog-view ul li a{color:inherit;font:inherit;transition:all .5s}.blog-list .blog-listing .blog-view ul li a:hover{color:#0045c7}.blog-list .blog-listing .blog-view ul li:last-child{flex-grow:3;padding-right:0;text-align:right}.blog-list .blog-listing .blog-view ul li:last-child i{color:#e84a43;font-size:14px}@media only screen and (max-width: 1024px){.cust-mt{padding:14px 5px}.cust-mt .blog-list .blog-listing h4{font:20px/1.3 Roboto,sans-serif}.cust-mt .blog-list .blog-listing p.body{font:.9rem/1.3 Roboto,sans-serif}.cust-mt .blog-list .blog-listing p.body p{font:inherit}.cust-mt .blog-list .blog-listing .blog-image{height:300px}}@media only screen and (max-width: 767px){.blog-list .blog-listing{height:auto;max-height:none;overflow:visible}.blog-list .blog-listing .blog-view{padding-bottom:1rem}}@media (min-width: 768px){.blog-list-write-view{position:absolute}.blog-view{bottom:0;width:92%}}.post-body-text:hover{color:var(--titles)!important}\n"] }]
+        }], ctorParameters: () => [{ type: ResourceService }, { type: i2.TagService }, { type: i0.Injector }] });
+
+class ResourceBlog {
+    static getResourcePostsForm() {
+        return new UntypedFormBuilder().group({
+            related_entity_id: [''],
+            related_entity_type: [''],
+            comment: [null, Validators.required],
+            user_id: ['']
+        });
+    }
+}
+
+class ResourceReadComponent extends AppBaseComponent {
+    constructor(resourceService, toastr, injector, sanitizer) {
+        super(injector);
+        this.resourceService = resourceService;
+        this.toastr = toastr;
+        this.sanitizer = sanitizer;
+        this.recentPosts = [];
+        this.postComments = [];
+        this.userLoggedIn = false;
+        this.buttonBusy = false;
+        this.commentForm = ResourceBlog.getResourcePostsForm();
+    }
+    ngOnInit() {
+        this.masterSubscriptionId = this.appConfig.master_subscription.subscription_id;
+        this.route.params.subscribe(params => {
+            this.slug = params['slug'] || '';
+            this.getBlogItem(this.slug);
+        });
+        this.localStorage.getItem$(TOKEN_KEY).subscribe(res => {
+            this.userLoggedIn = !!res;
+            if (this.userLoggedIn) {
+                this.userService.getUserInfo().subscribe(data => {
+                    this.user = data;
+                });
+            }
+        });
+    }
+    readingTime(text) {
+        if (text) {
+            const textContent = text.toString();
+            const wordsPerMinute = 200;
+            const noOfWords = textContent.split(/\s/g).length;
+            const minutes = noOfWords / wordsPerMinute;
+            const readTime = Math.ceil(minutes);
+            return `${readTime} minute read`;
+        }
+        return '';
+    }
+    handleImageError(event, fallbackPath) {
+        HelperService.handleImageFallbackPath(event, fallbackPath);
+    }
+    getBlogItem(slug) {
+        this.resourceService.getPostBySlug(slug).subscribe(response => {
+            let blogBody;
+            if (response?.body) {
+                blogBody = HelperService.sanitizeQuillBody(response.body, this.sanitizer);
+            }
+            this.post = { ...response, body: blogBody };
+            this.postComments = response.entity_comments;
+            this.getPosts(1, 4);
+        });
+    }
+    getPosts(page, pageSize) {
+        this.resourceService
+            .getPublicPosts(this.masterSubscriptionId, page, pageSize, '')
+            .subscribe(response => {
+            this.recentPosts = response.posts.filter(post => post.slug !== this.post.slug);
+        });
+    }
+    onComment() {
+        this.buttonBusy = true;
+        const data = { ...this.commentForm.value };
+        data.related_entity_id = this.post?.id;
+        data.related_entity_type = 'Post';
+        data.user_id = this.user?.id;
+        this.resourceService
+            .postComments(data)
+            .subscribe(() => {
+            this.getBlogItem(this.slug);
+            this.commentForm.reset();
+            this.toastr.success(this.translation.translate('Resource.Posts.CommentAdded'));
+        })
+            .add(() => {
+            this.buttonBusy = false;
+        });
+    }
+    tagPost(selectedTag) {
+        this.recentPosts = this.recentPosts.filter(element => {
+            let filtered;
+            if (element.tags?.length) {
+                filtered = element.tags.filter(tag => tag.tag_category_id === selectedTag.tag_category_id);
+                return { element, filtered };
+            }
+            return {};
+        });
+    }
+    trackByTagId(_index, item) {
+        return item.id;
+    }
+    trackByRecentPost(_index, item) {
+        return item.id;
+    }
+    trackByComment(_index, item) {
+        return item.id;
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceReadComponent, deps: [{ token: ResourceService }, { token: i2.CustomToastService }, { token: i0.Injector }, { token: i3$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourceReadComponent, selector: "pw-post-read", usesInheritance: true, ngImport: i0, template: "<pw-header/>\n<div class=\"read-post mt-5 pt-5\">\n  <div class=\"show-blog\">\n    <div class=\"row\">\n      <!-- content -->\n      <div class=\"col-12\">\n        <ul class=\"d-flex align-items-center mb-4 position-relative\">\n          <li>\n            <a href=\"javascript:void(0);\">\n              <div class=\"avatar-image\">\n                <a [attr.disabled]=\"!userLoggedIn\"\n                  [routerLink]=\"['/members', post?.author?.slug]\">\n                  <img *ngIf=\"post?.author?.avatar\"\n                    [src]=\"post?.author?.avatar[0].url\"\n                    alt=\"author\" />\n                  <img *ngIf=\"!post?.author?.avatar\"\n                    height=\"45\"\n                    width=\"45\"\n                    src=\"/assets/img/icons/male.png\"\n                    alt=\"author\" /></a>\n              </div>\n            </a>\n          </li>\n          <li>\n            <a [attr.disabled]=\"!userLoggedIn\"\n              [routerLink]=\"['/members', post?.author?.slug]\"\n              class=\"name\">\n              {{ post?.author?.first_name }}\n              <i class=\"fas fa-crown\" aria-hidden=\"true\"></i></a>\n          </li>\n          <li>\n            <a class=\"text-dark\"\n              href=\"javascript:void(0);\">{{\n                            post?.author.published_at\n                        }}</a>\n          </li>\n          <li>.</li>\n          <li>\n            <a class=\"text-dark\"\n              href=\"javascript:void(0);\">\n              {{ readingTime(post?.body) }}\n            </a>\n          </li>\n          <li class=\"social-media\">\n            <div class=\"share-post\">\n              <div class=\"dropdown\">\n                <a href=\"#\"\n                  id=\"dropdownMenuLink2\"\n                  data-bs-toggle=\"dropdown\"\n                  aria-haspopup=\"true\"\n                  aria-label=\"Menu\"\n                  (keydown.enter)=\"$event.preventDefault(); $event.target.click()\"\n                  (keydown.space)=\"$event.preventDefault(); $event.target.click()\"\n                  aria-expanded=\"false\">\n                  <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n                </a>\n\n                <div class=\"dropdown-menu\"\n                  aria-labelledby=\"dropdownMenuLink2\">\n                  <a data-bs-toggle=\"modal\"\n                    data-bs-target=\"#exampleModal\"\n                    class=\"dropdown-item\"\n                    href=\"javascript:void(0);\">\n                    <i class=\"fas fa-share\" aria-hidden=\"true\"></i> Share Post\n                  </a>\n                </div>\n              </div>\n            </div>\n          </li>\n        </ul>\n        <h2 class=\"mb-3\">{{ post?.title }}</h2>\n        <div class=\"ql-snow body-quill\"\n                    >\n                    <div class=\"ql-editor body post-body-text\"\n                      [innerHTML]=\"post?.body\">\n                    </div>\n                  </div>\n\n        <ul class=\"bottom-social-icons d-flex justify-content-between mt-5 border-top border-bottom py-3\">\n          <li class=\"social-media-blog-page\">\n            <div class=\"share-post\">\n              <div class=\"dropdown\">\n                <a href=\"#\"\n                  aria-label=\"Menu\"\n                  (keydown.enter)=\"$event.preventDefault(); $event.target.click()\"\n                  (keydown.space)=\"$event.preventDefault(); $event.target.click()\"\n                  id=\"dropdownMenuLink\"\n                  data-bs-toggle=\"dropdown\"\n                  aria-haspopup=\"true\"\n                  aria-expanded=\"false\">\n                  <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n                </a>\n\n                <div class=\"dropdown-menu\"\n                  aria-labelledby=\"dropdownMenuLink\">\n                  <a data-bs-toggle=\"modal\"\n                    data-bs-target=\"#exampleModal\"\n                    class=\"dropdown-item\"\n                    href=\"javascript:void(0);\">\n                    <i class=\"fas fa-share\" aria-hidden=\"true\"></i> Share Post\n                  </a>\n                </div>\n              </div>\n            </div>\n          </li>\n          <li>\n            <ul>\n              <li *ngFor=\"let tag of post?.tags; trackBy: trackByTagId\"\n                (keydown.enter)=\"tagPost(tag)\"\n                (click)=\"tagPost(tag)\">\n                {{ tag.name }}\n              </li>\n            </ul>\n          </li>\n        </ul>\n        <ul class=\"d-flex justify-content-between mt-3 views\">\n          <li>\n            <span>{{ post?.view || 0 }} views</span>\n          </li>\n          <li><i class=\"far fa-heart\" aria-hidden=\"true\"></i></li>\n        </ul>\n      </div>\n      <!--content end -->\n    </div>\n    <!-- modal for share buttons -->\n    <div class=\"modal fade\"\n      id=\"exampleModal\"\n      tabindex=\"-1\"\n      aria-labelledby=\"exampleModalLabel\">\n      <div class=\"modal-dialog modal-dialog-centered\" >\n        <div class=\"modal-content\">\n          <div class=\"modal-header\">\n            <h5 class=\"modal-title\"\n              id=\"exampleModalLabel\">Share the post</h5>\n            <button type=\"button\"\n              class=\"btn-close float-end\"\n              data-dismiss=\"modal\"\n              aria-label=\"Close\">\n              <span>&times;</span>\n            </button>\n          </div>\n          <div class=\"modal-body\">\n            <share-buttons theme=\"material-dark\"\n              show=\"7\"></share-buttons>\n          </div>\n          <div class=\"modal-footer\">\n            <button type=\"button\"\n              class=\"btn btn-primary\"\n              data-dismiss=\"modal\">\n              Close\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- recent posts -->\n  <div class=\"related-posts mt-5\">\n    <ul class=\"d-flex justify-content-between\">\n      <li>\n        <h5>Recent Resources</h5>\n      </li>\n      <li><a [routerLink]=\"['/resource']\">See All</a></li>\n    </ul>\n    <div class=\"row mt-4\">\n      <div class=\"col-sm-6 col-md-6 col-lg-4 col-xs-12 mb-2\"\n        *ngFor=\"let recentPost of recentPosts; trackBy: trackByRecentPost\">\n        <div class=\"recent-post\"\n          [routerLink]=\"['/resource', recentPost.slug]\">\n          <div class=\"blog-image\">\n            <img [src]=\"recentPost.picture.url\"\n              alt=\"Resource\" />\n          </div>\n          <h5 class=\"pt-4 blog-title ps-3 pe-3\">{{ recentPost?.title }}</h5>\n          <div class=\"blog-view pt-3 ps-3 pe-3\">\n            <p>{{ recentPost.view !== null ? recentPost.view : '0' }} View</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"row mt-5 mb-4\">\n    <div class=\"col-12\">\n      <form class=\"comments-sec\"\n        [formGroup]=\"commentForm\"\n        (ngSubmit)=\"onComment()\"\n        *ngIf=\"userLoggedIn; else userLoggedOut\">\n        <div class=\"col-12 pt-4\">\n          <!-- Comment Massage -->\n          <pw-input-container label=\"Write a response\"\n            name=\"comment\"\n            errorMsg=\"Please enter comment\">\n            <textarea type=\"text\"\n              class=\"form-control\"\n              formControlName=\"comment\"></textarea>\n          </pw-input-container>\n\n          <div class=\"text-end mt-4\">\n            <button type=\"submit\"\n            [buttonBusy]=\"buttonBusy\"\n            class=\"btn btn-primary\">\n            {{ 'Button.Submit' | transloco }}\n          </button>\n          </div>\n        </div>\n      </form>\n      <ng-template #userLoggedOut>\n        <p class=\"text-center pt-3 pb-3 userNotLoggedIn\">\n          <a [routerLink]=\"['/login']\">Log in</a>\n          to leave a comment!\n        </p>\n      </ng-template>\n    </div>\n  </div>\n  <div class=\"row mt-5 mb-5\">\n    <div class=\"col-12\"\n      *ngFor=\"let comment of postComments; trackBy: trackByComment\">\n      <div class=\"comment-post mt-2\">\n        <img *ngIf=\"comment?.user?.avatar\"\n          [src]=\"comment.user?.avatar[0]?.url\"\n          alt=\"avatar\"\n          width=\"45\"\n          height=\"45\"\n          class=\"rounded-circle me-3 mb-2\"\n          (error)=\"handleImageError($event, 'assets/img/icons/male.png')\" />\n        <img *ngIf=\"!comment?.user?.avatar\"\n          alt=\"avatar\"\n          width=\"45\"\n          height=\"45\"\n          class=\"rounded-circle me-3 mb-2\"\n          src=\"assets/img/icons/male.png\" />\n        <small>{{ comment.user?.first_name ? comment.user?.first_name : '' }}\n          {{ comment.user?.last_name ? comment.user?.last_name : '' }}\n        </small>\n        <p>{{ comment.comment }}</p>\n        <p class=\"text-end comment-date\">{{ comment.created_at | date: 'dd/MM/yyyy' }}</p>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.show-blog,.recent-post{border:1px solid rgb(238,238,238)}.recent-post .blog-image{height:250px;min-height:250px}.recent-post .blog-image img{height:100%;width:100%}.recent-post .blog-title{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:300px}.recent-post .blog-view{border-top:1px solid rgb(238,238,238)}body{background:#fff}form.comments-sec{background-color:#f7f7f7;border:1px solid rgb(238,238,238)}form.comments-sec .no-padding{padding:0}form.comments-sec button{font-size:16px;margin-bottom:20px;margin-right:20px;padding:10px 25px;text-transform:uppercase}form.comments-sec label{background-color:#eee;color:gray;display:inline-block;margin:0;padding:15px;width:100%}form.comments-sec .mb-3{margin:0;padding:20px}form.comments-sec .mb-3 textarea{border:1px solid rgb(238,238,238);height:150px}.userNotLoggedIn{background:#f7f7f7;border:1px solid rgb(238,238,238);font-weight:400}.userNotLoggedIn a{color:#4444bc!important}.comment-post{background:#f7f7f7;border:1px solid rgb(238,238,238);padding:20px}.comment-post .comment-date{color:#777;font-size:14px;font-style:italic;margin:0}share-buttons{background-color:#eee;margin-bottom:10px}.read-post{margin:0 auto 20px;max-width:940px;padding-top:20px}.read-post .show-blog{padding:5rem 5rem 3rem}.read-post .show-blog ul li{display:inline-block;padding-right:10px}.read-post .show-blog ul li a{font:13px/1 Roboto,sans-serif}.read-post .show-blog ul li a .avatar-image{border-radius:50px;height:50px;overflow:hidden;width:50px}.read-post .show-blog ul li a .avatar-image i{color:#000}.read-post .show-blog ul li a .avatar-image i,.read-post .show-blog ul li a .avatar-image img{left:50%;position:relative;top:50%;transform:translate(-50%,-50%)}.read-post .show-blog ul li p.name{color:#000;font:14px/1 Roboto,sans-serif;margin:0;transition:all .5s}.read-post .show-blog ul li p.name:hover{color:#0045c7}.read-post .show-blog ul li p.name i{color:#000}.read-post .show-blog ul.views li:nth-child(2) i{color:#e84a43;font-size:14px}.read-post .show-blog ul.bottom-social-icons li:first-child ul li{padding-right:35px}.read-post .show-blog ul.bottom-social-icons li:first-child ul li i{color:#000}.read-post .show-blog ul.bottom-social-icons li:nth-child(2){padding:0}.read-post .show-blog ul.bottom-social-icons li:nth-child(2) ul li{padding-left:30px}.read-post .show-blog ul.bottom-social-icons li:nth-child(2) ul li a{color:#000}.read-post .show-blog .social-media{position:absolute;right:0;top:50%;transform:translateY(-50%)}.read-post .show-blog .social-media .share-post{flex-grow:3;position:relative;text-align:right}.read-post .show-blog .social-media .share-post i{color:var(--first)}.read-post .show-blog .social-media .share-post .dropdown-menu{border:0 none;box-shadow:0 3px 8px #0003;left:auto!important;right:0;top:20px!important;transform:translate(0)!important}.read-post .show-blog .body p img{max-width:100%}.social-media-blog-page a{color:#000}@media only screen and (max-width: 1024px){.read-post{padding:1rem}.read-post .show-blog{padding:.5rem}.read-post .show-blog h2{font-size:30px}}@media only screen and (max-width: 767px){.read-post,.read-post .show-blog{padding:.5rem}.read-post .show-blog ul{flex-wrap:wrap}.read-post .show-blog ul.bottom-social-icons li{width:100%}.read-post .show-blog ul.bottom-social-icons li ul{display:flex;justify-content:space-around;margin:10px 0}.read-post .show-blog ul.bottom-social-icons li ul li{padding:0!important;text-align:center;width:33.333%}.read-post .show-blog ul li{font:12px/1 Roboto,sans-serif;padding-right:5px}.read-post .show-blog ul li a{font:11px/1 Roboto,sans-serif}.read-post .show-blog ul li p.name{font:12px/1 Roboto,sans-serif}.read-post .show-blog h2{font-size:26px}.read-post .show-blog .body p{font-size:.8rem}}.subscribe-btn{background-color:var(--first);color:#fff}.subscribe-btn:hover{background-color:#fff;color:var(--first)}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i6.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i6.HeaderComponent, selector: "pw-header", inputs: ["landing"] }, { kind: "component", type: i7.ShareButtons, selector: "share-buttons", inputs: ["theme", "include", "exclude", "show", "url", "title", "description", "image", "tags", "redirectUrl", "autoSetMeta", "showIcon", "showText", "disabled"], outputs: ["opened", "closed"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i9.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i9.LazyImgDirective, selector: "img" }, { kind: "pipe", type: i3.DatePipe, name: "date" }, { kind: "pipe", type: i10.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceReadComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pw-post-read', encapsulation: ViewEncapsulation.None, template: "<pw-header/>\n<div class=\"read-post mt-5 pt-5\">\n  <div class=\"show-blog\">\n    <div class=\"row\">\n      <!-- content -->\n      <div class=\"col-12\">\n        <ul class=\"d-flex align-items-center mb-4 position-relative\">\n          <li>\n            <a href=\"javascript:void(0);\">\n              <div class=\"avatar-image\">\n                <a [attr.disabled]=\"!userLoggedIn\"\n                  [routerLink]=\"['/members', post?.author?.slug]\">\n                  <img *ngIf=\"post?.author?.avatar\"\n                    [src]=\"post?.author?.avatar[0].url\"\n                    alt=\"author\" />\n                  <img *ngIf=\"!post?.author?.avatar\"\n                    height=\"45\"\n                    width=\"45\"\n                    src=\"/assets/img/icons/male.png\"\n                    alt=\"author\" /></a>\n              </div>\n            </a>\n          </li>\n          <li>\n            <a [attr.disabled]=\"!userLoggedIn\"\n              [routerLink]=\"['/members', post?.author?.slug]\"\n              class=\"name\">\n              {{ post?.author?.first_name }}\n              <i class=\"fas fa-crown\" aria-hidden=\"true\"></i></a>\n          </li>\n          <li>\n            <a class=\"text-dark\"\n              href=\"javascript:void(0);\">{{\n                            post?.author.published_at\n                        }}</a>\n          </li>\n          <li>.</li>\n          <li>\n            <a class=\"text-dark\"\n              href=\"javascript:void(0);\">\n              {{ readingTime(post?.body) }}\n            </a>\n          </li>\n          <li class=\"social-media\">\n            <div class=\"share-post\">\n              <div class=\"dropdown\">\n                <a href=\"#\"\n                  id=\"dropdownMenuLink2\"\n                  data-bs-toggle=\"dropdown\"\n                  aria-haspopup=\"true\"\n                  aria-label=\"Menu\"\n                  (keydown.enter)=\"$event.preventDefault(); $event.target.click()\"\n                  (keydown.space)=\"$event.preventDefault(); $event.target.click()\"\n                  aria-expanded=\"false\">\n                  <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n                </a>\n\n                <div class=\"dropdown-menu\"\n                  aria-labelledby=\"dropdownMenuLink2\">\n                  <a data-bs-toggle=\"modal\"\n                    data-bs-target=\"#exampleModal\"\n                    class=\"dropdown-item\"\n                    href=\"javascript:void(0);\">\n                    <i class=\"fas fa-share\" aria-hidden=\"true\"></i> Share Post\n                  </a>\n                </div>\n              </div>\n            </div>\n          </li>\n        </ul>\n        <h2 class=\"mb-3\">{{ post?.title }}</h2>\n        <div class=\"ql-snow body-quill\"\n                    >\n                    <div class=\"ql-editor body post-body-text\"\n                      [innerHTML]=\"post?.body\">\n                    </div>\n                  </div>\n\n        <ul class=\"bottom-social-icons d-flex justify-content-between mt-5 border-top border-bottom py-3\">\n          <li class=\"social-media-blog-page\">\n            <div class=\"share-post\">\n              <div class=\"dropdown\">\n                <a href=\"#\"\n                  aria-label=\"Menu\"\n                  (keydown.enter)=\"$event.preventDefault(); $event.target.click()\"\n                  (keydown.space)=\"$event.preventDefault(); $event.target.click()\"\n                  id=\"dropdownMenuLink\"\n                  data-bs-toggle=\"dropdown\"\n                  aria-haspopup=\"true\"\n                  aria-expanded=\"false\">\n                  <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n                </a>\n\n                <div class=\"dropdown-menu\"\n                  aria-labelledby=\"dropdownMenuLink\">\n                  <a data-bs-toggle=\"modal\"\n                    data-bs-target=\"#exampleModal\"\n                    class=\"dropdown-item\"\n                    href=\"javascript:void(0);\">\n                    <i class=\"fas fa-share\" aria-hidden=\"true\"></i> Share Post\n                  </a>\n                </div>\n              </div>\n            </div>\n          </li>\n          <li>\n            <ul>\n              <li *ngFor=\"let tag of post?.tags; trackBy: trackByTagId\"\n                (keydown.enter)=\"tagPost(tag)\"\n                (click)=\"tagPost(tag)\">\n                {{ tag.name }}\n              </li>\n            </ul>\n          </li>\n        </ul>\n        <ul class=\"d-flex justify-content-between mt-3 views\">\n          <li>\n            <span>{{ post?.view || 0 }} views</span>\n          </li>\n          <li><i class=\"far fa-heart\" aria-hidden=\"true\"></i></li>\n        </ul>\n      </div>\n      <!--content end -->\n    </div>\n    <!-- modal for share buttons -->\n    <div class=\"modal fade\"\n      id=\"exampleModal\"\n      tabindex=\"-1\"\n      aria-labelledby=\"exampleModalLabel\">\n      <div class=\"modal-dialog modal-dialog-centered\" >\n        <div class=\"modal-content\">\n          <div class=\"modal-header\">\n            <h5 class=\"modal-title\"\n              id=\"exampleModalLabel\">Share the post</h5>\n            <button type=\"button\"\n              class=\"btn-close float-end\"\n              data-dismiss=\"modal\"\n              aria-label=\"Close\">\n              <span>&times;</span>\n            </button>\n          </div>\n          <div class=\"modal-body\">\n            <share-buttons theme=\"material-dark\"\n              show=\"7\"></share-buttons>\n          </div>\n          <div class=\"modal-footer\">\n            <button type=\"button\"\n              class=\"btn btn-primary\"\n              data-dismiss=\"modal\">\n              Close\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <!-- recent posts -->\n  <div class=\"related-posts mt-5\">\n    <ul class=\"d-flex justify-content-between\">\n      <li>\n        <h5>Recent Resources</h5>\n      </li>\n      <li><a [routerLink]=\"['/resource']\">See All</a></li>\n    </ul>\n    <div class=\"row mt-4\">\n      <div class=\"col-sm-6 col-md-6 col-lg-4 col-xs-12 mb-2\"\n        *ngFor=\"let recentPost of recentPosts; trackBy: trackByRecentPost\">\n        <div class=\"recent-post\"\n          [routerLink]=\"['/resource', recentPost.slug]\">\n          <div class=\"blog-image\">\n            <img [src]=\"recentPost.picture.url\"\n              alt=\"Resource\" />\n          </div>\n          <h5 class=\"pt-4 blog-title ps-3 pe-3\">{{ recentPost?.title }}</h5>\n          <div class=\"blog-view pt-3 ps-3 pe-3\">\n            <p>{{ recentPost.view !== null ? recentPost.view : '0' }} View</p>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"row mt-5 mb-4\">\n    <div class=\"col-12\">\n      <form class=\"comments-sec\"\n        [formGroup]=\"commentForm\"\n        (ngSubmit)=\"onComment()\"\n        *ngIf=\"userLoggedIn; else userLoggedOut\">\n        <div class=\"col-12 pt-4\">\n          <!-- Comment Massage -->\n          <pw-input-container label=\"Write a response\"\n            name=\"comment\"\n            errorMsg=\"Please enter comment\">\n            <textarea type=\"text\"\n              class=\"form-control\"\n              formControlName=\"comment\"></textarea>\n          </pw-input-container>\n\n          <div class=\"text-end mt-4\">\n            <button type=\"submit\"\n            [buttonBusy]=\"buttonBusy\"\n            class=\"btn btn-primary\">\n            {{ 'Button.Submit' | transloco }}\n          </button>\n          </div>\n        </div>\n      </form>\n      <ng-template #userLoggedOut>\n        <p class=\"text-center pt-3 pb-3 userNotLoggedIn\">\n          <a [routerLink]=\"['/login']\">Log in</a>\n          to leave a comment!\n        </p>\n      </ng-template>\n    </div>\n  </div>\n  <div class=\"row mt-5 mb-5\">\n    <div class=\"col-12\"\n      *ngFor=\"let comment of postComments; trackBy: trackByComment\">\n      <div class=\"comment-post mt-2\">\n        <img *ngIf=\"comment?.user?.avatar\"\n          [src]=\"comment.user?.avatar[0]?.url\"\n          alt=\"avatar\"\n          width=\"45\"\n          height=\"45\"\n          class=\"rounded-circle me-3 mb-2\"\n          (error)=\"handleImageError($event, 'assets/img/icons/male.png')\" />\n        <img *ngIf=\"!comment?.user?.avatar\"\n          alt=\"avatar\"\n          width=\"45\"\n          height=\"45\"\n          class=\"rounded-circle me-3 mb-2\"\n          src=\"assets/img/icons/male.png\" />\n        <small>{{ comment.user?.first_name ? comment.user?.first_name : '' }}\n          {{ comment.user?.last_name ? comment.user?.last_name : '' }}\n        </small>\n        <p>{{ comment.comment }}</p>\n        <p class=\"text-end comment-date\">{{ comment.created_at | date: 'dd/MM/yyyy' }}</p>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [":root{--first: rgb(23 105 225);--second: rgb(54 194 131);--third: rgb(255 171 0);--text: rgb(34 34 34);--tabs_bg: rgb(23 105 225);--tabs_sub_bg: rgb(70, 136, 236);--tabs_text: rgb(255 255 255);--titles: rgb(34 34 34);--sidebar_bg: rgb(0, 48, 63);--sidebar_text: rgb(255 255 255)}.show-blog,.recent-post{border:1px solid rgb(238,238,238)}.recent-post .blog-image{height:250px;min-height:250px}.recent-post .blog-image img{height:100%;width:100%}.recent-post .blog-title{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:300px}.recent-post .blog-view{border-top:1px solid rgb(238,238,238)}body{background:#fff}form.comments-sec{background-color:#f7f7f7;border:1px solid rgb(238,238,238)}form.comments-sec .no-padding{padding:0}form.comments-sec button{font-size:16px;margin-bottom:20px;margin-right:20px;padding:10px 25px;text-transform:uppercase}form.comments-sec label{background-color:#eee;color:gray;display:inline-block;margin:0;padding:15px;width:100%}form.comments-sec .mb-3{margin:0;padding:20px}form.comments-sec .mb-3 textarea{border:1px solid rgb(238,238,238);height:150px}.userNotLoggedIn{background:#f7f7f7;border:1px solid rgb(238,238,238);font-weight:400}.userNotLoggedIn a{color:#4444bc!important}.comment-post{background:#f7f7f7;border:1px solid rgb(238,238,238);padding:20px}.comment-post .comment-date{color:#777;font-size:14px;font-style:italic;margin:0}share-buttons{background-color:#eee;margin-bottom:10px}.read-post{margin:0 auto 20px;max-width:940px;padding-top:20px}.read-post .show-blog{padding:5rem 5rem 3rem}.read-post .show-blog ul li{display:inline-block;padding-right:10px}.read-post .show-blog ul li a{font:13px/1 Roboto,sans-serif}.read-post .show-blog ul li a .avatar-image{border-radius:50px;height:50px;overflow:hidden;width:50px}.read-post .show-blog ul li a .avatar-image i{color:#000}.read-post .show-blog ul li a .avatar-image i,.read-post .show-blog ul li a .avatar-image img{left:50%;position:relative;top:50%;transform:translate(-50%,-50%)}.read-post .show-blog ul li p.name{color:#000;font:14px/1 Roboto,sans-serif;margin:0;transition:all .5s}.read-post .show-blog ul li p.name:hover{color:#0045c7}.read-post .show-blog ul li p.name i{color:#000}.read-post .show-blog ul.views li:nth-child(2) i{color:#e84a43;font-size:14px}.read-post .show-blog ul.bottom-social-icons li:first-child ul li{padding-right:35px}.read-post .show-blog ul.bottom-social-icons li:first-child ul li i{color:#000}.read-post .show-blog ul.bottom-social-icons li:nth-child(2){padding:0}.read-post .show-blog ul.bottom-social-icons li:nth-child(2) ul li{padding-left:30px}.read-post .show-blog ul.bottom-social-icons li:nth-child(2) ul li a{color:#000}.read-post .show-blog .social-media{position:absolute;right:0;top:50%;transform:translateY(-50%)}.read-post .show-blog .social-media .share-post{flex-grow:3;position:relative;text-align:right}.read-post .show-blog .social-media .share-post i{color:var(--first)}.read-post .show-blog .social-media .share-post .dropdown-menu{border:0 none;box-shadow:0 3px 8px #0003;left:auto!important;right:0;top:20px!important;transform:translate(0)!important}.read-post .show-blog .body p img{max-width:100%}.social-media-blog-page a{color:#000}@media only screen and (max-width: 1024px){.read-post{padding:1rem}.read-post .show-blog{padding:.5rem}.read-post .show-blog h2{font-size:30px}}@media only screen and (max-width: 767px){.read-post,.read-post .show-blog{padding:.5rem}.read-post .show-blog ul{flex-wrap:wrap}.read-post .show-blog ul.bottom-social-icons li{width:100%}.read-post .show-blog ul.bottom-social-icons li ul{display:flex;justify-content:space-around;margin:10px 0}.read-post .show-blog ul.bottom-social-icons li ul li{padding:0!important;text-align:center;width:33.333%}.read-post .show-blog ul li{font:12px/1 Roboto,sans-serif;padding-right:5px}.read-post .show-blog ul li a{font:11px/1 Roboto,sans-serif}.read-post .show-blog ul li p.name{font:12px/1 Roboto,sans-serif}.read-post .show-blog h2{font-size:26px}.read-post .show-blog .body p{font-size:.8rem}}.subscribe-btn{background-color:var(--first);color:#fff}.subscribe-btn:hover{background-color:#fff;color:var(--first)}\n"] }]
+        }], ctorParameters: () => [{ type: ResourceService }, { type: i2.CustomToastService }, { type: i0.Injector }, { type: i3$1.DomSanitizer }] });
+
+// These are the private routes. The public routes and modules needs to be defined in public.routes.ts
+const routes = [
+    {
+        path: '',
+        component: ResourceListComponent,
+        data: {
+            title: 'Resource Posts Admin',
+            permission: 'Pages.Blog'
+        }
+    },
+    {
+        path: ':slug',
+        component: ResourceReadComponent,
+        data: {
+            title: 'Resource Post Admin',
+            permission: 'Pages.Blog'
+        }
+    }
+];
+class BlogPublicRoutingModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: BlogPublicRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: BlogPublicRoutingModule, imports: [i4.RouterModule], exports: [RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: BlogPublicRoutingModule, imports: [RouterModule.forChild(routes), RouterModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: BlogPublicRoutingModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [RouterModule.forChild(routes)],
+                    exports: [RouterModule]
+                }]
+        }] });
+
+class ResourcePublicModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourcePublicModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: ResourcePublicModule, declarations: [ResourceListComponent, ResourceReadComponent], imports: [CommonModule,
+            PipesModule,
+            SharedComponentsModule,
+            NgxUploaderModule,
+            BlogPublicRoutingModule,
+            ShareButtonsModule,
+            ShareIconsModule, i1.QuillModule, FormsModule,
+            PublicModule,
+            CoreTranslocoModule,
+            TranslocoModule,
+            ReactiveFormsModule,
+            DirectivesModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourcePublicModule, providers: [ResourceService, GoogleAnalyticsService], imports: [CommonModule,
+            PipesModule,
+            SharedComponentsModule,
+            NgxUploaderModule,
+            BlogPublicRoutingModule,
+            ShareButtonsModule,
+            ShareIconsModule,
+            QuillModule.forRoot(),
+            FormsModule,
+            PublicModule,
+            CoreTranslocoModule,
+            TranslocoModule,
+            ReactiveFormsModule,
+            DirectivesModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourcePublicModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ResourceListComponent, ResourceReadComponent],
+                    imports: [
+                        CommonModule,
+                        PipesModule,
+                        SharedComponentsModule,
+                        NgxUploaderModule,
+                        BlogPublicRoutingModule,
+                        ShareButtonsModule,
+                        ShareIconsModule,
+                        QuillModule.forRoot(),
+                        FormsModule,
+                        PublicModule,
+                        CoreTranslocoModule,
+                        TranslocoModule,
+                        ReactiveFormsModule,
+                        DirectivesModule
+                    ],
+                    providers: [ResourceService, GoogleAnalyticsService],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                }]
+        }] });
+
+class ResourceModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: ResourceModule, imports: [ResourcePublicModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceModule, imports: [ResourcePublicModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [ResourcePublicModule]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ResourceListComponent, ResourceModule, ResourcePublicModule, ResourceReadComponent };
+//# sourceMappingURL=posiwise-resource-module.mjs.map