@posiwise/resource-contact-us 0.0.3 → 0.0.4

package/fesm2022/posiwise-resource-contact-us.mjs

@@ -1,7 +1,8 @@
-import * as i1$1 from '@angular/common';
+import { moveItemInArray } from '@angular/cdk/drag-drop';
+import * as i7 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Inject, ViewChild, Input, NgModule, EventEmitter, Output, HostListener } from '@angular/core';
+import { Component, Input, ChangeDetectionStrategy, Inject, ViewChild, HostListener, NgModule, CUSTOM_ELEMENTS_SCHEMA, EventEmitter, Output } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i4 from '@angular/platform-browser';
@@ -11,56 +12,44 @@ import { AppBaseComponent } from '@posiwise/app-base-component';
 import * as i2 from '@posiwise/common-services';
 import { ValidationService } from '@posiwise/common-services';
 import { HelperService } from '@posiwise/helper-service';
-import * as i12 from '@posiwise/utils';
-import { FieldErrorDisplayModule as FieldErrorDisplayModule$1, ProfileImageCropperModule as ProfileImageCropperModule$1 } from '@posiwise/utils';
+import '@posiwise/utils';
 import * as i3 from '@posiwise/smart-crm-shared';
 import { StatusCodes } from 'http-status-codes';
 import Swal from 'sweetalert2';
 import * as i6 from '@ng-bootstrap/ng-bootstrap';
