@piserve-tech/form-submission 1.3.317 → 1.3.319

package/src/form-fields/date-time-fields/date-time-fields.component.html

@@ -1,268 +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>
-  <ng-container *ngIf="dateType === 'DATE_ONLY'">
-    <!-- Date only picker -->
-    <div class="input-container">
-      <input
-        class="form-control height"
-        #datepickerYMD="bsDatepicker"
-        bsDatepicker
-        [minDate]="minDate ? minDate : undefined"
-        [maxDate]="maxDate ? maxDate : undefined"
-        [bsConfig]="{ dateInputFormat: format, containerClass: 'theme-custom' }"
-        [(ngModel)]="selectedDate"
-        (blur)="validateField()"
-        (ngModelChange)="validateField()"
-        [class.invalid]="validationFailed"
-        placeholder="Select date"
-        container="body"
-        placement="top"
-        [class.invalid-question]="isInvalid && (!inLine || !selectedDate)"
-        [disabled]="disableEdit"
-      />
-      <i
-        class="fa-solid fa-calendar-days calendar-icon text-primary fs-5"
-        (click)="openDatePicker()"
-      ></i>
-    </div>
-    <div *ngIf="isInvalid && (!inLine || !selectedDate)" class="error-message">
-      {{ errorMessage }}
-    </div>
-    <div *ngIf="validationFailed && !isInvalid" class="text-danger error-message mt-2">
-      {{ validationMessage }}
-    </div>
-  </ng-container>
-
-  <ng-container *ngIf="dateType === 'MONTH_YEAR'">
-    <div class="input-container">
-      <input
-        class="form-control height"
-        #datepickerYMD="bsDatepicker"
-        bsDatepicker
-        [minDate]="minDate ? minDate : undefined"
-        [maxDate]="maxDate ? maxDate : undefined"
-        [bsConfig]="{
-          containerClass: 'theme-dark-blue',
-          isAnimated: true,
-          adaptivePosition: true,
-          showWeekNumbers: false,
-          minMode: 'month',
-          dateInputFormat: format
-        }"
-        [(ngModel)]="selectedDate"
-        (blur)="validateField()"
-        (ngModelChange)="validateField()"
-        [class.invalid]="validationFailed"
-        placeholder="Select date"
-        container="body"
-        placement="top"
-        [class.invalid-question]="isInvalid && (!inLine || !selectedDate)"
-        [disabled]="disableEdit"
-      />
-      <i
-        class="fa-solid fa-calendar-days calendar-icon text-primary fs-5"
-        (click)="openDatePicker()"
-      ></i>
-    </div>
-    <div *ngIf="isInvalid && (!inLine || !selectedDate)" class="error-message">
-      {{ errorMessage }}
-    </div>
-    <div *ngIf="validationFailed && !isInvalid" class="text-danger mt-2">
-      {{ validationMessage }}
-    </div>
-  </ng-container>
-
-  <ng-container *ngIf="dateType === 'TIME_ONLY'">
-    <!-- Time picker -->
-
-    <div class="input-container">
-      <input
-        class="form-control height appearanceInput mt-3"
-        aria-label="Select time"
-        placeholder="Select time"
-        readonly
-        [format]="timeFormat === '24' ? 24 : 12"
-        [ngxTimepicker]="fullTime3"
-        [(ngModel)]="selectedTime"
-        [max]="maxTime"
-        [min]="minTime"
-        (ngModelChange)="validateField()"
-        [class.invalid]="validationFailed"
-        [class.invalid-question]="isInvalid && (!inLine || !selectedTime)"
-        container="body"
-        placement="top"
-        [disabled]="disableEdit"
-      />
-
-      <i
-        id="startDateIcon"
-        class="fa-solid fa-clock text-primary fs-6 clock-icon"
-        (click)="fullTime3.open()"
-        style="cursor: pointer"
-      ></i>
-      <ngx-material-timepicker #fullTime3></ngx-material-timepicker>
-    </div>
-    <div *ngIf="isInvalid && (!inLine || !selectedTime)" class="error-message">
-      {{ errorMessage }}
-    </div>
-    <div *ngIf="validationFailed && !isInvalid" class="text-danger mt-2">
-      {{ validationMessage }}
-    </div>
-  </ng-container>
-
-  <ng-container *ngIf="dateType === 'DATE_AND_TIME'">
-    <!-- Date and time picker -->
-    <div class="input-container">
-      <input
-        #dateAndTimePicker="bsDatepicker"
-        type="text"
-        class="form-control height"
-        [minDate]="minDate ? minDate : undefined"
-        [maxDate]="maxDate ? maxDate : undefined"
-        [bsConfig]="{
-          dateInputFormat: format,
-          containerClass: 'theme-custom'
-        }"
-        placeholder="Select date"
-        container="body"
-        placement="top"
-        bsDatepicker
-        [class.invalid]="validationFailed"
-        [(ngModel)]="selectedDateAndTime"
-        (blur)="validateField()"
-        (ngModelChange)="validateField()"
-        [class.invalid-question]="isInvalid"
-        [disabled]="disableEdit"
-      />
-      <i
-        class="fa-solid fa-calendar-days calendar-icon text-primary fs-5"
-        (click)="openDateAndTimePicker()"
-      ></i>
-    </div>
-    <div
-      class="input-container"
-      *ngIf="selectedDateAndTime && selectedDateAndTime != null"
-    >
-      <input
-        class="form-control height appearanceInput mt-3"
-        aria-label="Select time"
-        placeholder="Select time"
-        readonly
-        [format]="timeFormat === '24' ? 24 : 12"
-        [ngxTimepicker]="fullTime4"
-        [(ngModel)]="selectedTime"
-        [max]="maxTime"
-        [min]="minTime"
-        (ngModelChange)="validateField()"
-        (focus)="closeDatepicker()"
-        [class.invalid]="timeValidationFailed"
-        [class.invalid-question]="isInvalid && (!inLine || !selectedTime)"
-        container="body"
-        placement="top"
-        [disabled]="disableEdit"
-      />
-
-      <i
-        id="startDateIcon"
-        class="fa-solid fa-clock text-primary fs-6 clock-icon"
-        (click)="fullTime4.open()"
-        style="cursor: pointer"
-      ></i>
-      <ngx-material-timepicker #fullTime4></ngx-material-timepicker>
-    </div>
-    <!-- <div *ngIf="isInvalid" class="error-message"> -->
-    <div *ngIf="isInvalid && (!inLine || !selectedTime)" class="error-message">
-      {{ errorMessage }}
-    </div>
-    <div
-      *ngIf="(validationFailed || timeValidationFailed)  && !isInvalid"
-      class="text-danger mt-2"
-    >
-      {{ validationMessage }}
-    </div>
-  </ng-container>
-
-  <ng-container *ngIf="dateType === 'DATE_RANGE'">
-    <!-- Date range picker -->
-    <div class="input-container">
-      <input
-        type="text"
-        class="form-control height"
-        #daterangepicker="bsDaterangepicker"
-        bsDaterangepicker
-        placeholder="Select date"
-        [minDate]="minDate"
-        [maxDate]="maxDate"
-        [bsConfig]="{
-          rangeInputFormat: format,
-          dateInputFormat: format,
-          containerClass: 'theme-custom',
-          displayOneMonthRange: true
-        }"
-        [(ngModel)]="selectedDateRange"
-        (blur)="validateField()"
-        (ngModelChange)="validateField()"
-        [class.invalid]="validationFailed"
-        [class.invalid-question]="isInvalid && (!inLine || !selectedDateRange)"
-        container="body"
-        placement="top"
-        [disabled]="disableEdit"
-      />
-      <i
-        class="fa-solid fa-calendar-days calendar-icon text-primary fs-5"
-        (click)="openDateRangePicker()"
-      ></i>
-    </div>
-    <div *ngIf="isInvalid && (!inLine || !selectedDateRange)" class="error-message">
-      {{ errorMessage }}
-    </div>
-    <div *ngIf="validationFailed && !isInvalid" class="text-danger mt-2">
-      {{ validationMessage }}
-    </div>
-  </ng-container>
-</div>

