master-control 0.2.5 → 0.2.7

package/src/lib/master-control.component.ts

@@ -0,0 +1,143 @@
+import { ButtonComponent } from './button/button.component';
+import { Component, Input, input } from '@angular/core';
+import { TextboxComponent } from './textbox/textbox.component';
+import { SelectComponent } from './select/select.component';
+import { MatSelectModule } from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { RadioComponent } from './radio/radio.component';
+import { ToggleComponent } from './toggle/toggle.component';
+import { UploadComponent } from './upload/upload.component';
+import { DobComponent } from './dob/dob.component';
+import { MobNumberComponent } from './mob-number/mob-number.component';
+import { InfoComponent } from './info/info.component';
+import { CheckboxComponent } from './checkbox/checkbox.component';
+import { TextareaComponent } from './textarea/textarea.component';
+import { TabComponent } from "./tab/tab.component";
+import { AutocompleteComponent } from "./autocomplete/autocomplete.component";
+import { MultipleSelectComponent } from "./multiple-select/multiple-select.component";
+import { SelectTextboxComponent } from './select-textbox/select-textbox.component';
+import { OtpTextboxComponent } from "./otp-textbox/otp-textbox.component";
+import { AmountTextboxComponent } from "./amount-textbox/amount-textbox.component";
+import { SuffixTextboxComponent } from "./suffix-textbox/suffix-textbox.component";
+import { OtpMobNumberComponent } from "./otp-mob-number/otp-mob-number.component";
+import { TagMobNumberComponent } from "./tag-mob-number/tag-mob-number.component";
+import { AgeDateComponent } from "./age-date/age-date.component";
+import { AdditionButtonComponent } from "./addition-button/addition-button.component";
+import { InfoTextboxComponent } from "./info-textbox/info-textbox.component";
+import { TextboxWithImageComponent } from "./textbox-with-image/textbox-with-image.component";
+import { EmailWithDomainComponent } from "./email-with-domain/email-with-domain.component";
+import { ImageUploadComponent } from "./image-upload/image-upload.component";
+import { DownloadDocumentComponent } from "./download-document/download-document.component";
+import { AddDocumentComponent } from "./add-document/add-document.component";
+import { HyperlinkComponent } from "./hyperlink/hyperlink.component";
+import { TextboxWithUnderscoreComponent } from "./textbox-with-underscore/textbox-with-underscore.component";
+import { UnderscoreMobNumberComponent } from "./underscore-mob-number/underscore-mob-number.component";
+import { IconButtonComponent } from "./icon-button/icon-button.component";
+import { FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ImageComponent } from './image/image.component';
+import { StepperComponent } from "./stepper/stepper.component";
+import { CardComponent } from "./card/card.component";
+import { HrLineComponent } from "./hr-line/hr-line.component";
+import { SearchMultiSelectComponent } from "./search-multi-select/search-multi-select.component";
+import { SubscriptTextboxComponent } from "./subscript-textbox/subscript-textbox.component";
+import { LabelComponent } from "./label/label.component";
+import { SubHeaderComponent } from "./sub-header/sub-header.component";
+import { HeaderComponent } from "./header/header.component";
+import { TableComponent } from './table/table.component';
+import { TextboxWithTextComponent } from "./textbox-with-text/textbox-with-text.component";
+import { DiscountComponent } from "./discount/discount.component";
+import { BenefitCardComponent } from "./benefit-card/benefit-card.component";
+import { LoaderComponent } from './loader/loader.component';
+import { WarningSnackbarComponent } from "./warning-snackbar/warning-snackbar.component";
+import { SuccessSnackbarComponent } from "./success-snackbar/success-snackbar.component";
+import { NeutralSnackbarComponent } from "./neutral-snackbar/neutral-snackbar.component";
+import { ErrorSnackbarComponent } from "./error-snackbar/error-snackbar.component";
+import { GreyLabelComponent } from "./grey-label/grey-label.component";
+import { IframeComponent } from "./iframe/iframe.component";
+import { ToggleButtonComponent } from "./toggle-button/toggle-button.component";
+import { PayGetCardComponent } from "./pay-get-card/pay-get-card.component";
+import { InBuiltBenefitComponent } from "./in-built-benefit/in-built-benefit.component";
+import { OtherBenefitsComponent } from "./other-benefits/other-benefits.component";
+import { AnnuityRateLogoComponent } from "./annuity-rate-logo/annuity-rate-logo.component";
+import { DiscountV2Component } from './discount-v2/discount-v2.component';
+import { LabelValueCardComponent } from './label-value-card/label-value-card.component';
+import { MedialQuestionsComponent } from "./medial-questions/medial-questions.component";
+import { PageNudgeComponent } from './page-nudge/page-nudge.component';
+
+@Component({
+  selector: 'lib-master-control',
+  standalone: true,
+  imports: [
+    FormsModule,
+    TextboxComponent,
+    SelectComponent,
+    RadioComponent,
+    ToggleComponent,
+    UploadComponent,
+    DobComponent,
+    MobNumberComponent,
+    InfoComponent,
+    CheckboxComponent,
+    TextareaComponent,
+    ButtonComponent,
+    TabComponent,
+    AutocompleteComponent,
+    MultipleSelectComponent,
+    SelectTextboxComponent,
+    OtpTextboxComponent,
+    AmountTextboxComponent,
+    SuffixTextboxComponent,
+    OtpMobNumberComponent,
+    TagMobNumberComponent,
+    AgeDateComponent,
+    AdditionButtonComponent,
+    InfoTextboxComponent,
+    TextboxWithImageComponent,
+    EmailWithDomainComponent,
+    ImageUploadComponent,
+    DownloadDocumentComponent,
+    AddDocumentComponent,
+    HyperlinkComponent,
+    TextboxWithUnderscoreComponent,
+    UnderscoreMobNumberComponent,
+    IconButtonComponent,
+    ReactiveFormsModule,
+    ImageComponent,
+    StepperComponent,
+    CardComponent,
+    HrLineComponent,
+    SearchMultiSelectComponent,
+    SubscriptTextboxComponent,
+    LabelComponent,
+    SubHeaderComponent,
+    HeaderComponent,
+    TextboxWithTextComponent,
+    DiscountComponent,
+    BenefitCardComponent,
+    TableComponent,
+    LoaderComponent,
+    WarningSnackbarComponent,
+    SuccessSnackbarComponent,
+    NeutralSnackbarComponent,
+    ErrorSnackbarComponent,
+    GreyLabelComponent,
+    IframeComponent,
+    ToggleButtonComponent,
+    PayGetCardComponent,
+    InBuiltBenefitComponent,
+    OtherBenefitsComponent,
+    AnnuityRateLogoComponent,
+    DiscountV2Component,
+    LabelValueCardComponent,
+    MedialQuestionsComponent ,
+    PageNudgeComponent
+],
+  templateUrl: './master-control.component.html',
+  styleUrls: ['./master-control.component.css']
+})
+export class MasterControlComponent {
+  field: any = input.required<any>();
+  @Input() formGroup: FormGroup = new FormGroup({});
+  constructor() {}
+}