-import { NgbModalModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
-import * as i8 from '@angular/router';
-import { RouterModule } from '@angular/router';
-import * as i9 from '@posiwise/directives';
-import { DirectivesModule } from '@posiwise/directives';
+import * as i9 from 'primeng/dropdown';
+import { DropdownModule } from 'primeng/dropdown';
 import * as i10 from 'ngx-captcha';
 import { NgxCaptchaModule } from 'ngx-captcha';
-import * as i11 from 'primeng/dropdown';
-import { DropdownModule } from 'primeng/dropdown';
+import * as i11 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import * as i12 from '@posiwise/directives';
+import { DirectivesModule } from '@posiwise/directives';
 import * as i13 from '@jsverse/transloco';
-import { CoreTranslocoModule } from '@posiwise/core-transloco';
-import { PipesModule } from '@posiwise/pipes';
-import * as i2$1 from 'ngx-image-cropper';
-import { ImageCropperModule } from 'ngx-image-cropper';
 import * as i3$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
-import * as i3$2 from '@angular/cdk/drag-drop';
-import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
+import * as i2$1 from 'ngx-image-cropper';
+import { ImageCropperModule } from 'ngx-image-cropper';
+import { CoreTranslocoModule } from '@posiwise/core-transloco';
+import { PipesModule } from '@posiwise/pipes';
+
+class FieldErrorDisplayComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FieldErrorDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: FieldErrorDisplayComponent, selector: "pw-field-error-display", inputs: { errorMsg: "errorMsg", displayError: "displayError" }, ngImport: i0, template: "<div *ngIf=\"displayError\">\n  <div class=\"text-danger\">\n    {{ errorMsg }}\n  </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FieldErrorDisplayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'pw-field-error-display', template: "<div *ngIf=\"displayError\">\n  <div class=\"text-danger\">\n    {{ errorMsg }}\n  </div>\n</div>\n\n" }]
+        }], propDecorators: { errorMsg: [{
+                type: Input
+            }], displayError: [{
+                type: Input
+            }] } });
 
 class Trial4ContactUsComponent extends AppBaseComponent {
-    async openQuestionsEditModal() {
-        this.editingQuestions = JSON.parse(JSON.stringify(this.questions ?? []));
-        try {
-            // Dynamically import EditQuestionsModalComponent (includes DragDropModule)
-            // This only loads when the edit modal is opened (user is logged in with edit permissions)
-            // Reduces bundle size for landing pages where users aren't logged in
-            const { EditQuestionsModalComponent } = await Promise.resolve().then(function () { return editQuestionsModal_component; });
-            const modalRef = this.modalService.open(EditQuestionsModalComponent, {
-                size: 'lg',
-                centered: true,
-                windowClass: 'modal-holder'
-            });
-            modalRef.componentInstance.editingQuestions = this.editingQuestions;
-            modalRef.componentInstance.save.subscribe((updatedQuestions) => {
-                this.saveQuestions(modalRef, updatedQuestions);
-            });
-            modalRef.componentInstance.close.subscribe(() => {
-                modalRef.close();
-            });
-        }
-        catch (error) {
-            console.error('Failed to load edit questions modal:', error);
-            this.toast.error('Failed to open edit modal. Please try again.');
-        }
+    openQuestionsEditModal() {
+        this.editingQuestions = JSON.parse(JSON.stringify(this.editingQuestions ?? []));
+        this.modalService.open(this.questionsEditModal, { centered: true, size: 'lg' });
     }
     constructor(fb, authService, crmService, sanitizer, adminService, injector, abTestService, modalService, cdr, document) {
         super(injector);
@@ -175,23 +164,22 @@ class Trial4ContactUsComponent extends AppBaseComponent {
             this.toast.success(event.file ? 'Logo updated' : 'Logo removed');
         });
     }
-    saveQuestions(modal, updatedQuestions) {
-        const questionsToSave = updatedQuestions || this.editingQuestions;
+    saveQuestions(modal) {
         const updateData = {
             contact_us: {
                 ...this.appConfig.pages_config?.contact_us,
-                questions: questionsToSave
+                questions: this.editingQuestions
             },
             subscription_id: this.id
         };
         this.adminService.updateDomainConfig(this.domainId, updateData).subscribe(() => {
-            this.questions = questionsToSave;
+            this.questions = this.editingQuestions;
             this.toast.success('Questions updated');
-            this.question = questionsToSave?.[0]?.question;
-            if (questionsToSave?.[0]?.options?.length > 0) {
+            this.question = this.editingQuestions?.[0]?.question;
+            if (this.editingQuestions?.[0]?.options?.length > 0) {
                 this.psaOptions = [
                     { label: 'Select PSA', value: '' },
-                    ...(questionsToSave?.[0]?.options ?? [])
+                    ...(this.questions?.[0]?.options ?? [])
                         .filter(q => q.option?.trim())
                         .map(q => ({
                         label: q.option,
@@ -205,6 +193,21 @@ class Trial4ContactUsComponent extends AppBaseComponent {
             modal.close();
         });
     }
+    addNewQuestion() {
+        this.editingQuestions.push({ question: '', options: [] });
+    }
+    addQuestionOption(qIndex) {
+        this.editingQuestions[qIndex].options.push({ option: '' });
+    }
+    removeQuestionOption(qIndex, optIndex) {
+        this.editingQuestions[qIndex].options.splice(optIndex, 1);
+    }
+    dropQuestions(event) {
+        moveItemInArray(this.editingQuestions, event.previousIndex, event.currentIndex);
+    }
+    dropQuestionOptions(qIndex, event) {
+        moveItemInArray(this.editingQuestions[qIndex].options, event.previousIndex, event.currentIndex);
+    }
     openSocialEditModal() {
         this.editingYoutubeUrl = this.youtubeUrl;
         this.editingLinkedInUrl = this.linkedInUrl;
@@ -240,32 +243,15 @@ class Trial4ContactUsComponent extends AppBaseComponent {
         }, { threshold: 0.1 });
         this.observer.observe(this.footerSection.nativeElement);
     }
-    async openEditFooterLinksModal() {
+    openEditFooterLinksModal(content) {
         this.footerLinksData = this.footerLinksData ?? {};
         this.footerLinksData.items = this.footerLinksData.items ?? [];
         this.editingFooterLinks = JSON.parse(JSON.stringify(this.footerLinksData));
-        try {
-            // Dynamically import EditFooterLinksModalComponent (includes DragDropModule)
-            // This only loads when the edit modal is opened (user is logged in with edit permissions)
-            // Reduces bundle size for landing pages where users aren't logged in
-            const { EditFooterLinksModalComponent } = await Promise.resolve().then(function () { return editFooterLinksModal_component; });
-            const modalRef = this.modalService.open(EditFooterLinksModalComponent, {
-                size: 'lg',
-                centered: true,
-                windowClass: 'modal-holder'
-            });
-            modalRef.componentInstance.editingFooterLinks = this.editingFooterLinks;
-            modalRef.componentInstance.save.subscribe((updatedFooterLinks) => {
-                this.saveFooterLinks(modalRef, updatedFooterLinks);
-            });
-            modalRef.componentInstance.close.subscribe(() => {
-                modalRef.close();
-            });
-        }
-        catch (error) {
-            console.error('Failed to load edit footer links modal:', error);
-            this.toast.error('Failed to open edit modal. Please try again.');
-        }
+        this.modalService.open(content, {
+            size: 'lg',
+            centered: true,
+            windowClass: 'modal-holder'
+        });
     }
     watchIframeHeightChange() {
         const iframe = this.document.querySelector('.hubspot-container');
@@ -388,18 +374,42 @@ class Trial4ContactUsComponent extends AppBaseComponent {
             this.isEmailValid = true;
         }
     }
-    saveFooterLinks(modal, updatedFooterLinks) {
-        const footerLinksToSave = updatedFooterLinks || this.editingFooterLinks;
+    addFooterLink() {
+        this.editingFooterLinks.items.push({
+            title: '',
+            path: '',
+            subtitles: []
+        });
+    }
+    removeFooterLink(index) {
+        this.editingFooterLinks.items.splice(index, 1);
+    }
+    addSubtitle(footerIndex) {
+        this.editingFooterLinks.items[footerIndex].subtitles.push({
+            title: '',
+            path: ''
+        });
+    }
+    removeSubtitle(footerIndex, subtitleIndex) {
+        this.editingFooterLinks.items[footerIndex].subtitles.splice(subtitleIndex, 1);
+    }
+    dropFooterLinks(event) {
+        moveItemInArray(this.editingFooterLinks.items, event.previousIndex, event.currentIndex);
+    }
+    dropSubtitles(footerIndex, event) {
+        moveItemInArray(this.editingFooterLinks.items[footerIndex].subtitles, event.previousIndex, event.currentIndex);
+    }
+    saveFooterLinks(modal) {
         const updatedConfig = {
-            footer_links: footerLinksToSave,
+            footer_links: this.editingFooterLinks,
             subscription_id: this.id
         };
         this.adminService
             .updateDomainConfig(this.appConfig?.domain_id, updatedConfig)
             .subscribe(() => {
             this.toast.success('Footer links updated');
-            this.footerLinks = [...footerLinksToSave.items];
-            this.footerLinksData = { ...footerLinksToSave };
+            this.footerLinks = [...this.editingFooterLinks.items];
+            this.footerLinksData = { ...this.editingFooterLinks };
             modal.close();
         });
     }
@@ -469,11 +479,11 @@ class Trial4ContactUsComponent extends AppBaseComponent {
         this.observer?.disconnect();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: Trial4ContactUsComponent, deps: [{ token: i1.UntypedFormBuilder }, { token: i2.AuthService }, { token: i3.CrmService }, { token: i4.DomSanitizer }, { token: i5.AdminService }, { token: i0.Injector }, { token: i2.AbTestService }, { token: i6.NgbModal }, { token: i0.ChangeDetectorRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: Trial4ContactUsComponent, selector: "pw-trial-4-contact-us", inputs: { subscriptionId: "subscriptionId", sourceId: "sourceId", masterSubscriptionId: "masterSubscriptionId", experimentName: "experimentName", microserviceName: "microserviceName", shardName: "shardName", user: "user", userLoggedIn: "userLoggedIn" }, viewQueries: [{ propertyName: "footerSection", first: true, predicate: ["footerSection"], descendants: true, static: true }, { propertyName: "content", first: true, predicate: ["bookMeeting"], descendants: true, static: true }, { propertyName: "logoModal", first: true, predicate: ["logoModal"], descendants: true }, { propertyName: "logoUploader", first: true, predicate: ["logoUploader"], descendants: true }, { propertyName: "hubspotEditModal", first: true, predicate: ["hubspotEditModal"], descendants: true }, { propertyName: "socialEditModal", first: true, predicate: ["socialEditModal"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section  #footerSection class=\"bg-black text-white py-5 footer-section\">\n  <div class=\"container\" *ngIf=\"isFooterVisible\">\n    <div class=\"row\">\n\n      <!-- LEFT COLUMN -->\n      <div class=\"col-md-6 mb-4 d-flex flex-column justify-content-between\" [ngClass]=\"{ 'site-column': getFooterHubspotForm() }\">\n        <div>\n          <h3 class=\"mb-4 d-flex align-items-center\">\n            <span class=\"me-2 text-white\">Site Map:</span>\n            <i *ngIf=\"canEditResourcesValue\" class=\"fa fa-edit in-page-edit-icon cursor-pointer text-white ms-3\" (click)=\"openEditFooterLinksModal()\" (keydown.enter)=\"openEditFooterLinksModal()\" (keydown.space)=\"openEditFooterLinksModal()\" ngbTooltip=\"Edit Footer Links\"></i>\n          </h3>\n          <ul class=\"mt-4\">\n            <li routerLink=\"/\"\n            class=\"cursor-pointer user-info-label link-label\"> Home </li>\n            <li *ngFor=\"let link of footerLinks\" [routerLink]=\"link?.path\"\n              class=\"cursor-pointer user-info-label link-label mt-4\"><span  *ngIf=\"link?.title\">{{link?.title}}</span> </li>\n            <li routerLink=\"/login\"\n              class=\"cursor-pointer user-info-label mt-4 link-label\"> Log in </li>\n            <li [routerLink]=\"'/privacy-and-tos/' + tosId\"\n              class=\"cursor-pointer user-info-label mt-4 link-label\"> Privacy statement </li>\n          </ul>\n          <p class=\"address-section email-section mb-4\">\n            <span class=\"user-info-label\">Email: </span>\n            <ng-container *ngIf=\"!isEditingEmail; else editEmail\">\n              <span class=\"user-info\">{{ email }}</span>\n              <i *ngIf=\"canEditResourcesValue\" class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3\" (click)=\"isEditingEmail = true\" (keydown.enter)=\"isEditingEmail = true\" (keydown.space)=\"isEditingEmail = true\"></i>\n            </ng-container>\n\n            <ng-template #editEmail>\n              <input\n                class=\"form-control d-inline w-auto\"\n                [(ngModel)]=\"editingEmail\"\n              />\n              <button class=\"btn btn-sm btn-primary ms-2\" (click)=\"saveEmail()\">Save</button>\n              <button class=\"btn btn-sm btn-secondary ms-2\" (click)=\"isEditingEmail = false\">Cancel</button>\n            </ng-template>\n          </p>\n                    <span class=\"email-section mt-3 address-text\">\n            <span class=\"user-info-label\">\n              Address:\n              <i *ngIf=\"canEditResourcesValue\"\n                 class=\"fa fa-edit in-page-edit-icon cursor-pointer ms-2 text-white\"\n                 title=\"Edit Address\"\n                 (click)=\"isEditingStreet = true\"\n                 (keydown.enter)=\"isEditingStreet = true\"\n                 (keydown.space)=\"isEditingStreet = true\"></i>\n            </span><br/>\n\n            <ng-container *ngIf=\"!isEditingStreet; else editStreetBlock\">\n              <span class=\"address-text user-info\">{{ street }}</span>\n            </ng-container>\n\n            <ng-template #editStreetBlock>\n              <div class=\"d-flex align-items-center mt-3\">\n                <input class=\"form-control form-control-sm\" [(ngModel)]=\"editingStreet\" />\n                <button class=\"btn btn-sm btn-primary ms-2\" (click)=\"saveStreet()\">Save</button>\n                <button class=\"btn btn-sm btn-secondary ms-2\" (click)=\"cancelStreet()\">Cancel</button>\n              </div>\n            </ng-template>\n\n          </span>\n\n        </div>\n        <div class=\"d-flex\">\n          <img [src]=\"logo\"\n               alt=\"Company logo\"\n               class=\"img-fluid mt-4 logo-image cursor-pointer\"\n               width=\"160\"\n               height=\"35\"\n               (click)=\"scrollToTop()\"\n               (keydown.enter)=\"scrollToTop()\"\n               (keydown.space)=\"scrollToTop()\"\n               title=\"Click to go to top of page\" />\n          <i *ngIf=\"canEditResourcesValue\"\n             class=\"fa fa-edit in-page-edit-icon fa-sm ms-3 cursor-pointer text-white align-self-center mt-3\"\n             (click)=\"openLogoEditModal()\"\n             (keydown.enter)=\"openLogoEditModal()\"\n             (keydown.space)=\"openLogoEditModal()\"\n             title=\"Edit Logo\"></i>\n        </div>\n      </div>\n\n      <!-- RIGHT COLUMN -->\n      <div class=\"col-md-6\" *ngIf=\"isFooterVisible\">\n        <ng-container *ngIf=\"getFooterHubspotForm() as footerItem; else defaultForm\">\n            <div class=\"d-flex\">\n              <div\n                *ngIf=\"isHubspotReady\"\n                class=\"hubspot-container w-100 content-loaded\"\n                [innerHTML]=\"hubspotHtml\"\n                (load)=\"onHubspotLoad($event)\">\n              </div>\n              <i *ngIf=\"canEditResourcesValue\"\n              class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer\"\n              (click)=\"openHubspotEditModal(footerItem)\"\n              (keydown.enter)=\"openHubspotEditModal(footerItem)\"\n              (keydown.space)=\"openHubspotEditModal(footerItem)\"\n              title=\"Edit Hubspot Embed\"></i>\n            </div>\n          </ng-container>\n\n          <ng-template #defaultForm>\n          <div class=\"d-flex\">\n                <h3 class=\"text-white mb-4\"> <span class=\"text-white\">Get in touch:</span></h3>\n                <i *ngIf=\"canEditResourcesValue\"\n                class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3 mt-2\"\n                (click)=\"openQuestionsEditModal()\"\n                (keydown.enter)=\"openQuestionsEditModal()\"\n                (keydown.space)=\"openQuestionsEditModal()\"\n                title=\"Edit Questions\"></i>\n            </div>\n            <div class=\"contact-form\">\n              <form [formGroup]=\"form\">\n                <div class=\"mb-3\">\n                  <div class=\"email\">\n                    <div class=\"form-field\">\n                      <label for=\"email\">Email:</label>\n                      <div class=\"w-100\">\n                        <input type=\"text\"\n                          class=\"mb-1\"\n                          id=\"email\"\n                          formControlName=\"email\" />\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('email').valid && (form.get('email').touched || submitted)\n                          \"\n                      errorMsg=\"Email is required\">\n                    </pw-field-error-display>\n                      </div>\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"first_name\">First name:</label>\n                      <div class=\"w-100\">\n                        <input input type=\"text\"\n                        id=\"first_name\"\n                        formControlName=\"first_name\" />\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('first_name').valid && (form.get('first_name').touched || submitted)\n                          \"\n                      errorMsg=\"First name is required\">\n                    </pw-field-error-display>\n                      </div>\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"last_name\">Last name:</label>\n                      <input type=\"text\"\n                        id=\"last_name\"\n                        formControlName=\"last_name\" />\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"company\">Company:</label>\n                      <input type=\"text\"\n                        id=\"company\"\n                        formControlName=\"company\" />\n                    </div>\n                    <div class=\"form-field\" *ngIf=\"hasValidOptions()\">\n                      <label for=\"psa\" class=\"select-label\">{{question}}</label>\n                      <p-dropdown\n                        formControlName=\"psa\"\n                        [options]=\"psaOptions\"\n                        [placeholder]=\"'Select PSA'\"\n                        styleClass=\"input-select\">\n                      </p-dropdown>\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"enquiry\" class=\"select-label\">How can we help you?</label>\n                      <div class=\"enquiry-field\">\n                        <textarea  id=\"enquiry\" formControlName=\"enquiry\" class=\"\">\n                                      </textarea>\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('enquiry').valid && (form.get('enquiry').touched || submitted)\n                          \"\n                      errorMsg=\"Enquiry is required\">\n                    </pw-field-error-display>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-end\">\n                  <div class=\"captcha-wrapper-container\"\n                  *ngIf=\"isCaptchaVerified\">\n                  <ngx-recaptcha2 [ngModelOptions]=\"{ standalone: true }\"\n                    [siteKey]=\"captchaKeyV2\"\n                    size=\"normal\"\n                    [(ngModel)]=\"recaptcha\"\n                    (success)=\"handleSuccess($event)\">\n                  </ngx-recaptcha2>\n                </div>\n                  <button type=\"submit\"\n                    (click)=\"onSubmit()\"\n                    *ngIf=\"!isCaptchaVerified\"\n                    class=\"sign-btn sign-header-btn mt-3\">\n                    {{ 'Button.Submit' | transloco }}\n                  </button>\n                </div>\n\n                <div class=\"d-flex align-items-center mt-4\">\n                  <div class=\"icons d-flex align-items-center\">\n                    <a [eventTracker]=\"{\n                        category: 'youtube',\n                        action: 'click',\n                        label: 'cloudolive-landing-page-b',\n                        value: 1\n                      }\"\n                      [href]=\"youtubeUrl\"\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\">\n                      <img src=\"/assets/img/icons/youtube.png\"\n                        class=\"img-fluid youtube-icon\"\n                        width=\"54\"\n                        height=\"54\"\n                        alt=\"\" />\n                    </a>\n                    <a [eventTracker]=\"{\n                        category: 'linkedin',\n                        action: 'click',\n                        label: 'cloudolive-landing-page-b',\n                        value: 1\n                      }\"\n                      [href]=\"linkedInUrl\"\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      class=\"ms-3\">\n                      <img src=\"/assets/img/icons/social/linkedin.svg\"\n                        class=\"img-fluid linkedin-icon\"\n                        width=\"48\"\n                        height=\"48\"\n                        alt=\"\" />\n                    </a>\n                    <i *ngIf=\"canEditResourcesValue\"\n                    class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3\"\n                    (click)=\"openSocialEditModal()\"\n                    (keydown.enter)=\"openSocialEditModal()\"\n                    (keydown.space)=\"openSocialEditModal()\"\n                    title=\"Edit Social Links & Company Name\"></i>\n                  </div>\n                  <div class=\"copyright text-white\">\n                    2025 {{companyName}}.\n                  </div>\n                </div>\n              </form>\n            </div>\n          </ng-template>\n        </div>\n    </div>\n  </div>\n</section>\n\n\n\n<ng-template #bookMeeting\n  let-modal>\n  <div class=\"modal-header\">\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <h3 class=\"text-center modal-basic-title\">\n      Thanks for getting in touch! Our team will be in contact shortly, or we\n      can compare calendars now &amp; schedule a time\n    </h3>\n    <button type=\"button\"\n      [eventTracker]=\"{\n        category: 'request-demo',\n        action: 'click',\n        label: 'cloudolive-landing-page-b',\n        value: 1\n      }\"\n      (click)=\"navigateToBookMeeting()\"\n      class=\"sign-btn sign-header-btn mx-auto d-block mb-3\">\n      Let's do it\n    </button>\n  </div>\n</ng-template>\n\n\n\n\n\n\n\n<ng-template #logoModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Logo</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <pw-custom-uploader\n      [aspectRatio]=\"'fullLogo'\"\n      [title]=\"'Main Contrast Logo'\"\n      [controlName]=\"'logo_main_contrast'\"\n      [previewData]=\"previewData\"\n      (saveEvent)=\"onSaveFile($event)\">\n    </pw-custom-uploader>\n  </div>\n</ng-template>\n\n\n\n<ng-template #hubspotEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Hubspot Embed</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <div class=\"mb-3\">\n      <label for=\"hubspotId\" class=\"form-label\">Hubspot ID</label>\n      <input id=\"hubspotId\" [(ngModel)]=\"editingHubspotId\" class=\"form-control\" />\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"hubspotEmbedDiv\" class=\"form-label\">Embed DIV</label>\n      <textarea id=\"hubspotEmbedDiv\" [(ngModel)]=\"editingHubspotHtml\" rows=\"8\" class=\"form-control\"></textarea>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-primary\" (click)=\"saveHubspotHtml(modal)\">Save</button>\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n  </div>\n</ng-template>\n\n\n<ng-template #socialEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Social Links & Company Name</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <div class=\"mb-3\">\n      <label for=\"youtubeUrl\" class=\"form-label\">YouTube URL</label>\n      <input id=\"youtubeUrl\" [(ngModel)]=\"editingYoutubeUrl\" class=\"form-control\" />\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"linkedinUrl\" class=\"form-label\">LinkedIn URL</label>\n      <input id=\"linkedinUrl\" [(ngModel)]=\"editingLinkedInUrl\" class=\"form-control\" />\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"companyName\" class=\"form-label\">Company Name</label>\n      <input id=\"companyName\" [(ngModel)]=\"editingCompanyName\" class=\"form-control\" />\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-primary\" (click)=\"saveSocialLinks(modal)\">Save</button>\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n  </div>\n</ng-template>\n\n\n\n\n\n\n", styles: [".product-explainer-section{background-color:#000}.footer-section input.form-control,.footer-section select.form-control,.footer-section textarea.form-control{background-color:#fff;border:none;color:#000;font-size:14px}.btn-primary{background-color:#007bff;border:none}.site-column{margin-top:2.9rem}.email-section{color:#fff;font-size:2rem}.address-section{margin-top:5rem}.address-text{line-height:2.2rem}.user-info{font-size:1.5rem}.user-info-label{font-size:1.7rem;font-weight:700}.contact-form form .form-field{display:flex;align-items:center;margin-bottom:1.2rem}.contact-form form .form-field label{width:130px;min-width:130px;margin:0;font-size:14px;color:#fff;font-weight:600;text-transform:uppercase;letter-spacing:1px}.contact-form form .form-field p-dropdown{width:100%}.contact-form form .form-field input,.contact-form form .form-field select,.contact-form form .form-field textarea,.contact-form form .form-field ::ng-deep p-dropdown .p-inputwrapper{flex:1;border:none;border-radius:30px;padding:12px 20px;font-size:14px;width:100%!important;max-width:100%;color:#000}.contact-form form .form-field textarea{resize:vertical}.contact-form form .submit-button{background-color:#3b82f6;border:none;border-radius:30px;font-size:16px;font-weight:500;padding:10px 24px;margin-top:1.2rem}.input-select{height:43px}.select-label{width:210px!important}.copyright{margin-top:2rem;margin-left:4rem;font-size:19px;font-weight:700}.d-flex img{margin-right:0!important}.youtube-icon{height:38px}.enquiry-field{margin-left:.5rem;width:63%}::ng-deep .text-danger{margin-top:.25rem!important;margin-left:.5rem!important}@media (min-width: 768px){.hubspot-container{margin-top:-3rem}}@media (min-width: 768px) and (max-width: 1200px){.container{padding:0rem 6rem!important}}.link-label{cursor:pointer;transition:color .3s}.link-label:hover{color:var(--first)}.icons img{transition:transform .3s ease,filter .3s ease;cursor:pointer}.icons img:hover{transform:scale(1.1);filter:brightness(1.2)}.logo-image{max-width:160px;width:160px;height:35px;object-fit:contain;aspect-ratio:160/35}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "directive", type: i8.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i6.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i9.EventTrackerDirective, selector: "[eventTracker]", inputs: ["eventTracker"] }, { kind: "directive", type: i9.LazyImgDirective, selector: "img" }, { kind: "component", type: i10.ReCaptcha2Component, selector: "ngx-recaptcha2", inputs: ["theme", "size"] }, { kind: "component", type: i11.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "component", type: i12.FieldErrorDisplayComponent, selector: "pw-field-error-display", inputs: ["errorMsg", "displayError"] }, { kind: "component", type: i12.CustomUploaderComponent, selector: "pw-custom-uploader", inputs: ["controlName", "previewData", "aspectRatio", "title"], outputs: ["saveEvent"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: Trial4ContactUsComponent, selector: "pw-trial-4-contact-us", inputs: { subscriptionId: "subscriptionId", sourceId: "sourceId", masterSubscriptionId: "masterSubscriptionId", experimentName: "experimentName", microserviceName: "microserviceName", shardName: "shardName", user: "user", userLoggedIn: "userLoggedIn" }, viewQueries: [{ propertyName: "footerSection", first: true, predicate: ["footerSection"], descendants: true, static: true }, { propertyName: "content", first: true, predicate: ["bookMeeting"], descendants: true, static: true }, { propertyName: "editFooterLinksModal", first: true, predicate: ["editFooterLinksModal"], descendants: true }, { propertyName: "logoModal", first: true, predicate: ["logoModal"], descendants: true }, { propertyName: "logoUploader", first: true, predicate: ["logoUploader"], descendants: true }, { propertyName: "hubspotEditModal", first: true, predicate: ["hubspotEditModal"], descendants: true }, { propertyName: "socialEditModal", first: true, predicate: ["socialEditModal"], descendants: true }, { propertyName: "questionsEditModal", first: true, predicate: ["questionsEditModal"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<section  #footerSection class=\"bg-black text-white py-5 footer-section\">\n  <div class=\"container\" *ngIf=\"isFooterVisible\">\n    <div class=\"row\">\n\n      <!-- LEFT COLUMN -->\n      <div class=\"col-md-6 mb-4 d-flex flex-column justify-content-between\" [ngClass]=\"{ 'site-column': getFooterHubspotForm() }\">\n        <div>\n          <h3 class=\"mb-4 d-flex align-items-center\">\n            <span class=\"me-2 text-white\">Site Map:</span>\n            <i *ngIf=\"canEditResourcesValue\" class=\"fa fa-edit in-page-edit-icon cursor-pointer text-white ms-3\" (click)=\"openEditFooterLinksModal(editFooterLinksModal)\" (keydown.enter)=\"openEditFooterLinksModal(editFooterLinksModal)\" (keydown.space)=\"openEditFooterLinksModal(editFooterLinksModal)\" ngbTooltip=\"Edit Footer Links\"></i>\n          </h3>\n          <ul class=\"mt-4\">\n            <li routerLink=\"/\"\n            class=\"cursor-pointer user-info-label link-label\"> Home </li>\n            <li *ngFor=\"let link of footerLinks\" [routerLink]=\"link?.path\"\n              class=\"cursor-pointer user-info-label link-label mt-4\"><span  *ngIf=\"link?.title\">{{link?.title}}</span> </li>\n            <li routerLink=\"/login\"\n              class=\"cursor-pointer user-info-label mt-4 link-label\"> Log in </li>\n            <li [routerLink]=\"'/privacy-and-tos/' + tosId\"\n              class=\"cursor-pointer user-info-label mt-4 link-label\"> Privacy statement </li>\n          </ul>\n          <p class=\"address-section email-section mb-4\">\n            <span class=\"user-info-label\">Email: </span>\n            <ng-container *ngIf=\"!isEditingEmail; else editEmail\">\n              <span class=\"user-info\">{{ email }}</span>\n              <i *ngIf=\"canEditResourcesValue\" class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3\" (click)=\"isEditingEmail = true\" (keydown.enter)=\"isEditingEmail = true\" (keydown.space)=\"isEditingEmail = true\"></i>\n            </ng-container>\n\n            <ng-template #editEmail>\n              <input\n                class=\"form-control d-inline w-auto\"\n                [(ngModel)]=\"editingEmail\"\n              />\n              <button class=\"btn btn-sm btn-primary ms-2\" (click)=\"saveEmail()\">Save</button>\n              <button class=\"btn btn-sm btn-secondary ms-2\" (click)=\"isEditingEmail = false\">Cancel</button>\n            </ng-template>\n          </p>\n                    <span class=\"email-section mt-3 address-text\">\n            <span class=\"user-info-label\">\n              Address:\n              <i *ngIf=\"canEditResourcesValue\"\n                 class=\"fa fa-edit in-page-edit-icon cursor-pointer ms-2 text-white\"\n                 title=\"Edit Address\"\n                 (click)=\"isEditingStreet = true\"\n                 (keydown.enter)=\"isEditingStreet = true\"\n                 (keydown.space)=\"isEditingStreet = true\"></i>\n            </span><br/>\n\n            <ng-container *ngIf=\"!isEditingStreet; else editStreetBlock\">\n              <span class=\"address-text user-info\">{{ street }}</span>\n            </ng-container>\n\n            <ng-template #editStreetBlock>\n              <div class=\"d-flex align-items-center mt-3\">\n                <input class=\"form-control form-control-sm\" [(ngModel)]=\"editingStreet\" />\n                <button class=\"btn btn-sm btn-primary ms-2\" (click)=\"saveStreet()\">Save</button>\n                <button class=\"btn btn-sm btn-secondary ms-2\" (click)=\"cancelStreet()\">Cancel</button>\n              </div>\n            </ng-template>\n\n          </span>\n\n        </div>\n        <div class=\"d-flex\">\n          <img [src]=\"logo\"\n               alt=\"Company logo\"\n               class=\"img-fluid mt-4 logo-image cursor-pointer\"\n               width=\"160\"\n               height=\"35\"\n               (click)=\"scrollToTop()\"\n               (keydown.enter)=\"scrollToTop()\"\n               (keydown.space)=\"scrollToTop()\"\n               title=\"Click to go to top of page\" />\n          <i *ngIf=\"canEditResourcesValue\"\n             class=\"fa fa-edit in-page-edit-icon fa-sm ms-3 cursor-pointer text-white align-self-center mt-3\"\n             (click)=\"openLogoEditModal()\"\n             (keydown.enter)=\"openLogoEditModal()\"\n             (keydown.space)=\"openLogoEditModal()\"\n             title=\"Edit Logo\"></i>\n        </div>\n      </div>\n\n      <!-- RIGHT COLUMN -->\n      <div class=\"col-md-6\" *ngIf=\"isFooterVisible\">\n        <ng-container *ngIf=\"getFooterHubspotForm() as footerItem; else defaultForm\">\n            <div class=\"d-flex\">\n              <div\n                *ngIf=\"isHubspotReady\"\n                class=\"hubspot-container w-100 content-loaded\"\n                [innerHTML]=\"hubspotHtml\"\n                (load)=\"onHubspotLoad($event)\">\n              </div>\n              <i *ngIf=\"canEditResourcesValue\"\n              class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer\"\n              (click)=\"openHubspotEditModal(footerItem)\"\n              (keydown.enter)=\"openHubspotEditModal(footerItem)\"\n              (keydown.space)=\"openHubspotEditModal(footerItem)\"\n              title=\"Edit Hubspot Embed\"></i>\n            </div>\n          </ng-container>\n\n          <ng-template #defaultForm>\n          <div class=\"d-flex\">\n                <h3 class=\"text-white mb-4\"> <span class=\"text-white\">Get in touch:</span></h3>\n                <i *ngIf=\"canEditResourcesValue\"\n                class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3 mt-2\"\n                (click)=\"openQuestionsEditModal()\"\n                (keydown.enter)=\"openQuestionsEditModal()\"\n                (keydown.space)=\"openQuestionsEditModal()\"\n                title=\"Edit Questions\"></i>\n            </div>\n            <div class=\"contact-form\">\n              <form [formGroup]=\"form\">\n                <div class=\"mb-3\">\n                  <div class=\"email\">\n                    <div class=\"form-field\">\n                      <label for=\"email\">Email:</label>\n                      <div class=\"w-100\">\n                        <input type=\"text\"\n                          class=\"mb-1\"\n                          id=\"email\"\n                          formControlName=\"email\" />\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('email').valid && (form.get('email').touched || submitted)\n                          \"\n                      errorMsg=\"Email is required\">\n                    </pw-field-error-display>\n                      </div>\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"first_name\">First name:</label>\n                      <div class=\"w-100\">\n                        <input input type=\"text\"\n                        id=\"first_name\"\n                        formControlName=\"first_name\" />\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('first_name').valid && (form.get('first_name').touched || submitted)\n                          \"\n                      errorMsg=\"First name is required\">\n                    </pw-field-error-display>\n                      </div>\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"last_name\">Last name:</label>\n                      <input type=\"text\"\n                        id=\"last_name\"\n                        formControlName=\"last_name\" />\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"company\">Company:</label>\n                      <input type=\"text\"\n                        id=\"company\"\n                        formControlName=\"company\" />\n                    </div>\n                    <div class=\"form-field\" *ngIf=\"hasValidOptions()\">\n                      <label for=\"psa\" class=\"select-label\">{{question}}</label>\n                      <p-dropdown\n                        formControlName=\"psa\"\n                        [options]=\"psaOptions\"\n                        [placeholder]=\"'Select PSA'\"\n                        styleClass=\"input-select\">\n                      </p-dropdown>\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"enquiry\" class=\"select-label\">How can we help you?</label>\n                      <div class=\"enquiry-field\">\n                        <textarea  id=\"enquiry\" formControlName=\"enquiry\" class=\"\">\n                                      </textarea>\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('enquiry').valid && (form.get('enquiry').touched || submitted)\n                          \"\n                      errorMsg=\"Enquiry is required\">\n                    </pw-field-error-display>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-end\">\n                  <div class=\"captcha-wrapper-container\"\n                  *ngIf=\"isCaptchaVerified\">\n                  <ngx-recaptcha2 [ngModelOptions]=\"{ standalone: true }\"\n                    [siteKey]=\"captchaKeyV2\"\n                    size=\"normal\"\n                    [(ngModel)]=\"recaptcha\"\n                    (success)=\"handleSuccess($event)\">\n                  </ngx-recaptcha2>\n                </div>\n                  <button type=\"submit\"\n                    (click)=\"onSubmit()\"\n                    *ngIf=\"!isCaptchaVerified\"\n                    class=\"sign-btn sign-header-btn mt-3\">\n                    {{ 'Button.Submit' | transloco }}\n                  </button>\n                </div>\n\n                <div class=\"d-flex align-items-center mt-4\">\n                  <div class=\"icons d-flex align-items-center\">\n                    <a [eventTracker]=\"{\n                        category: 'youtube',\n                        action: 'click',\n                        label: 'cloudolive-landing-page-b',\n                        value: 1\n                      }\"\n                      [href]=\"youtubeUrl\"\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\">\n                      <img src=\"/assets/img/icons/youtube.png\"\n                        class=\"img-fluid youtube-icon\"\n                        width=\"54\"\n                        height=\"54\"\n                        alt=\"\" />\n                    </a>\n                    <a [eventTracker]=\"{\n                        category: 'linkedin',\n                        action: 'click',\n                        label: 'cloudolive-landing-page-b',\n                        value: 1\n                      }\"\n                      [href]=\"linkedInUrl\"\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      class=\"ms-3\">\n                      <img src=\"/assets/img/icons/social/linkedin.svg\"\n                        class=\"img-fluid linkedin-icon\"\n                        width=\"48\"\n                        height=\"48\"\n                        alt=\"\" />\n                    </a>\n                    <i *ngIf=\"canEditResourcesValue\"\n                    class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3\"\n                    (click)=\"openSocialEditModal()\"\n                    (keydown.enter)=\"openSocialEditModal()\"\n                    (keydown.space)=\"openSocialEditModal()\"\n                    title=\"Edit Social Links & Company Name\"></i>\n                  </div>\n                  <div class=\"copyright text-white\">\n                    2025 {{companyName}}.\n                  </div>\n                </div>\n              </form>\n            </div>\n          </ng-template>\n        </div>\n    </div>\n  </div>\n</section>\n\n\n\n<ng-template #bookMeeting\n  let-modal>\n  <div class=\"modal-header\">\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <h3 class=\"text-center modal-basic-title\">\n      Thanks for getting in touch! Our team will be in contact shortly, or we\n      can compare calendars now &amp; schedule a time\n    </h3>\n    <button type=\"button\"\n      [eventTracker]=\"{\n        category: 'request-demo',\n        action: 'click',\n        label: 'cloudolive-landing-page-b',\n        value: 1\n      }\"\n      (click)=\"navigateToBookMeeting()\"\n      class=\"sign-btn sign-header-btn mx-auto d-block mb-3\">\n      Let's do it\n    </button>\n  </div>\n</ng-template>\n\n\n<ng-template #editFooterLinksModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Footer Links</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <h4 class=\"mb-3\">Footer Links Section</h4>\n    <div cdkDropList (cdkDropListDropped)=\"dropFooterLinks($event)\">\n      <div *ngFor=\"let footer of editingFooterLinks.items; let i = index\" class=\"border p-3 mb-3\" cdkDrag>\n        <div class=\"row\">\n          <div class=\"col-md-5 mb-2\">\n            <label for=\"footerTitle{{i}}\" class=\"form-label\">Title</label>\n            <input id=\"footerTitle{{i}}\" class=\"form-control\" [(ngModel)]=\"footer.title\" />\n          </div>\n          <div class=\"col-md-5 mb-2\">\n            <label for=\"footerPath{{i}}\" class=\"form-label\">Path</label>\n            <input id=\"footerPath{{i}}\" class=\"form-control\" [(ngModel)]=\"footer.path\" />\n          </div>\n          <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n            <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeFooterLink(i)\" (keydown.enter)=\"removeFooterLink(i)\" (keydown.space)=\"removeFooterLink(i)\"></i>\n            <i class=\"fa fa-bars in-page-bars-icon cursor-move\" cdkDragHandle></i>\n          </div>\n        </div>\n\n        <!-- Subtitles -->\n        <div cdkDropList (cdkDropListDropped)=\"dropSubtitles(i, $event)\">\n          <div *ngFor=\"let sub of footer.subtitles; let j = index\" class=\"row border p-3 mb-2 align-items-center\" cdkDrag>\n            <div class=\"col-md-5\">\n              <label for=\"subtitleTitle{{i}}{{j}}\" class=\"form-label\">Subtitle Title</label>\n              <input id=\"subtitleTitle{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"sub.title\" />\n            </div>\n            <div class=\"col-md-5\">\n              <label for=\"subtitlePath{{i}}{{j}}\" class=\"form-label\">Subtitle Path</label>\n              <input id=\"subtitlePath{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"sub.path\" />\n            </div>\n            <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n              <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeSubtitle(i, j)\" (keydown.enter)=\"removeSubtitle(i, j)\" (keydown.space)=\"removeSubtitle(i, j)\"></i>\n              <i class=\"fa fa-bars cursor-move in-page-bars-icon\" cdkDragHandle></i>\n            </div>\n          </div>\n        </div>\n\n        <button class=\"btn btn-outline-primary btn-sm mt-2\" (click)=\"addSubtitle(i)\">\n          + Add Subtitle\n        </button>\n      </div>\n    </div>\n\n    <button class=\"btn btn-primary mt-3\" (click)=\"addFooterLink()\">\n      + Add Footer Link\n    </button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveFooterLinks(modal)\">Save</button>\n  </div>\n</ng-template>\n\n\n\n\n\n<ng-template #logoModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Logo</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <pw-custom-uploader\n      [aspectRatio]=\"'fullLogo'\"\n      [title]=\"'Main Contrast Logo'\"\n      [controlName]=\"'logo_main_contrast'\"\n      [previewData]=\"previewData\"\n      (saveEvent)=\"onSaveFile($event)\">\n    </pw-custom-uploader>\n  </div>\n</ng-template>\n\n\n\n<ng-template #hubspotEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Hubspot Embed</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <div class=\"mb-3\">\n      <label for=\"hubspotId\" class=\"form-label\">Hubspot ID</label>\n      <input id=\"hubspotId\" [(ngModel)]=\"editingHubspotId\" class=\"form-control\" />\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"hubspotEmbedDiv\" class=\"form-label\">Embed DIV</label>\n      <textarea id=\"hubspotEmbedDiv\" [(ngModel)]=\"editingHubspotHtml\" rows=\"8\" class=\"form-control\"></textarea>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-primary\" (click)=\"saveHubspotHtml(modal)\">Save</button>\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n  </div>\n</ng-template>\n\n\n<ng-template #socialEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Social Links & Company Name</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <div class=\"mb-3\">\n      <label for=\"youtubeUrl\" class=\"form-label\">YouTube URL</label>\n      <input id=\"youtubeUrl\" [(ngModel)]=\"editingYoutubeUrl\" class=\"form-control\" />\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"linkedinUrl\" class=\"form-label\">LinkedIn URL</label>\n      <input id=\"linkedinUrl\" [(ngModel)]=\"editingLinkedInUrl\" class=\"form-control\" />\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"companyName\" class=\"form-label\">Company Name</label>\n      <input id=\"companyName\" [(ngModel)]=\"editingCompanyName\" class=\"form-control\" />\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-primary\" (click)=\"saveSocialLinks(modal)\">Save</button>\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n  </div>\n</ng-template>\n\n\n\n<ng-template #questionsEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Questions</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <h4 class=\"mb-3\">Questions Section</h4>\n    <div cdkDropList (cdkDropListDropped)=\"dropQuestions($event)\">\n      <div *ngFor=\"let q of editingQuestions; let i = index\" class=\"border p-3 mb-3\" cdkDrag>\n        <div class=\"row\">\n          <div class=\"col-md-11 mb-2\">\n            <label for=\"questionText{{i}}\" class=\"form-label\">Question</label>\n            <input id=\"questionText{{i}}\" class=\"form-control\" [(ngModel)]=\"q.question\" placeholder=\"Enter question\" />\n          </div>\n          <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-4\">\n            <i class=\"fa fa-bars in-page-bars-icon cursor-move\" cdkDragHandle></i>\n          </div>\n        </div>\n\n        <!-- Options Section -->\n        <div cdkDropList (cdkDropListDropped)=\"dropQuestionOptions(i, $event)\">\n          <div *ngFor=\"let opt of q.options; let j = index\" class=\"row border p-3 mb-2 align-items-center\" cdkDrag>\n            <div class=\"col-md-7 mb-2\">\n              <label for=\"questionOption{{i}}{{j}}\" class=\"form-label\">Option</label>\n              <input id=\"questionOption{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"opt.option\" placeholder=\"Enter option\" />\n            </div>\n            <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n              <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeQuestionOption(i, j)\" (keydown.enter)=\"removeQuestionOption(i, j)\" (keydown.enter)=\"removeQuestionOption(i, j)\"></i>\n              <i class=\"fa fa-bars in-page-bars-icon cursor-move\" cdkDragHandle></i>\n            </div>\n          </div>\n        </div>\n\n        <button class=\"btn btn-outline-primary btn-sm mt-2\" (click)=\"addQuestionOption(i)\">+ Add Option</button>\n      </div>\n    </div>\n\n    <button class=\"btn btn-primary mt-3\" (click)=\"addNewQuestion()\">+ Add Question</button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveQuestions(modal)\">Save</button>\n  </div>\n</ng-template>\n\n\n\n", styles: [".product-explainer-section{background-color:#000}.footer-section input.form-control,.footer-section select.form-control,.footer-section textarea.form-control{background-color:#fff;border:none;color:#000;font-size:14px}.btn-primary{background-color:#007bff;border:none}.site-column{margin-top:2.9rem}.email-section{color:#fff;font-size:2rem}.address-section{margin-top:5rem}.address-text{line-height:2.2rem}.user-info{font-size:1.5rem}.user-info-label{font-size:1.7rem;font-weight:700}.contact-form form .form-field{display:flex;align-items:center;margin-bottom:1.2rem}.contact-form form .form-field label{width:130px;min-width:130px;margin:0;font-size:14px;color:#fff;font-weight:600;text-transform:uppercase;letter-spacing:1px}.contact-form form .form-field p-dropdown{width:100%}.contact-form form .form-field input,.contact-form form .form-field select,.contact-form form .form-field textarea,.contact-form form .form-field ::ng-deep p-dropdown .p-inputwrapper{flex:1;border:none;border-radius:30px;padding:12px 20px;font-size:14px;width:100%!important;max-width:100%;color:#000}.contact-form form .form-field textarea{resize:vertical}.contact-form form .submit-button{background-color:#3b82f6;border:none;border-radius:30px;font-size:16px;font-weight:500;padding:10px 24px;margin-top:1.2rem}.input-select{height:43px}.select-label{width:210px!important}.copyright{margin-top:2rem;margin-left:4rem;font-size:19px;font-weight:700}.d-flex img{margin-right:0!important}.youtube-icon{height:38px}.enquiry-field{margin-left:.5rem;width:63%}::ng-deep .text-danger{margin-top:.25rem!important;margin-left:.5rem!important}@media (min-width: 768px){.hubspot-container{margin-top:-3rem}}@media (min-width: 768px) and (max-width: 1200px){.container{padding:0rem 6rem!important}}.link-label{cursor:pointer;transition:color .3s}.link-label:hover{color:var(--first)}.icons img{transition:transform .3s ease,filter .3s ease;cursor:pointer}.icons img:hover{transform:scale(1.1);filter:brightness(1.2)}.logo-image{max-width:160px;width:160px;height:35px;object-fit:contain;aspect-ratio:160/35}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FieldErrorDisplayComponent, selector: "pw-field-error-display", inputs: ["errorMsg", "displayError"] }, { kind: "component", type: i9.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: i10.ReCaptcha2Component, selector: "ngx-recaptcha2", inputs: ["theme", "size"] }, { kind: "directive", type: i11.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i12.EventTrackerDirective, selector: "[eventTracker]", inputs: ["eventTracker"] }, { kind: "directive", type: i12.LazyImgDirective, selector: "img" }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: Trial4ContactUsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-trial-4-contact-us', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section  #footerSection class=\"bg-black text-white py-5 footer-section\">\n  <div class=\"container\" *ngIf=\"isFooterVisible\">\n    <div class=\"row\">\n\n      <!-- LEFT COLUMN -->\n      <div class=\"col-md-6 mb-4 d-flex flex-column justify-content-between\" [ngClass]=\"{ 'site-column': getFooterHubspotForm() }\">\n        <div>\n          <h3 class=\"mb-4 d-flex align-items-center\">\n            <span class=\"me-2 text-white\">Site Map:</span>\n            <i *ngIf=\"canEditResourcesValue\" class=\"fa fa-edit in-page-edit-icon cursor-pointer text-white ms-3\" (click)=\"openEditFooterLinksModal()\" (keydown.enter)=\"openEditFooterLinksModal()\" (keydown.space)=\"openEditFooterLinksModal()\" ngbTooltip=\"Edit Footer Links\"></i>\n          </h3>\n          <ul class=\"mt-4\">\n            <li routerLink=\"/\"\n            class=\"cursor-pointer user-info-label link-label\"> Home </li>\n            <li *ngFor=\"let link of footerLinks\" [routerLink]=\"link?.path\"\n              class=\"cursor-pointer user-info-label link-label mt-4\"><span  *ngIf=\"link?.title\">{{link?.title}}</span> </li>\n            <li routerLink=\"/login\"\n              class=\"cursor-pointer user-info-label mt-4 link-label\"> Log in </li>\n            <li [routerLink]=\"'/privacy-and-tos/' + tosId\"\n              class=\"cursor-pointer user-info-label mt-4 link-label\"> Privacy statement </li>\n          </ul>\n          <p class=\"address-section email-section mb-4\">\n            <span class=\"user-info-label\">Email: </span>\n            <ng-container *ngIf=\"!isEditingEmail; else editEmail\">\n              <span class=\"user-info\">{{ email }}</span>\n              <i *ngIf=\"canEditResourcesValue\" class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3\" (click)=\"isEditingEmail = true\" (keydown.enter)=\"isEditingEmail = true\" (keydown.space)=\"isEditingEmail = true\"></i>\n            </ng-container>\n\n            <ng-template #editEmail>\n              <input\n                class=\"form-control d-inline w-auto\"\n                [(ngModel)]=\"editingEmail\"\n              />\n              <button class=\"btn btn-sm btn-primary ms-2\" (click)=\"saveEmail()\">Save</button>\n              <button class=\"btn btn-sm btn-secondary ms-2\" (click)=\"isEditingEmail = false\">Cancel</button>\n            </ng-template>\n          </p>\n                    <span class=\"email-section mt-3 address-text\">\n            <span class=\"user-info-label\">\n              Address:\n              <i *ngIf=\"canEditResourcesValue\"\n                 class=\"fa fa-edit in-page-edit-icon cursor-pointer ms-2 text-white\"\n                 title=\"Edit Address\"\n                 (click)=\"isEditingStreet = true\"\n                 (keydown.enter)=\"isEditingStreet = true\"\n                 (keydown.space)=\"isEditingStreet = true\"></i>\n            </span><br/>\n\n            <ng-container *ngIf=\"!isEditingStreet; else editStreetBlock\">\n              <span class=\"address-text user-info\">{{ street }}</span>\n            </ng-container>\n\n            <ng-template #editStreetBlock>\n              <div class=\"d-flex align-items-center mt-3\">\n                <input class=\"form-control form-control-sm\" [(ngModel)]=\"editingStreet\" />\n                <button class=\"btn btn-sm btn-primary ms-2\" (click)=\"saveStreet()\">Save</button>\n                <button class=\"btn btn-sm btn-secondary ms-2\" (click)=\"cancelStreet()\">Cancel</button>\n              </div>\n            </ng-template>\n\n          </span>\n\n        </div>\n        <div class=\"d-flex\">\n          <img [src]=\"logo\"\n               alt=\"Company logo\"\n               class=\"img-fluid mt-4 logo-image cursor-pointer\"\n               width=\"160\"\n               height=\"35\"\n               (click)=\"scrollToTop()\"\n               (keydown.enter)=\"scrollToTop()\"\n               (keydown.space)=\"scrollToTop()\"\n               title=\"Click to go to top of page\" />\n          <i *ngIf=\"canEditResourcesValue\"\n             class=\"fa fa-edit in-page-edit-icon fa-sm ms-3 cursor-pointer text-white align-self-center mt-3\"\n             (click)=\"openLogoEditModal()\"\n             (keydown.enter)=\"openLogoEditModal()\"\n             (keydown.space)=\"openLogoEditModal()\"\n             title=\"Edit Logo\"></i>\n        </div>\n      </div>\n\n      <!-- RIGHT COLUMN -->\n      <div class=\"col-md-6\" *ngIf=\"isFooterVisible\">\n        <ng-container *ngIf=\"getFooterHubspotForm() as footerItem; else defaultForm\">\n            <div class=\"d-flex\">\n              <div\n                *ngIf=\"isHubspotReady\"\n                class=\"hubspot-container w-100 content-loaded\"\n                [innerHTML]=\"hubspotHtml\"\n                (load)=\"onHubspotLoad($event)\">\n              </div>\n              <i *ngIf=\"canEditResourcesValue\"\n              class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer\"\n              (click)=\"openHubspotEditModal(footerItem)\"\n              (keydown.enter)=\"openHubspotEditModal(footerItem)\"\n              (keydown.space)=\"openHubspotEditModal(footerItem)\"\n              title=\"Edit Hubspot Embed\"></i>\n            </div>\n          </ng-container>\n\n          <ng-template #defaultForm>\n          <div class=\"d-flex\">\n                <h3 class=\"text-white mb-4\"> <span class=\"text-white\">Get in touch:</span></h3>\n                <i *ngIf=\"canEditResourcesValue\"\n                class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3 mt-2\"\n                (click)=\"openQuestionsEditModal()\"\n                (keydown.enter)=\"openQuestionsEditModal()\"\n                (keydown.space)=\"openQuestionsEditModal()\"\n                title=\"Edit Questions\"></i>\n            </div>\n            <div class=\"contact-form\">\n              <form [formGroup]=\"form\">\n                <div class=\"mb-3\">\n                  <div class=\"email\">\n                    <div class=\"form-field\">\n                      <label for=\"email\">Email:</label>\n                      <div class=\"w-100\">\n                        <input type=\"text\"\n                          class=\"mb-1\"\n                          id=\"email\"\n                          formControlName=\"email\" />\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('email').valid && (form.get('email').touched || submitted)\n                          \"\n                      errorMsg=\"Email is required\">\n                    </pw-field-error-display>\n                      </div>\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"first_name\">First name:</label>\n                      <div class=\"w-100\">\n                        <input input type=\"text\"\n                        id=\"first_name\"\n                        formControlName=\"first_name\" />\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('first_name').valid && (form.get('first_name').touched || submitted)\n                          \"\n                      errorMsg=\"First name is required\">\n                    </pw-field-error-display>\n                      </div>\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"last_name\">Last name:</label>\n                      <input type=\"text\"\n                        id=\"last_name\"\n                        formControlName=\"last_name\" />\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"company\">Company:</label>\n                      <input type=\"text\"\n                        id=\"company\"\n                        formControlName=\"company\" />\n                    </div>\n                    <div class=\"form-field\" *ngIf=\"hasValidOptions()\">\n                      <label for=\"psa\" class=\"select-label\">{{question}}</label>\n                      <p-dropdown\n                        formControlName=\"psa\"\n                        [options]=\"psaOptions\"\n                        [placeholder]=\"'Select PSA'\"\n                        styleClass=\"input-select\">\n                      </p-dropdown>\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"enquiry\" class=\"select-label\">How can we help you?</label>\n                      <div class=\"enquiry-field\">\n                        <textarea  id=\"enquiry\" formControlName=\"enquiry\" class=\"\">\n                                      </textarea>\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('enquiry').valid && (form.get('enquiry').touched || submitted)\n                          \"\n                      errorMsg=\"Enquiry is required\">\n                    </pw-field-error-display>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-end\">\n                  <div class=\"captcha-wrapper-container\"\n                  *ngIf=\"isCaptchaVerified\">\n                  <ngx-recaptcha2 [ngModelOptions]=\"{ standalone: true }\"\n                    [siteKey]=\"captchaKeyV2\"\n                    size=\"normal\"\n                    [(ngModel)]=\"recaptcha\"\n                    (success)=\"handleSuccess($event)\">\n                  </ngx-recaptcha2>\n                </div>\n                  <button type=\"submit\"\n                    (click)=\"onSubmit()\"\n                    *ngIf=\"!isCaptchaVerified\"\n                    class=\"sign-btn sign-header-btn mt-3\">\n                    {{ 'Button.Submit' | transloco }}\n                  </button>\n                </div>\n\n                <div class=\"d-flex align-items-center mt-4\">\n                  <div class=\"icons d-flex align-items-center\">\n                    <a [eventTracker]=\"{\n                        category: 'youtube',\n                        action: 'click',\n                        label: 'cloudolive-landing-page-b',\n                        value: 1\n                      }\"\n                      [href]=\"youtubeUrl\"\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\">\n                      <img src=\"/assets/img/icons/youtube.png\"\n                        class=\"img-fluid youtube-icon\"\n                        width=\"54\"\n                        height=\"54\"\n                        alt=\"\" />\n                    </a>\n                    <a [eventTracker]=\"{\n                        category: 'linkedin',\n                        action: 'click',\n                        label: 'cloudolive-landing-page-b',\n                        value: 1\n                      }\"\n                      [href]=\"linkedInUrl\"\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      class=\"ms-3\">\n                      <img src=\"/assets/img/icons/social/linkedin.svg\"\n                        class=\"img-fluid linkedin-icon\"\n                        width=\"48\"\n                        height=\"48\"\n                        alt=\"\" />\n                    </a>\n                    <i *ngIf=\"canEditResourcesValue\"\n                    class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3\"\n                    (click)=\"openSocialEditModal()\"\n                    (keydown.enter)=\"openSocialEditModal()\"\n                    (keydown.space)=\"openSocialEditModal()\"\n                    title=\"Edit Social Links & Company Name\"></i>\n                  </div>\n                  <div class=\"copyright text-white\">\n                    2025 {{companyName}}.\n                  </div>\n                </div>\n              </form>\n            </div>\n          </ng-template>\n        </div>\n    </div>\n  </div>\n</section>\n\n\n\n<ng-template #bookMeeting\n  let-modal>\n  <div class=\"modal-header\">\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <h3 class=\"text-center modal-basic-title\">\n      Thanks for getting in touch! Our team will be in contact shortly, or we\n      can compare calendars now &amp; schedule a time\n    </h3>\n    <button type=\"button\"\n      [eventTracker]=\"{\n        category: 'request-demo',\n        action: 'click',\n        label: 'cloudolive-landing-page-b',\n        value: 1\n      }\"\n      (click)=\"navigateToBookMeeting()\"\n      class=\"sign-btn sign-header-btn mx-auto d-block mb-3\">\n      Let's do it\n    </button>\n  </div>\n</ng-template>\n\n\n\n\n\n\n\n<ng-template #logoModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Logo</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <pw-custom-uploader\n      [aspectRatio]=\"'fullLogo'\"\n      [title]=\"'Main Contrast Logo'\"\n      [controlName]=\"'logo_main_contrast'\"\n      [previewData]=\"previewData\"\n      (saveEvent)=\"onSaveFile($event)\">\n    </pw-custom-uploader>\n  </div>\n</ng-template>\n\n\n\n<ng-template #hubspotEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Hubspot Embed</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <div class=\"mb-3\">\n      <label for=\"hubspotId\" class=\"form-label\">Hubspot ID</label>\n      <input id=\"hubspotId\" [(ngModel)]=\"editingHubspotId\" class=\"form-control\" />\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"hubspotEmbedDiv\" class=\"form-label\">Embed DIV</label>\n      <textarea id=\"hubspotEmbedDiv\" [(ngModel)]=\"editingHubspotHtml\" rows=\"8\" class=\"form-control\"></textarea>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-primary\" (click)=\"saveHubspotHtml(modal)\">Save</button>\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n  </div>\n</ng-template>\n\n\n<ng-template #socialEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Social Links & Company Name</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <div class=\"mb-3\">\n      <label for=\"youtubeUrl\" class=\"form-label\">YouTube URL</label>\n      <input id=\"youtubeUrl\" [(ngModel)]=\"editingYoutubeUrl\" class=\"form-control\" />\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"linkedinUrl\" class=\"form-label\">LinkedIn URL</label>\n      <input id=\"linkedinUrl\" [(ngModel)]=\"editingLinkedInUrl\" class=\"form-control\" />\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"companyName\" class=\"form-label\">Company Name</label>\n      <input id=\"companyName\" [(ngModel)]=\"editingCompanyName\" class=\"form-control\" />\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-primary\" (click)=\"saveSocialLinks(modal)\">Save</button>\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n  </div>\n</ng-template>\n\n\n\n\n\n\n", styles: [".product-explainer-section{background-color:#000}.footer-section input.form-control,.footer-section select.form-control,.footer-section textarea.form-control{background-color:#fff;border:none;color:#000;font-size:14px}.btn-primary{background-color:#007bff;border:none}.site-column{margin-top:2.9rem}.email-section{color:#fff;font-size:2rem}.address-section{margin-top:5rem}.address-text{line-height:2.2rem}.user-info{font-size:1.5rem}.user-info-label{font-size:1.7rem;font-weight:700}.contact-form form .form-field{display:flex;align-items:center;margin-bottom:1.2rem}.contact-form form .form-field label{width:130px;min-width:130px;margin:0;font-size:14px;color:#fff;font-weight:600;text-transform:uppercase;letter-spacing:1px}.contact-form form .form-field p-dropdown{width:100%}.contact-form form .form-field input,.contact-form form .form-field select,.contact-form form .form-field textarea,.contact-form form .form-field ::ng-deep p-dropdown .p-inputwrapper{flex:1;border:none;border-radius:30px;padding:12px 20px;font-size:14px;width:100%!important;max-width:100%;color:#000}.contact-form form .form-field textarea{resize:vertical}.contact-form form .submit-button{background-color:#3b82f6;border:none;border-radius:30px;font-size:16px;font-weight:500;padding:10px 24px;margin-top:1.2rem}.input-select{height:43px}.select-label{width:210px!important}.copyright{margin-top:2rem;margin-left:4rem;font-size:19px;font-weight:700}.d-flex img{margin-right:0!important}.youtube-icon{height:38px}.enquiry-field{margin-left:.5rem;width:63%}::ng-deep .text-danger{margin-top:.25rem!important;margin-left:.5rem!important}@media (min-width: 768px){.hubspot-container{margin-top:-3rem}}@media (min-width: 768px) and (max-width: 1200px){.container{padding:0rem 6rem!important}}.link-label{cursor:pointer;transition:color .3s}.link-label:hover{color:var(--first)}.icons img{transition:transform .3s ease,filter .3s ease;cursor:pointer}.icons img:hover{transform:scale(1.1);filter:brightness(1.2)}.logo-image{max-width:160px;width:160px;height:35px;object-fit:contain;aspect-ratio:160/35}\n"] }]
+            args: [{ selector: 'pw-trial-4-contact-us', changeDetection: ChangeDetectionStrategy.OnPush, template: "<section  #footerSection class=\"bg-black text-white py-5 footer-section\">\n  <div class=\"container\" *ngIf=\"isFooterVisible\">\n    <div class=\"row\">\n\n      <!-- LEFT COLUMN -->\n      <div class=\"col-md-6 mb-4 d-flex flex-column justify-content-between\" [ngClass]=\"{ 'site-column': getFooterHubspotForm() }\">\n        <div>\n          <h3 class=\"mb-4 d-flex align-items-center\">\n            <span class=\"me-2 text-white\">Site Map:</span>\n            <i *ngIf=\"canEditResourcesValue\" class=\"fa fa-edit in-page-edit-icon cursor-pointer text-white ms-3\" (click)=\"openEditFooterLinksModal(editFooterLinksModal)\" (keydown.enter)=\"openEditFooterLinksModal(editFooterLinksModal)\" (keydown.space)=\"openEditFooterLinksModal(editFooterLinksModal)\" ngbTooltip=\"Edit Footer Links\"></i>\n          </h3>\n          <ul class=\"mt-4\">\n            <li routerLink=\"/\"\n            class=\"cursor-pointer user-info-label link-label\"> Home </li>\n            <li *ngFor=\"let link of footerLinks\" [routerLink]=\"link?.path\"\n              class=\"cursor-pointer user-info-label link-label mt-4\"><span  *ngIf=\"link?.title\">{{link?.title}}</span> </li>\n            <li routerLink=\"/login\"\n              class=\"cursor-pointer user-info-label mt-4 link-label\"> Log in </li>\n            <li [routerLink]=\"'/privacy-and-tos/' + tosId\"\n              class=\"cursor-pointer user-info-label mt-4 link-label\"> Privacy statement </li>\n          </ul>\n          <p class=\"address-section email-section mb-4\">\n            <span class=\"user-info-label\">Email: </span>\n            <ng-container *ngIf=\"!isEditingEmail; else editEmail\">\n              <span class=\"user-info\">{{ email }}</span>\n              <i *ngIf=\"canEditResourcesValue\" class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3\" (click)=\"isEditingEmail = true\" (keydown.enter)=\"isEditingEmail = true\" (keydown.space)=\"isEditingEmail = true\"></i>\n            </ng-container>\n\n            <ng-template #editEmail>\n              <input\n                class=\"form-control d-inline w-auto\"\n                [(ngModel)]=\"editingEmail\"\n              />\n              <button class=\"btn btn-sm btn-primary ms-2\" (click)=\"saveEmail()\">Save</button>\n              <button class=\"btn btn-sm btn-secondary ms-2\" (click)=\"isEditingEmail = false\">Cancel</button>\n            </ng-template>\n          </p>\n                    <span class=\"email-section mt-3 address-text\">\n            <span class=\"user-info-label\">\n              Address:\n              <i *ngIf=\"canEditResourcesValue\"\n                 class=\"fa fa-edit in-page-edit-icon cursor-pointer ms-2 text-white\"\n                 title=\"Edit Address\"\n                 (click)=\"isEditingStreet = true\"\n                 (keydown.enter)=\"isEditingStreet = true\"\n                 (keydown.space)=\"isEditingStreet = true\"></i>\n            </span><br/>\n\n            <ng-container *ngIf=\"!isEditingStreet; else editStreetBlock\">\n              <span class=\"address-text user-info\">{{ street }}</span>\n            </ng-container>\n\n            <ng-template #editStreetBlock>\n              <div class=\"d-flex align-items-center mt-3\">\n                <input class=\"form-control form-control-sm\" [(ngModel)]=\"editingStreet\" />\n                <button class=\"btn btn-sm btn-primary ms-2\" (click)=\"saveStreet()\">Save</button>\n                <button class=\"btn btn-sm btn-secondary ms-2\" (click)=\"cancelStreet()\">Cancel</button>\n              </div>\n            </ng-template>\n\n          </span>\n\n        </div>\n        <div class=\"d-flex\">\n          <img [src]=\"logo\"\n               alt=\"Company logo\"\n               class=\"img-fluid mt-4 logo-image cursor-pointer\"\n               width=\"160\"\n               height=\"35\"\n               (click)=\"scrollToTop()\"\n               (keydown.enter)=\"scrollToTop()\"\n               (keydown.space)=\"scrollToTop()\"\n               title=\"Click to go to top of page\" />\n          <i *ngIf=\"canEditResourcesValue\"\n             class=\"fa fa-edit in-page-edit-icon fa-sm ms-3 cursor-pointer text-white align-self-center mt-3\"\n             (click)=\"openLogoEditModal()\"\n             (keydown.enter)=\"openLogoEditModal()\"\n             (keydown.space)=\"openLogoEditModal()\"\n             title=\"Edit Logo\"></i>\n        </div>\n      </div>\n\n      <!-- RIGHT COLUMN -->\n      <div class=\"col-md-6\" *ngIf=\"isFooterVisible\">\n        <ng-container *ngIf=\"getFooterHubspotForm() as footerItem; else defaultForm\">\n            <div class=\"d-flex\">\n              <div\n                *ngIf=\"isHubspotReady\"\n                class=\"hubspot-container w-100 content-loaded\"\n                [innerHTML]=\"hubspotHtml\"\n                (load)=\"onHubspotLoad($event)\">\n              </div>\n              <i *ngIf=\"canEditResourcesValue\"\n              class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer\"\n              (click)=\"openHubspotEditModal(footerItem)\"\n              (keydown.enter)=\"openHubspotEditModal(footerItem)\"\n              (keydown.space)=\"openHubspotEditModal(footerItem)\"\n              title=\"Edit Hubspot Embed\"></i>\n            </div>\n          </ng-container>\n\n          <ng-template #defaultForm>\n          <div class=\"d-flex\">\n                <h3 class=\"text-white mb-4\"> <span class=\"text-white\">Get in touch:</span></h3>\n                <i *ngIf=\"canEditResourcesValue\"\n                class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3 mt-2\"\n                (click)=\"openQuestionsEditModal()\"\n                (keydown.enter)=\"openQuestionsEditModal()\"\n                (keydown.space)=\"openQuestionsEditModal()\"\n                title=\"Edit Questions\"></i>\n            </div>\n            <div class=\"contact-form\">\n              <form [formGroup]=\"form\">\n                <div class=\"mb-3\">\n                  <div class=\"email\">\n                    <div class=\"form-field\">\n                      <label for=\"email\">Email:</label>\n                      <div class=\"w-100\">\n                        <input type=\"text\"\n                          class=\"mb-1\"\n                          id=\"email\"\n                          formControlName=\"email\" />\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('email').valid && (form.get('email').touched || submitted)\n                          \"\n                      errorMsg=\"Email is required\">\n                    </pw-field-error-display>\n                      </div>\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"first_name\">First name:</label>\n                      <div class=\"w-100\">\n                        <input input type=\"text\"\n                        id=\"first_name\"\n                        formControlName=\"first_name\" />\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('first_name').valid && (form.get('first_name').touched || submitted)\n                          \"\n                      errorMsg=\"First name is required\">\n                    </pw-field-error-display>\n                      </div>\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"last_name\">Last name:</label>\n                      <input type=\"text\"\n                        id=\"last_name\"\n                        formControlName=\"last_name\" />\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"company\">Company:</label>\n                      <input type=\"text\"\n                        id=\"company\"\n                        formControlName=\"company\" />\n                    </div>\n                    <div class=\"form-field\" *ngIf=\"hasValidOptions()\">\n                      <label for=\"psa\" class=\"select-label\">{{question}}</label>\n                      <p-dropdown\n                        formControlName=\"psa\"\n                        [options]=\"psaOptions\"\n                        [placeholder]=\"'Select PSA'\"\n                        styleClass=\"input-select\">\n                      </p-dropdown>\n                    </div>\n                    <div class=\"form-field\">\n                      <label for=\"enquiry\" class=\"select-label\">How can we help you?</label>\n                      <div class=\"enquiry-field\">\n                        <textarea  id=\"enquiry\" formControlName=\"enquiry\" class=\"\">\n                                      </textarea>\n                          <pw-field-error-display [displayError]=\"\n                          !form.get('enquiry').valid && (form.get('enquiry').touched || submitted)\n                          \"\n                      errorMsg=\"Enquiry is required\">\n                    </pw-field-error-display>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div class=\"text-end\">\n                  <div class=\"captcha-wrapper-container\"\n                  *ngIf=\"isCaptchaVerified\">\n                  <ngx-recaptcha2 [ngModelOptions]=\"{ standalone: true }\"\n                    [siteKey]=\"captchaKeyV2\"\n                    size=\"normal\"\n                    [(ngModel)]=\"recaptcha\"\n                    (success)=\"handleSuccess($event)\">\n                  </ngx-recaptcha2>\n                </div>\n                  <button type=\"submit\"\n                    (click)=\"onSubmit()\"\n                    *ngIf=\"!isCaptchaVerified\"\n                    class=\"sign-btn sign-header-btn mt-3\">\n                    {{ 'Button.Submit' | transloco }}\n                  </button>\n                </div>\n\n                <div class=\"d-flex align-items-center mt-4\">\n                  <div class=\"icons d-flex align-items-center\">\n                    <a [eventTracker]=\"{\n                        category: 'youtube',\n                        action: 'click',\n                        label: 'cloudolive-landing-page-b',\n                        value: 1\n                      }\"\n                      [href]=\"youtubeUrl\"\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\">\n                      <img src=\"/assets/img/icons/youtube.png\"\n                        class=\"img-fluid youtube-icon\"\n                        width=\"54\"\n                        height=\"54\"\n                        alt=\"\" />\n                    </a>\n                    <a [eventTracker]=\"{\n                        category: 'linkedin',\n                        action: 'click',\n                        label: 'cloudolive-landing-page-b',\n                        value: 1\n                      }\"\n                      [href]=\"linkedInUrl\"\n                      target=\"_blank\"\n                      rel=\"noopener noreferrer\"\n                      class=\"ms-3\">\n                      <img src=\"/assets/img/icons/social/linkedin.svg\"\n                        class=\"img-fluid linkedin-icon\"\n                        width=\"48\"\n                        height=\"48\"\n                        alt=\"\" />\n                    </a>\n                    <i *ngIf=\"canEditResourcesValue\"\n                    class=\"fa fa-edit in-page-edit-icon text-white cursor-pointer ms-3\"\n                    (click)=\"openSocialEditModal()\"\n                    (keydown.enter)=\"openSocialEditModal()\"\n                    (keydown.space)=\"openSocialEditModal()\"\n                    title=\"Edit Social Links & Company Name\"></i>\n                  </div>\n                  <div class=\"copyright text-white\">\n                    2025 {{companyName}}.\n                  </div>\n                </div>\n              </form>\n            </div>\n          </ng-template>\n        </div>\n    </div>\n  </div>\n</section>\n\n\n\n<ng-template #bookMeeting\n  let-modal>\n  <div class=\"modal-header\">\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <h3 class=\"text-center modal-basic-title\">\n      Thanks for getting in touch! Our team will be in contact shortly, or we\n      can compare calendars now &amp; schedule a time\n    </h3>\n    <button type=\"button\"\n      [eventTracker]=\"{\n        category: 'request-demo',\n        action: 'click',\n        label: 'cloudolive-landing-page-b',\n        value: 1\n      }\"\n      (click)=\"navigateToBookMeeting()\"\n      class=\"sign-btn sign-header-btn mx-auto d-block mb-3\">\n      Let's do it\n    </button>\n  </div>\n</ng-template>\n\n\n<ng-template #editFooterLinksModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Footer Links</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <h4 class=\"mb-3\">Footer Links Section</h4>\n    <div cdkDropList (cdkDropListDropped)=\"dropFooterLinks($event)\">\n      <div *ngFor=\"let footer of editingFooterLinks.items; let i = index\" class=\"border p-3 mb-3\" cdkDrag>\n        <div class=\"row\">\n          <div class=\"col-md-5 mb-2\">\n            <label for=\"footerTitle{{i}}\" class=\"form-label\">Title</label>\n            <input id=\"footerTitle{{i}}\" class=\"form-control\" [(ngModel)]=\"footer.title\" />\n          </div>\n          <div class=\"col-md-5 mb-2\">\n            <label for=\"footerPath{{i}}\" class=\"form-label\">Path</label>\n            <input id=\"footerPath{{i}}\" class=\"form-control\" [(ngModel)]=\"footer.path\" />\n          </div>\n          <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n            <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeFooterLink(i)\" (keydown.enter)=\"removeFooterLink(i)\" (keydown.space)=\"removeFooterLink(i)\"></i>\n            <i class=\"fa fa-bars in-page-bars-icon cursor-move\" cdkDragHandle></i>\n          </div>\n        </div>\n\n        <!-- Subtitles -->\n        <div cdkDropList (cdkDropListDropped)=\"dropSubtitles(i, $event)\">\n          <div *ngFor=\"let sub of footer.subtitles; let j = index\" class=\"row border p-3 mb-2 align-items-center\" cdkDrag>\n            <div class=\"col-md-5\">\n              <label for=\"subtitleTitle{{i}}{{j}}\" class=\"form-label\">Subtitle Title</label>\n              <input id=\"subtitleTitle{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"sub.title\" />\n            </div>\n            <div class=\"col-md-5\">\n              <label for=\"subtitlePath{{i}}{{j}}\" class=\"form-label\">Subtitle Path</label>\n              <input id=\"subtitlePath{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"sub.path\" />\n            </div>\n            <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n              <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeSubtitle(i, j)\" (keydown.enter)=\"removeSubtitle(i, j)\" (keydown.space)=\"removeSubtitle(i, j)\"></i>\n              <i class=\"fa fa-bars cursor-move in-page-bars-icon\" cdkDragHandle></i>\n            </div>\n          </div>\n        </div>\n\n        <button class=\"btn btn-outline-primary btn-sm mt-2\" (click)=\"addSubtitle(i)\">\n          + Add Subtitle\n        </button>\n      </div>\n    </div>\n\n    <button class=\"btn btn-primary mt-3\" (click)=\"addFooterLink()\">\n      + Add Footer Link\n    </button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveFooterLinks(modal)\">Save</button>\n  </div>\n</ng-template>\n\n\n\n\n\n<ng-template #logoModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Logo</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <pw-custom-uploader\n      [aspectRatio]=\"'fullLogo'\"\n      [title]=\"'Main Contrast Logo'\"\n      [controlName]=\"'logo_main_contrast'\"\n      [previewData]=\"previewData\"\n      (saveEvent)=\"onSaveFile($event)\">\n    </pw-custom-uploader>\n  </div>\n</ng-template>\n\n\n\n<ng-template #hubspotEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Hubspot Embed</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <div class=\"mb-3\">\n      <label for=\"hubspotId\" class=\"form-label\">Hubspot ID</label>\n      <input id=\"hubspotId\" [(ngModel)]=\"editingHubspotId\" class=\"form-control\" />\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"hubspotEmbedDiv\" class=\"form-label\">Embed DIV</label>\n      <textarea id=\"hubspotEmbedDiv\" [(ngModel)]=\"editingHubspotHtml\" rows=\"8\" class=\"form-control\"></textarea>\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-primary\" (click)=\"saveHubspotHtml(modal)\">Save</button>\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n  </div>\n</ng-template>\n\n\n<ng-template #socialEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Social Links & Company Name</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <div class=\"mb-3\">\n      <label for=\"youtubeUrl\" class=\"form-label\">YouTube URL</label>\n      <input id=\"youtubeUrl\" [(ngModel)]=\"editingYoutubeUrl\" class=\"form-control\" />\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"linkedinUrl\" class=\"form-label\">LinkedIn URL</label>\n      <input id=\"linkedinUrl\" [(ngModel)]=\"editingLinkedInUrl\" class=\"form-control\" />\n    </div>\n    <div class=\"mb-3\">\n      <label for=\"companyName\" class=\"form-label\">Company Name</label>\n      <input id=\"companyName\" [(ngModel)]=\"editingCompanyName\" class=\"form-control\" />\n    </div>\n  </div>\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-primary\" (click)=\"saveSocialLinks(modal)\">Save</button>\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n  </div>\n</ng-template>\n\n\n\n<ng-template #questionsEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Edit Questions</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n\n  <div class=\"modal-body\">\n    <h4 class=\"mb-3\">Questions Section</h4>\n    <div cdkDropList (cdkDropListDropped)=\"dropQuestions($event)\">\n      <div *ngFor=\"let q of editingQuestions; let i = index\" class=\"border p-3 mb-3\" cdkDrag>\n        <div class=\"row\">\n          <div class=\"col-md-11 mb-2\">\n            <label for=\"questionText{{i}}\" class=\"form-label\">Question</label>\n            <input id=\"questionText{{i}}\" class=\"form-control\" [(ngModel)]=\"q.question\" placeholder=\"Enter question\" />\n          </div>\n          <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-4\">\n            <i class=\"fa fa-bars in-page-bars-icon cursor-move\" cdkDragHandle></i>\n          </div>\n        </div>\n\n        <!-- Options Section -->\n        <div cdkDropList (cdkDropListDropped)=\"dropQuestionOptions(i, $event)\">\n          <div *ngFor=\"let opt of q.options; let j = index\" class=\"row border p-3 mb-2 align-items-center\" cdkDrag>\n            <div class=\"col-md-7 mb-2\">\n              <label for=\"questionOption{{i}}{{j}}\" class=\"form-label\">Option</label>\n              <input id=\"questionOption{{i}}{{j}}\" class=\"form-control\" [(ngModel)]=\"opt.option\" placeholder=\"Enter option\" />\n            </div>\n            <div class=\"col-md-2 d-flex justify-content-between align-items-center mt-4\">\n              <i class=\"fa fa-trash in-page-trash-icon text-danger cursor-pointer\" (click)=\"removeQuestionOption(i, j)\" (keydown.enter)=\"removeQuestionOption(i, j)\" (keydown.enter)=\"removeQuestionOption(i, j)\"></i>\n              <i class=\"fa fa-bars in-page-bars-icon cursor-move\" cdkDragHandle></i>\n            </div>\n          </div>\n        </div>\n\n        <button class=\"btn btn-outline-primary btn-sm mt-2\" (click)=\"addQuestionOption(i)\">+ Add Option</button>\n      </div>\n    </div>\n\n    <button class=\"btn btn-primary mt-3\" (click)=\"addNewQuestion()\">+ Add Question</button>\n  </div>\n\n  <div class=\"modal-footer\">\n    <button class=\"btn btn-secondary\" (click)=\"modal.dismiss()\">Cancel</button>\n    <button class=\"btn btn-primary\" (click)=\"saveQuestions(modal)\">Save</button>\n  </div>\n</ng-template>\n\n\n\n", styles: [".product-explainer-section{background-color:#000}.footer-section input.form-control,.footer-section select.form-control,.footer-section textarea.form-control{background-color:#fff;border:none;color:#000;font-size:14px}.btn-primary{background-color:#007bff;border:none}.site-column{margin-top:2.9rem}.email-section{color:#fff;font-size:2rem}.address-section{margin-top:5rem}.address-text{line-height:2.2rem}.user-info{font-size:1.5rem}.user-info-label{font-size:1.7rem;font-weight:700}.contact-form form .form-field{display:flex;align-items:center;margin-bottom:1.2rem}.contact-form form .form-field label{width:130px;min-width:130px;margin:0;font-size:14px;color:#fff;font-weight:600;text-transform:uppercase;letter-spacing:1px}.contact-form form .form-field p-dropdown{width:100%}.contact-form form .form-field input,.contact-form form .form-field select,.contact-form form .form-field textarea,.contact-form form .form-field ::ng-deep p-dropdown .p-inputwrapper{flex:1;border:none;border-radius:30px;padding:12px 20px;font-size:14px;width:100%!important;max-width:100%;color:#000}.contact-form form .form-field textarea{resize:vertical}.contact-form form .submit-button{background-color:#3b82f6;border:none;border-radius:30px;font-size:16px;font-weight:500;padding:10px 24px;margin-top:1.2rem}.input-select{height:43px}.select-label{width:210px!important}.copyright{margin-top:2rem;margin-left:4rem;font-size:19px;font-weight:700}.d-flex img{margin-right:0!important}.youtube-icon{height:38px}.enquiry-field{margin-left:.5rem;width:63%}::ng-deep .text-danger{margin-top:.25rem!important;margin-left:.5rem!important}@media (min-width: 768px){.hubspot-container{margin-top:-3rem}}@media (min-width: 768px) and (max-width: 1200px){.container{padding:0rem 6rem!important}}.link-label{cursor:pointer;transition:color .3s}.link-label:hover{color:var(--first)}.icons img{transition:transform .3s ease,filter .3s ease;cursor:pointer}.icons img:hover{transform:scale(1.1);filter:brightness(1.2)}.logo-image{max-width:160px;width:160px;height:35px;object-fit:contain;aspect-ratio:160/35}\n"] }]
         }], ctorParameters: () => [{ type: i1.UntypedFormBuilder }, { type: i2.AuthService }, { type: i3.CrmService }, { type: i4.DomSanitizer }, { type: i5.AdminService }, { type: i0.Injector }, { type: i2.AbTestService }, { type: i6.NgbModal }, { type: i0.ChangeDetectorRef }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -483,6 +493,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             }], content: [{
                 type: ViewChild,
                 args: ['bookMeeting', { static: true }]
+            }], editFooterLinksModal: [{
+                type: ViewChild,
+                args: ['editFooterLinksModal']
             }], logoModal: [{
                 type: ViewChild,
                 args: ['logoModal']
@@ -495,6 +508,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
             }], socialEditModal: [{
                 type: ViewChild,
                 args: ['socialEditModal']
+            }], questionsEditModal: [{
+                type: ViewChild,
+                args: ['questionsEditModal']
             }], subscriptionId: [{
                 type: Input
             }], sourceId: [{
@@ -513,359 +529,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                 type: Input
             }] } });
 
-/**
- * Standalone module for Trial4ContactUsComponent (pw-trial-4-contact-us)
- * Lightweight alternative to importing entire ResourceSharedModule
- *
- * DragDropModule removed - now lazy-loaded only when edit modals open
- * This reduces bundle size for landing pages where users aren't logged in
- */
-class Trial4ContactUsModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: Trial4ContactUsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: Trial4ContactUsModule, declarations: [Trial4ContactUsComponent], imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            RouterModule,
-            // DragDropModule removed - lazy-loaded in EditFooterLinksModalComponent and EditQuestionsModalComponent
-            NgbModalModule,
-            NgbTooltipModule,
-            DirectivesModule,
-            PipesModule,
-            CoreTranslocoModule,
-            NgxCaptchaModule,
-            DropdownModule,
-            FieldErrorDisplayModule$1, // For pw-field-error-display
-            ProfileImageCropperModule$1, // For pw-custom-uploader + pw-image-cropper
-            AdminModuleUtilsModule], exports: [Trial4ContactUsComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: Trial4ContactUsModule, imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            RouterModule,
-            // DragDropModule removed - lazy-loaded in EditFooterLinksModalComponent and EditQuestionsModalComponent
-            NgbModalModule,
-            NgbTooltipModule,
-            DirectivesModule,
-            PipesModule,
-            CoreTranslocoModule,
-            NgxCaptchaModule,
-            DropdownModule,
-            FieldErrorDisplayModule$1, // For pw-field-error-display
-            ProfileImageCropperModule$1, // For pw-custom-uploader + pw-image-cropper
-            AdminModuleUtilsModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: Trial4ContactUsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [Trial4ContactUsComponent],
-                    imports: [
-                        CommonModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        RouterModule,
-                        // DragDropModule removed - lazy-loaded in EditFooterLinksModalComponent and EditQuestionsModalComponent
-                        NgbModalModule,
-                        NgbTooltipModule,
-                        DirectivesModule,
-                        PipesModule,
-                        CoreTranslocoModule,
-                        NgxCaptchaModule,
-                        DropdownModule,
-                        FieldErrorDisplayModule$1, // For pw-field-error-display
-                        ProfileImageCropperModule$1, // For pw-custom-uploader + pw-image-cropper
-                        AdminModuleUtilsModule
-                    ],
-                    exports: [Trial4ContactUsComponent]
-                }]
-        }] });
-
-class ProfileImageCropperComponent {
-    constructor(cdr) {
-        this.cdr = cdr;
-        this.imageChangedEvent = '';
-        this.croppedImage = '';
-        this.imageSelectionEvent = new EventEmitter();
-        this.closeEvent = new EventEmitter();
-        this.fileChangeEvent = new EventEmitter();
-        this.aspectRatio = 'auto';
-        this.transform = {};
-        this.canvasRotation = 0;
-        this.showCropper = false;
-    }
-    onFileChange(event) {
-        const input = event.target;
-        if (input.files && input.files.length > 0) {
-            this.imageChangedEvent = event;
-            this.fileChangeEvent.emit(input.files[0].name);
-        }
-    }
-    imageCropped(event) {
-        const reader = new FileReader();
-        reader.onloadend = () => {
-            this.croppedImage = reader.result;
-            this.cdr.detectChanges();
+class ResourceHeaderComponent extends AppBaseComponent {
+    constructor(injector, document, adminService, modalService) {
+        super(injector);
+        this.document = document;
+        this.adminService = adminService;
+        this.modalService = modalService;
+        this.isScrolled = false;
+        this.open = false;
+        this.logo = '/assets/img/landing-page/site-logo.png'; // Static fallback for LCP optimization
+        this.navbarItems = this.appConfig?.pages_config?.navbar?.items;
+        this.domainId = this.appConfig?.domain_id;
+        this.contrastImageUrl = this.appConfig?.company?.logos?.main_contrast?.url;
+        this.darkImageUrl = this.appConfig?.company?.logos?.main_dark?.url;
+        this.editingNavbar = {
+            items: []
         };
-        reader.readAsDataURL(event.blob);
-    }
-    imageLoaded() {
-        this.showCropper = true;
-    }
-    rotateLeft() {
-        this.canvasRotation--;
-        this.flipAfterRotate();
-    }
-    rotateRight() {
-        this.canvasRotation++;
-        this.flipAfterRotate();
+        this.canEditResourcesValue = false;
     }
-    flipAfterRotate() {
-        const flippedH = this.transform.flipH;
-        const flippedV = this.transform.flipV;
-        this.transform = {
-            ...this.transform,
-            flipH: flippedV,
-            flipV: flippedH
-        };
+    ngOnInit() {
+        console.log('In Header');
+        // Subscribe to appConfig changes to update logo dynamically
+        this.appConfigService.appConfig$.subscribe(config => {
+            if (config?.company?.logos) {
+                const isAboutUs = this.router.url?.includes('/about-us');
+                const logos = config.company.logos;
+                // Use smaller version for better performance (100x100 instead of 1200x264)
+                this.logo = isAboutUs
+                    ? logos.main_contrast?.url || '/assets/img/landing-page/site-logo.png'
+                    : logos.main_dark?.url || '/assets/img/landing-page/site-logo.png';
+            }
+        });
+        if (this.userLoggedIn) {
+            this.localStorage.getItem$('product').subscribe(res => {
+                const data = res ? JSON.parse(res) : null;
+                this.id = data?.subscriptionId;
+            });
+        }
     }
-    flipHorizontal() {
-        this.transform = {
-            ...this.transform,
-            flipH: !this.transform.flipH
-        };
+    ngOnChanges(changes) {
+        if (changes['user'] || changes['userLoggedIn']) {
+            if (this.userLoggedIn && this.user) {
+                this.updateCanEditResourcesValue();
+            }
+        }
     }
-    flipVertical() {
-        this.transform = {
-            ...this.transform,
-            flipV: !this.transform.flipV
-        };
+    openLogoEditModal() {
+        this.modalService.open(this.logoEditModal, { centered: true, size: 'md' });
     }
-    saveProfilePicture() {
-        if (this.croppedImage) {
-            this.imageSelectionEvent.emit(this.croppedImage);
-            this.busy = true;
+    onSaveLogo(event) {
+        const formData = new FormData();
+        formData.append('subscription_id', this.id);
+        if (event.file instanceof File) {
+            formData.append(this.isScrolled ? 'logo_main_contrast' : 'logo_main_dark', event.file);
         }
-    }
-    onCloseModal() {
-        this.closeEvent.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ProfileImageCropperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: { aspectRatio: "aspectRatio", dynamicData: "dynamicData" }, outputs: { imageSelectionEvent: "imageSelectionEvent", closeEvent: "closeEvent", fileChangeEvent: "fileChangeEvent" }, ngImport: i0, template: "<section class=\"image-cropper\">\n  <div class=\"row text-start\">\n    <div class=\"col-12\">\n      <div class=\"card-block pb-0\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"file-upload my-2 float-start\">\n              <label for=\"custom-input\">\n                Upload Pic\n                <input id=\"custom-input\"\n                  type=\"file\"\n                  (change)=\"onFileChange($event)\" />\n              </label>\n            </div>\n\n            <div class=\"float-end m-2\">\n              <button class=\"btn btn-primary btn-sm mx-2\"\n                title=\"Rotate Left\">\n                <i\n                                    class=\"fa fa-undo-alt\"\n                                    (click)=\"rotateLeft()\"\n                                    (keydown.enter)=\"rotateLeft()\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n\n              <button class=\"btn btn-primary btn-sm mx-2\"\n                title=\"Rotate Right\">\n                <i\n                                    class=\"fa fa-redo-alt\"\n                                    (click)=\"rotateRight()\"\n                                    (keydown.enter)=\"rotateRight()\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n\n              <button class=\"btn btn-primary btn-sm mx-2\"\n                title=\"Flip Horizontal\">\n                <i\n                                    class=\"fa fa-arrows-alt-h\"\n                                    (click)=\"flipHorizontal()\"\n                                    (keydown.enter)=\"flipHorizontal()\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n              <button class=\"btn btn-primary btn-sm mx-2\"\n                title=\"Flip Vertical\">\n                <i\n                                    class=\"fa fa-arrows-alt-v\"\n                                    (click)=\"flipVertical()\"\n                                    (keydown.enter)=\"flipVertical()\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"row\">\n          <div class=\"col-8\">\n            <div *ngIf=\"aspectRatio === 'auto'\">\n              <image-cropper [imageChangedEvent]=\"imageChangedEvent\"\n                [maintainAspectRatio]=\"true\"\n                [canvasRotation]=\"canvasRotation\"\n                [aspectRatio]=\"4 / 4\"\n                [onlyScaleDown]=\"true\"\n                [transform]=\"transform\"\n                [roundCropper]=\"false\"\n                alignImage=\"center\"\n                outputType=\"base64\"\n                (imageCropped)=\"imageCropped($event)\"\n                (imageLoaded)=\"imageLoaded()\"\n                [imageQuality]=\"100\"\n                [style.display]=\"showCropper ? null : 'none'\"></image-cropper>\n            </div>\n\n            <div *ngIf=\"aspectRatio === 'fullLogo'\">\n              <image-cropper [imageChangedEvent]=\"imageChangedEvent\"\n                [maintainAspectRatio]=\"true\"\n                [aspectRatio]=\"5 / 1.1\"\n                [onlyScaleDown]=\"true\"\n                [roundCropper]=\"false\"\n                alignImage=\"center\"\n                outputType=\"base64\"\n                (imageCropped)=\"imageCropped($event)\"\n                (imageLoaded)=\"imageLoaded()\"\n                [imageQuality]=\"100\"\n                [style.display]=\"showCropper ? null : 'none'\"></image-cropper>\n            </div>\n\n            <div *ngIf=\"aspectRatio === 'rectangular'\">\n              <image-cropper\n                [imageChangedEvent]=\"imageChangedEvent\"\n                [maintainAspectRatio]=\"true\"\n                [aspectRatio]=\"3 / 1\"\n                [onlyScaleDown]=\"true\"\n                [canvasRotation]=\"canvasRotation\"\n                [transform]=\"transform\"\n                [roundCropper]=\"false\"\n                alignImage=\"center\"\n                outputType=\"base64\"\n                (imageCropped)=\"imageCropped($event)\"\n                (imageLoaded)=\"imageLoaded()\"\n                [imageQuality]=\"100\"\n                [style.display]=\"showCropper ? null : 'none'\"></image-cropper>\n            </div>\n\n            <div *ngIf=\"aspectRatio === 'dynamic'\">\n              <image-cropper\n              [imageChangedEvent]=\"imageChangedEvent\"\n              [maintainAspectRatio]=\"false\"\n              [resizeToWidth]=\"0\"\n              [cropperStaticWidth]=\"0\"\n              [cropperStaticHeight]=\"0\"\n              [cropperMinWidth]=\"10\"\n              [cropperMinHeight]=\"10\"\n              [onlyScaleDown]=\"false\"\n              [canvasRotation]=\"canvasRotation\"\n              [transform]=\"transform\"\n              [roundCropper]=\"false\"\n              alignImage=\"center\"\n              outputType=\"base64\"\n              [imageQuality]=\"100\"\n              (imageCropped)=\"imageCropped($event)\"\n              (imageLoaded)=\"imageLoaded()\"\n              [style.display]=\"showCropper ? null : 'none'\">\n              </image-cropper>\n            </div>\n\n            <div *ngIf=\"aspectRatio === 'custom'\">\n              <image-cropper [imageChangedEvent]=\"imageChangedEvent\"\n                [maintainAspectRatio]=\"true\"\n                [canvasRotation]=\"canvasRotation\"\n                [transform]=\"transform\"\n                [aspectRatio]=\"4 / 3\"\n                [onlyScaleDown]=\"true\"\n                [roundCropper]=\"false\"\n                alignImage=\"center\"\n                outputType=\"base64\"\n                (imageCropped)=\"imageCropped($event)\"\n                (imageLoaded)=\"imageLoaded()\"\n                [imageQuality]=\"100\"\n                [style.display]=\"showCropper ? null : 'none'\"></image-cropper>\n            </div>\n          </div>\n          <div *ngIf=\"croppedImage\" class=\"col-4 mt-2\">\n            <img [src]=\"croppedImage\"\n            class=\"cropped-image\"\n              alt=\"cropped.png\"\n              width=\"128\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-footer px-3\">\n    <div class=\"float-end mt-2\">\n      <button type=\"button\"\n        class=\"btn btn-outline-default me-2\"\n        (click)=\"onCloseModal()\">\n        Close\n      </button>\n      <button type=\"button\"\n        class=\"btn btn-primary\"\n        (click)=\"saveProfilePicture()\"\n        [buttonBusy]=\"busy\">\n        Save\n      </button>\n    </div>\n  </div>\n</section>\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)}.image-cropper label{background:var(--first);border-radius:5px;color:#fff;display:table;font-size:13px;font-weight:500;padding:7px}.image-cropper input[type=file]{display:none}.cropped-image{max-height:390px!important}.card-footer{background-color:transparent;left:0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "cropperFrameAriaLabel", "output", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "directive", type: i9.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i9.LazyImgDirective, selector: "img" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ProfileImageCropperComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pw-image-cropper', template: "<section class=\"image-cropper\">\n  <div class=\"row text-start\">\n    <div class=\"col-12\">\n      <div class=\"card-block pb-0\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"file-upload my-2 float-start\">\n              <label for=\"custom-input\">\n                Upload Pic\n                <input id=\"custom-input\"\n                  type=\"file\"\n                  (change)=\"onFileChange($event)\" />\n              </label>\n            </div>\n\n            <div class=\"float-end m-2\">\n              <button class=\"btn btn-primary btn-sm mx-2\"\n                title=\"Rotate Left\">\n                <i\n                                    class=\"fa fa-undo-alt\"\n                                    (click)=\"rotateLeft()\"\n                                    (keydown.enter)=\"rotateLeft()\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n\n              <button class=\"btn btn-primary btn-sm mx-2\"\n                title=\"Rotate Right\">\n                <i\n                                    class=\"fa fa-redo-alt\"\n                                    (click)=\"rotateRight()\"\n                                    (keydown.enter)=\"rotateRight()\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n\n              <button class=\"btn btn-primary btn-sm mx-2\"\n                title=\"Flip Horizontal\">\n                <i\n                                    class=\"fa fa-arrows-alt-h\"\n                                    (click)=\"flipHorizontal()\"\n                                    (keydown.enter)=\"flipHorizontal()\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n              <button class=\"btn btn-primary btn-sm mx-2\"\n                title=\"Flip Vertical\">\n                <i\n                                    class=\"fa fa-arrows-alt-v\"\n                                    (click)=\"flipVertical()\"\n                                    (keydown.enter)=\"flipVertical()\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"row\">\n          <div class=\"col-8\">\n            <div *ngIf=\"aspectRatio === 'auto'\">\n              <image-cropper [imageChangedEvent]=\"imageChangedEvent\"\n                [maintainAspectRatio]=\"true\"\n                [canvasRotation]=\"canvasRotation\"\n                [aspectRatio]=\"4 / 4\"\n                [onlyScaleDown]=\"true\"\n                [transform]=\"transform\"\n                [roundCropper]=\"false\"\n                alignImage=\"center\"\n                outputType=\"base64\"\n                (imageCropped)=\"imageCropped($event)\"\n                (imageLoaded)=\"imageLoaded()\"\n                [imageQuality]=\"100\"\n                [style.display]=\"showCropper ? null : 'none'\"></image-cropper>\n            </div>\n\n            <div *ngIf=\"aspectRatio === 'fullLogo'\">\n              <image-cropper [imageChangedEvent]=\"imageChangedEvent\"\n                [maintainAspectRatio]=\"true\"\n                [aspectRatio]=\"5 / 1.1\"\n                [onlyScaleDown]=\"true\"\n                [roundCropper]=\"false\"\n                alignImage=\"center\"\n                outputType=\"base64\"\n                (imageCropped)=\"imageCropped($event)\"\n                (imageLoaded)=\"imageLoaded()\"\n                [imageQuality]=\"100\"\n                [style.display]=\"showCropper ? null : 'none'\"></image-cropper>\n            </div>\n\n            <div *ngIf=\"aspectRatio === 'rectangular'\">\n              <image-cropper\n                [imageChangedEvent]=\"imageChangedEvent\"\n                [maintainAspectRatio]=\"true\"\n                [aspectRatio]=\"3 / 1\"\n                [onlyScaleDown]=\"true\"\n                [canvasRotation]=\"canvasRotation\"\n                [transform]=\"transform\"\n                [roundCropper]=\"false\"\n                alignImage=\"center\"\n                outputType=\"base64\"\n                (imageCropped)=\"imageCropped($event)\"\n                (imageLoaded)=\"imageLoaded()\"\n                [imageQuality]=\"100\"\n                [style.display]=\"showCropper ? null : 'none'\"></image-cropper>\n            </div>\n\n            <div *ngIf=\"aspectRatio === 'dynamic'\">\n              <image-cropper\n              [imageChangedEvent]=\"imageChangedEvent\"\n              [maintainAspectRatio]=\"false\"\n              [resizeToWidth]=\"0\"\n              [cropperStaticWidth]=\"0\"\n              [cropperStaticHeight]=\"0\"\n              [cropperMinWidth]=\"10\"\n              [cropperMinHeight]=\"10\"\n              [onlyScaleDown]=\"false\"\n              [canvasRotation]=\"canvasRotation\"\n              [transform]=\"transform\"\n              [roundCropper]=\"false\"\n              alignImage=\"center\"\n              outputType=\"base64\"\n              [imageQuality]=\"100\"\n              (imageCropped)=\"imageCropped($event)\"\n              (imageLoaded)=\"imageLoaded()\"\n              [style.display]=\"showCropper ? null : 'none'\">\n              </image-cropper>\n            </div>\n\n            <div *ngIf=\"aspectRatio === 'custom'\">\n              <image-cropper [imageChangedEvent]=\"imageChangedEvent\"\n                [maintainAspectRatio]=\"true\"\n                [canvasRotation]=\"canvasRotation\"\n                [transform]=\"transform\"\n                [aspectRatio]=\"4 / 3\"\n                [onlyScaleDown]=\"true\"\n                [roundCropper]=\"false\"\n                alignImage=\"center\"\n                outputType=\"base64\"\n                (imageCropped)=\"imageCropped($event)\"\n                (imageLoaded)=\"imageLoaded()\"\n                [imageQuality]=\"100\"\n                [style.display]=\"showCropper ? null : 'none'\"></image-cropper>\n            </div>\n          </div>\n          <div *ngIf=\"croppedImage\" class=\"col-4 mt-2\">\n            <img [src]=\"croppedImage\"\n            class=\"cropped-image\"\n              alt=\"cropped.png\"\n              width=\"128\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-footer px-3\">\n    <div class=\"float-end mt-2\">\n      <button type=\"button\"\n        class=\"btn btn-outline-default me-2\"\n        (click)=\"onCloseModal()\">\n        Close\n      </button>\n      <button type=\"button\"\n        class=\"btn btn-primary\"\n        (click)=\"saveProfilePicture()\"\n        [buttonBusy]=\"busy\">\n        Save\n      </button>\n    </div>\n  </div>\n</section>\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)}.image-cropper label{background:var(--first);border-radius:5px;color:#fff;display:table;font-size:13px;font-weight:500;padding:7px}.image-cropper input[type=file]{display:none}.cropped-image{max-height:390px!important}.card-footer{background-color:transparent;left:0}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { imageSelectionEvent: [{
-                type: Output
-            }], closeEvent: [{
-                type: Output
-            }], fileChangeEvent: [{
-                type: Output
-            }], aspectRatio: [{
-                type: Input
-            }], dynamicData: [{
-                type: Input
-            }] } });
-
-class CustomUploaderComponent extends AppBaseComponent {
-    constructor(injector, modalService, document) {
-        super(injector);
-        this.modalService = modalService;
-        this.document = document;
-        this.saveEvent = new EventEmitter();
-        this.aspectRatio = 'auto';
-        this.uploadedFile = null;
-    }
-    deleteExistingFile() {
-        HelperService.raiseDeletePopup().then(rep => {
-            if (rep.value) {
-                this.previewData = null;
-                this.onSaveFile();
-            }
-        });
-    }
-    onSaveFile() {
-        this.buttonBusy = true;
-        this.saveEvent.emit({
-            file: this.previewData?.url ? this.previewData : this.uploadedFile,
-            name: this.controlName
-        });
-    }
-    // modal image cropper
-    onFileChange(value) {
-        this.selectedFileName = value;
-    }
-    dataURLtoBlob(dataUrl) {
-        const arr = dataUrl?.split(',');
-        // eslint-disable-next-line @typescript-eslint/prefer-regexp-exec
-        const mime = /^[A-Z]*[a-z]*:(.*?);[A-Z]*/.exec(arr[0])?.[1];
-        const bStr = atob(arr[1]);
-        let n = bStr.length;
-        const u8arr = new Uint8Array(n);
-        // eslint-disable-next-line no-plusplus
-        while (n--) {
-            u8arr[n] = bStr.charCodeAt(n);
-        }
-        return new Blob([u8arr], { type: mime });
-    }
-    onImageSelection(event) {
-        const blob = this.dataURLtoBlob(event);
-        const file = new File([blob], this.selectedFileName);
-        this.uploadedFile = file;
-        this.onSaveFile();
-    }
-    openModal(content) {
-        this.modalService.open(content, { centered: true, windowClass: 'modal-holder' });
-    }
-    clearValues() {
-        this.uploadedFile = null;
-        this.selectedFileName = null;
-        this.updateHeight();
-    }
-    onClose() {
-        this.modalService.dismissAll();
-    }
-    updateHeight() {
-        // wait for update card height
-        setTimeout(() => {
-            this.onImgChange();
-        });
-    }
-    onImgChange(event) {
-        if (event) {
-            const target = event.target;
-            target.src = 'assets/img/icons/imagenotavailable.png';
-        }
-        const el = this.document.querySelectorAll('pw-domain-config-interface,pw-domain-config-build div[matchheight="card"]');
-        el.forEach((item) => {
-            HelperService.matchHeights(item, 'card');
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CustomUploaderComponent, deps: [{ token: i0.Injector }, { token: i6.NgbModal }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: CustomUploaderComponent, selector: "pw-custom-uploader", inputs: { controlName: "controlName", previewData: "previewData", aspectRatio: "aspectRatio", title: "title" }, outputs: { saveEvent: "saveEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"card pb-2\">\n  <div class=\"card-header upload-button-bar\">\n    <button pButton\n      type=\"button\"\n      [disabled]=\"previewData?.url || uploadedFile\"\n      (click)=\"openModal(content)\"\n      (keydown.enter)=\"openModal(content)\"\n      icon=\"pi pi-plus\"\n      label=\"Choose\"></button>\n  </div>\n  <div class=\"card-body\">\n    <!-- no files -->\n    <div class=\"d-flex preview-wrapper\"\n      *ngIf=\"!previewData?.url\">\n      <div>\n        <img src=\"assets/img/icons/nofilesfound.png\"\n          (load)=\"onImgChange()\"\n          class=\"mx-auto img-fluid\"\n          alt=\"\" />\n      </div>\n    </div>\n    <!-- existing images -->\n    <div class=\"d-flex preview-wrapper\"\n      *ngIf=\"previewData?.url\">\n      <div>\n        <a [href]=\"previewData?.url\"\n          target=\"_blank\">\n          <img [src]=\"previewData?.url\"\n            alt=\"\"\n            (load)=\"onImgChange()\"\n            (error)=\"onImgChange($event)\"\n            class=\"img-fluid\" />\n        </a>\n      </div>\n      <div class=\"ms-3\">\n        <i\n                    container=\"body\"\n                    ngbTooltip=\"Delete\"\n                    (click)=\"deleteExistingFile()\"\n                    (keydown.enter)=\"deleteExistingFile()\"\n                    (keydown.space)=\"deleteExistingFile()\"\n                    class=\"fa fa-trash delete-icon\"\n                    aria-hidden=\"true\"\n                ></i>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- image cropper -->\n<ng-template #content\n  let-modal>\n  <div class=\"card m-0\">\n    <div class=\"card-content\">\n      <div class=\"card-title\">\n        <h3 class=\"modal-title\">{{ title }}</h3>\n        <button type=\"button\"\n          class=\"btn-close float-end float-end\"\n          aria-label=\"Close\"\n          (click)=\"modal.dismiss()\">\n\n        </button>\n      </div>\n      <div class=\"card-header\">\n        <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n        <pw-image-cropper #profile\n          [aspectRatio]=\"aspectRatio\"\n          (fileChangeEvent)=\"onFileChange($event)\"\n          (imageSelectionEvent)=\"onImageSelection($event)\"\n          (closeEvent)=\"onClose()\">\n        </pw-image-cropper>\n      </div>\n    </div>\n  </div>\n</ng-template>\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)}.upload-button-bar{background:#efefef;padding:1rem 1.25rem}.card{min-height:270px!important;max-height:550px!important;height:auto}.preview-wrapper{align-items:center;text-align:center}.preview-wrapper div{padding:1rem;flex:1 1 auto;width:25%;word-break:break-all}button[label=Choose],button[label=Choose]:hover,button[label=Choose]:enabled:active{background-color:#616161;border-color:#616161}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i9.LazyImgDirective, selector: "img" }, { kind: "component", type: ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CustomUploaderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pw-custom-uploader', template: "<div class=\"card pb-2\">\n  <div class=\"card-header upload-button-bar\">\n    <button pButton\n      type=\"button\"\n      [disabled]=\"previewData?.url || uploadedFile\"\n      (click)=\"openModal(content)\"\n      (keydown.enter)=\"openModal(content)\"\n      icon=\"pi pi-plus\"\n      label=\"Choose\"></button>\n  </div>\n  <div class=\"card-body\">\n    <!-- no files -->\n    <div class=\"d-flex preview-wrapper\"\n      *ngIf=\"!previewData?.url\">\n      <div>\n        <img src=\"assets/img/icons/nofilesfound.png\"\n          (load)=\"onImgChange()\"\n          class=\"mx-auto img-fluid\"\n          alt=\"\" />\n      </div>\n    </div>\n    <!-- existing images -->\n    <div class=\"d-flex preview-wrapper\"\n      *ngIf=\"previewData?.url\">\n      <div>\n        <a [href]=\"previewData?.url\"\n          target=\"_blank\">\n          <img [src]=\"previewData?.url\"\n            alt=\"\"\n            (load)=\"onImgChange()\"\n            (error)=\"onImgChange($event)\"\n            class=\"img-fluid\" />\n        </a>\n      </div>\n      <div class=\"ms-3\">\n        <i\n                    container=\"body\"\n                    ngbTooltip=\"Delete\"\n                    (click)=\"deleteExistingFile()\"\n                    (keydown.enter)=\"deleteExistingFile()\"\n                    (keydown.space)=\"deleteExistingFile()\"\n                    class=\"fa fa-trash delete-icon\"\n                    aria-hidden=\"true\"\n                ></i>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- image cropper -->\n<ng-template #content\n  let-modal>\n  <div class=\"card m-0\">\n    <div class=\"card-content\">\n      <div class=\"card-title\">\n        <h3 class=\"modal-title\">{{ title }}</h3>\n        <button type=\"button\"\n          class=\"btn-close float-end float-end\"\n          aria-label=\"Close\"\n          (click)=\"modal.dismiss()\">\n\n        </button>\n      </div>\n      <div class=\"card-header\">\n        <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n        <pw-image-cropper #profile\n          [aspectRatio]=\"aspectRatio\"\n          (fileChangeEvent)=\"onFileChange($event)\"\n          (imageSelectionEvent)=\"onImageSelection($event)\"\n          (closeEvent)=\"onClose()\">\n        </pw-image-cropper>\n      </div>\n    </div>\n  </div>\n</ng-template>\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)}.upload-button-bar{background:#efefef;padding:1rem 1.25rem}.card{min-height:270px!important;max-height:550px!important;height:auto}.preview-wrapper{align-items:center;text-align:center}.preview-wrapper div{padding:1rem;flex:1 1 auto;width:25%;word-break:break-all}button[label=Choose],button[label=Choose]:hover,button[label=Choose]:enabled:active{background-color:#616161;border-color:#616161}\n"] }]
-        }], ctorParameters: () => [{ type: i0.Injector }, { type: i6.NgbModal }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { saveEvent: [{
-                type: Output
-            }], controlName: [{
-                type: Input
-            }], previewData: [{
-                type: Input
-            }], aspectRatio: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }] } });
-
-/**
- * Lightweight module for pw-image-cropper component
- *
- * Minimal dependencies - only CommonModule, ImageCropperModule, DirectivesModule
- * Use this instead of ResourceSharedComponentsModule when you only need image cropping
- */
-class ProfileImageCropperModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ProfileImageCropperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: ProfileImageCropperModule, declarations: [ProfileImageCropperComponent, CustomUploaderComponent], imports: [CommonModule,
-            CoreTranslocoModule,
-            ButtonModule,
-            ImageCropperModule, // for <image-cropper>
-            DirectivesModule // for [buttonBusy] directive
-        ], exports: [ProfileImageCropperComponent, CustomUploaderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ProfileImageCropperModule, imports: [CommonModule,
-            CoreTranslocoModule,
-            ButtonModule,
-            ImageCropperModule, // for <image-cropper>
-            DirectivesModule // for [buttonBusy] directive
-        ] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ProfileImageCropperModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [ProfileImageCropperComponent, CustomUploaderComponent],
-                    imports: [
-                        CommonModule,
-                        CoreTranslocoModule,
-                        ButtonModule,
-                        ImageCropperModule, // for <image-cropper>
-                        DirectivesModule // for [buttonBusy] directive
-                    ],
-                    exports: [ProfileImageCropperComponent, CustomUploaderComponent]
-                }]
-        }] });
-
-class ResourceHeaderComponent extends AppBaseComponent {
-    constructor(injector, document, adminService, modalService) {
-        super(injector);
-        this.document = document;
-        this.adminService = adminService;
-        this.modalService = modalService;
-        this.isScrolled = false;
-        this.open = false;
-        this.logo = '/assets/img/landing-page/site-logo.png'; // Static fallback for LCP optimization
-        this.navbarItems = this.appConfig?.pages_config?.navbar?.items;
-        this.domainId = this.appConfig?.domain_id;
-        this.contrastImageUrl = this.appConfig?.company?.logos?.main_contrast?.url;
-        this.darkImageUrl = this.appConfig?.company?.logos?.main_dark?.url;
-        this.editingNavbar = {
-            items: []
-        };
-        this.canEditResourcesValue = false;
-    }
-    ngOnInit() {
-        console.log('In Header');
-        // Subscribe to appConfig changes to update logo dynamically
-        this.appConfigService.appConfig$.subscribe(config => {
-            if (config?.company?.logos) {
-                const isAboutUs = this.router.url?.includes('/about-us');
-                const logos = config.company.logos;
-                // Use smaller version for better performance (100x100 instead of 1200x264)
-                this.logo = isAboutUs
-                    ? logos.main_contrast?.url || '/assets/img/landing-page/site-logo.png'
-                    : logos.main_dark?.url || '/assets/img/landing-page/site-logo.png';
-            }
-        });
-        if (this.userLoggedIn) {
-            this.localStorage.getItem$('product').subscribe(res => {
-                const data = res ? JSON.parse(res) : null;
-                this.id = data?.subscriptionId;
-            });
-        }
-    }
-    ngOnChanges(changes) {
-        if (changes['user'] || changes['userLoggedIn']) {
-            if (this.userLoggedIn && this.user) {
-                this.updateCanEditResourcesValue();
-            }
-        }
-    }
-    openLogoEditModal() {
-        this.modalService.open(this.logoEditModal, { centered: true, size: 'md' });
-    }
-    onSaveLogo(event) {
-        const formData = new FormData();
-        formData.append('subscription_id', this.id);
-        if (event.file instanceof File) {
-            formData.append(this.isScrolled ? 'logo_main_contrast' : 'logo_main_dark', event.file);
-        }
-        else {
-            formData.append(this.isScrolled ? 'remove_logo_main_contrast' : 'remove_logo_main_dark', 'true');
-        }
-        this.adminService.updateDomainConfig(this.domainId, formData).subscribe(() => {
-            if (event.file) {
-                this.logo = URL.createObjectURL(event.file);
-                if (this.isScrolled) {
-                    this.contrastImageUrl = URL.createObjectURL(event.file);
-                }
-                else {
-                    this.darkImageUrl = URL.createObjectURL(event.file);
-                }
-                this.modalService.dismissAll();
-            }
-            this.toast.success(event.file ? 'Logo updated' : 'Logo removed');
-        });
+        else {
+            formData.append(this.isScrolled ? 'remove_logo_main_contrast' : 'remove_logo_main_dark', 'true');
+        }
+        this.adminService.updateDomainConfig(this.domainId, formData).subscribe(() => {
+            if (event.file) {
+                this.logo = URL.createObjectURL(event.file);
+                if (this.isScrolled) {
+                    this.contrastImageUrl = URL.createObjectURL(event.file);
+                }
+                else {
+                    this.darkImageUrl = URL.createObjectURL(event.file);
+                }
+                this.modalService.dismissAll();
+            }
+            this.toast.success(event.file ? 'Logo updated' : 'Logo removed');
+        });
     }
     onScroll() {
         clearTimeout(this.scrollTimeout);
@@ -938,7 +671,7 @@ class ResourceHeaderComponent extends AppBaseComponent {
             // Dynamically import EditNavbarModalComponent (includes DragDropModule)
             // This only loads when the edit modal is opened (user is logged in with edit permissions)
             // Reduces bundle size for landing pages where users aren't logged in
-            const { EditNavbarModalComponent } = await import('./posiwise-resource-contact-us-edit-navbar-modal.component-C59Q3971.mjs');
+            const { EditNavbarModalComponent } = await import('./posiwise-resource-contact-us-edit-navbar-modal.component-jSKqyC6g.mjs');
             const modalRef = this.modalService.open(EditNavbarModalComponent, {
                 size: 'lg',
                 centered: true,
@@ -984,11 +717,11 @@ class ResourceHeaderComponent extends AppBaseComponent {
         window.location.href = '/login';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceHeaderComponent, deps: [{ token: i0.Injector }, { token: DOCUMENT }, { token: i5.AdminService }, { token: i6.NgbModal }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourceHeaderComponent, selector: "pw-resource-header", inputs: { user: "user", userLoggedIn: "userLoggedIn" }, host: { listeners: { "window:scroll": "onScroll()", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "navbarCollapse", first: true, predicate: ["collapsibleNavbar"], descendants: true }, { propertyName: "logoEditModal", first: true, predicate: ["logoEditModal"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<nav class=\"navbar navbar-expand-md navbar-dark fixed-top primary-nav-bg-color resource-header\"\n  id=\"banner\">\n  <div class=\"container container-wrapper banner-section\">\n\n    <!-- Toggler/collapsibe Button -->\n    <button class=\"navbar-toggler header-menu-bar\"\n      type=\"button\"\n      aria-label=\"Toggle navigation\"\n      data-bs-toggle=\"collapse\"\n      data-bs-target=\"#collapsibleNavbar\">\n      <img src=\"/assets/img/products/trial/navbar-toggle-icon.png\"\n        class=\"img-fluid navbar-toggle-icon\"\n        alt=\"\" />\n    </button>\n\n    <!-- Mobile Logo -->\n    <div class=\"d-md-none mb-icon\">\n      <div>\n        <img src=\"/assets/img/landing-page/site-logo.png\"\n          [src]=\"logo || '/assets/img/landing-page/site-logo.png'\"\n          routerLink=\"/\"\n          alt=\"logo\"\n          class=\"img-fluid logo_img\"\n          width=\"100\"\n          height=\"100\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          sizes=\"100px\" />\n      </div>\n    </div>\n\n\n    <i *ngIf=\"canEditResourcesValue\"\n    class=\"fa fa-edit in-page-edit-icon cursor-pointer text-black me-3\"\n    (click)=\"openLogoEditModal()\"\n    (keydown.enter)=\"openLogoEditModal()\"\n    (keydown.space)=\"openLogoEditModal()\"\n    title=\"Edit Logo\"></i>\n\n\n    <!-- Navbar links -->\n    <div class=\"collapse navbar-collapse mt-3 mt-md-0\"\n      id=\"collapsibleNavbar\"\n      #collapsibleNavbar>\n      <div class=\"row align-items-center w-100\">\n\n        <!-- Always occupy 3 columns for logo -->\n        <div class=\"col-md-2 d-none d-md-flex align-items-center\">\n          <div>\n            <img src=\"/assets/img/landing-page/site-logo.png\"\n              [src]=\"logo || '/assets/img/landing-page/site-logo.png'\"\n              routerLink=\"/\"\n              alt=\"logo\"\n              class=\"img-fluid logo_img\"\n              width=\"100\"\n              height=\"100\"\n              loading=\"eager\"\n              fetchpriority=\"high\"\n              sizes=\"100px\" />\n          </div>\n        </div>\n\n\n        <div class=\"col-md-7 d-flex justify-content-start\">\n          <ul #anchorLinks\n            class=\"navbar-nav flex gap-4 me-0 wow fadeInUp position-relative\"\n            data-wow-duration=\"2s\">\n\n          <i *ngIf=\"canEditResourcesValue\"\n          class=\"fa fa-edit in-page-edit-icon cursor-pointer text-black me-3\"\n          (click)=\"openEditNavbarModal()\"\n          (keydown.enter)=\"openEditNavbarModal()\"\n          (keydown.space)=\"openEditNavbarModal()\"\n          title=\"Edit Navbar Links\"></i>\n            <li class=\"nav-item\" *ngFor=\"let item of navbarItems\">\n                <div class=\"dropdown-container\"\n                     (mouseenter)=\"openDropdown(item)\">\n                    <a\n                    class=\"nav-link\"\n                      href=\"javascript:void(0)\"\n                      [ngClass]=\"{ 'scrolled-nav-link': isScrolled }\"\n                      (click)=\"item.subtitles?.length ? (item.open = !item.open) : null\"\n                      [attr.href]=\"!(item.subtitles?.length) ? item.path : null\"\n                    >\n                      {{ item?.title }}\n                      <i *ngIf=\"item.subtitles.length > 0 && item.open\" class=\"fa-solid fa-caret-down\"></i>\n                    </a>\n                    <div class=\"popup position-absolute\"\n                    *ngIf=\"item.subtitles.length > 0 && item.open\">\n                    <ul>\n                      <li\n                          *ngFor=\"let sub of item.subtitles\"\n                          [routerLink]=\"sub.path\"\n                          class=\"dropdownItem\"\n                          (click)=\"onDropdownItemClick(item)\"\n                          (keydown.enter)=\"onDropdownItemClick(item)\"\n                          (keydown.space)=\"onDropdownItemClick(item)\"\n                        >\n                          {{ sub.title }}\n                        </li>\n                    </ul>\n                  </div>\n                </div>\n            </li>\n\n            <li class=\"nav-item ms-2 mb-3 d-flex d-md-none\">\n              <a class=\"sign-btn sign-header-btn\"\n                (click)=\"navigateToLogin()\">Log In</a>\n            </li>\n          </ul>\n        </div>\n\n        <!-- Always 3 columns for login -->\n        <div class=\"col-md-3 d-none d-md-flex justify-content-end\">\n            <a class=\"sign-btn sign-header-btn\"\n              (click)=\"navigateToLogin()\">Log In</a>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</nav>\n\n<ng-template #logoEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Logo</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <!-- <pw-custom-uploader\n      [title]=\"'Main Logo'\"\n      [controlName]=\"'logo_main'\"\n      [aspectRatio]=\"'fullLogo'\"\n      [previewData]=\"{ url: logo, name: 'logo_main.png' }\"\n      (saveEvent)=\"onSaveLogo($event)\">\n    </pw-custom-uploader> -->\n  </div>\n</ng-template>", styles: [".navbar-custom-background{background-color:#00000080;box-shadow:2px 2px 15px 2px #0000001f;transition:width 2s,height 2s,-webkit-transform 2s;transition:width 2s,height 2s,transform 2s background-color .5s ease;z-index:9999}.fixed-top{position:fixed!important}.primary-button{background-color:#000;border-radius:50px;color:#fff;font: 600 16.3px Montserrat-Regular,sans-serif;padding:5px 16px!important;width:auto;display:flex;gap:15px;align-items:center;justify-content:space-between}.logo_img{width:60%!important;min-width:159px!important}.navbar-toggle-icon{width:25px}@media (min-width: 500px){.navbar-nav .nav-item button{margin-top:10px}}@media (max-width: 1200px){.navbar-nav .nav-item .nav-link{font-size:15px!important}}.navbar-nav .nav-link{display:inline-flex!important;white-space:nowrap;gap:4px}.fa-caret-down{font-family:\"Font Awesome 6 Pro\",sans-serif;font-weight:900}@media (min-width: 1200px){.navbar-nav .nav-item .nav-link{padding-bottom:0!important;padding-top:0!important}.popup{top:3.4rem!important;background-color:var(--first)!important;background-color:transparent;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}.popup ul li{color:#fff;font: 500 14px Montserrat-Regular,sans-serif;cursor:pointer;border-bottom:1px solid #eee}.popup ul li:last-child{border-bottom:none}.router-link-active{color:#000!important}}@media (max-width: 1200px){.popup ul li{color:#fff;font: 500 14px Montserrat-Regular,sans-serif;cursor:pointer;border-bottom:1px solid #eee}.popup ul li:last-child{border-bottom:none}.popup ul li:hover{background-color:#f1f1f1}.mb-icon{width:200px}.container-wrapper{padding:10px 20px!important}.dropdown-container{position:relative;display:inline-block}.popup{top:0%!important;background-color:var(--first)!important;left:10rem;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}}@media (max-width: 500px){.navbar-nav{background-color:var(--first);border-top:3px solid rgb(254,209,54);color:#fff;margin-top:5px;z-index:1}.navbar-nav .nav-item .nav-link{font-size:100%;font-weight:500;padding:.7em 1em!important}}.popup{top:90%;background-color:transparent;padding:10px;z-index:1000}.popup ul{list-style-type:none;padding:0;margin:0}.popup ul li{padding:5px 10px;font: 500 14px Montserrat-Regular,sans-serif}.resource-header .nav-link.scrolled-nav-link{color:#fff!important}.resource-header .sign-btn,.resource-header .sign-header-btn{text-decoration:none!important}.dropdownItem{cursor:pointer}.rotate{transform:rotate(180deg)}@media (max-width: 500px){.logo_img{width:60%!important;margin-left:auto;margin-right:0;display:block;transition:margin .5s ease,width .5s ease}.navbar-nav{background-color:var(--first);border-top:3px solid rgb(254,209,54);color:#fff;margin-top:5px;z-index:1}.navbar-nav .nav-item .nav-link{font-size:100%;font-weight:500;padding:.7em 1em!important}.popup{top:0%!important;background-color:var(--first)!important;left:10rem;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}.popup ul{list-style-type:none;padding:0;margin:0}.dropdownItem{cursor:pointer}.rotate{transform:rotate(180deg)}.dropdown-container{position:relative;display:inline-block}}.navbar-nav{visibility:visible!important;display:flex!important}.nav-link{text-transform:uppercase}.dropdown-container{position:relative;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i9.LazyImgDirective, selector: "img" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourceHeaderComponent, selector: "pw-resource-header", inputs: { user: "user", userLoggedIn: "userLoggedIn" }, host: { listeners: { "window:scroll": "onScroll()", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "navbarCollapse", first: true, predicate: ["collapsibleNavbar"], descendants: true }, { propertyName: "logoEditModal", first: true, predicate: ["logoEditModal"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<nav class=\"navbar navbar-expand-md navbar-dark fixed-top primary-nav-bg-color resource-header\"\n  id=\"banner\">\n  <div class=\"container container-wrapper banner-section\">\n\n    <!-- Toggler/collapsibe Button -->\n    <button class=\"navbar-toggler header-menu-bar\"\n      type=\"button\"\n      aria-label=\"Toggle navigation\"\n      data-bs-toggle=\"collapse\"\n      data-bs-target=\"#collapsibleNavbar\">\n      <img src=\"/assets/img/products/trial/navbar-toggle-icon.png\"\n        class=\"img-fluid navbar-toggle-icon\"\n        alt=\"\" />\n    </button>\n\n    <!-- Mobile Logo -->\n    <div class=\"d-md-none mb-icon\">\n      <div>\n        <img src=\"/assets/img/landing-page/site-logo.png\"\n          [src]=\"logo || '/assets/img/landing-page/site-logo.png'\"\n          routerLink=\"/\"\n          alt=\"logo\"\n          class=\"img-fluid logo_img\"\n          width=\"100\"\n          height=\"100\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          sizes=\"100px\" />\n      </div>\n    </div>\n\n\n    <i *ngIf=\"canEditResourcesValue\"\n    class=\"fa fa-edit in-page-edit-icon cursor-pointer text-black me-3\"\n    (click)=\"openLogoEditModal()\"\n    (keydown.enter)=\"openLogoEditModal()\"\n    (keydown.space)=\"openLogoEditModal()\"\n    title=\"Edit Logo\"></i>\n\n\n    <!-- Navbar links -->\n    <div class=\"collapse navbar-collapse mt-3 mt-md-0\"\n      id=\"collapsibleNavbar\"\n      #collapsibleNavbar>\n      <div class=\"row align-items-center w-100\">\n\n        <!-- Always occupy 3 columns for logo -->\n        <div class=\"col-md-2 d-none d-md-flex align-items-center\">\n          <div>\n            <img src=\"/assets/img/landing-page/site-logo.png\"\n              [src]=\"logo || '/assets/img/landing-page/site-logo.png'\"\n              routerLink=\"/\"\n              alt=\"logo\"\n              class=\"img-fluid logo_img\"\n              width=\"100\"\n              height=\"100\"\n              loading=\"eager\"\n              fetchpriority=\"high\"\n              sizes=\"100px\" />\n          </div>\n        </div>\n\n\n        <div class=\"col-md-7 d-flex justify-content-start\">\n          <ul #anchorLinks\n            class=\"navbar-nav flex gap-4 me-0 wow fadeInUp position-relative\"\n            data-wow-duration=\"2s\">\n\n          <i *ngIf=\"canEditResourcesValue\"\n          class=\"fa fa-edit in-page-edit-icon cursor-pointer text-black me-3\"\n          (click)=\"openEditNavbarModal()\"\n          (keydown.enter)=\"openEditNavbarModal()\"\n          (keydown.space)=\"openEditNavbarModal()\"\n          title=\"Edit Navbar Links\"></i>\n            <li class=\"nav-item\" *ngFor=\"let item of navbarItems\">\n                <div class=\"dropdown-container\"\n                     (mouseenter)=\"openDropdown(item)\">\n                    <a\n                    class=\"nav-link\"\n                      href=\"javascript:void(0)\"\n                      [ngClass]=\"{ 'scrolled-nav-link': isScrolled }\"\n                      (click)=\"item.subtitles?.length ? (item.open = !item.open) : null\"\n                      [attr.href]=\"!(item.subtitles?.length) ? item.path : null\"\n                    >\n                      {{ item?.title }}\n                      <i *ngIf=\"item.subtitles.length > 0 && item.open\" class=\"fa-solid fa-caret-down\"></i>\n                    </a>\n                    <div class=\"popup position-absolute\"\n                    *ngIf=\"item.subtitles.length > 0 && item.open\">\n                    <ul>\n                      <li\n                          *ngFor=\"let sub of item.subtitles\"\n                          [routerLink]=\"sub.path\"\n                          class=\"dropdownItem\"\n                          (click)=\"onDropdownItemClick(item)\"\n                          (keydown.enter)=\"onDropdownItemClick(item)\"\n                          (keydown.space)=\"onDropdownItemClick(item)\"\n                        >\n                          {{ sub.title }}\n                        </li>\n                    </ul>\n                  </div>\n                </div>\n            </li>\n\n            <li class=\"nav-item ms-2 mb-3 d-flex d-md-none\">\n              <a class=\"sign-btn sign-header-btn\"\n                (click)=\"navigateToLogin()\">Log In</a>\n            </li>\n          </ul>\n        </div>\n\n        <!-- Always 3 columns for login -->\n        <div class=\"col-md-3 d-none d-md-flex justify-content-end\">\n            <a class=\"sign-btn sign-header-btn\"\n              (click)=\"navigateToLogin()\">Log In</a>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</nav>\n\n<ng-template #logoEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Logo</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <pw-custom-uploader\n      [title]=\"'Main Logo'\"\n      [controlName]=\"'logo_main'\"\n      [aspectRatio]=\"'fullLogo'\"\n      [previewData]=\"{ url: logo, name: 'logo_main.png' }\"\n      (saveEvent)=\"onSaveLogo($event)\">\n    </pw-custom-uploader>\n  </div>\n</ng-template>", styles: [".navbar-custom-background{background-color:#00000080;box-shadow:2px 2px 15px 2px #0000001f;transition:width 2s,height 2s,-webkit-transform 2s;transition:width 2s,height 2s,transform 2s background-color .5s ease;z-index:9999}.fixed-top{position:fixed!important}.primary-button{background-color:#000;border-radius:50px;color:#fff;font: 600 16.3px Montserrat-Regular,sans-serif;padding:5px 16px!important;width:auto;display:flex;gap:15px;align-items:center;justify-content:space-between}.logo_img{width:60%!important;min-width:159px!important}.navbar-toggle-icon{width:25px}@media (min-width: 500px){.navbar-nav .nav-item button{margin-top:10px}}@media (max-width: 1200px){.navbar-nav .nav-item .nav-link{font-size:15px!important}}.navbar-nav .nav-link{display:inline-flex!important;white-space:nowrap;gap:4px}.fa-caret-down{font-family:\"Font Awesome 6 Pro\",sans-serif;font-weight:900}@media (min-width: 1200px){.navbar-nav .nav-item .nav-link{padding-bottom:0!important;padding-top:0!important}.popup{top:3.4rem!important;background-color:var(--first)!important;background-color:transparent;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}.popup ul li{color:#fff;font: 500 14px Montserrat-Regular,sans-serif;cursor:pointer;border-bottom:1px solid #eee}.popup ul li:last-child{border-bottom:none}.router-link-active{color:#000!important}}@media (max-width: 1200px){.popup ul li{color:#fff;font: 500 14px Montserrat-Regular,sans-serif;cursor:pointer;border-bottom:1px solid #eee}.popup ul li:last-child{border-bottom:none}.popup ul li:hover{background-color:#f1f1f1}.mb-icon{width:200px}.container-wrapper{padding:10px 20px!important}.dropdown-container{position:relative;display:inline-block}.popup{top:0%!important;background-color:var(--first)!important;left:10rem;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}}@media (max-width: 500px){.navbar-nav{background-color:var(--first);border-top:3px solid rgb(254,209,54);color:#fff;margin-top:5px;z-index:1}.navbar-nav .nav-item .nav-link{font-size:100%;font-weight:500;padding:.7em 1em!important}}.popup{top:90%;background-color:transparent;padding:10px;z-index:1000}.popup ul{list-style-type:none;padding:0;margin:0}.popup ul li{padding:5px 10px;font: 500 14px Montserrat-Regular,sans-serif}.resource-header .nav-link.scrolled-nav-link{color:#fff!important}.resource-header .sign-btn,.resource-header .sign-header-btn{text-decoration:none!important}.dropdownItem{cursor:pointer}.rotate{transform:rotate(180deg)}@media (max-width: 500px){.logo_img{width:60%!important;margin-left:auto;margin-right:0;display:block;transition:margin .5s ease,width .5s ease}.navbar-nav{background-color:var(--first);border-top:3px solid rgb(254,209,54);color:#fff;margin-top:5px;z-index:1}.navbar-nav .nav-item .nav-link{font-size:100%;font-weight:500;padding:.7em 1em!important}.popup{top:0%!important;background-color:var(--first)!important;left:10rem;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}.popup ul{list-style-type:none;padding:0;margin:0}.dropdownItem{cursor:pointer}.rotate{transform:rotate(180deg)}.dropdown-container{position:relative;display:inline-block}}.navbar-nav{visibility:visible!important;display:flex!important}.nav-link{text-transform:uppercase}.dropdown-container{position:relative;display:inline-block}\n"], dependencies: [{ kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i11.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceHeaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-resource-header', template: "<nav class=\"navbar navbar-expand-md navbar-dark fixed-top primary-nav-bg-color resource-header\"\n  id=\"banner\">\n  <div class=\"container container-wrapper banner-section\">\n\n    <!-- Toggler/collapsibe Button -->\n    <button class=\"navbar-toggler header-menu-bar\"\n      type=\"button\"\n      aria-label=\"Toggle navigation\"\n      data-bs-toggle=\"collapse\"\n      data-bs-target=\"#collapsibleNavbar\">\n      <img src=\"/assets/img/products/trial/navbar-toggle-icon.png\"\n        class=\"img-fluid navbar-toggle-icon\"\n        alt=\"\" />\n    </button>\n\n    <!-- Mobile Logo -->\n    <div class=\"d-md-none mb-icon\">\n      <div>\n        <img src=\"/assets/img/landing-page/site-logo.png\"\n          [src]=\"logo || '/assets/img/landing-page/site-logo.png'\"\n          routerLink=\"/\"\n          alt=\"logo\"\n          class=\"img-fluid logo_img\"\n          width=\"100\"\n          height=\"100\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          sizes=\"100px\" />\n      </div>\n    </div>\n\n\n    <i *ngIf=\"canEditResourcesValue\"\n    class=\"fa fa-edit in-page-edit-icon cursor-pointer text-black me-3\"\n    (click)=\"openLogoEditModal()\"\n    (keydown.enter)=\"openLogoEditModal()\"\n    (keydown.space)=\"openLogoEditModal()\"\n    title=\"Edit Logo\"></i>\n\n\n    <!-- Navbar links -->\n    <div class=\"collapse navbar-collapse mt-3 mt-md-0\"\n      id=\"collapsibleNavbar\"\n      #collapsibleNavbar>\n      <div class=\"row align-items-center w-100\">\n\n        <!-- Always occupy 3 columns for logo -->\n        <div class=\"col-md-2 d-none d-md-flex align-items-center\">\n          <div>\n            <img src=\"/assets/img/landing-page/site-logo.png\"\n              [src]=\"logo || '/assets/img/landing-page/site-logo.png'\"\n              routerLink=\"/\"\n              alt=\"logo\"\n              class=\"img-fluid logo_img\"\n              width=\"100\"\n              height=\"100\"\n              loading=\"eager\"\n              fetchpriority=\"high\"\n              sizes=\"100px\" />\n          </div>\n        </div>\n\n\n        <div class=\"col-md-7 d-flex justify-content-start\">\n          <ul #anchorLinks\n            class=\"navbar-nav flex gap-4 me-0 wow fadeInUp position-relative\"\n            data-wow-duration=\"2s\">\n\n          <i *ngIf=\"canEditResourcesValue\"\n          class=\"fa fa-edit in-page-edit-icon cursor-pointer text-black me-3\"\n          (click)=\"openEditNavbarModal()\"\n          (keydown.enter)=\"openEditNavbarModal()\"\n          (keydown.space)=\"openEditNavbarModal()\"\n          title=\"Edit Navbar Links\"></i>\n            <li class=\"nav-item\" *ngFor=\"let item of navbarItems\">\n                <div class=\"dropdown-container\"\n                     (mouseenter)=\"openDropdown(item)\">\n                    <a\n                    class=\"nav-link\"\n                      href=\"javascript:void(0)\"\n                      [ngClass]=\"{ 'scrolled-nav-link': isScrolled }\"\n                      (click)=\"item.subtitles?.length ? (item.open = !item.open) : null\"\n                      [attr.href]=\"!(item.subtitles?.length) ? item.path : null\"\n                    >\n                      {{ item?.title }}\n                      <i *ngIf=\"item.subtitles.length > 0 && item.open\" class=\"fa-solid fa-caret-down\"></i>\n                    </a>\n                    <div class=\"popup position-absolute\"\n                    *ngIf=\"item.subtitles.length > 0 && item.open\">\n                    <ul>\n                      <li\n                          *ngFor=\"let sub of item.subtitles\"\n                          [routerLink]=\"sub.path\"\n                          class=\"dropdownItem\"\n                          (click)=\"onDropdownItemClick(item)\"\n                          (keydown.enter)=\"onDropdownItemClick(item)\"\n                          (keydown.space)=\"onDropdownItemClick(item)\"\n                        >\n                          {{ sub.title }}\n                        </li>\n                    </ul>\n                  </div>\n                </div>\n            </li>\n\n            <li class=\"nav-item ms-2 mb-3 d-flex d-md-none\">\n              <a class=\"sign-btn sign-header-btn\"\n                (click)=\"navigateToLogin()\">Log In</a>\n            </li>\n          </ul>\n        </div>\n\n        <!-- Always 3 columns for login -->\n        <div class=\"col-md-3 d-none d-md-flex justify-content-end\">\n            <a class=\"sign-btn sign-header-btn\"\n              (click)=\"navigateToLogin()\">Log In</a>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</nav>\n\n<ng-template #logoEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Logo</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <!-- <pw-custom-uploader\n      [title]=\"'Main Logo'\"\n      [controlName]=\"'logo_main'\"\n      [aspectRatio]=\"'fullLogo'\"\n      [previewData]=\"{ url: logo, name: 'logo_main.png' }\"\n      (saveEvent)=\"onSaveLogo($event)\">\n    </pw-custom-uploader> -->\n  </div>\n</ng-template>", styles: [".navbar-custom-background{background-color:#00000080;box-shadow:2px 2px 15px 2px #0000001f;transition:width 2s,height 2s,-webkit-transform 2s;transition:width 2s,height 2s,transform 2s background-color .5s ease;z-index:9999}.fixed-top{position:fixed!important}.primary-button{background-color:#000;border-radius:50px;color:#fff;font: 600 16.3px Montserrat-Regular,sans-serif;padding:5px 16px!important;width:auto;display:flex;gap:15px;align-items:center;justify-content:space-between}.logo_img{width:60%!important;min-width:159px!important}.navbar-toggle-icon{width:25px}@media (min-width: 500px){.navbar-nav .nav-item button{margin-top:10px}}@media (max-width: 1200px){.navbar-nav .nav-item .nav-link{font-size:15px!important}}.navbar-nav .nav-link{display:inline-flex!important;white-space:nowrap;gap:4px}.fa-caret-down{font-family:\"Font Awesome 6 Pro\",sans-serif;font-weight:900}@media (min-width: 1200px){.navbar-nav .nav-item .nav-link{padding-bottom:0!important;padding-top:0!important}.popup{top:3.4rem!important;background-color:var(--first)!important;background-color:transparent;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}.popup ul li{color:#fff;font: 500 14px Montserrat-Regular,sans-serif;cursor:pointer;border-bottom:1px solid #eee}.popup ul li:last-child{border-bottom:none}.router-link-active{color:#000!important}}@media (max-width: 1200px){.popup ul li{color:#fff;font: 500 14px Montserrat-Regular,sans-serif;cursor:pointer;border-bottom:1px solid #eee}.popup ul li:last-child{border-bottom:none}.popup ul li:hover{background-color:#f1f1f1}.mb-icon{width:200px}.container-wrapper{padding:10px 20px!important}.dropdown-container{position:relative;display:inline-block}.popup{top:0%!important;background-color:var(--first)!important;left:10rem;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}}@media (max-width: 500px){.navbar-nav{background-color:var(--first);border-top:3px solid rgb(254,209,54);color:#fff;margin-top:5px;z-index:1}.navbar-nav .nav-item .nav-link{font-size:100%;font-weight:500;padding:.7em 1em!important}}.popup{top:90%;background-color:transparent;padding:10px;z-index:1000}.popup ul{list-style-type:none;padding:0;margin:0}.popup ul li{padding:5px 10px;font: 500 14px Montserrat-Regular,sans-serif}.resource-header .nav-link.scrolled-nav-link{color:#fff!important}.resource-header .sign-btn,.resource-header .sign-header-btn{text-decoration:none!important}.dropdownItem{cursor:pointer}.rotate{transform:rotate(180deg)}@media (max-width: 500px){.logo_img{width:60%!important;margin-left:auto;margin-right:0;display:block;transition:margin .5s ease,width .5s ease}.navbar-nav{background-color:var(--first);border-top:3px solid rgb(254,209,54);color:#fff;margin-top:5px;z-index:1}.navbar-nav .nav-item .nav-link{font-size:100%;font-weight:500;padding:.7em 1em!important}.popup{top:0%!important;background-color:var(--first)!important;left:10rem;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}.popup ul{list-style-type:none;padding:0;margin:0}.dropdownItem{cursor:pointer}.rotate{transform:rotate(180deg)}.dropdown-container{position:relative;display:inline-block}}.navbar-nav{visibility:visible!important;display:flex!important}.nav-link{text-transform:uppercase}.dropdown-container{position:relative;display:inline-block}\n"] }]
+            args: [{ selector: 'pw-resource-header', template: "<nav class=\"navbar navbar-expand-md navbar-dark fixed-top primary-nav-bg-color resource-header\"\n  id=\"banner\">\n  <div class=\"container container-wrapper banner-section\">\n\n    <!-- Toggler/collapsibe Button -->\n    <button class=\"navbar-toggler header-menu-bar\"\n      type=\"button\"\n      aria-label=\"Toggle navigation\"\n      data-bs-toggle=\"collapse\"\n      data-bs-target=\"#collapsibleNavbar\">\n      <img src=\"/assets/img/products/trial/navbar-toggle-icon.png\"\n        class=\"img-fluid navbar-toggle-icon\"\n        alt=\"\" />\n    </button>\n\n    <!-- Mobile Logo -->\n    <div class=\"d-md-none mb-icon\">\n      <div>\n        <img src=\"/assets/img/landing-page/site-logo.png\"\n          [src]=\"logo || '/assets/img/landing-page/site-logo.png'\"\n          routerLink=\"/\"\n          alt=\"logo\"\n          class=\"img-fluid logo_img\"\n          width=\"100\"\n          height=\"100\"\n          loading=\"eager\"\n          fetchpriority=\"high\"\n          sizes=\"100px\" />\n      </div>\n    </div>\n\n\n    <i *ngIf=\"canEditResourcesValue\"\n    class=\"fa fa-edit in-page-edit-icon cursor-pointer text-black me-3\"\n    (click)=\"openLogoEditModal()\"\n    (keydown.enter)=\"openLogoEditModal()\"\n    (keydown.space)=\"openLogoEditModal()\"\n    title=\"Edit Logo\"></i>\n\n\n    <!-- Navbar links -->\n    <div class=\"collapse navbar-collapse mt-3 mt-md-0\"\n      id=\"collapsibleNavbar\"\n      #collapsibleNavbar>\n      <div class=\"row align-items-center w-100\">\n\n        <!-- Always occupy 3 columns for logo -->\n        <div class=\"col-md-2 d-none d-md-flex align-items-center\">\n          <div>\n            <img src=\"/assets/img/landing-page/site-logo.png\"\n              [src]=\"logo || '/assets/img/landing-page/site-logo.png'\"\n              routerLink=\"/\"\n              alt=\"logo\"\n              class=\"img-fluid logo_img\"\n              width=\"100\"\n              height=\"100\"\n              loading=\"eager\"\n              fetchpriority=\"high\"\n              sizes=\"100px\" />\n          </div>\n        </div>\n\n\n        <div class=\"col-md-7 d-flex justify-content-start\">\n          <ul #anchorLinks\n            class=\"navbar-nav flex gap-4 me-0 wow fadeInUp position-relative\"\n            data-wow-duration=\"2s\">\n\n          <i *ngIf=\"canEditResourcesValue\"\n          class=\"fa fa-edit in-page-edit-icon cursor-pointer text-black me-3\"\n          (click)=\"openEditNavbarModal()\"\n          (keydown.enter)=\"openEditNavbarModal()\"\n          (keydown.space)=\"openEditNavbarModal()\"\n          title=\"Edit Navbar Links\"></i>\n            <li class=\"nav-item\" *ngFor=\"let item of navbarItems\">\n                <div class=\"dropdown-container\"\n                     (mouseenter)=\"openDropdown(item)\">\n                    <a\n                    class=\"nav-link\"\n                      href=\"javascript:void(0)\"\n                      [ngClass]=\"{ 'scrolled-nav-link': isScrolled }\"\n                      (click)=\"item.subtitles?.length ? (item.open = !item.open) : null\"\n                      [attr.href]=\"!(item.subtitles?.length) ? item.path : null\"\n                    >\n                      {{ item?.title }}\n                      <i *ngIf=\"item.subtitles.length > 0 && item.open\" class=\"fa-solid fa-caret-down\"></i>\n                    </a>\n                    <div class=\"popup position-absolute\"\n                    *ngIf=\"item.subtitles.length > 0 && item.open\">\n                    <ul>\n                      <li\n                          *ngFor=\"let sub of item.subtitles\"\n                          [routerLink]=\"sub.path\"\n                          class=\"dropdownItem\"\n                          (click)=\"onDropdownItemClick(item)\"\n                          (keydown.enter)=\"onDropdownItemClick(item)\"\n                          (keydown.space)=\"onDropdownItemClick(item)\"\n                        >\n                          {{ sub.title }}\n                        </li>\n                    </ul>\n                  </div>\n                </div>\n            </li>\n\n            <li class=\"nav-item ms-2 mb-3 d-flex d-md-none\">\n              <a class=\"sign-btn sign-header-btn\"\n                (click)=\"navigateToLogin()\">Log In</a>\n            </li>\n          </ul>\n        </div>\n\n        <!-- Always 3 columns for login -->\n        <div class=\"col-md-3 d-none d-md-flex justify-content-end\">\n            <a class=\"sign-btn sign-header-btn\"\n              (click)=\"navigateToLogin()\">Log In</a>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</nav>\n\n<ng-template #logoEditModal let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Logo</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <pw-custom-uploader\n      [title]=\"'Main Logo'\"\n      [controlName]=\"'logo_main'\"\n      [aspectRatio]=\"'fullLogo'\"\n      [previewData]=\"{ url: logo, name: 'logo_main.png' }\"\n      (saveEvent)=\"onSaveLogo($event)\">\n    </pw-custom-uploader>\n  </div>\n</ng-template>", styles: [".navbar-custom-background{background-color:#00000080;box-shadow:2px 2px 15px 2px #0000001f;transition:width 2s,height 2s,-webkit-transform 2s;transition:width 2s,height 2s,transform 2s background-color .5s ease;z-index:9999}.fixed-top{position:fixed!important}.primary-button{background-color:#000;border-radius:50px;color:#fff;font: 600 16.3px Montserrat-Regular,sans-serif;padding:5px 16px!important;width:auto;display:flex;gap:15px;align-items:center;justify-content:space-between}.logo_img{width:60%!important;min-width:159px!important}.navbar-toggle-icon{width:25px}@media (min-width: 500px){.navbar-nav .nav-item button{margin-top:10px}}@media (max-width: 1200px){.navbar-nav .nav-item .nav-link{font-size:15px!important}}.navbar-nav .nav-link{display:inline-flex!important;white-space:nowrap;gap:4px}.fa-caret-down{font-family:\"Font Awesome 6 Pro\",sans-serif;font-weight:900}@media (min-width: 1200px){.navbar-nav .nav-item .nav-link{padding-bottom:0!important;padding-top:0!important}.popup{top:3.4rem!important;background-color:var(--first)!important;background-color:transparent;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}.popup ul li{color:#fff;font: 500 14px Montserrat-Regular,sans-serif;cursor:pointer;border-bottom:1px solid #eee}.popup ul li:last-child{border-bottom:none}.router-link-active{color:#000!important}}@media (max-width: 1200px){.popup ul li{color:#fff;font: 500 14px Montserrat-Regular,sans-serif;cursor:pointer;border-bottom:1px solid #eee}.popup ul li:last-child{border-bottom:none}.popup ul li:hover{background-color:#f1f1f1}.mb-icon{width:200px}.container-wrapper{padding:10px 20px!important}.dropdown-container{position:relative;display:inline-block}.popup{top:0%!important;background-color:var(--first)!important;left:10rem;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}}@media (max-width: 500px){.navbar-nav{background-color:var(--first);border-top:3px solid rgb(254,209,54);color:#fff;margin-top:5px;z-index:1}.navbar-nav .nav-item .nav-link{font-size:100%;font-weight:500;padding:.7em 1em!important}}.popup{top:90%;background-color:transparent;padding:10px;z-index:1000}.popup ul{list-style-type:none;padding:0;margin:0}.popup ul li{padding:5px 10px;font: 500 14px Montserrat-Regular,sans-serif}.resource-header .nav-link.scrolled-nav-link{color:#fff!important}.resource-header .sign-btn,.resource-header .sign-header-btn{text-decoration:none!important}.dropdownItem{cursor:pointer}.rotate{transform:rotate(180deg)}@media (max-width: 500px){.logo_img{width:60%!important;margin-left:auto;margin-right:0;display:block;transition:margin .5s ease,width .5s ease}.navbar-nav{background-color:var(--first);border-top:3px solid rgb(254,209,54);color:#fff;margin-top:5px;z-index:1}.navbar-nav .nav-item .nav-link{font-size:100%;font-weight:500;padding:.7em 1em!important}.popup{top:0%!important;background-color:var(--first)!important;left:10rem;padding:10px;z-index:1000;transition:opacity .3s ease-in-out}.popup ul{list-style-type:none;padding:0;margin:0}.dropdownItem{cursor:pointer}.rotate{transform:rotate(180deg)}.dropdown-container{position:relative;display:inline-block}}.navbar-nav{visibility:visible!important;display:flex!important}.nav-link{text-transform:uppercase}.dropdown-container{position:relative;display:inline-block}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
@@ -1015,32 +748,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
  * DragDropModule removed - now lazy-loaded only when edit modal opens
  * This reduces bundle size for landing pages where users aren't logged in
  */
-class ResourceHeaderModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: ResourceHeaderModule, declarations: [ResourceHeaderComponent], imports: [CommonModule,
+class ResourceSharedHeaderModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceSharedHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: ResourceSharedHeaderModule, declarations: [ResourceHeaderComponent], imports: [CommonModule,
             FormsModule,
-            RouterModule,
-            // DragDropModule removed - lazy-loaded in EditNavbarModalComponent
-            NgbModalModule,
-            NgbTooltipModule,
-            CoreTranslocoModule,
-            DirectivesModule,
-            PipesModule,
-            AdminModuleUtilsModule,
-            ProfileImageCropperModule], exports: [ResourceHeaderComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceHeaderModule, imports: [CommonModule,
+            RouterModule], exports: [ResourceHeaderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceSharedHeaderModule, imports: [CommonModule,
             FormsModule,
-            RouterModule,
-            // DragDropModule removed - lazy-loaded in EditNavbarModalComponent
-            NgbModalModule,
-            NgbTooltipModule,
-            CoreTranslocoModule,
-            DirectivesModule,
-            PipesModule,
-            AdminModuleUtilsModule,
-            ProfileImageCropperModule] }); }
+            RouterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceHeaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceSharedHeaderModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ResourceHeaderComponent],
@@ -1048,400 +765,267 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImpo
                         CommonModule,
                         FormsModule,
                         RouterModule,
-                        // DragDropModule removed - lazy-loaded in EditNavbarModalComponent
-                        NgbModalModule,
-                        NgbTooltipModule,
-                        CoreTranslocoModule,
-                        DirectivesModule,
-                        PipesModule,
-                        AdminModuleUtilsModule,
-                        ProfileImageCropperModule
                     ],
-                    exports: [ResourceHeaderComponent]
-                }]
-        }] });
-
-class FieldErrorDisplayComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FieldErrorDisplayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: FieldErrorDisplayComponent, selector: "pw-field-error-display", inputs: { errorMsg: "errorMsg", displayError: "displayError" }, ngImport: i0, template: "<div *ngIf=\"displayError\">\n  <div class=\"text-danger\">\n    {{ errorMsg }}\n  </div>\n</div>\n\n", dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FieldErrorDisplayComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'pw-field-error-display', template: "<div *ngIf=\"displayError\">\n  <div class=\"text-danger\">\n    {{ errorMsg }}\n  </div>\n</div>\n\n" }]
-        }], propDecorators: { errorMsg: [{
-                type: Input
-            }], displayError: [{
-                type: Input
-            }] } });
-
-/**
- * Standalone module for FieldErrorDisplayComponent.
- * Import this lightweight module instead of SharedComponentsModule
- * when you only need field error display functionality.
- */
-class FieldErrorDisplayModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FieldErrorDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: FieldErrorDisplayModule, declarations: [FieldErrorDisplayComponent], imports: [CommonModule], exports: [FieldErrorDisplayComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FieldErrorDisplayModule, imports: [CommonModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FieldErrorDisplayModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [FieldErrorDisplayComponent],
-                    imports: [CommonModule],
-                    exports: [FieldErrorDisplayComponent]
+                    exports: [ResourceHeaderComponent],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
                 }]
         }] });
 
