@piserve-tech/form-submission 1.3.317 → 1.3.319

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

@@ -1,31 +0,0 @@
-<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

@@ -1,21 +0,0 @@
-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

@@ -1,225 +0,0 @@
-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

@@ -1,54 +0,0 @@
-<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

@@ -1,22 +0,0 @@
-@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

@@ -1,21 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,66 +0,0 @@
-<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

@@ -1,10 +0,0 @@
-@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

@@ -1,21 +0,0 @@
-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

@@ -1,127 +0,0 @@
-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);
-    }
-  }
-}