@piserve-tech/form-submission 1.3.314 → 1.3.316

package/src/form-fields/iframe-fields/iframe-fields.component.html

@@ -0,0 +1,31 @@
+<div class="custom-embed mb-4"
+     [style.width]="width"
+     [style.height]="height">
+
+  <ng-container [ngSwitch]="contentType">
+
+    <!-- HTML, CSS, and Script rendered together -->
+    <iframe
+      *ngSwitchCase="'HTML'"
+      #iframeRef
+      sandbox="allow-scripts allow-same-origin"
+      [style.width]="width"
+      [style.height]="height"
+      frameborder="0"
+    ></iframe>
+
+    <!-- Link Embed -->
+     <div *ngSwitchCase="'LINK'">
+     <iframe
+     *ngIf="safeUrl"
+     [src]="safeUrl"
+     [style.width]="width"
+     [style.height]="height"
+     frameborder="0"
+     allowfullscreen>
+   </iframe>
+     </div>
+    
+
+  </ng-container>
+</div>

package/src/form-fields/iframe-fields/iframe-fields.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { IframeFieldsComponent } from './iframe-fields.component';
+
+describe('IframeFieldsComponent', () => {
+  let component: IframeFieldsComponent;
+  let fixture: ComponentFixture<IframeFieldsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [IframeFieldsComponent]
+    });
+    fixture = TestBed.createComponent(IframeFieldsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/form-fields/iframe-fields/iframe-fields.component.ts

@@ -0,0 +1,225 @@
+import { Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { DomSanitizer, SafeHtml, SafeResourceUrl } from '@angular/platform-browser';
+
+@Component({
+  selector: 'lib-iframe-fields',
+  templateUrl: './iframe-fields.component.html',
+  styleUrls: ['./iframe-fields.component.scss']
+})
+export class IframeFieldsComponent {
+
+  @Input() question: any = {};
+  
+  height!: string;
+  width!: string;
+  contentType: string = '';
+  htmlContent: string = '';
+  cssContent: string = '';
+  scriptContent: string = '';
+  urlContent: string = '';
+  count!: number;
+
+  safeHtmlContent!: SafeHtml;
+  safeUrl!: SafeResourceUrl;
+
+  embeddableDomains = [
+    // Generic sites that usually allow embedding
+    'youtube.com',
+    'youtu.be',
+    'vimeo.com',
+    'player.vimeo.com',
+    'maps.google.com',
+    'www.google.com/maps',
+    'openstreetmap.org',
+    'codesandbox.io',
+    'stackblitz.com',
+    'jsfiddle.net',
+    'codepen.io',
+    'spotify.com',
+    'soundcloud.com',
+    'figma.com',
+    'canva.com',
+    'notion.so',
+    'facebook.com/plugins',
+    'instagram.com/p',
+    'twitter.com',
+  ];
+
+  constructor(private sanitizer: DomSanitizer) {}
+
+  ngOnInit() {
+    this.valueAssigned();
+  }
+
+  ngAfterViewInit() {
+    if (this.contentType === 'HTML') {
+      setTimeout(() => this.renderHtml(), 0);
+    } else if (this.contentType === 'LINK') {
+      setTimeout(() => this.renderLink(), 0);
+    }
+  }
+
+  valueAssigned() {
+    this.count = this.question?.count;
+    this.width = this.question.formElement.appearance.width
+      ? this.question.formElement.appearance.width + 'px'
+      : '100%';
+    this.height = this.question.formElement.appearance.height
+      ? this.question.formElement.appearance.height + 'px'
+      : '100%';
+    this.contentType =
+      this.question.formElement.iFrameProperties.contentType;
+    this.htmlContent =
+      this.question.formElement.iFrameProperties.html.content;
+    this.cssContent =
+      this.question.formElement.iFrameProperties.style.css;
+    this.scriptContent =
+      this.question.formElement.iFrameProperties.script.code;
+    this.urlContent = this.question.formElement.iFrameProperties.url;
+  }
+  @ViewChild('iframeRef') iframeRef!: ElementRef<HTMLIFrameElement>;
+  /** Render HTML with dynamic CSS */
+  renderHtml() {
+    const iframe = this.iframeRef?.nativeElement;
+
+    if (!iframe) return;
+
+    const iframeDoc = iframe.contentDocument || iframe.contentWindow?.document;
+
+    if (iframeDoc) {
+      // Build the complete HTML content to inject into the iframe
+      const safeHtml = `
+        <html>
+          <head>
+            <style>${this.cssContent || ''}</style>
+          </head>
+          <body>
+            ${this.htmlContent || ''}
+            <script>
+              (function(localStorage) {
+                try {
+                  ${
+                    this.isSafeScript(this.scriptContent)
+                      ? this.scriptContent
+                      : ''
+                  }
+                } catch (e) {
+                  document.body.innerHTML += '<p style="color:red">Script Error: ' + e.message + '</p>';
+                }
+              })(window.localStorage);
+            </script>
+          </body>
+        </html>
+      `;
+
+      iframeDoc.open();
+      iframeDoc.write(safeHtml);
+      iframeDoc.close();
+    }
+  }
+
+  renderLink() {
+    if (!this.urlContent) {
+      this.safeUrl = '';
+      return;
+    }
+
+    const url = this.urlContent.trim();
+
+    // Check if URL is valid
+    if (!this.isValidUrl(url)) {
+      console.warn('Invalid URL format');
+      this.safeUrl = '';
+      return;
+    }
+
+    // Check if embeddable host
+    if (!this.isEmbeddableUrl(url)) {
+      console.warn('This website may not allow embedding');
+      // You can still LET it try
+      // Or block it completely
+      // For now: allow but warn
+    }
+
+    const embedUrl = this.convertToEmbedUrl(url);
+    this.safeUrl = this.sanitizeUrl(embedUrl);
+  }
+
+  isValidUrl(url: string): boolean {
+    try {
+      new URL(url);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  /** Sanitize URLs for iframes */
+  sanitizeUrl(url: string): SafeResourceUrl {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+  }
+
+  isEmbeddableUrl(url: string): boolean {
+    try {
+      const parsed = new URL(url);
+
+      return this.embeddableDomains.some((domain) =>
+        parsed.hostname.includes(domain)
+      );
+    } catch {
+      return false;
+    }
+  }
+
+  convertToEmbedUrl(url: string): string {
+    try {
+      const parsed = new URL(url);
+
+      // YouTube
+      if (
+        parsed.hostname.includes('youtube.com') &&
+        parsed.searchParams.get('v')
+      ) {
+        return `https://www.youtube.com/embed/${parsed.searchParams.get('v')}`;
+      }
+      if (parsed.hostname.includes('youtu.be')) {
+        return `https://www.youtube.com/embed/${parsed.pathname.substring(1)}`;
+      }
+
+      // Vimeo
+      if (parsed.hostname.includes('vimeo.com')) {
+        const videoId = parsed.pathname.split('/')[1];
+        return `https://player.vimeo.com/video/${videoId}`;
+      }
+
+      // Google Maps (no API key needed)
+      if (
+        parsed.hostname.includes('google.com') &&
+        parsed.pathname.startsWith('/maps')
+      ) {
+        if (parsed.pathname.includes('/maps/embed')) return url;
+
+        return `https://www.google.com/maps/embed?${parsed.searchParams.toString()}`;
+      }
+
+      return url;
+    } catch (e) {
+      return url;
+    }
+  }
+
+  /** Basic script validation to prevent unsafe operations */
+  isSafeScript(code: string): boolean {
+    const unsafePatterns = [
+      /window\.parent/,
+      /document\.cookie/,
+      /fetch\(/,
+      /XMLHttpRequest/,
+      /eval\(/,
+      /new Function/,
+      /setTimeout|setInterval/,
+    ];
+
+    return !unsafePatterns.some((pattern) => pattern.test(code));
+  }
+}

package/src/form-fields/location-fields/location-fields.component.html

@@ -0,0 +1,54 @@
+<div [ngClass]="{ 'mb-4': !inLine }" class="px-3" [attr.name]="question.testElementName">
+  <div  class="input-wrapper mb-2" *ngIf="!inLine">
+    <div *ngIf="question.questionNumber" [innerHTML]="question.questionNumber"></div>
+    <span *ngIf="question.questionNumber" class="space"></span> <label>{{ question.question }}</label
+    >&nbsp;
+    <span class="text-danger" *ngIf="required">*</span>
+    <div
+      class="svg-wrapper mb-2 hintIcon"
+      [attr.data-title]="hint"
+      *ngIf="hint"
+    >
+      <svg
+        class="hintSvg"
+        viewBox="0 0 30 30"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  </div>
+  <div class="input-group">
+    <input
+      type="text"
+      class="form-control location-input"
+      placeholder="Enter location"
+      #locationInput
+    />
+  </div>
+
+  <input #mapSearchField class="my-map-search-field" type="text" />
+  <google-map width="100%" [options]="mapConfigurations"></google-map>
+</div>

package/src/form-fields/location-fields/location-fields.component.scss

@@ -0,0 +1,22 @@
+@import '../../styles/shared-style.scss';
+
+.location-input{
+  position: relative;
+}
+.input-group-append{
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+}
+
+.invalid-question {
+  border: 2px solid #f44336; /* Material red */
+  border-radius: 4px;
+  padding: 8px;
+  margin-bottom: 4px;
+}
+
+
+

package/src/form-fields/location-fields/location-fields.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LocationFieldsComponent } from './location-fields.component';
+
+describe('LocationFieldsComponent', () => {
+  let component: LocationFieldsComponent;
+  let fixture: ComponentFixture<LocationFieldsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [LocationFieldsComponent]
+    });
+    fixture = TestBed.createComponent(LocationFieldsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/form-fields/location-fields/location-fields.component.ts

@@ -0,0 +1,83 @@
+import { Component, Input, ViewChild, ElementRef, Output, EventEmitter } from '@angular/core';
+import { GoogleMap } from '@angular/google-maps';
+
+@Component({
+  selector: 'lib-location-fields',
+  templateUrl: './location-fields.component.html',
+  styleUrls: ['./location-fields.component.scss'],
+})
+export class LocationFieldsComponent {
+  @Input() question: any = {};
+  @Input() inLine: boolean = false;
+  @Output() answerChange = new EventEmitter<{ answer: any; maxPossibleScore?: number }>();
+
+  @ViewChild('mapSearchField')
+  searchField!: ElementRef;
+  @ViewChild(GoogleMap) map!: GoogleMap;
+
+  count: number = 0;
+  required: boolean = false;
+  hint: string = '';
+  defaultZoomLevel: number = 0;
+  setCurrentPosition: boolean = false;
+  allowFullScreen: boolean = false;
+  latitude: number = 0;
+  longitude: number = 0;
+  regionBoundary: boolean = false;
+  region: string = '';
+  showGoogleMap!: boolean;
+  mapConfigurations: any = {};
+
+  ngOnInit() {
+    this.count = this.question.count;
+    this.required = this.question.required;
+    this.hint = this.question.hint;
+    this.defaultZoomLevel =
+      this.question.formElement.appearance.defaultZoomLevel;
+    this.setCurrentPosition =
+      this.question.formElement.appearance.setCurrentPosition;
+    this.allowFullScreen = this.question.formElement.appearance.allowFullScreen;
+    this.latitude = this.question.formElement.appearance.latitude;
+    this.longitude = this.question.formElement.appearance.longitude;
+    this.regionBoundary = this.question.formElement.validation.regionBoundary;
+    this.region = this.question.formElement.validation.region;
+    this.mapConfigurations = {
+      disableDefaultUI: true,
+      fullscreenControl: this.allowFullScreen,
+      zoomControl: true,
+    };
+  }
+
+  ngAfterViewInit(): void {
+    const searchBox = new google.maps.places.SearchBox(
+      this.searchField.nativeElement
+    );
+
+    this.map.controls[google.maps.ControlPosition.TOP_CENTER].push(
+      this.searchField.nativeElement
+    );
+
+    searchBox.addListener('places_changed', () => {
+      const places = searchBox.getPlaces();
+      if (places?.length === 0) {
+        return;
+      }
+
+      const bounds = new google.maps.LatLngBounds();
+      places?.forEach((place) => {
+        if (!place.geometry || !place.geometry.location) {
+          return;
+        }
+
+        if (place.geometry.viewport) {
+          // Only geocodes have viewport.
+          bounds.union(place.geometry.viewport);
+        } else {
+          bounds.extend(place.geometry.location);
+        }
+      });
+
+      this.map.fitBounds(bounds);
+    });
+  }
+}

package/src/form-fields/mail-fields/mail-fields.component.html

@@ -0,0 +1,66 @@
+<div
+  [ngClass]="{ 'mb-4': !inLine }"
+  class="px-3"
+  [id]="(inLine || inCard) ? 'question-' + submissionIndex + '-' + question.id : 'question-' + question.id"
+  [attr.name]="question.testElementName"
+>
+  <div class="input-wrapper mb-2" *ngIf="!inLine">
+    <div *ngIf="question.questionNumber" [innerHTML]="question.questionNumber"></div>
+    <span *ngIf="question.questionNumber" class="space"></span> <label>{{ question.question }}</label
+    >&nbsp;
+    <span class="text-danger" *ngIf="question?.required">*</span>
+    <div
+      class="svg-wrapper mb-2 hintIcon"
+      [attr.data-title]="hint"
+      *ngIf="hint"
+    >
+      <svg
+        class="hintSvg"
+        viewBox="0 0 30 30"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+        <path
+          d="M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20"
+          stroke="#323232"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        />
+      </svg>
+    </div>
+  </div>
+  <input
+    type="email"
+    class="form-control mb-2 height"
+    [placeholder]="placeholder"
+    [(ngModel)]="email"
+    (blur)="validateEmail()"
+    (input)="validateInput($event)"
+    [class.invalid]="validationFailed"
+    [class.invalid-question]="isInvalid && (!inLine || !email)"
+    [disabled]="disableEdit"
+  />
+  <!-- <div *ngIf="isInvalid" class="error-message"> -->
+  <div *ngIf="isInvalid && (!inLine || !email)" class="error-message">
+    {{ errorMessage }}
+  </div>
+  <div *ngIf="validationFailed && !isInvalid" class="text-danger error-message">
+    {{ validationMessage }}
+  </div>
+</div>

package/src/form-fields/mail-fields/mail-fields.component.scss

@@ -0,0 +1,10 @@
+@import '../../styles/shared-style.scss';
+/* question.component.css */
+.invalid-question {
+    border: 2px solid #f44336; /* Material red */
+    border-radius: 4px;
+    padding: 8px;
+    margin-bottom: 4px;
+  }
+  
+

package/src/form-fields/mail-fields/mail-fields.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MailFieldsComponent } from './mail-fields.component';
+
+describe('MailFieldsComponent', () => {
+  let component: MailFieldsComponent;
+  let fixture: ComponentFixture<MailFieldsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [MailFieldsComponent]
+    });
+    fixture = TestBed.createComponent(MailFieldsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/form-fields/mail-fields/mail-fields.component.ts

@@ -0,0 +1,127 @@
+import { Component, ElementRef, EventEmitter, Input, Output } from '@angular/core';
+import { ValidationService } from '../../services/validation.service';
+import { ElementTrackerService } from '../../services/element-tracker.service';
+
+@Component({
+  selector: 'lib-mail-fields',
+  templateUrl: './mail-fields.component.html',
+  styleUrls: ['./mail-fields.component.scss'],
+})
+export class MailFieldsComponent {
+  @Input() question: any = {};
+  @Input() inLine: boolean = false;
+  @Input() inCard: boolean = false;
+  @Input() submissionIndex!: number;
+  @Output() answerChange = new EventEmitter<{ answer: any; maxPossibleScore?: number }>();
+
+  count: number = 0;
+  required: boolean = false;
+  hint: string = '';
+  placeholder: string = '';
+  expectedDomains: string[] = [];
+  regularExpression: string = '';
+  email: string = '';
+  validationFailed: boolean = false;
+  validationMessage: string = '';
+  defaultValue: string = '';
+  @Input() disableEdit: boolean = false;
+  private elementId: string='';
+  constructor(
+    private validationService: ValidationService,
+    private tracker: ElementTrackerService
+  ) {
+  }
+
+
+  ngOnInit() {
+    this.valueAssigned();
+  }
+
+  valueAssigned() {
+    this.count = this.question.count;
+    this.required = this.question.required;
+    this.hint = this.question.hint;
+    this.placeholder = this.question.formElement?.appearance?.placeholder || '';
+    this.expectedDomains =
+      this.question?.formElement?.validation?.expectedDomains
+        ?.split(',')
+        .map((domain: any) => domain.trim());
+    this.regularExpression =
+    this.question.formElement.validation.regularExpression;
+    this.defaultValue = this.question?.defaultValue;
+    this.disableEdit = this.disableEdit ?? this.question?.disableEdit ?? false;
+    this.email = this.defaultValue;
+    if(this.question.answer){
+      this.email = this.question?.answer  
+    }else if(this.defaultValue && !this.question.answer){
+      this.question.answer = this.defaultValue;
+    }
+  }
+
+  validateEmail() {
+    this.validationFailed = false;
+    this.validationMessage = '';
+    const enteredEmail = this.email?.trim().toLowerCase();
+    if (this.required && !this.email) {
+      this.validationFailed = true;
+      this.validationMessage = 'This is a required question';
+      this.question.validation = false;
+      this.question.validationMessage = 'This is a required question';
+    } else if (this.expectedDomains && this.expectedDomains.some(d => d.trim() !== '')) {    
+      const isValidEmail = this.expectedDomains.some((domain) =>
+        enteredEmail?.endsWith(domain)
+      );
+      this.validationFailed = !isValidEmail;
+      this.validationMessage = 'Please enter valid email address';
+      this.question.validation = !this.validationFailed;
+      this.question.validationMessage = 'Please enter valid email address';
+    }
+    else {
+      this.question.validation = true;
+    }
+  }
+  validateInput(event: any) {
+    this.validationService.clearInvalid(this.buildElementId())
+    this.question.answer = event.target.value;
+    this.answerChange.emit({answer:this.question.answer,maxPossibleScore:0});
+    this.validateEmail();
+  }
+
+  handleValidation(isValid: boolean, message: string = 'This field is required') {
+    if (isValid) {
+      this.validationService.clearInvalid(this.buildElementId());
+    } else {
+      // this.validationService.setInvalid(this.question.id, message);
+    }
+  }
+
+  private buildElementId(): string {
+    return (this.inLine || this.inCard)
+      ? `${this.submissionIndex}-${this.question.id}`
+      : `${this.question.id}`;
+  }
+
+  get isInvalid(): boolean {
+    return !!this.validationService.getErrorMessage(this.buildElementId());
+  }
+
+  get errorMessage(): string | null {
+    return this.validationService.getErrorMessage(this.buildElementId());
+  }
+
+  ngAfterViewInit() {
+    if (this.inLine || this.inCard) {
+      this.elementId = `question-${this.submissionIndex}-${this.question.id}`;
+    } else {
+      this.elementId = `question-${this.question.id}`;
+    }
+  
+    this.tracker.registerElement(this.elementId);
+  }
+
+  ngOnDestroy() {
+    if (this.elementId) {
+      this.tracker.unregisterElement(this.elementId);
+    }
+  }
+}