-/**
- * Edit Footer Links Modal Component
- * Contains drag-drop functionality for reordering footer links
- * This component is lazy-loaded only when the edit modal is opened
- */
-class EditFooterLinksModalComponent {
-    constructor() {
-        this.editingFooterLinks = { items: [] };
-        this.save = new EventEmitter();
-        this.close = new EventEmitter();
-    }
-    dropFooterLinks(event) {
-        moveItemInArray(this.editingFooterLinks.items, event.previousIndex, event.currentIndex);
-    }
-    dropSubtitles(footerIndex, event) {
-        moveItemInArray(this.editingFooterLinks.items[footerIndex].subtitles, event.previousIndex, event.currentIndex);
-    }
-    addFooterLink() {
-        this.editingFooterLinks.items.push({
-            title: '',
-            path: '',
-            subtitles: []
-        });
+class ProfileImageCropperComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.imageChangedEvent = '';
+        this.croppedImage = '';
+        this.imageSelectionEvent = new EventEmitter();
+        this.closeEvent = new EventEmitter();
+        this.fileChangeEvent = new EventEmitter();
+        this.aspectRatio = 'auto';
+        this.transform = {};
+        this.canvasRotation = 0;
+        this.showCropper = false;
     }
-    removeFooterLink(index) {
-        this.editingFooterLinks.items.splice(index, 1);
+    onFileChange(event) {
+        const input = event.target;
+        if (input.files && input.files.length > 0) {
+            this.imageChangedEvent = event;
+            this.fileChangeEvent.emit(input.files[0].name);
+        }
     }
-    addSubtitle(footerIndex) {
-        this.editingFooterLinks.items[footerIndex].subtitles.push({
-            title: '',
-            path: ''
-        });
+    imageCropped(event) {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            this.croppedImage = reader.result;
+            this.cdr.detectChanges();
+        };
+        reader.readAsDataURL(event.blob);
     }
-    removeSubtitle(footerIndex, subtitleIndex) {
-        this.editingFooterLinks.items[footerIndex].subtitles.splice(subtitleIndex, 1);
+    imageLoaded() {
+        this.showCropper = true;
     }
-    onSave() {
-        this.save.emit(this.editingFooterLinks);
+    rotateLeft() {
+        this.canvasRotation--;
+        this.flipAfterRotate();
     }
-    onClose() {
-        this.close.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: EditFooterLinksModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: EditFooterLinksModalComponent, isStandalone: true, selector: "pw-edit-footer-links-modal", inputs: { editingFooterLinks: "editingFooterLinks" }, outputs: { save: "save", close: "close" }, ngImport: i0, template: `
-        <div class="modal-header">
-            <h5 class="modal-title">Edit Footer Links</h5>
-            <button type="button" class="btn-close" aria-label="Close" (click)="onClose()"></button>
-        </div>
-
-        <div class="modal-body">
-            <h4 class="mb-3">Footer Links Section</h4>
-            <div cdkDropList (cdkDropListDropped)="dropFooterLinks($event)">
-                <div *ngFor="let footer of editingFooterLinks.items; let i = index" class="border p-3 mb-3" cdkDrag>
-                    <div class="row">
-                        <div class="col-md-5 mb-2">
-                            <label [for]="'footerTitle' + i" class="form-label">Title</label>
-                            <input [id]="'footerTitle' + i" class="form-control" [(ngModel)]="footer.title" />
-                        </div>
-                        <div class="col-md-5 mb-2">
-                            <label [for]="'footerPath' + i" class="form-label">Path</label>
-                            <input [id]="'footerPath' + i" class="form-control" [(ngModel)]="footer.path" />
-                        </div>
-                        <div class="col-md-2 d-flex justify-content-between align-items-center mt-4">
-                            <i class="fa fa-trash in-page-trash-icon text-danger cursor-pointer"
-                               (click)="removeFooterLink(i)"
-                               (keydown.enter)="removeFooterLink(i)"
-                               (keydown.space)="removeFooterLink(i)"></i>
-                            <i class="fa fa-bars in-page-bars-icon cursor-move" cdkDragHandle></i>
-                        </div>
-                    </div>
-
-                    <!-- Subtitles -->
-                    <div cdkDropList (cdkDropListDropped)="dropSubtitles(i, $event)">
-                        <div *ngFor="let sub of footer.subtitles; let j = index" class="row border p-3 mb-2 align-items-center" cdkDrag>
-                            <div class="col-md-5">
-                                <label [for]="'subtitleTitle' + i + j" class="form-label">Subtitle Title</label>
-                                <input [id]="'subtitleTitle' + i + j" class="form-control" [(ngModel)]="sub.title" />
-                            </div>
-                            <div class="col-md-5">
-                                <label [for]="'subtitlePath' + i + j" class="form-label">Subtitle Path</label>
-                                <input [id]="'subtitlePath' + i + j" class="form-control" [(ngModel)]="sub.path" />
-                            </div>
-                            <div class="col-md-2 d-flex justify-content-between align-items-center mt-4">
-                                <i class="fa fa-trash in-page-trash-icon text-danger cursor-pointer"
-                                   (click)="removeSubtitle(i, j)"
-                                   (keydown.enter)="removeSubtitle(i, j)"
-                                   (keydown.space)="removeSubtitle(i, j)"></i>
-                                <i class="fa fa-bars cursor-move in-page-bars-icon" cdkDragHandle></i>
-                            </div>
-                        </div>
-                    </div>
-
-                    <button class="btn btn-outline-primary btn-sm mt-2" (click)="addSubtitle(i)">
-                        + Add Subtitle
-                    </button>
-                </div>
-            </div>
-
-            <button class="btn btn-primary mt-3" (click)="addFooterLink()">
-                + Add Footer Link
-            </button>
-        </div>
-
-        <div class="modal-footer">
-            <button class="btn btn-secondary" (click)="onClose()">Cancel</button>
-            <button class="btn btn-primary" (click)="onSave()">Save</button>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
+    rotateRight() {
+        this.canvasRotation++;
+        this.flipAfterRotate();
+    }
+    flipAfterRotate() {
+        const flippedH = this.transform.flipH;
+        const flippedV = this.transform.flipV;
+        this.transform = {
+            ...this.transform,
+            flipH: flippedV,
+            flipV: flippedH
+        };
+    }
+    flipHorizontal() {
+        this.transform = {
+            ...this.transform,
+            flipH: !this.transform.flipH
+        };
+    }
+    flipVertical() {
+        this.transform = {
+            ...this.transform,
+            flipV: !this.transform.flipV
+        };
+    }
+    saveProfilePicture() {
+        if (this.croppedImage) {
+            this.imageSelectionEvent.emit(this.croppedImage);
+            this.busy = true;
+        }
+    }
+    onCloseModal() {
+        this.closeEvent.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ProfileImageCropperComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: { aspectRatio: "aspectRatio", dynamicData: "dynamicData" }, outputs: { imageSelectionEvent: "imageSelectionEvent", closeEvent: "closeEvent", fileChangeEvent: "fileChangeEvent" }, ngImport: i0, template: "<section class=\"image-cropper\">\n  <div class=\"row text-start\">\n    <div class=\"col-12\">\n      <div class=\"card-block pb-0\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"file-upload my-2 float-start\">\n              <label for=\"custom-input\">\n                Upload Pic\n                <input id=\"custom-input\"\n                  type=\"file\"\n                  (change)=\"onFileChange($event)\" />\n              </label>\n            </div>\n\n            <div class=\"float-end m-2\">\n              <button class=\"btn btn-primary btn-sm mx-2\"\n                title=\"Rotate Left\">\n                <i\n                                    class=\"fa fa-undo-alt\"\n                                    (click)=\"rotateLeft()\"\n                                    (keydown.enter)=\"rotateLeft()\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n\n              <button class=\"btn btn-primary btn-sm mx-2\"\n                title=\"Rotate Right\">\n                <i\n                                    class=\"fa fa-redo-alt\"\n                                    (click)=\"rotateRight()\"\n                                    (keydown.enter)=\"rotateRight()\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n\n              <button class=\"btn btn-primary btn-sm mx-2\"\n                title=\"Flip Horizontal\">\n                <i\n                                    class=\"fa fa-arrows-alt-h\"\n                                    (click)=\"flipHorizontal()\"\n                                    (keydown.enter)=\"flipHorizontal()\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n              <button class=\"btn btn-primary btn-sm mx-2\"\n                title=\"Flip Vertical\">\n                <i\n                                    class=\"fa fa-arrows-alt-v\"\n                                    (click)=\"flipVertical()\"\n                                    (keydown.enter)=\"flipVertical()\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"row\">\n          <div class=\"col-8\">\n            <div *ngIf=\"aspectRatio === 'auto'\">\n              <image-cropper [imageChangedEvent]=\"imageChangedEvent\"\n                [maintainAspectRatio]=\"true\"\n                [canvasRotation]=\"canvasRotation\"\n                [aspectRatio]=\"4 / 4\"\n                [onlyScaleDown]=\"true\"\n                [transform]=\"transform\"\n                [roundCropper]=\"false\"\n                alignImage=\"center\"\n                outputType=\"base64\"\n                (imageCropped)=\"imageCropped($event)\"\n                (imageLoaded)=\"imageLoaded()\"\n                [imageQuality]=\"100\"\n                [style.display]=\"showCropper ? null : 'none'\"></image-cropper>\n            </div>\n\n            <div *ngIf=\"aspectRatio === 'fullLogo'\">\n              <image-cropper [imageChangedEvent]=\"imageChangedEvent\"\n                [maintainAspectRatio]=\"true\"\n                [aspectRatio]=\"5 / 1.1\"\n                [onlyScaleDown]=\"true\"\n                [roundCropper]=\"false\"\n                alignImage=\"center\"\n                outputType=\"base64\"\n                (imageCropped)=\"imageCropped($event)\"\n                (imageLoaded)=\"imageLoaded()\"\n                [imageQuality]=\"100\"\n                [style.display]=\"showCropper ? null : 'none'\"></image-cropper>\n            </div>\n\n            <div *ngIf=\"aspectRatio === 'rectangular'\">\n              <image-cropper\n                [imageChangedEvent]=\"imageChangedEvent\"\n                [maintainAspectRatio]=\"true\"\n                [aspectRatio]=\"3 / 1\"\n                [onlyScaleDown]=\"true\"\n                [canvasRotation]=\"canvasRotation\"\n                [transform]=\"transform\"\n                [roundCropper]=\"false\"\n                alignImage=\"center\"\n                outputType=\"base64\"\n                (imageCropped)=\"imageCropped($event)\"\n                (imageLoaded)=\"imageLoaded()\"\n                [imageQuality]=\"100\"\n                [style.display]=\"showCropper ? null : 'none'\"></image-cropper>\n            </div>\n\n            <div *ngIf=\"aspectRatio === 'dynamic'\">\n              <image-cropper\n              [imageChangedEvent]=\"imageChangedEvent\"\n              [maintainAspectRatio]=\"false\"\n              [resizeToWidth]=\"0\"\n              [cropperStaticWidth]=\"0\"\n              [cropperStaticHeight]=\"0\"\n              [cropperMinWidth]=\"10\"\n              [cropperMinHeight]=\"10\"\n              [onlyScaleDown]=\"false\"\n              [canvasRotation]=\"canvasRotation\"\n              [transform]=\"transform\"\n              [roundCropper]=\"false\"\n              alignImage=\"center\"\n              outputType=\"base64\"\n              [imageQuality]=\"100\"\n              (imageCropped)=\"imageCropped($event)\"\n              (imageLoaded)=\"imageLoaded()\"\n              [style.display]=\"showCropper ? null : 'none'\">\n              </image-cropper>\n            </div>\n\n            <div *ngIf=\"aspectRatio === 'custom'\">\n              <image-cropper [imageChangedEvent]=\"imageChangedEvent\"\n                [maintainAspectRatio]=\"true\"\n                [canvasRotation]=\"canvasRotation\"\n                [transform]=\"transform\"\n                [aspectRatio]=\"4 / 3\"\n                [onlyScaleDown]=\"true\"\n                [roundCropper]=\"false\"\n                alignImage=\"center\"\n                outputType=\"base64\"\n                (imageCropped)=\"imageCropped($event)\"\n                (imageLoaded)=\"imageLoaded()\"\n                [imageQuality]=\"100\"\n                [style.display]=\"showCropper ? null : 'none'\"></image-cropper>\n            </div>\n          </div>\n          <div *ngIf=\"croppedImage\" class=\"col-4 mt-2\">\n            <img [src]=\"croppedImage\"\n            class=\"cropped-image\"\n              alt=\"cropped.png\"\n              width=\"128\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-footer px-3\">\n    <div class=\"float-end mt-2\">\n      <button type=\"button\"\n        class=\"btn btn-outline-default me-2\"\n        (click)=\"onCloseModal()\">\n        Close\n      </button>\n      <button type=\"button\"\n        class=\"btn btn-primary\"\n        (click)=\"saveProfilePicture()\"\n        [buttonBusy]=\"busy\">\n        Save\n      </button>\n    </div>\n  </div>\n</section>\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)}.image-cropper label{background:var(--first);border-radius:5px;color:#fff;display:table;font-size:13px;font-weight:500;padding:7px}.image-cropper input[type=file]{display:none}.cropped-image{max-height:390px!important}.card-footer{background-color:transparent;left:0}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.ImageCropperComponent, selector: "image-cropper", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "imageAltText", "cropperFrameAriaLabel", "output", "format", "transform", "maintainAspectRatio", "aspectRatio", "resetCropOnAspectRatioChange", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "allowMoveImage", "cropper", "alignImage", "disabled", "hidden"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed", "transformChange"] }, { kind: "directive", type: i12.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i12.LazyImgDirective, selector: "img" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: EditFooterLinksModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ProfileImageCropperComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'pw-edit-footer-links-modal',
-                    standalone: true,
-                    imports: [CommonModule, FormsModule, DragDropModule],
-                    template: `
-        <div class="modal-header">
-            <h5 class="modal-title">Edit Footer Links</h5>
-            <button type="button" class="btn-close" aria-label="Close" (click)="onClose()"></button>
-        </div>
-
-        <div class="modal-body">
-            <h4 class="mb-3">Footer Links Section</h4>
-            <div cdkDropList (cdkDropListDropped)="dropFooterLinks($event)">
-                <div *ngFor="let footer of editingFooterLinks.items; let i = index" class="border p-3 mb-3" cdkDrag>
-                    <div class="row">
-                        <div class="col-md-5 mb-2">
-                            <label [for]="'footerTitle' + i" class="form-label">Title</label>
-                            <input [id]="'footerTitle' + i" class="form-control" [(ngModel)]="footer.title" />
-                        </div>
-                        <div class="col-md-5 mb-2">
-                            <label [for]="'footerPath' + i" class="form-label">Path</label>
-                            <input [id]="'footerPath' + i" class="form-control" [(ngModel)]="footer.path" />
-                        </div>
-                        <div class="col-md-2 d-flex justify-content-between align-items-center mt-4">
-                            <i class="fa fa-trash in-page-trash-icon text-danger cursor-pointer"
-                               (click)="removeFooterLink(i)"
-                               (keydown.enter)="removeFooterLink(i)"
-                               (keydown.space)="removeFooterLink(i)"></i>
-                            <i class="fa fa-bars in-page-bars-icon cursor-move" cdkDragHandle></i>
-                        </div>
-                    </div>
-
-                    <!-- Subtitles -->
-                    <div cdkDropList (cdkDropListDropped)="dropSubtitles(i, $event)">
-                        <div *ngFor="let sub of footer.subtitles; let j = index" class="row border p-3 mb-2 align-items-center" cdkDrag>
-                            <div class="col-md-5">
-                                <label [for]="'subtitleTitle' + i + j" class="form-label">Subtitle Title</label>
-                                <input [id]="'subtitleTitle' + i + j" class="form-control" [(ngModel)]="sub.title" />
-                            </div>
-                            <div class="col-md-5">
-                                <label [for]="'subtitlePath' + i + j" class="form-label">Subtitle Path</label>
-                                <input [id]="'subtitlePath' + i + j" class="form-control" [(ngModel)]="sub.path" />
-                            </div>
-                            <div class="col-md-2 d-flex justify-content-between align-items-center mt-4">
-                                <i class="fa fa-trash in-page-trash-icon text-danger cursor-pointer"
-                                   (click)="removeSubtitle(i, j)"
-                                   (keydown.enter)="removeSubtitle(i, j)"
-                                   (keydown.space)="removeSubtitle(i, j)"></i>
-                                <i class="fa fa-bars cursor-move in-page-bars-icon" cdkDragHandle></i>
-                            </div>
-                        </div>
-                    </div>
-
-                    <button class="btn btn-outline-primary btn-sm mt-2" (click)="addSubtitle(i)">
-                        + Add Subtitle
-                    </button>
-                </div>
-            </div>
-
-            <button class="btn btn-primary mt-3" (click)="addFooterLink()">
-                + Add Footer Link
-            </button>
-        </div>
-
-        <div class="modal-footer">
-            <button class="btn btn-secondary" (click)="onClose()">Cancel</button>
-            <button class="btn btn-primary" (click)="onSave()">Save</button>
-        </div>
-    `
-                }]
-        }], propDecorators: { editingFooterLinks: [{
-                type: Input
-            }], save: [{
+            args: [{ selector: 'pw-image-cropper', template: "<section class=\"image-cropper\">\n  <div class=\"row text-start\">\n    <div class=\"col-12\">\n      <div class=\"card-block pb-0\">\n        <div class=\"row\">\n          <div class=\"col-12\">\n            <div class=\"file-upload my-2 float-start\">\n              <label for=\"custom-input\">\n                Upload Pic\n                <input id=\"custom-input\"\n                  type=\"file\"\n                  (change)=\"onFileChange($event)\" />\n              </label>\n            </div>\n\n            <div class=\"float-end m-2\">\n              <button class=\"btn btn-primary btn-sm mx-2\"\n                title=\"Rotate Left\">\n                <i\n                                    class=\"fa fa-undo-alt\"\n                                    (click)=\"rotateLeft()\"\n                                    (keydown.enter)=\"rotateLeft()\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n\n              <button class=\"btn btn-primary btn-sm mx-2\"\n                title=\"Rotate Right\">\n                <i\n                                    class=\"fa fa-redo-alt\"\n                                    (click)=\"rotateRight()\"\n                                    (keydown.enter)=\"rotateRight()\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n\n              <button class=\"btn btn-primary btn-sm mx-2\"\n                title=\"Flip Horizontal\">\n                <i\n                                    class=\"fa fa-arrows-alt-h\"\n                                    (click)=\"flipHorizontal()\"\n                                    (keydown.enter)=\"flipHorizontal()\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n              <button class=\"btn btn-primary btn-sm mx-2\"\n                title=\"Flip Vertical\">\n                <i\n                                    class=\"fa fa-arrows-alt-v\"\n                                    (click)=\"flipVertical()\"\n                                    (keydown.enter)=\"flipVertical()\"\n                                    aria-hidden=\"true\"\n                                ></i>\n              </button>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"row\">\n          <div class=\"col-8\">\n            <div *ngIf=\"aspectRatio === 'auto'\">\n              <image-cropper [imageChangedEvent]=\"imageChangedEvent\"\n                [maintainAspectRatio]=\"true\"\n                [canvasRotation]=\"canvasRotation\"\n                [aspectRatio]=\"4 / 4\"\n                [onlyScaleDown]=\"true\"\n                [transform]=\"transform\"\n                [roundCropper]=\"false\"\n                alignImage=\"center\"\n                outputType=\"base64\"\n                (imageCropped)=\"imageCropped($event)\"\n                (imageLoaded)=\"imageLoaded()\"\n                [imageQuality]=\"100\"\n                [style.display]=\"showCropper ? null : 'none'\"></image-cropper>\n            </div>\n\n            <div *ngIf=\"aspectRatio === 'fullLogo'\">\n              <image-cropper [imageChangedEvent]=\"imageChangedEvent\"\n                [maintainAspectRatio]=\"true\"\n                [aspectRatio]=\"5 / 1.1\"\n                [onlyScaleDown]=\"true\"\n                [roundCropper]=\"false\"\n                alignImage=\"center\"\n                outputType=\"base64\"\n                (imageCropped)=\"imageCropped($event)\"\n                (imageLoaded)=\"imageLoaded()\"\n                [imageQuality]=\"100\"\n                [style.display]=\"showCropper ? null : 'none'\"></image-cropper>\n            </div>\n\n            <div *ngIf=\"aspectRatio === 'rectangular'\">\n              <image-cropper\n                [imageChangedEvent]=\"imageChangedEvent\"\n                [maintainAspectRatio]=\"true\"\n                [aspectRatio]=\"3 / 1\"\n                [onlyScaleDown]=\"true\"\n                [canvasRotation]=\"canvasRotation\"\n                [transform]=\"transform\"\n                [roundCropper]=\"false\"\n                alignImage=\"center\"\n                outputType=\"base64\"\n                (imageCropped)=\"imageCropped($event)\"\n                (imageLoaded)=\"imageLoaded()\"\n                [imageQuality]=\"100\"\n                [style.display]=\"showCropper ? null : 'none'\"></image-cropper>\n            </div>\n\n            <div *ngIf=\"aspectRatio === 'dynamic'\">\n              <image-cropper\n              [imageChangedEvent]=\"imageChangedEvent\"\n              [maintainAspectRatio]=\"false\"\n              [resizeToWidth]=\"0\"\n              [cropperStaticWidth]=\"0\"\n              [cropperStaticHeight]=\"0\"\n              [cropperMinWidth]=\"10\"\n              [cropperMinHeight]=\"10\"\n              [onlyScaleDown]=\"false\"\n              [canvasRotation]=\"canvasRotation\"\n              [transform]=\"transform\"\n              [roundCropper]=\"false\"\n              alignImage=\"center\"\n              outputType=\"base64\"\n              [imageQuality]=\"100\"\n              (imageCropped)=\"imageCropped($event)\"\n              (imageLoaded)=\"imageLoaded()\"\n              [style.display]=\"showCropper ? null : 'none'\">\n              </image-cropper>\n            </div>\n\n            <div *ngIf=\"aspectRatio === 'custom'\">\n              <image-cropper [imageChangedEvent]=\"imageChangedEvent\"\n                [maintainAspectRatio]=\"true\"\n                [canvasRotation]=\"canvasRotation\"\n                [transform]=\"transform\"\n                [aspectRatio]=\"4 / 3\"\n                [onlyScaleDown]=\"true\"\n                [roundCropper]=\"false\"\n                alignImage=\"center\"\n                outputType=\"base64\"\n                (imageCropped)=\"imageCropped($event)\"\n                (imageLoaded)=\"imageLoaded()\"\n                [imageQuality]=\"100\"\n                [style.display]=\"showCropper ? null : 'none'\"></image-cropper>\n            </div>\n          </div>\n          <div *ngIf=\"croppedImage\" class=\"col-4 mt-2\">\n            <img [src]=\"croppedImage\"\n            class=\"cropped-image\"\n              alt=\"cropped.png\"\n              width=\"128\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"card-footer px-3\">\n    <div class=\"float-end mt-2\">\n      <button type=\"button\"\n        class=\"btn btn-outline-default me-2\"\n        (click)=\"onCloseModal()\">\n        Close\n      </button>\n      <button type=\"button\"\n        class=\"btn btn-primary\"\n        (click)=\"saveProfilePicture()\"\n        [buttonBusy]=\"busy\">\n        Save\n      </button>\n    </div>\n  </div>\n</section>\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)}.image-cropper label{background:var(--first);border-radius:5px;color:#fff;display:table;font-size:13px;font-weight:500;padding:7px}.image-cropper input[type=file]{display:none}.cropped-image{max-height:390px!important}.card-footer{background-color:transparent;left:0}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { imageSelectionEvent: [{
                 type: Output
-            }], close: [{
+            }], closeEvent: [{
+                type: Output
+            }], fileChangeEvent: [{
                 type: Output
+            }], aspectRatio: [{
+                type: Input
+            }], dynamicData: [{
+                type: Input
             }] } });
 
-var editFooterLinksModal_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    EditFooterLinksModalComponent: EditFooterLinksModalComponent
-});
-
-/**
- * Edit Questions Modal Component
- * Contains drag-drop functionality for reordering questions and options
- * This component is lazy-loaded only when the edit modal is opened
- */
-class EditQuestionsModalComponent {
-    constructor() {
-        this.editingQuestions = [];
-        this.save = new EventEmitter();
-        this.close = new EventEmitter();
+class CustomUploaderComponent extends AppBaseComponent {
+    constructor(injector, modalService, document) {
+        super(injector);
+        this.modalService = modalService;
+        this.document = document;
+        this.saveEvent = new EventEmitter();
+        this.aspectRatio = 'auto';
+        this.uploadedFile = null;
     }
-    dropQuestions(event) {
-        moveItemInArray(this.editingQuestions, event.previousIndex, event.currentIndex);
+    deleteExistingFile() {
+        HelperService.raiseDeletePopup().then(rep => {
+            if (rep.value) {
+                this.previewData = null;
+                this.onSaveFile();
+            }
+        });
     }
-    dropQuestionOptions(qIndex, event) {
-        moveItemInArray(this.editingQuestions[qIndex].options, event.previousIndex, event.currentIndex);
+    onSaveFile() {
+        this.buttonBusy = true;
+        this.saveEvent.emit({
+            file: this.previewData?.url ? this.previewData : this.uploadedFile,
+            name: this.controlName
+        });
     }
-    addNewQuestion() {
-        this.editingQuestions.push({ question: '', options: [] });
+    // modal image cropper
+    onFileChange(value) {
+        this.selectedFileName = value;
     }
-    addQuestionOption(qIndex) {
-        this.editingQuestions[qIndex].options.push({ option: '' });
+    dataURLtoBlob(dataUrl) {
+        const arr = dataUrl?.split(',');
+        // eslint-disable-next-line @typescript-eslint/prefer-regexp-exec
+        const mime = /^[A-Z]*[a-z]*:(.*?);[A-Z]*/.exec(arr[0])?.[1];
+        const bStr = atob(arr[1]);
+        let n = bStr.length;
+        const u8arr = new Uint8Array(n);
+        // eslint-disable-next-line no-plusplus
+        while (n--) {
+            u8arr[n] = bStr.charCodeAt(n);
+        }
+        return new Blob([u8arr], { type: mime });
     }
-    removeQuestionOption(qIndex, optIndex) {
-        this.editingQuestions[qIndex].options.splice(optIndex, 1);
+    onImageSelection(event) {
+        const blob = this.dataURLtoBlob(event);
+        const file = new File([blob], this.selectedFileName);
+        this.uploadedFile = file;
+        this.onSaveFile();
     }
-    onSave() {
-        this.save.emit(this.editingQuestions);
+    openModal(content) {
+        this.modalService.open(content, { centered: true, windowClass: 'modal-holder' });
+    }
+    clearValues() {
+        this.uploadedFile = null;
+        this.selectedFileName = null;
+        this.updateHeight();
     }
     onClose() {
-        this.close.emit();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: EditQuestionsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: EditQuestionsModalComponent, isStandalone: true, selector: "pw-edit-questions-modal", inputs: { editingQuestions: "editingQuestions" }, outputs: { save: "save", close: "close" }, ngImport: i0, template: `
-        <div class="modal-header">
-            <h5 class="modal-title">Edit Questions</h5>
-            <button type="button" class="btn-close" aria-label="Close" (click)="onClose()"></button>
-        </div>
-
-        <div class="modal-body">
-            <h4 class="mb-3">Questions Section</h4>
-            <div cdkDropList (cdkDropListDropped)="dropQuestions($event)">
-                <div *ngFor="let q of editingQuestions; let i = index" class="border p-3 mb-3" cdkDrag>
-                    <div class="row">
-                        <div class="col-md-11 mb-2">
-                            <label [for]="'questionText' + i" class="form-label">Question</label>
-                            <input [id]="'questionText' + i" class="form-control" [(ngModel)]="q.question" placeholder="Enter question" />
-                        </div>
-                        <div class="col-md-1 d-flex justify-content-end align-items-start mt-4">
-                            <i class="fa fa-bars in-page-bars-icon cursor-move" cdkDragHandle></i>
-                        </div>
-                    </div>
-
-                    <!-- Options Section -->
-                    <div cdkDropList (cdkDropListDropped)="dropQuestionOptions(i, $event)">
-                        <div *ngFor="let opt of q.options; let j = index" class="row border p-3 mb-2 align-items-center" cdkDrag>
-                            <div class="col-md-7 mb-2">
-                                <label [for]="'questionOption' + i + j" class="form-label">Option</label>
-                                <input [id]="'questionOption' + i + j" class="form-control" [(ngModel)]="opt.option" placeholder="Enter option" />
-                            </div>
-                            <div class="col-md-2 d-flex justify-content-between align-items-center mt-4">
-                                <i class="fa fa-trash in-page-trash-icon text-danger cursor-pointer"
-                                   (click)="removeQuestionOption(i, j)"
-                                   (keydown.enter)="removeQuestionOption(i, j)"
-                                   (keydown.space)="removeQuestionOption(i, j)"></i>
-                                <i class="fa fa-bars in-page-bars-icon cursor-move" cdkDragHandle></i>
-                            </div>
-                        </div>
-                    </div>
-
-                    <button class="btn btn-outline-primary btn-sm mt-2" (click)="addQuestionOption(i)">+ Add Option</button>
-                </div>
-            </div>
-
-            <button class="btn btn-primary mt-3" (click)="addNewQuestion()">+ Add Question</button>
-        </div>
-
-        <div class="modal-footer">
-            <button class="btn btn-secondary" (click)="onClose()">Cancel</button>
-            <button class="btn btn-primary" (click)="onSave()">Save</button>
-        </div>
-    `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$2.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }] }); }
+        this.modalService.dismissAll();
+    }
+    updateHeight() {
+        // wait for update card height
+        setTimeout(() => {
+            this.onImgChange();
+        });
+    }
+    onImgChange(event) {
+        if (event) {
+            const target = event.target;
+            target.src = 'assets/img/icons/imagenotavailable.png';
+        }
+        const el = this.document.querySelectorAll('pw-domain-config-interface,pw-domain-config-build div[matchheight="card"]');
+        el.forEach((item) => {
+            HelperService.matchHeights(item, 'card');
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CustomUploaderComponent, deps: [{ token: i0.Injector }, { token: i6.NgbModal }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: CustomUploaderComponent, selector: "pw-custom-uploader", inputs: { controlName: "controlName", previewData: "previewData", aspectRatio: "aspectRatio", title: "title" }, outputs: { saveEvent: "saveEvent" }, usesInheritance: true, ngImport: i0, template: "<div class=\"card pb-2\">\n  <div class=\"card-header upload-button-bar\">\n    <button pButton\n      type=\"button\"\n      [disabled]=\"previewData?.url || uploadedFile\"\n      (click)=\"openModal(content)\"\n      (keydown.enter)=\"openModal(content)\"\n      icon=\"pi pi-plus\"\n      label=\"Choose\"></button>\n  </div>\n  <div class=\"card-body\">\n    <!-- no files -->\n    <div class=\"d-flex preview-wrapper\"\n      *ngIf=\"!previewData?.url\">\n      <div>\n        <img src=\"assets/img/icons/nofilesfound.png\"\n          (load)=\"onImgChange()\"\n          class=\"mx-auto img-fluid\"\n          alt=\"\" />\n      </div>\n    </div>\n    <!-- existing images -->\n    <div class=\"d-flex preview-wrapper\"\n      *ngIf=\"previewData?.url\">\n      <div>\n        <a [href]=\"previewData?.url\"\n          target=\"_blank\">\n          <img [src]=\"previewData?.url\"\n            alt=\"\"\n            (load)=\"onImgChange()\"\n            (error)=\"onImgChange($event)\"\n            class=\"img-fluid\" />\n        </a>\n      </div>\n      <div class=\"ms-3\">\n        <i\n                    container=\"body\"\n                    ngbTooltip=\"Delete\"\n                    (click)=\"deleteExistingFile()\"\n                    (keydown.enter)=\"deleteExistingFile()\"\n                    (keydown.space)=\"deleteExistingFile()\"\n                    class=\"fa fa-trash delete-icon\"\n                    aria-hidden=\"true\"\n                ></i>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- image cropper -->\n<ng-template #content\n  let-modal>\n  <div class=\"card m-0\">\n    <div class=\"card-content\">\n      <div class=\"card-title\">\n        <h3 class=\"modal-title\">{{ title }}</h3>\n        <button type=\"button\"\n          class=\"btn-close float-end float-end\"\n          aria-label=\"Close\"\n          (click)=\"modal.dismiss()\">\n\n        </button>\n      </div>\n      <div class=\"card-header\">\n        <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n        <pw-image-cropper #profile\n          [aspectRatio]=\"aspectRatio\"\n          (fileChangeEvent)=\"onFileChange($event)\"\n          (imageSelectionEvent)=\"onImageSelection($event)\"\n          (closeEvent)=\"onClose()\">\n        </pw-image-cropper>\n      </div>\n    </div>\n  </div>\n</ng-template>\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)}.upload-button-bar{background:#efefef;padding:1rem 1.25rem}.card{min-height:270px!important;max-height:550px!important;height:auto}.preview-wrapper{align-items:center;text-align:center}.preview-wrapper div{padding:1rem;flex:1 1 auto;width:25%;word-break:break-all}button[label=Choose],button[label=Choose]:hover,button[label=Choose]:enabled:active{background-color:#616161;border-color:#616161}\n"], dependencies: [{ kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: i12.LazyImgDirective, selector: "img" }, { kind: "component", type: ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "pipe", type: i13.TranslocoPipe, name: "transloco" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: EditQuestionsModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: CustomUploaderComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'pw-edit-questions-modal',
-                    standalone: true,
-                    imports: [CommonModule, FormsModule, DragDropModule],
-                    template: `
-        <div class="modal-header">
-            <h5 class="modal-title">Edit Questions</h5>
-            <button type="button" class="btn-close" aria-label="Close" (click)="onClose()"></button>
-        </div>
-
-        <div class="modal-body">
-            <h4 class="mb-3">Questions Section</h4>
-            <div cdkDropList (cdkDropListDropped)="dropQuestions($event)">
-                <div *ngFor="let q of editingQuestions; let i = index" class="border p-3 mb-3" cdkDrag>
-                    <div class="row">
-                        <div class="col-md-11 mb-2">
-                            <label [for]="'questionText' + i" class="form-label">Question</label>
-                            <input [id]="'questionText' + i" class="form-control" [(ngModel)]="q.question" placeholder="Enter question" />
-                        </div>
-                        <div class="col-md-1 d-flex justify-content-end align-items-start mt-4">
-                            <i class="fa fa-bars in-page-bars-icon cursor-move" cdkDragHandle></i>
-                        </div>
-                    </div>
-
-                    <!-- Options Section -->
-                    <div cdkDropList (cdkDropListDropped)="dropQuestionOptions(i, $event)">
-                        <div *ngFor="let opt of q.options; let j = index" class="row border p-3 mb-2 align-items-center" cdkDrag>
-                            <div class="col-md-7 mb-2">
-                                <label [for]="'questionOption' + i + j" class="form-label">Option</label>
-                                <input [id]="'questionOption' + i + j" class="form-control" [(ngModel)]="opt.option" placeholder="Enter option" />
-                            </div>
-                            <div class="col-md-2 d-flex justify-content-between align-items-center mt-4">
-                                <i class="fa fa-trash in-page-trash-icon text-danger cursor-pointer"
-                                   (click)="removeQuestionOption(i, j)"
-                                   (keydown.enter)="removeQuestionOption(i, j)"
-                                   (keydown.space)="removeQuestionOption(i, j)"></i>
-                                <i class="fa fa-bars in-page-bars-icon cursor-move" cdkDragHandle></i>
-                            </div>
-                        </div>
-                    </div>
-
-                    <button class="btn btn-outline-primary btn-sm mt-2" (click)="addQuestionOption(i)">+ Add Option</button>
-                </div>
-            </div>
+            args: [{ selector: 'pw-custom-uploader', template: "<div class=\"card pb-2\">\n  <div class=\"card-header upload-button-bar\">\n    <button pButton\n      type=\"button\"\n      [disabled]=\"previewData?.url || uploadedFile\"\n      (click)=\"openModal(content)\"\n      (keydown.enter)=\"openModal(content)\"\n      icon=\"pi pi-plus\"\n      label=\"Choose\"></button>\n  </div>\n  <div class=\"card-body\">\n    <!-- no files -->\n    <div class=\"d-flex preview-wrapper\"\n      *ngIf=\"!previewData?.url\">\n      <div>\n        <img src=\"assets/img/icons/nofilesfound.png\"\n          (load)=\"onImgChange()\"\n          class=\"mx-auto img-fluid\"\n          alt=\"\" />\n      </div>\n    </div>\n    <!-- existing images -->\n    <div class=\"d-flex preview-wrapper\"\n      *ngIf=\"previewData?.url\">\n      <div>\n        <a [href]=\"previewData?.url\"\n          target=\"_blank\">\n          <img [src]=\"previewData?.url\"\n            alt=\"\"\n            (load)=\"onImgChange()\"\n            (error)=\"onImgChange($event)\"\n            class=\"img-fluid\" />\n        </a>\n      </div>\n      <div class=\"ms-3\">\n        <i\n                    container=\"body\"\n                    ngbTooltip=\"Delete\"\n                    (click)=\"deleteExistingFile()\"\n                    (keydown.enter)=\"deleteExistingFile()\"\n                    (keydown.space)=\"deleteExistingFile()\"\n                    class=\"fa fa-trash delete-icon\"\n                    aria-hidden=\"true\"\n                ></i>\n      </div>\n    </div>\n  </div>\n</div>\n<!-- image cropper -->\n<ng-template #content\n  let-modal>\n  <div class=\"card m-0\">\n    <div class=\"card-content\">\n      <div class=\"card-title\">\n        <h3 class=\"modal-title\">{{ title }}</h3>\n        <button type=\"button\"\n          class=\"btn-close float-end float-end\"\n          aria-label=\"Close\"\n          (click)=\"modal.dismiss()\">\n\n        </button>\n      </div>\n      <div class=\"card-header\">\n        <small> {{ 'User.Profile.PictureMessage' | transloco }}</small>\n        <pw-image-cropper #profile\n          [aspectRatio]=\"aspectRatio\"\n          (fileChangeEvent)=\"onFileChange($event)\"\n          (imageSelectionEvent)=\"onImageSelection($event)\"\n          (closeEvent)=\"onClose()\">\n        </pw-image-cropper>\n      </div>\n    </div>\n  </div>\n</ng-template>\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)}.upload-button-bar{background:#efefef;padding:1rem 1.25rem}.card{min-height:270px!important;max-height:550px!important;height:auto}.preview-wrapper{align-items:center;text-align:center}.preview-wrapper div{padding:1rem;flex:1 1 auto;width:25%;word-break:break-all}button[label=Choose],button[label=Choose]:hover,button[label=Choose]:enabled:active{background-color:#616161;border-color:#616161}\n"] }]
+        }], ctorParameters: () => [{ type: i0.Injector }, { type: i6.NgbModal }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { saveEvent: [{
+                type: Output
+            }], controlName: [{
+                type: Input
+            }], previewData: [{
+                type: Input
+            }], aspectRatio: [{
+                type: Input
+            }], title: [{
+                type: Input
+            }] } });
 
-            <button class="btn btn-primary mt-3" (click)="addNewQuestion()">+ Add Question</button>
-        </div>
+/**
+ * Lightweight module for pw-image-cropper component
+ *
+ * Minimal dependencies - only CommonModule, ImageCropperModule, DirectivesModule
+ * Use this instead of ResourceSharedComponentsModule when you only need image cropping
+ */
+class ProfileImageCropperModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ProfileImageCropperModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: ProfileImageCropperModule, declarations: [ProfileImageCropperComponent, CustomUploaderComponent], imports: [CommonModule,
+            CoreTranslocoModule,
+            ButtonModule,
+            ImageCropperModule, // for <image-cropper>
+            DirectivesModule // for [buttonBusy] directive
+        ], exports: [ProfileImageCropperComponent, CustomUploaderComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ProfileImageCropperModule, imports: [CommonModule,
+            CoreTranslocoModule,
+            ButtonModule,
+            ImageCropperModule, // for <image-cropper>
+            DirectivesModule // for [buttonBusy] directive
+        ] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ProfileImageCropperModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [ProfileImageCropperComponent, CustomUploaderComponent],
+                    imports: [
+                        CommonModule,
+                        CoreTranslocoModule,
+                        ButtonModule,
+                        ImageCropperModule, // for <image-cropper>
+                        DirectivesModule // for [buttonBusy] directive
+                    ],
+                    exports: [ProfileImageCropperComponent, CustomUploaderComponent]
+                }]
+        }] });
 