package/src/form-fields/date-time-fields/date-time-fields.component.scss

@@ -1,88 +0,0 @@
-@import '../../styles/shared-style.scss';
-
-
-.input-container {
-  position: relative;
-}
-
-.input-container .form-control {
-  padding-right: 30px; 
-}
-
-.input-container .calendar-icon {
-  position: absolute;
-  top: 50%;
-  right: 10px;
-  transform: translateY(-50%);
-  cursor: pointer;
-}
-
-.clock-icon {
-  position: absolute;
-  top: 50%;
-  right: 10px;
-  transform: translateY(-50%);
-  cursor: pointer;
-}
-.appearanceInput{
- background-color: #fff;
-}
-
-::ng-deep ngx-material-timepicker-content{
-  --body-background-color: #fff;
-  --button-color: #08bff6 !important;
-  --dial-active-color: #fff;
-  --dial-inactive-color: rgba(255, 255, 255, .5);
-  --dial-background-color: #08bff6 !important;
-  --dial-editable-active-color: #08bff6!important;
-  --dial-editable-background-color: #fff;
-  --clock-face-time-active-color: #fff;
-  --clock-face-time-inactive-color: #6c6c6c;
-  --clock-face-inner-time-inactive-color: #929292;
-  --clock-face-time-disabled-color: #c5c5c5;
-  --clock-face-background-color: #f0f0f0;
-  --clock-hand-color: #08bff6 !important;
-  position: relative;
-  z-index: 99999999;
-}
-
-::ng-deep ngx-material-timepicker-container {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, .32); /* Black backdrop with opacity */
-  z-index: 99998; /* Behind the timepicker content */
-}
-
-.theme-custom .bs-datepicker-head {
-  background-color: #08bff6 !important;
-}
-
-.timepicker__header{
-  background-color: #08bff6 !important;
-}
-
-.invalid-question {
-  border: 2px solid #f44336; /* Material red */
-  border-radius: 4px;
-  padding: 8px;
-  margin-bottom: 4px;
-}
-
-
-
-.bs-datepicker-body table td span.selected,
-.bs-datepicker-body table td.selected span {
-  color: #fff !important;
-  background-color: #08bff6 !important; 
-  border-radius: 50%; 
-}
-
-.bs-datepicker-body table td span.selected,
-.bs-datepicker-body table td.selected span {
-  color: #fff !important;
-  background-color: #08bff6 !important; 
-  border-radius: 50%; 
-}

package/src/form-fields/date-time-fields/date-time-fields.component.spec.ts

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