package/src/lib/master-control.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { MasterControlService } from './master-control.service';
+
+describe('MasterControlService', () => {
+  let service: MasterControlService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MasterControlService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/master-control.service.ts

@@ -0,0 +1,214 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MasterControlService {
+
+  configData: any = {
+      "iframe": {
+        "URLForIframe": "N"
+      },
+      "loader": {
+        "imageURL": "",
+        "imageAltText": "",
+        "text": "",
+        "imageCSS": {
+          "width": "",
+          "height": "",
+          "borderRadius": "",
+          "boxShadow": ""
+        },
+        "cardCSS": {
+          "width": "100%",
+          "height": "100%",
+          "backgroundColor": "#ffffff",
+          "borderRadius": "0px",
+          "boxShadow": "0px 0px 0px 0px rgba(0, 0, 0, 0)",
+          "alignItems": "center"
+        },
+        "textCSS": {
+          "fontSize": "",
+          "color": "",
+          "textAlign": "",
+          "fontWeight": ""
+        },
+      "loaderCSS": {
+        "display": "flex",
+        "justifyContent": "center",
+        "alignItems": "center",
+        "height": "60px",
+        "gap": "8px",
+        "dot": {
+          "width": "16px",
+          "height": "16px",
+          "background": "#1976d2",
+          "borderRadius": "50%",
+          "display": "inline-block",
+          "animation": "bounce 0.6s infinite alternate"
+        },
+        "dot2": {
+          "animationDelay": "0.2s"
+        },
+        "dot3": {
+          "animationDelay": "0.4s"
+        },
+        "@keyframes bounce": {
+          "to": {
+            "opacity": 0.3,
+            "transform": "translateY(-16px)"
+          }
+        }
+      }
+      },
+      "table": {
+        "showCheckBox": true,
+        "tableHeaders": [],
+        "tdData": [],
+        "showActions": true,
+        "actionOptions": [
+          {
+            "matIconName": "edit",
+            "displayTitle": "Edit",
+            "toolTip": "Edit",
+            "isSelected":true
+          },
+          {
+            "matIconName": "info",
+            "displayTitle": "Info",
+            "toolTip": "Information",
+            "isSelected":true
+          },
+          {
+            "matIconName": "download",
+            "displayTitle": "Download Documents",
+            "toolTip": "Download Document",
+            "isSelected":true
+          },
+          {
+            "matIconName": "notifications_active",
+            "displayTitle": "Send Reminder",
+            "toolTip": "Send Reminder",
+            "isSelected":true
+          },
+          {
+            "matIconName": "link",
+            "displayTitle": "Send Payment Link",
+            "toolTip": "Payment Link",
+            "isSelected":true
+          },
+
+        ],
+        "userSelectedOptions": {},
+        "showPagination": "Y",
+        "rowlength": 3,
+        "columnlength": 4,
+      },
+      "stepper":{
+        "stepperData":[
+        {
+          "defaultId":1,
+          "displayLabel":"stepper-1",
+          "imgIconUrl":'https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/check_circle.svg'
+        },
+        {
+          "defaultId":2,
+          "displayLabel":"stepper-2",
+          "imgIconUrl":'https://cdn.godigit.com/retail-life/check_circle_Endorsment.svg'
+        },
+        {
+          "defaultId":3,
+          "displayLabel":"stepper-3",
+          "imgIconUrl":'https://cdn.godigit.com/retail-life/Endorsement_pending.svg'
+        }
+      ]
+    }
+    }
+
+  snackbars: any = [
+    {
+      "type": "Error",
+      "imageURL": "https://cdn.godigit.com/retail-life/alert-icon-lib.svg",
+      "imageCSS": "toaster-img",
+      "isShowLabel": true,
+      "labelCSS": "toaster-label",
+      "messageCSS": "toaster-msg",
+      "horizontalPosition": "",
+      "verticalPosition": "",
+      "duration": 3000,
+      "closeIconImageURL": "https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/cross.svg",
+      "closeIconCSS": "cross",
+      "labelText":"A error toast",
+      "messageText":"Error message here",
+      'toasterCSS':"error-snackbar-card"
+    },{
+      "type": "Warning",
+      "imageURL": "https://cdn.godigit.com/retail-life/nudge-icon-lib.svg",
+      "imageCSS": "toaster-img",
+      "isShowLabel": true,
+      "labelCSS": "toaster-label",
+      "messageCSS": "toaster-msg",
+      "horizontalPosition": "",
+      "verticalPosition": "",
+      "duration": 3000,
+      "closeIconImageURL": "https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/cross.svg",
+      "closeIconCSS": "cross",
+      "labelText":"A warning toast",
+      "messageText":"Warning message here",
+      "toasterCSS":"warning-snackbar-card"
+    },{
+      "type": "Success",
+      "imageURL": "https://cdn.godigit.com/retail-life/success-info-lib.svg",
+      "imageCSS": "toaster-img",
+      "isShowLabel": true,
+      "labelCSS": "toaster-label",
+      "messageCSS": "toaster-msg",
+      "horizontalPosition": "",
+      "verticalPosition": "",
+      "duration": 3000,
+      "closeIconImageURL": "https://cdn.godigit.com/digitPlusAssets/retail-life-icon/svgicon/cross.svg",
+      "closeIconCSS": "cross",
+      "labelText":"A success toast",
+      "messageText":"Success message here",
+      "toasterCSS":"success-snackbar-card"
+    },{
+      "type": "Neutral",
+      "imageURL": "https://cdn.godigit.com/retail-life/neutral-star-lib-icon.svg",
+      "imageCSS": "neutral-image",
+      "isShowLabel": true,
+      "labelCSS": "neutral-toaster-label",
+      "messageCSS": "neutral-toaster-msg",
+      "horizontalPosition": "",
+      "verticalPosition": "",
+      "duration": 3000,
+      "closeIconImageURL": "https://cdn.godigit.com/retail-life/neutral-cross-lib-icon.svg",
+      "closeIconCSS": "cross",
+      "labelText":"A neutral toast",
+      "messageText":"Neutral message here",
+      "toasterCSS":"neutral-snackbar-card"
+    }
+  ];
+  constructor() { }
+
+  checkIfValueIsEmpty(value: any) {
+    if (typeof value === 'string') {
+      value = value.trim();
+    }
+    return (
+      value === undefined ||
+      value === null ||
+      value === '' ||
+      (value instanceof Array && value.length === 0) ||
+      JSON.stringify(value) === '{}'
+    );
+  }
+
+  saveTableFieldState(tableField: any, key: any = 'tableField') {
+    localStorage.setItem(key, JSON.stringify(tableField));
+  }
+
+  restoreTableFieldState(key: any = 'tableField'): any | null {
+    const data = localStorage.getItem(key);
+    return data ? JSON.parse(data) : null;
+  }
+}

package/src/lib/medial-questions/medial-questions.component.css

@@ -0,0 +1,52 @@
+.map-container {
+  width: 100% ;
+  position: relative;
+}
+
+.address-search-container {
+  position: relative;
+}
+
+.address-search-container input {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  box-sizing: border-box;
+}
+
+.address-search-container input:focus {
+  outline: none;
+  border-color: #4285f4;
+  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
+}
+
+/* Style for Google Places Autocomplete dropdown */
+.pac-container {
+  z-index: 10000 !important;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+}
+
+.pac-item {
+  padding: 10px;
+  border-bottom: 1px solid #eee;
+  cursor: pointer;
+}
+
+.pac-item:hover {
+  background-color: #f5f5f5;
+}
+
+.selected-address {
+  padding: 8px;
+  background-color: #f8f9fa;
+  border-radius: 4px;
+  border-left: 3px solid #28a745;
+}
+
+.map-container ::ng-deep google-map > div {
+  height: 400px !important;
+  width: auto !important;
+}

package/src/lib/medial-questions/medial-questions.component.html

@@ -0,0 +1,250 @@
+
+<div *ngFor="let section of questionList">
+    <div
+      *ngIf="
+        !checkIfValueIsEmpty(section['questions']) &&
+        section['showSection']
+      "
+      class="card p-3 my-2"
+      id="personUwMedicalQuestions"
+    >
+      <h6 class="page-title">
+        {{ getTitleCase(section["sectionName"]) }}
+      </h6>
+      <div *ngFor="let questions of section['questions']">
+        <!-- <div *ngIf="questions['questionType'] === 'IMAGE TEXT'">
+          <img [src]="questions['sampleS3Link']" class="d-block mx-auto" [alt]="questions['title']">
+          <h3 [innerHTML]="questions['questionText']"></h3>
+        </div> -->
+
+        <div
+          class=""
+          *ngIf="
+            questions['questionType'] === 'FREE TEXT' &&
+            questions['cammundaQuestionCode'] !== 'QHT' &&
+            questions['isShowQuestionInUI']
+          "
+        >
+          <label class="card-topic d-block"
+            >{{ questions["questionText"] }}
+            <span
+              *ngIf="
+                questions.optionalQuestion === 'N'
+              "
+              style="color: #ee0000"
+              >&#42;</span
+            >
+          </label>
+          <div class="col-5 px-0">
+            <lib-textbox [(ngModel)]="personUwAnswers[questions.questionId]" [field]="questions['field']" />
+          </div>
+        </div>
+
+        <div
+          class=""
+          *ngIf="
+            questions['questionType'] === 'HEIGHTINPUT' &&
+            questions['cammundaQuestionCode'] === 'QHTF' &&
+            questions['isShowQuestionInUI']
+          "
+        >
+          <label class="card-topic d-block"
+            >Height
+            <span
+              style="color: #ee0000"
+              >&#42;</span
+            >
+          </label>
+          <div
+            class="col-auto px-0 my-0 py-0 heightinput"
+
+          >
+            <div
+              class="col-7 py-0 heightInputs"
+              style="transform: translate(6px, 3px);"
+              *ngIf="
+                personUwAnswers['medicalQuestionsHeightUnit'] === 'CM'
+              "
+            >
+              <lib-textbox [field]="questions['field']"   />
+              <lib-select [(ngModel)]="personUwAnswers['medicalQuestionsHeightUnit']" [field]="medQuestionObj['heightObjectTypes']" />
+            </div>
+            <div
+              class="py-0"
+              style="display: flex;"
+              *ngIf="
+                personUwAnswers[
+                  'medicalQuestionsHeightUnit'
+                ] === 'FEET'
+              "
+            >
+              <div class="col-auto py-0 heightInputs px-1">
+                <lib-select [field]="medQuestionObj['QHTF']['field']" />
+              </div>
+              <div class="col-auto py-0 heightInputs px-1">
+                <lib-select [field]="medQuestionObj['QHTI']['field']" />
+              </div>
+              <div
+                class="col-auto py-0 heightInputs px-1"
+              >
+                <lib-select [(ngModel)]="personUwAnswers['medicalQuestionsHeightUnit']" [field]="medQuestionObj['heightObjectTypes']" />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="row mt-0 pt-0"
+          *ngIf="
+            questions['questionType'] === 'MAP' &&
+            questions['isShowQuestionInUI']
+          "
+        >
+
+
+          <div class="map-container">
+            <div class="address-search-container mb-3">
+
+    <div class="row mb-3">
+      <div class="col-6">
+        <label class="form-label">Longitude</label>
+        <input 
+          type="number" 
+          class="form-control"
+          [(ngModel)]="longitude"
+          placeholder="Enter longitude"
+          step="any"
+          readonly
+        >
+      </div>
+      <div class="col-6">
+        <label class="form-label">Latitude</label>
+        <input 
+          type="number" 
+          class="form-control"
+          [(ngModel)]="latitude"
+          placeholder="Enter latitude"
+          step="any"
+          readonly
+        >
+      </div>
+    </div>
+
+      <input 
+        #addressInput 
+        type="text" 
+        class="form-control"
+        placeholder="Search for address"
+        (keyup)="onAddressInputKeyup($event)"
+        (focus)="showDropdown = true"
+        (blur)="onInputBlur()"
+        autocomplete="off"
+      >
+      <div 
+    *ngIf="showDropdown && addressSuggestions.length > 0" 
+    class="autocomplete-dropdown position-absolute w-100 mt-1"
+    style="z-index: 1000; max-height: 200px; overflow-y: auto; background: white; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);"
+  >
+    <div 
+      *ngFor="let suggestion of addressSuggestions; let i = index"
+      class="dropdown-item p-2"
+      style="cursor: pointer; border-bottom: 1px solid #eee;"
+      (mousedown)="selectAddress(suggestion)"
+      (mouseenter)="hoveredIndex = i"
+      [class.bg-light]="hoveredIndex === i"
+    >
+      <div class="fw-bold">{{ suggestion.main_text }}</div>
+      <small class="text-muted">{{ suggestion.secondary_text }}</small>
+    </div>
+  </div>
+      <small class="text-muted">Start typing to search for addresses</small>
+    </div>
+            <google-map [center]="center" [zoom]="zoom">
+              <map-marker [position]="currentCoordinates"></map-marker>
+            </google-map>
+          </div>
+        </div>
+
+
+        <div
+          class=""
+          *ngIf="
+            (questions['questionType'] === 'RADIO BUTTON' ||
+              questions['questionType'] === 'ADDMORE') &&
+              questions['isShowQuestionInUI']
+          "
+        >
+          <lib-radio [(ngModel)]="personUwAnswers[questions.questionId]" (ngModelChange)="removeSubQuestionValues()" [field]="questions['field']" />
+        </div>
+
+        <div
+          class=""
+          *ngIf="
+            questions['questionType'] === 'CHECKBOX' &&
+            questions['isShowQuestionInUI']
+          "
+        >
+          <lib-multiple-select [(ngModel)]="personUwAnswers[questions.questionId]" (ngModelChange)="removeSubQuestionValues()" [field]="questions['field']" />
+        </div>
+
+        <div
+          class=""
+          *ngIf="
+            questions['questionType'] === 'DECLARATION' &&
+            questions['isShowQuestionInUI']
+          "
+        >
+          <lib-checkbox [(ngModel)]="personUwAnswers[questions.questionId]" (ngModelChange)="removeSubQuestionValues()" [field]="questions['field']" />
+        </div>
+
+        <div
+          class=""
+          *ngIf="
+            questions['questionType'] === 'DROPDOWN' &&
+            questions['isShowQuestionInUI']
+          "
+        >
+          <lib-select [(ngModel)]="personUwAnswers[questions.questionId]" [field]="questions['field']" />
+        </div>
+
+        <div
+          class=""
+          *ngIf="
+            questions['questionType'] === 'CALENDAR' &&
+            questions['isShowQuestionInUI']
+          "
+        >
+          <lib-dob [(ngModel)]="personUwAnswers[questions.questionId]" [field]="questions['field']" />
+        </div>
+
+        <!-- <div
+          class=""
+          *ngIf="
+            questions['questionType'] === 'HEIGHTINPUT' &&
+            questions['cammundaQuestionCode'] === 'QHTF' &&
+            questions['isShowQuestionInUI']
+          "
+        >
+        </div> -->
+        <div
+          class=""
+          *ngIf="
+            questions['questionType'] === 'DOCUPLOAD' &&
+            questions['isShowQuestionInUI']
+          "
+        >
+          <lib-upload [field]="questions['field']" />
+        </div>
+
+
+        <div
+          class=""
+          *ngIf="
+            questions['questionType'] === 'PASSPORT_UPLOAD' &&
+            questions['isShowQuestionInUI']
+          "
+        >
+        <!-- pending -->
+        </div>
+      </div>
+    </div>
+  </div>