-        <div class="modal-footer">
-            <button class="btn btn-secondary" (click)="onClose()">Cancel</button>
-            <button class="btn btn-primary" (click)="onSave()">Save</button>
-        </div>
-    `
+/**
+ * Standalone module for FieldErrorDisplayComponent.
+ * Import this lightweight module instead of SharedComponentsModule
+ * when you only need field error display functionality.
+ */
+class FieldErrorDisplayModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FieldErrorDisplayModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: FieldErrorDisplayModule, declarations: [FieldErrorDisplayComponent], imports: [CommonModule], exports: [FieldErrorDisplayComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FieldErrorDisplayModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: FieldErrorDisplayModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [FieldErrorDisplayComponent],
+                    imports: [CommonModule],
+                    exports: [FieldErrorDisplayComponent]
                 }]
-        }], propDecorators: { editingQuestions: [{
-                type: Input
-            }], save: [{
-                type: Output
-            }], close: [{
-                type: Output
-            }] } });
+        }] });
 
-var editQuestionsModal_component = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    EditQuestionsModalComponent: EditQuestionsModalComponent
-});
+class Trial4ContactUsComponentModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: Trial4ContactUsComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.11", ngImport: i0, type: Trial4ContactUsComponentModule, declarations: [Trial4ContactUsComponent], imports: [CommonModule, FieldErrorDisplayModule, DropdownModule, ReactiveFormsModule, NgxCaptchaModule, RouterModule, PipesModule, FormsModule, CoreTranslocoModule, AdminModuleUtilsModule, DirectivesModule], exports: [Trial4ContactUsComponent, CommonModule, FieldErrorDisplayModule, DropdownModule, ReactiveFormsModule, NgxCaptchaModule, RouterModule, PipesModule, FormsModule, CoreTranslocoModule, AdminModuleUtilsModule, DirectivesModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: Trial4ContactUsComponentModule, imports: [CommonModule, FieldErrorDisplayModule, DropdownModule, ReactiveFormsModule, NgxCaptchaModule, RouterModule, PipesModule, FormsModule, CoreTranslocoModule, AdminModuleUtilsModule, DirectivesModule, CommonModule, FieldErrorDisplayModule, DropdownModule, ReactiveFormsModule, NgxCaptchaModule, RouterModule, PipesModule, FormsModule, CoreTranslocoModule, AdminModuleUtilsModule, DirectivesModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: Trial4ContactUsComponentModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [Trial4ContactUsComponent],
+                    imports: [CommonModule, FieldErrorDisplayModule, DropdownModule, ReactiveFormsModule, NgxCaptchaModule, RouterModule, PipesModule, FormsModule, CoreTranslocoModule, AdminModuleUtilsModule, DirectivesModule],
+                    exports: [Trial4ContactUsComponent, CommonModule, FieldErrorDisplayModule, DropdownModule, ReactiveFormsModule, NgxCaptchaModule, RouterModule, PipesModule, FormsModule, CoreTranslocoModule, AdminModuleUtilsModule, DirectivesModule],
+                    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+                }]
+        }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { CustomUploaderComponent, EditFooterLinksModalComponent, EditQuestionsModalComponent, FieldErrorDisplayComponent, FieldErrorDisplayModule, ProfileImageCropperComponent, ProfileImageCropperModule, ResourceHeaderComponent, ResourceHeaderModule, Trial4ContactUsComponent, Trial4ContactUsModule };
+export { CustomUploaderComponent, FieldErrorDisplayComponent, FieldErrorDisplayModule, ProfileImageCropperComponent, ProfileImageCropperModule, ResourceHeaderComponent, ResourceSharedHeaderModule, Trial4ContactUsComponent, Trial4ContactUsComponentModule };
 //# sourceMappingURL=posiwise-resource-contact-us.mjs.map