@posiwise/resource-module 0.0.205 → 0.0.207

package/fesm2022/posiwise-resource-module-resource-edit-card.component-d9cDJUJf.mjs

@@ -0,0 +1,632 @@
+import { t as ResourceService } from "./posiwise-resource-module-resource.service-BBvcVvWN.mjs";
+import * as i0 from "@angular/core";
+import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, inject } from "@angular/core";
+import { AuthService, TagService } from "@posiwise/common-services";
+import { HelperService } from "@posiwise/helper-service";
+import { NgClass } from "@angular/common";
+import * as i1 from "@angular/forms";
+import { FormBuilder, FormsModule, ReactiveFormsModule } from "@angular/forms";
+import { ButtonBusyDirective, LazyImgDirective } from "@posiwise/directives";
+import { InputContainerComponent } from "@posiwise/shared-components";
+import { TranslocoPipe } from "@jsverse/transloco";
+import { AppBaseComponent } from "@posiwise/app-base-component";
+import { Bind } from "primeng/bind";
+import { ProfileImageCropperComponent } from "@posiwise/utils";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { QuillHelper, editorImageUpload } from "@posiwise/utils/quill";
+import { QuillEditorComponent } from "ngx-quill";
+import * as i2 from "ngx-ui-switch";
+import { UiSwitchModule } from "ngx-ui-switch";
+import { AutoComplete } from "primeng/autocomplete";
+import { DatePicker } from "primeng/datepicker";
+import moment from "moment";
+var ResourceEditCardImages = class ResourceEditCardImages extends AppBaseComponent {
+	constructor() {
+		super(...arguments);
+		this.modalService = inject(NgbModal);
+		this.image = "";
+		this.rectangularImage = "";
+		this.file = null;
+		this.rectangularFile = null;
+	}
+	openImageModal(modalTemplate) {
+		this.imageModalRef = this.modalService.open(modalTemplate, {
+			centered: true,
+			size: "md"
+		});
+	}
+	openRectModal(content) {
+		this.imageModalRef = this.modalService.open(content, {
+			centered: true,
+			windowClass: "modal-holder"
+		});
+	}
+	onImageSelected(base64) {
+		this.image = base64;
+		this.file = HelperService.convertBase64ToFile(base64);
+		this.imageModalRef?.close();
+	}
+	onRectangularImageSelection(base64) {
+		this.rectangularImage = base64;
+		this.rectangularFile = HelperService.convertBase64ToFile(base64);
+		this.imageModalRef?.close();
+	}
+	removeImage() {
+		this.image = null;
+		this.file = null;
+	}
+	deleteRectangularImage() {
+		this.rectangularImage = null;
+		this.rectangularFile = null;
+	}
+	handleImageError(event, fallbackPath) {
+		HelperService.handleImageFallbackPath(event, fallbackPath);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: ResourceEditCardImages,
+			deps: null,
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "14.0.0",
+			version: "22.2.3",
+			type: ResourceEditCardImages,
+			isStandalone: true,
+			selector: "ng-component",
+			usesInheritance: true,
+			ngImport: i0,
+			template: "",
+			isInline: true
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ResourceEditCardImages,
+	decorators: [{
+		type: Component,
+		args: [{ template: "" }]
+	}]
+});
+function resourceEditForm(fb) {
+	return fb.group({
+		title: [""],
+		external_url: [""],
+		cta_text: [""],
+		when: [""],
+		showcase: [false],
+		published_at: [false],
+		accepted_at: [false],
+		body: [""]
+	});
+}
+function resourceFormValue(resource) {
+	return {
+		title: resource.title ?? "",
+		external_url: resource.external_url ?? "",
+		cta_text: resource.cta_text ?? "",
+		when: resource.when ? new Date(resource.when) : "",
+		showcase: !!resource.showcase,
+		published_at: !!resource.published_at,
+		accepted_at: !!resource.accepted_at,
+		body: resource.body
+	};
+}
+function buildResourcePayload(form, subscriptionId, images) {
+	const data = {
+		...form.value,
+		subscription_id: subscriptionId
+	};
+	setFile(data, "picture", images.file);
+	setFile(data, "rectangular_picture", images.rectangularFile);
+	setToggledDate(form, data, "published_at");
+	setToggledDate(form, data, "accepted_at");
+	if (!form.get("when")?.value) data.when = "";
+	if (!form.get("showcase")?.value) data.showcase = "";
+	if (!images.file && !images.image) data.remove_picture = true;
+	if (!images.rectangularFile && !images.rectangularImage) data.remove_rectangular_picture = true;
+	return data;
+}
+function setFile(data, key, file) {
+	if (file) data[key] = file;
+	else delete data[key];
+}
+function setToggledDate(form, data, key) {
+	const control = form.get(key);
+	if (control?.dirty) data[key] = control.value ? moment().format("DD-MMM-YYYY") : "";
+	else delete data[key];
+}
+function filterTags(tags, query) {
+	if (!query) return [...tags];
+	const needle = query.toLowerCase();
+	return tags.filter((tag) => tag.name.toLowerCase().includes(needle));
+}
+function postTagsPayload(tags, postId) {
+	return {
+		entity_tags: tags.map((tag) => ({ tag_id: tag.id })),
+		slug: postId,
+		tag_entity: "Post"
+	};
+}
+var ResourceEditCardComponent = class ResourceEditCardComponent extends ResourceEditCardImages {
+	constructor() {
+		super();
+		this.fb = inject(FormBuilder);
+		this.resourceService = inject(ResourceService);
+		this.authService = inject(AuthService);
+		this.tagService = inject(TagService);
+		this.cdr = inject(ChangeDetectorRef);
+		this.updated = new EventEmitter();
+		this.selectedTags = [];
+		this.allTags = [];
+		this.tagsSuggestion = [];
+		this.buttonBusy = false;
+		this.editorConfig = QuillHelper.getEditorConfig([], editorImageUpload(() => this.subscriptionId));
+		QuillHelper.init();
+		this.editForm = resourceEditForm(this.fb);
+	}
+	ngOnInit() {
+		this.authService.getToken$().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.cdr.markForCheck();
+			});
+			this.cdr.markForCheck();
+		});
+	}
+	navigateToResourceEdit() {
+		const basePath = `/admin/resources/${this.resourceData?.slug}`;
+		const fullUrl = `${location.origin}${basePath}`;
+		window.open(fullUrl, "_blank");
+	}
+	openModal(modalTemplate) {
+		if (this.resourceData) {
+			this.editForm.setValue(resourceFormValue(this.resourceData));
+			this.image = this.resourceData.picture?.url ?? "";
+			this.selectedTags = this.resourceData?.tags?.length ? [...this.resourceData.tags] : [];
+			this.rectangularImage = this.resourceData.rectangular_picture?.url ?? "";
+		}
+		this.modalService.open(modalTemplate, {
+			centered: true,
+			size: "lg"
+		});
+		this.getPostTags();
+	}
+	search(event) {
+		this.tagsSuggestion = filterTags(this.allTags, event.query);
+	}
+	getPostTags() {
+		this.tagService.getTagsByType("post_categories", {}, this.subscriptionId).subscribe((response) => {
+			this.allTags = response.result;
+			this.cdr.markForCheck();
+		});
+	}
+	saveResource() {
+		this.buttonBusy = true;
+		this.saveTags(this.id);
+		const payload = buildResourcePayload(this.editForm, this.subscriptionId, this);
+		this.resourceService.updatePost(payload, this.id).subscribe({
+			next: () => this.settleSave(() => {
+				this.toast.success("Blog Post Updated");
+				this.updated.emit();
+				this.modalService.dismissAll();
+			}),
+			error: () => this.settleSave()
+		});
+	}
+	settleSave(afterSuccess) {
+		setTimeout(() => {
+			this.buttonBusy = false;
+			this.cdr.markForCheck();
+			if (afterSuccess) setTimeout(() => {
+				afterSuccess();
+				this.cdr.markForCheck();
+			}, 0);
+		}, 0);
+	}
+	saveTags(id) {
+		if (this.selectedTags.length) {
+			const data = postTagsPayload(this.selectedTags, id);
+			this.tagService.addTags(data, this.subscriptionId).subscribe(() => {
+				this.cdr.markForCheck();
+			});
+		}
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.3",
+			ngImport: i0,
+			type: ResourceEditCardComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.3",
+			type: ResourceEditCardComponent,
+			isStandalone: true,
+			selector: "pw-resource-edit-card",
+			inputs: {
+				id: "id",
+				resourceData: "resourceData"
+			},
+			outputs: { updated: "updated" },
+			usesInheritance: true,
+			ngImport: i0,
+			template: "<div class=\"edit-card\">\n  <i class=\"fa fa-edit cursor-pointer text-dark in-page-edit-icon d-flex justify-content-center mb-2\"\n    (click)=\"openModal(editResourceModal)\"\n    (keydown.enter)=\"openModal(editResourceModal)\"\n    (keydown.space)=\"openModal(editResourceModal)\"\n  title=\"Edit Resource\"></i>\n</div>\n\n<ng-template #editResourceModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Resource</h5>\n    <i class=\"fa fa-edit cursor-pointer text-dark in-page-edit-icon d-flex justify-content-center ms-3\"\n      (click)=\"navigateToResourceEdit()\"\n      (keydown.enter)=\"navigateToResourceEdit()\"\n      (keydown.space)=\"navigateToResourceEdit()\"\n    title=\"Go to the main edit page\"></i>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <form [formGroup]=\"editForm\">\n      <div class=\"row\">\n\n\n        <div class=\"col-12\">\n          <pw-input-container label=\"Title\" name=\"title\">\n            <input type=\"text\" class=\"form-control\" formControlName=\"title\" id=\"input_title_1\" name=\"input_title_1\"\n                aria-label=\"Title\"/>\n          </pw-input-container>\n        </div>\n\n        <div class=\"col-12 row\">\n          <pw-input-container label=\"CTA Text\" name=\"cta_text\" class=\"col-md-6\"\n            [showTooltip]=\"true\"\n            [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\">\n            <input type=\"text\" class=\"form-control\" formControlName=\"cta_text\" id=\"input_cta_text_2\" name=\"input_cta_text_2\"\n                aria-label=\"Cta Text\"/>\n          </pw-input-container>\n\n          <pw-input-container label=\"External URL\" name=\"external_url\" class=\"col-md-6\"\n            [showTooltip]=\"true\"\n            [tooltipText]=\"'Resource.Posts.Tooltip.ExternalUrl' | transloco\">\n            <input type=\"text\" class=\"form-control\" formControlName=\"external_url\" id=\"input_external_url_3\" name=\"input_external_url_3\"\n                [attr.aria-label]=\"'Resource.Posts.Body' | transloco\"/>\n          </pw-input-container>\n        </div>\n\n        <div class=\"col-12\">\n          <pw-input-container\n            [label]=\"'Resource.Posts.Body' | transloco\"\n            name=\"body\"\n            errorMsg=\"Resource.Posts.Validation.Body\">\n            <quill-editor\n              [styles]=\"{ height: '300px' }\"\n              class=\"quillEditor\"\n              [modules]=\"editorConfig\"\n              formControlName=\"body\"\n              [ngClass]=\"{\n                'w-100': true,\n                'quill-container': true,\n                'is-invalid': submitted && f['body'].errors\n              }\">\n            </quill-editor>\n          </pw-input-container>\n        </div>\n\n        <div class=\"col-12 col-md-3 col-sm-6\">\n          <pw-input-container\n            [label]=\"'Resource.Posts.When' | transloco\"\n            [showTooltip]=\"true\"\n            [tooltipText]=\"'Resource.Posts.Tooltip.When' | transloco\"\n            name=\"when\">\n            <p-datepicker inputId=\"resource-edit-card-when\" formControlName=\"when\"\n              [ariaLabel]=\"'Resource.Posts.When' | transloco\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\"\n              [placeholder]=\"'Select Date'\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['when'].errors }\">\n            </p-datepicker>\n          </pw-input-container>\n        </div>\n\n        <div class=\"col-12 col-md-8\">\n          <pw-input-container\n            [label]=\"'Resource.Posts.Tags' | transloco\"\n            class=\"ui-fluid skills-modal tags\"\n            [showTooltip]=\"true\"\n            [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\"\n            name=\"cta_text\">\n            <p-auto-complete appendTo=\"body\" [(ngModel)]=\"selectedTags\"\n              [ariaLabel]=\"'Resource.Posts.Tags' | transloco\"\n              class=\"body-bg w-100\"\n              [suggestions]=\"tagsSuggestion\"\n              dataKey=\"id\"\n              optionLabel=\"name\"\n              (completeMethod)=\"search($event)\"\n              [minLength]=\"1\"\n              [maxlength]=\"10\"\n              [dropdown]=\"true\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              placeholder=\"Tags\"\n              [multiple]=\"true\">\n            </p-auto-complete>\n          </pw-input-container>\n        </div>\n\n        <div class=\"col-12 row\">\n          <div class=\"col-md-4 col-sm-6\">\n            <pw-input-container\n              [label]=\"'SHOWCASE'\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Mark as showcase post'\"\n              name=\"showcase\">\n              <ui-switch formControlName=\"showcase\" class=\"d-block\"></ui-switch>\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-md-4 col-sm-6\">\n            <pw-input-container\n              [label]=\"'PUBLISHED'\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Set to publish the post'\"\n              name=\"published_at\">\n              <ui-switch formControlName=\"published_at\" class=\"d-block\"></ui-switch>\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-md-4 col-sm-6\">\n            <pw-input-container\n              [label]=\"'ACCEPTED BY ADMIN'\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Indicates approval by admin'\"\n              name=\"accepted_at\">\n              <ui-switch formControlName=\"accepted_at\" class=\"d-block\"></ui-switch>\n            </pw-input-container>\n          </div>\n        </div>\n\n        <div class=\"col-12 col-md-4 col-sm-4 my-4 ms-3\">\n          <div class=\"text-center mb-4\">\n            <span id=\"resource-edit-cover-picture-label\" class=\"pw-label-style\">{{ 'Resource.Posts.CoverPicture' | transloco }}</span>\n            <div class=\"text-center d-flex flex-column align-items-center\">\n              <img [src]=\"(image && !image.includes('default-photo.jpg')) ? image : 'assets/img/resource/blog.png'\"\n                (click)=\"openImageModal(imageCropContent)\"\n                (keydown.enter)=\"openImageModal(imageCropContent)\"\n                class=\"image w-100\"\n                alt=\"Modal\"\n                (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n              <div class=\"d-flex justify-content-between align-items-center mt-2\">\n                <button type=\"button\" class=\"btn btn-link p-0 d-inline-block\" (click)=\"openImageModal(imageCropContent)\">\n                  {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n                </button>\n                @if (image && !image.includes('default-photo.jpg')) {\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger ms-2 cursor-pointer\"\n                    title=\"Remove Image\"\n                    (click)=\"removeImage()\"\n                  (keydown.enter)=\"removeImage()\"></i>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"col-12 col-md-4 col-sm-4 my-4 ms-3\">\n          <div class=\"text-center mb-4\">\n            <span id=\"resource-edit-rectangular-picture-label\" class=\"pw-label-style\">Rectangular Picture</span>\n            <div class=\"text-center d-flex flex-column align-items-center\">\n              <img [src]=\"(rectangularImage && !rectangularImage.includes('default-photo.jpg')) ? rectangularImage : 'assets/img/resource/blog.png'\"\n                (click)=\"openRectModal(rectContent)\"\n                (keydown.enter)=\"openRectModal(rectContent)\"\n                class=\"image w-100\"\n                alt=\"Uploaded rectangular media preview\"\n                (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n              <div class=\"d-flex justify-content-between align-items-center mt-2\">\n                <button type=\"button\" class=\"btn btn-link p-0 d-inline-block\" (click)=\"openRectModal(rectContent)\">\n                  {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n                </button>\n                @if (rectangularImage && !rectangularImage.includes('default-photo.jpg')) {\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger ms-2 cursor-pointer\"\n                    title=\"Remove Image\"\n                    (click)=\"deleteRectangularImage()\"\n                  (keydown.enter)=\"deleteRectangularImage()\"></i>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </form>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\" (click)=\"saveResource()\">Save</button>\n  </div>\n</ng-template>\n\n<ng-template #imageCropContent let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Picture</h5>\n    <button type=\"button\" class=\"btn-close\" [attr.aria-label]=\"'Common.Close' | transloco\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <small>You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n    nudity, artwork or copyrighted images.)</small>\n    <pw-image-cropper\n      [aspectRatio]=\"'dynamic'\"\n      (imageSelectionEvent)=\"onImageSelected($event)\"\n      (closeEvent)=\"modal.close()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n\n<ng-template #rectContent let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Picture</h5>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <small>You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n    nudity, artwork or copyrighted images.)</small>\n    <pw-image-cropper\n      #profile\n      [aspectRatio]=\"'dynamic'\"\n      (imageSelectionEvent)=\"onRectangularImageSelection($event)\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n",
+			styles: ["::ng-deep .modal-content{margin-top:5rem!important}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: FormsModule
+				},
+				{
+					kind: "directive",
+					type: i1.ɵNgNoValidate,
+					selector: "form:not([ngNoForm]):not([ngNativeValidate])"
+				},
+				{
+					kind: "directive",
+					type: i1.DefaultValueAccessor,
+					selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+				},
+				{
+					kind: "directive",
+					type: i1.NgControlStatus,
+					selector: "[formControlName],[ngModel],[formControl]"
+				},
+				{
+					kind: "directive",
+					type: i1.NgControlStatusGroup,
+					selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]"
+				},
+				{
+					kind: "directive",
+					type: i1.MaxLengthValidator,
+					selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]",
+					inputs: ["maxlength"]
+				},
+				{
+					kind: "directive",
+					type: i1.NgModel,
+					selector: "[ngModel]:not([formControlName]):not([formControl])",
+					inputs: [
+						"name",
+						"disabled",
+						"ngModel",
+						"ngModelOptions"
+					],
+					outputs: ["ngModelChange"],
+					exportAs: ["ngModel"]
+				},
+				{
+					kind: "ngmodule",
+					type: ReactiveFormsModule
+				},
+				{
+					kind: "directive",
+					type: i1.FormGroupDirective,
+					selector: "[formGroup]",
+					inputs: ["formGroup"],
+					outputs: ["ngSubmit"],
+					exportAs: ["ngForm"]
+				},
+				{
+					kind: "directive",
+					type: i1.FormControlName,
+					selector: "[formControlName]",
+					inputs: [
+						"formControlName",
+						"disabled",
+						"ngModel"
+					],
+					outputs: ["ngModelChange"]
+				},
+				{
+					kind: "component",
+					type: InputContainerComponent,
+					selector: "pw-input-container",
+					inputs: [
+						"name",
+						"controlId",
+						"useAriaLabelledbyOnly",
+						"label",
+						"labelClass",
+						"tooltipPosition",
+						"required",
+						"errorMsg",
+						"isReadOnly",
+						"showTooltip",
+						"tooltipText",
+						"showTriangle",
+						"afterLabel",
+						"showAfterLabel",
+						"showTriangleText",
+						"isLeftTooltip"
+					]
+				},
+				{
+					kind: "component",
+					type: QuillEditorComponent,
+					selector: "quill-editor"
+				},
+				{
+					kind: "directive",
+					type: NgClass,
+					selector: "[ngClass]",
+					inputs: ["class", "ngClass"]
+				},
+				{
+					kind: "component",
+					type: DatePicker,
+					selector: "p-datepicker, p-date-picker",
+					inputs: [
+						"iconDisplay",
+						"inputStyle",
+						"inputId",
+						"inputStyleClass",
+						"placeholder",
+						"ariaLabelledBy",
+						"ariaLabel",
+						"iconAriaLabel",
+						"dateFormat",
+						"multipleSeparator",
+						"rangeSeparator",
+						"inline",
+						"showOtherMonths",
+						"selectOtherMonths",
+						"showIcon",
+						"icon",
+						"readonlyInput",
+						"shortYearCutoff",
+						"hourFormat",
+						"timeOnly",
+						"stepHour",
+						"stepMinute",
+						"stepSecond",
+						"showSeconds",
+						"showOnFocus",
+						"showWeek",
+						"startWeekFromFirstDayOfYear",
+						"showClear",
+						"dataType",
+						"selectionMode",
+						"maxDateCount",
+						"showButtonBar",
+						"todayButtonStyleClass",
+						"clearButtonStyleClass",
+						"autofocus",
+						"autoZIndex",
+						"baseZIndex",
+						"panelStyleClass",
+						"panelStyle",
+						"keepInvalid",
+						"hideOnDateTimeSelect",
+						"touchUI",
+						"timeSeparator",
+						"focusTrap",
+						"tabindex",
+						"minDate",
+						"maxDate",
+						"disabledDates",
+						"disabledDays",
+						"showTime",
+						"responsiveOptions",
+						"numberOfMonths",
+						"firstDayOfWeek",
+						"view",
+						"defaultDate",
+						"appendTo",
+						"motionOptions"
+					],
+					outputs: [
+						"onFocus",
+						"onBlur",
+						"onClose",
+						"onSelect",
+						"onClear",
+						"onInput",
+						"onTodayClick",
+						"onClearClick",
+						"onMonthChange",
+						"onYearChange",
+						"onClickOutside",
+						"onShow"
+					]
+				},
+				{
+					kind: "component",
+					type: AutoComplete,
+					selector: "p-autocomplete, p-auto-complete",
+					inputs: [
+						"minQueryLength",
+						"delay",
+						"panelStyle",
+						"panelStyleClass",
+						"inputStyle",
+						"inputId",
+						"inputStyleClass",
+						"placeholder",
+						"readonly",
+						"scrollHeight",
+						"lazy",
+						"virtualScroll",
+						"virtualScrollItemSize",
+						"virtualScrollOptions",
+						"autoHighlight",
+						"forceSelection",
+						"type",
+						"autoZIndex",
+						"baseZIndex",
+						"ariaLabel",
+						"dropdownAriaLabel",
+						"ariaLabelledBy",
+						"dropdownIcon",
+						"unique",
+						"group",
+						"completeOnFocus",
+						"showClear",
+						"dropdown",
+						"showEmptyMessage",
+						"dropdownMode",
+						"multiple",
+						"addOnTab",
+						"tabindex",
+						"dataKey",
+						"emptyMessage",
+						"autofocus",
+						"autocomplete",
+						"optionGroupChildren",
+						"optionGroupLabel",
+						"overlayOptions",
+						"suggestions",
+						"optionLabel",
+						"optionValue",
+						"id",
+						"searchMessage",
+						"emptySelectionMessage",
+						"selectionMessage",
+						"autoOptionFocus",
+						"selectOnFocus",
+						"searchLocale",
+						"optionDisabled",
+						"focusOnHover",
+						"typeahead",
+						"addOnBlur",
+						"separator",
+						"appendTo",
+						"motionOptions"
+					],
+					outputs: [
+						"completeMethod",
+						"onSelect",
+						"onUnselect",
+						"onAdd",
+						"onFocus",
+						"onBlur",
+						"onDropdownClick",
+						"onClear",
+						"onInputKeydown",
+						"onKeyUp",
+						"onShow",
+						"onHide",
+						"onLazyLoad"
+					]
+				},
+				{
+					kind: "ngmodule",
+					type: UiSwitchModule
+				},
+				{
+					kind: "component",
+					type: i2.UiSwitchComponent,
+					selector: "ui-switch",
+					inputs: [
+						"size",
+						"color",
+						"switchOffColor",
+						"switchColor",
+						"defaultBgColor",
+						"defaultBoColor",
+						"checkedLabel",
+						"uncheckedLabel",
+						"checkedTextColor",
+						"uncheckedTextColor",
+						"beforeChange",
+						"ariaLabel",
+						"checked",
+						"disabled",
+						"reverse",
+						"loading"
+					],
+					outputs: [
+						"change",
+						"changeEvent",
+						"valueChange"
+					]
+				},
+				{
+					kind: "directive",
+					type: LazyImgDirective,
+					selector: "img"
+				},
+				{
+					kind: "directive",
+					type: ButtonBusyDirective,
+					selector: "[buttonBusy]",
+					inputs: ["buttonBusy", "busyText"]
+				},
+				{
+					kind: "component",
+					type: ProfileImageCropperComponent,
+					selector: "pw-image-cropper",
+					inputs: ["aspectRatio", "dynamicData"],
+					outputs: [
+						"imageSelectionEvent",
+						"closeEvent",
+						"fileChangeEvent"
+					]
+				},
+				{
+					kind: "pipe",
+					type: TranslocoPipe,
+					name: "transloco"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.3",
+	ngImport: i0,
+	type: ResourceEditCardComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "pw-resource-edit-card",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				FormsModule,
+				ReactiveFormsModule,
+				InputContainerComponent,
+				QuillEditorComponent,
+				NgClass,
+				Bind,
+				DatePicker,
+				AutoComplete,
+				UiSwitchModule,
+				LazyImgDirective,
+				ButtonBusyDirective,
+				ProfileImageCropperComponent,
+				TranslocoPipe
+			],
+			schemas: [CUSTOM_ELEMENTS_SCHEMA],
+			template: "<div class=\"edit-card\">\n  <i class=\"fa fa-edit cursor-pointer text-dark in-page-edit-icon d-flex justify-content-center mb-2\"\n    (click)=\"openModal(editResourceModal)\"\n    (keydown.enter)=\"openModal(editResourceModal)\"\n    (keydown.space)=\"openModal(editResourceModal)\"\n  title=\"Edit Resource\"></i>\n</div>\n\n<ng-template #editResourceModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Resource</h5>\n    <i class=\"fa fa-edit cursor-pointer text-dark in-page-edit-icon d-flex justify-content-center ms-3\"\n      (click)=\"navigateToResourceEdit()\"\n      (keydown.enter)=\"navigateToResourceEdit()\"\n      (keydown.space)=\"navigateToResourceEdit()\"\n    title=\"Go to the main edit page\"></i>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <form [formGroup]=\"editForm\">\n      <div class=\"row\">\n\n\n        <div class=\"col-12\">\n          <pw-input-container label=\"Title\" name=\"title\">\n            <input type=\"text\" class=\"form-control\" formControlName=\"title\" id=\"input_title_1\" name=\"input_title_1\"\n                aria-label=\"Title\"/>\n          </pw-input-container>\n        </div>\n\n        <div class=\"col-12 row\">\n          <pw-input-container label=\"CTA Text\" name=\"cta_text\" class=\"col-md-6\"\n            [showTooltip]=\"true\"\n            [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\">\n            <input type=\"text\" class=\"form-control\" formControlName=\"cta_text\" id=\"input_cta_text_2\" name=\"input_cta_text_2\"\n                aria-label=\"Cta Text\"/>\n          </pw-input-container>\n\n          <pw-input-container label=\"External URL\" name=\"external_url\" class=\"col-md-6\"\n            [showTooltip]=\"true\"\n            [tooltipText]=\"'Resource.Posts.Tooltip.ExternalUrl' | transloco\">\n            <input type=\"text\" class=\"form-control\" formControlName=\"external_url\" id=\"input_external_url_3\" name=\"input_external_url_3\"\n                [attr.aria-label]=\"'Resource.Posts.Body' | transloco\"/>\n          </pw-input-container>\n        </div>\n\n        <div class=\"col-12\">\n          <pw-input-container\n            [label]=\"'Resource.Posts.Body' | transloco\"\n            name=\"body\"\n            errorMsg=\"Resource.Posts.Validation.Body\">\n            <quill-editor\n              [styles]=\"{ height: '300px' }\"\n              class=\"quillEditor\"\n              [modules]=\"editorConfig\"\n              formControlName=\"body\"\n              [ngClass]=\"{\n                'w-100': true,\n                'quill-container': true,\n                'is-invalid': submitted && f['body'].errors\n              }\">\n            </quill-editor>\n          </pw-input-container>\n        </div>\n\n        <div class=\"col-12 col-md-3 col-sm-6\">\n          <pw-input-container\n            [label]=\"'Resource.Posts.When' | transloco\"\n            [showTooltip]=\"true\"\n            [tooltipText]=\"'Resource.Posts.Tooltip.When' | transloco\"\n            name=\"when\">\n            <p-datepicker inputId=\"resource-edit-card-when\" formControlName=\"when\"\n              [ariaLabel]=\"'Resource.Posts.When' | transloco\"\n              [showIcon]=\"true\"\n              dateFormat=\"dd-M-yy\"\n              [placeholder]=\"'Select Date'\"\n              [ngClass]=\"{ 'is-invalid': submitted && f['when'].errors }\">\n            </p-datepicker>\n          </pw-input-container>\n        </div>\n\n        <div class=\"col-12 col-md-8\">\n          <pw-input-container\n            [label]=\"'Resource.Posts.Tags' | transloco\"\n            class=\"ui-fluid skills-modal tags\"\n            [showTooltip]=\"true\"\n            [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\"\n            name=\"cta_text\">\n            <p-auto-complete appendTo=\"body\" [(ngModel)]=\"selectedTags\"\n              [ariaLabel]=\"'Resource.Posts.Tags' | transloco\"\n              class=\"body-bg w-100\"\n              [suggestions]=\"tagsSuggestion\"\n              dataKey=\"id\"\n              optionLabel=\"name\"\n              (completeMethod)=\"search($event)\"\n              [minLength]=\"1\"\n              [maxlength]=\"10\"\n              [dropdown]=\"true\"\n              [ngModelOptions]=\"{ standalone: true }\"\n              placeholder=\"Tags\"\n              [multiple]=\"true\">\n            </p-auto-complete>\n          </pw-input-container>\n        </div>\n\n        <div class=\"col-12 row\">\n          <div class=\"col-md-4 col-sm-6\">\n            <pw-input-container\n              [label]=\"'SHOWCASE'\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Mark as showcase post'\"\n              name=\"showcase\">\n              <ui-switch formControlName=\"showcase\" class=\"d-block\"></ui-switch>\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-md-4 col-sm-6\">\n            <pw-input-container\n              [label]=\"'PUBLISHED'\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Set to publish the post'\"\n              name=\"published_at\">\n              <ui-switch formControlName=\"published_at\" class=\"d-block\"></ui-switch>\n            </pw-input-container>\n          </div>\n\n          <div class=\"col-md-4 col-sm-6\">\n            <pw-input-container\n              [label]=\"'ACCEPTED BY ADMIN'\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Indicates approval by admin'\"\n              name=\"accepted_at\">\n              <ui-switch formControlName=\"accepted_at\" class=\"d-block\"></ui-switch>\n            </pw-input-container>\n          </div>\n        </div>\n\n        <div class=\"col-12 col-md-4 col-sm-4 my-4 ms-3\">\n          <div class=\"text-center mb-4\">\n            <span id=\"resource-edit-cover-picture-label\" class=\"pw-label-style\">{{ 'Resource.Posts.CoverPicture' | transloco }}</span>\n            <div class=\"text-center d-flex flex-column align-items-center\">\n              <img [src]=\"(image && !image.includes('default-photo.jpg')) ? image : 'assets/img/resource/blog.png'\"\n                (click)=\"openImageModal(imageCropContent)\"\n                (keydown.enter)=\"openImageModal(imageCropContent)\"\n                class=\"image w-100\"\n                alt=\"Modal\"\n                (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n              <div class=\"d-flex justify-content-between align-items-center mt-2\">\n                <button type=\"button\" class=\"btn btn-link p-0 d-inline-block\" (click)=\"openImageModal(imageCropContent)\">\n                  {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n                </button>\n                @if (image && !image.includes('default-photo.jpg')) {\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger ms-2 cursor-pointer\"\n                    title=\"Remove Image\"\n                    (click)=\"removeImage()\"\n                  (keydown.enter)=\"removeImage()\"></i>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"col-12 col-md-4 col-sm-4 my-4 ms-3\">\n          <div class=\"text-center mb-4\">\n            <span id=\"resource-edit-rectangular-picture-label\" class=\"pw-label-style\">Rectangular Picture</span>\n            <div class=\"text-center d-flex flex-column align-items-center\">\n              <img [src]=\"(rectangularImage && !rectangularImage.includes('default-photo.jpg')) ? rectangularImage : 'assets/img/resource/blog.png'\"\n                (click)=\"openRectModal(rectContent)\"\n                (keydown.enter)=\"openRectModal(rectContent)\"\n                class=\"image w-100\"\n                alt=\"Uploaded rectangular media preview\"\n                (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n              <div class=\"d-flex justify-content-between align-items-center mt-2\">\n                <button type=\"button\" class=\"btn btn-link p-0 d-inline-block\" (click)=\"openRectModal(rectContent)\">\n                  {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n                </button>\n                @if (rectangularImage && !rectangularImage.includes('default-photo.jpg')) {\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger ms-2 cursor-pointer\"\n                    title=\"Remove Image\"\n                    (click)=\"deleteRectangularImage()\"\n                  (keydown.enter)=\"deleteRectangularImage()\"></i>\n                }\n              </div>\n            </div>\n          </div>\n        </div>\n\n      </div>\n    </form>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" [buttonBusy]=\"buttonBusy\" (click)=\"saveResource()\">Save</button>\n  </div>\n</ng-template>\n\n<ng-template #imageCropContent let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Picture</h5>\n    <button type=\"button\" class=\"btn-close\" [attr.aria-label]=\"'Common.Close' | transloco\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <small>You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n    nudity, artwork or copyrighted images.)</small>\n    <pw-image-cropper\n      [aspectRatio]=\"'dynamic'\"\n      (imageSelectionEvent)=\"onImageSelected($event)\"\n      (closeEvent)=\"modal.close()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n\n<ng-template #rectContent let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Picture</h5>\n    <button type=\"button\" class=\"btn-close float-end\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <small>You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n    nudity, artwork or copyrighted images.)</small>\n    <pw-image-cropper\n      #profile\n      [aspectRatio]=\"'dynamic'\"\n      (imageSelectionEvent)=\"onRectangularImageSelection($event)\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n",
+			styles: ["::ng-deep .modal-content{margin-top:5rem!important}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		id: [{ type: Input }],
+		resourceData: [{ type: Input }],
+		updated: [{ type: Output }]
+	}
+});
+export { ResourceEditCardComponent };
+
+//# sourceMappingURL=posiwise-resource-module-resource-edit-card.component-d9cDJUJf.mjs.map