master-control 0.2.6 → 0.2.8

package/src/lib/hyperlink/hyperlink.component.css

@@ -0,0 +1,18 @@
+* {
+  font-family: "mulish" !important;
+}
+.hyperlink{
+  font-weight: 700;
+  font-size: 12px;
+  color: #ffbb00;
+}
+.hyperlink{
+  font-size: var(--hyperlink-font-size, 12px) !important;
+  font-weight: var(--hyperlink-font-weight, 700) !important;
+}
+.hyperlink a{
+  color: #ffbb00 !important;
+}
+.hyperlink a{
+   color: var(--hyperlink-font-color, #ffbb00) !important;
+}

package/src/lib/hyperlink/hyperlink.component.html

@@ -0,0 +1,8 @@
+<u *ngIf="field() && field()?.isVisible" class="hyperlink" [ngStyle]="{
+'--hyperlink-font-color': field()?.controlStyle?.color,
+'--hyperlink-font-size': field()?.controlStyle?.fontSize,
+'--hyperlink-font-weight': field()?.controlStyle?.fontWeight
+}">
+  <a href="Hyper_link" *ngIf="field()?.label && field()?.isShowLabel">{{field()?.label}}</a></u
+>
+<img *ngIf="field()?.imageUrl" [src]="field()?.imageUrl" alt="">

package/src/lib/hyperlink/hyperlink.component.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'lib-hyperlink',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './hyperlink.component.html',
+  styleUrl: './hyperlink.component.css'
+})
+export class HyperlinkComponent {
+ field: any = input.required<any>();
+}

package/src/lib/icon-button/icon-button.component.css

@@ -0,0 +1,20 @@
+* {
+  font-family: "mulish" !important;
+}
+.icon-button{
+  border-width: 1px;
+  border-color: #444;
+  border-style: solid;
+  background: #fff;
+  border-radius: 8px;
+  width: 48px;
+  height: 48px;
+}
+.icon-button{
+  border-width: var(--icon-button-border-width , 1px);
+  border-color: var(--icon-button-border-color , #444);
+  border-style: var(--icon-button-border-style , solid);
+  background: var(--icon-button-background ,#fff);
+  border-radius: var(--icon-button-border-radius , 8px);
+  width: var(--icon-button-width , 48px);
+}

package/src/lib/icon-button/icon-button.component.html

@@ -0,0 +1,17 @@
+<Button 
+class="icon-button"
+*ngIf="field() && field()?.isVisible" 
+[ngStyle]="
+{
+    '--icon-button-border-width': field()?.controlStyle?.borderWidth ,
+    '--icon-button-border-style': field()?.controlStyle?.borderStyle ,
+    '--icon-button-border-color': field()?.controlStyle?.borderColor ,
+    '--icon-button-width': field()?.controlStyle?.width ,
+    '--icon-button-background': field()?.controlStyle?.background ,
+    '--icon-button-border-radius': field()?.controlStyle?.borderRadius ,
+}"
+>
+<span>
+<img src="https://cdn.godigit.com/retail-life/Download_Icon.svg">
+</span>
+</Button>

package/src/lib/icon-button/icon-button.component.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'lib-icon-button',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './icon-button.component.html',
+  styleUrl: './icon-button.component.css',
+})
+export class IconButtonComponent {
+  field: any = input.required<any>();
+}

package/src/lib/iframe/iframe.component.html

@@ -0,0 +1,7 @@
+<div *ngIf="field().imageUrl">
+  <iframe [id]="field().fieldName" width="100%" height="500px" style="border: none "></iframe>
+   <!-- <object [data]="field().imageUrl" width="600" height="400">
+    <embed [src]="field().imageUrl" width="600" height="400"/>
+    Error: Embedded data could not be displayed.
+    </object> -->
+</div>

package/src/lib/iframe/iframe.component.ts

@@ -0,0 +1,32 @@
+import { CommonModule } from '@angular/common';
+import { Component, input, OnInit } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+
+@Component({
+  selector: 'lib-iframe',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './iframe.component.html',
+  styleUrl: './iframe.component.css'
+})
+export class IframeComponent implements OnInit {
+  field: any = input.required<any>();
+  safeUrl: SafeResourceUrl | null = null;
+
+  constructor(private sanitizer: DomSanitizer) {}
+
+    ngOnInit() {
+      if (this.field() && this.field().imageUrl) {
+        this.safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.field().imageUrl);
+      }
+    }
+
+    getIframeUrl() {
+      let iframeUrl : any = null;
+      if (this.field() && this.field().imageUrl) {
+        iframeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.field().imageUrl);
+      }
+      return iframeUrl;
+    }
+
+}

package/src/lib/image/image.component.css

@@ -0,0 +1,7 @@
+* {
+  font-family: "mulish" !important;
+}
+.image-width{
+  width: var(--image-width , 100%);
+  height: 100%;
+}

package/src/lib/image/image.component.html

@@ -0,0 +1,3 @@
+<div>
+  <img [src]="field()['imageUrl']" class="image-width" [ngStyle]="{'--image-width' : field()?.controlStyle?.width}"/>
+</div>

package/src/lib/image/image.component.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { Component, input } from '@angular/core';
+
+@Component({
+  selector: 'lib-image',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './image.component.html',
+  styleUrl: './image.component.css'
+})
+export class ImageComponent {
+  field: any = input.required<any>();
+}

package/src/lib/image-upload/image-upload.component.css

@@ -0,0 +1,67 @@
+* {
+  font-family: "mulish" !important;
+}
+.field-lable{
+  font-size: 10px !important;
+  font-weight: 700 !important;
+  color: #444 !important;
+  margin-bottom: 0px !important;
+}
+.upload-label{
+  opacity: 0;
+}
+.upload-btn {
+  width: 100% !important;
+  height: 48px !important;
+  padding: 10px;
+  border-radius: 8px;
+}
+.upload-btn {
+  width: var(--upload-width , 100%) !important;
+  border-radius: var(--upload-border-radius , 8px) !important;
+}
+.lightbackground {
+  border-color:  #999;
+  border-width: 1px;
+  border-style: dashed;
+  background: #ffffff;
+  color: #444;
+  font-size: 14px;
+  font-weight: 700;
+}
+.lightbackground {
+  border-color:  var(--upload-border-color , #999) !important;
+  border-width: var(--upload-border-width , 1px) !important;
+  border-style: var(--upload-border-style , dashed) !important;
+  background: var(--upload-background-color , #ffffff) !important;
+}
+.successBackground {
+  border-color:  var(--upload-focus-border-color , #ddd) !important;
+  background: var(--upload-focus-background-color , #fafafa) !important;
+  color: var(--upload-focus-font-color , #444) !important;
+}
+.upload-icon {
+  display: flex;
+  justify-content: center;
+  gap: 7px;
+}
+.upload-text{
+  color: #444 !important;
+  font-weight: 700 !important;
+  font-size: 14px !important;
+}
+.upload-text{
+  color: var(--upload-font-color , #444) !important;
+  font-size: var( --upload-font-size , 14px) !important;
+  font-weight: var(--upload-font-weight , 700) !important;
+}
+.right-icon {
+  display: flex;
+  gap: 10px;
+  margin-left: 0.5em;
+}
+.left-icon {
+  display: flex;
+  gap: 15px;
+  margin-right: 1em;
+}

package/src/lib/image-upload/image-upload.component.html

@@ -0,0 +1,61 @@
+
+<label class="field-lable upload-label" *ngIf="field() && field()?.isVisible && field()?.isShowLabel">{{field()?.label}}</label>
+  <input
+    hidden
+    [type]="field()?.controlType"
+    #fileInput
+    (click)="(fileInput.value)"
+    [required]="field()?.validators?.isRequired"
+  />
+  <button
+    type="button"
+    class="upload-btn"
+    (click)="fileInput.click()"
+    [ngClass]="field()?.label ? 'lightbackground' : 'successBackground'"
+    *ngIf="field() && field()?.isVisible"
+    [ngStyle]="{
+'--upload-width': field()?.controlStyle?.width ,
+'--upload-border-radius': field()?.controlStyle?.borderRadius ,
+'--upload-border-color': field()?.controlStyle?.borderColor ,
+'--upload-border-width': field()?.controlStyle?.borderWidth ,
+'--upload-border-style': field()?.controlStyle?.borderStyle ,
+'--upload-background-color': field()?.controlStyle?.background ,
+'--upload-focus-border-color': field()?.controlStyle?.focusBorderColor ,
+'--upload-focus-background-color': field()?.controlStyle?.focusBackground ,
+}"
+  >
+    <ng-container *ngIf="field()?.label; else policyHolderPanFileNotEmpty">
+      <span class="upload-icon">
+        <span
+          ><img
+            src="https://cdn.godigit.com/retail-life/Upload_Icon.svg"
+            alt=""
+            class="mb-1"
+        /></span>
+        <span class="upload-text"  [ngStyle]="{
+'--upload-font-color': field()?.controlStyle?.color ,
+'--upload-font-size': field()?.controlStyle?.fontSize ,
+'--upload-font-weight': field()?.controlStyle?.fontWeight,
+'--upload-focus-font-color': field()?.controlStyle?.focusColor ,
+}">{{ field()?.label }}</span>
+      </span>
+    </ng-container>
+    <ng-template #policyHolderPanFileNotEmpty>
+      <span class="mt-2 right-icon">
+        <span
+          ><img src="https://cdn.godigit.com/retail-life/Tickmark.svg" alt=""
+        /></span>
+        <span title="uploaded file">uploaded file</span>
+      </span>
+      <div class="mt-2 left-icon">
+        <span
+          ><img
+            src="https://cdn.godigit.com/retail-life/visibility-oui.svg"
+            alt=""
+        /></span>
+        <span
+          ><img src="https://cdn.godigit.com/retail-life/delete-oui.svg" alt=""
+        /></span>
+      </div>
+    </ng-template>
+  </button>

package/src/lib/image-upload/image-upload.component.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { Component, input } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'lib-image-upload',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule
+  ],
+  templateUrl: './image-upload.component.html',
+  styleUrl: './image-upload.component.css'
+})
+export class ImageUploadComponent {
+ field : any = input.required<any>();
+}

package/src/lib/in-built-benefit/in-built-benefit.component.css

@@ -0,0 +1,58 @@
+.in-built-card {
+  max-width: var(--inbuilt-card-width, 757px) !important;
+  min-height: 114px;
+  border-radius: var(--inbuilt-card-border-radius, 12px) !important;
+  border: 1px solid #0bb68b;
+  border-color: var(--inbuilt-card-border-color, #0bb68b) !important;
+  border-width: var(--inbuilt-card-border-width, 1px) !important;
+  background: var(--inbuilt-card-bg-color, #e6f7f3) !important;
+  padding: 12px 16px 12px 16px;
+  position: relative;
+}
+.premium-header {
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: 0px;
+  line-height: 18px;
+  color: #444;
+}
+.benefit-text {
+  font-size: 12px;
+  color: #696969;
+  font-weight: 700;
+  letter-spacing: 0%;
+  line-height: 16px;
+}
+.premium {
+  font-size: 12px;
+  padding: 4px 16px 4px 16px;
+  border-radius: 4px;
+  height: 24px;
+  width: 113px;
+  background: #ffffff;
+  color: #444;
+}
+.normal-text {
+  font-weight: 400;
+}
+.bold-text {
+  font-weight: 700;
+}
+.top-benefit-card {
+  border-radius: 25px;
+  background: #fff;
+  border: 1px solid #ececec;
+  height: 26px;
+  width: 114px;
+  padding: 0px 6px 5px 12px;
+  font-size: 12px;
+  font-weight: 400;
+  color: #444444;
+  letter-spacing: 0%;
+  position: absolute;
+  transform: translate(-6em, -2.2em);
+}
+.top-box {
+  position: absolute;
+  text-align: center;
+}

package/src/lib/in-built-benefit/in-built-benefit.component.html

@@ -0,0 +1,30 @@
+<div class="d-flex in-built-card"
+ [ngStyle]="{
+'--inbuilt-card-border-color': field()?.controlStyle?.borderColor ,
+'--inbuilt-card-border-width': field()?.controlStyle?.borderWidth ,
+'--inbuilt-card-border-radius': field()?.controlStyle?.borderRadius ,
+'--inbuilt-card-bg-color': field()?.controlStyle?.background ,
+'--inbuilt-card-width': field()?.controlStyle?.width ,
+ }"
+>
+  <p class="w-100 top-box">
+    <span class="top-benefit-card">In-built Benefit</span>
+  </p>
+  <div>
+    <span class="premium-header">Return of Premium</span> <br />
+    <span class="benefit-text normal-text"
+      >Customer can get their premiums back on
+      <b class="bold-text"
+        >diagnosis of Critical Illness (CI) or Total and Permanent Disability
+        (TPD) before the age of 80.</b
+      ></span
+    >
+    <br />
+    <span class="premium"
+      ><b>{{ premiumAmount }}</b> ({{ premiumAmountShort }})</span
+    >
+  </div>
+  <div class="m-auto">
+    <img *ngIf="field()?.imageUrl" [src]="field().imageUrl" alt="" />
+  </div>
+</div>

package/src/lib/in-built-benefit/in-built-benefit.component.ts

@@ -0,0 +1,16 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, input } from '@angular/core';
+
+@Component({
+  selector: 'lib-in-built-benefit',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './in-built-benefit.component.html',
+  styleUrl: './in-built-benefit.component.css',
+})
+export class InBuiltBenefitComponent {
+  field: any = input.required<any>();
+
+  @Input() premiumAmount: any = '₹1,00,000';
+  @Input() premiumAmountShort: any = '1L';
+}

package/src/lib/info/info.component.css

@@ -0,0 +1,25 @@
+* {
+  font-family: "mulish" !important;
+}
+.info-background {
+  background: var(--custom-info-bg-color , #FFFBE5) !important;
+  border-radius: var(--custom-info-border-radius, 8px);
+  line-height: 20.08px;
+  padding: 12px 16px 12px 16px;
+  border-width: 1px solid var(--custom-info-border-width, 1px);
+  border-color: 1px solid var(--custom-info-border-color, #FFBB0033);
+  border-style: 1px solid var(--custom-info-border-style, solid);
+  color: var(--custom-info-font-color, #444);
+  font-weight: var(--custom-info-font-weight, 600); 
+  font-size: var(--custom-info-font-size, 12px) ;
+}
+.info-nudge-image{
+ height: 25px;
+ margin-right: 5px;
+}
+.info-nudge-text{
+  font-size: var(--custom-info-font-size, 16px);
+  font-family: var(--custom-info-font-family, 'Mulish');
+  font-weight: var(--custom-info-font-weight, 600);
+  color: var(--custom-info-font-color, #444);
+}

package/src/lib/info/info.component.html

@@ -0,0 +1,21 @@
+<div class="info-background" *ngIf="field() && field()?.isVisible" [ngStyle]="{
+  '--custom-info-bg-color': field()?.controlStyle?.background ,
+  '--custom-info-border-radius': field()?.controlStyle?.borderRadius,
+  '--custom-info-border-width': field()?.controlStyle?.borderWidth,
+  '--custom-info-border-color': field()?.controlStyle?.borderColor,
+  '--custom-info-border-style': field()?.controlStyle?.borderStyle,
+  }">
+  <span>
+    <img
+      class="info-nudge-image mb-1"
+      [src]="field()?.controlStyle?.nudgeDisplayImage"
+      alt=""
+    />
+    <span class="info-nudge-text" [ngStyle]="{
+  '--custom-info-font-size': field()?.controlStyle?.fontSize ,
+  '--custom-info-font-weight': field()?.controlStyle?.fontWeight ,
+  '--custom-info-font-family': field()?.controlStyle?.fontFamily ,
+  '--custom-info-font-color': field()?.controlStyle?.color ,
+  }">{{ field()?.label }}</span>
+  </span>
+</div>

package/src/lib/info/info.component.ts

@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { Component, input } from '@angular/core';
+import { MasterControlService } from '../master-control.service';
+
+@Component({
+  selector: 'lib-info',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './info.component.html',
+  styleUrl: './info.component.css'
+})
+export class InfoComponent {
+  constructor(public masterService : MasterControlService){}
+  field: any = input.required<any>();
+}

package/src/lib/info-textbox/info-textbox.component.css

@@ -0,0 +1,121 @@
+.field-lable{
+  font-size: 10px !important;
+  font-weight: 700 !important;
+  color: #444 !important;
+  margin-bottom: 0px !important;
+}
+.info-label{
+  display: flex;
+  justify-content: space-between;
+}
+.error-message{
+  color: red;
+}
+* {
+  font-family: "mulish" !important;
+}
+
+/* focus css for mat-form-field */
+  ::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused
+  .mat-mdc-notch-piece {
+  border-color:  var(--custom-border-color-focus, #ffbb00) !important;
+  border-width: var(--custom-border-width-focus, 1.5px) !important;
+}
+
+::ng-deep .mat-mdc-form-field {
+ background-color: var(--custom-bg-color, #ffffff) !important;
+ border-radius: var(--custom-border-radius ,  7px) !important;
+}
+
+/* hover css for mat-form-field */
+
+::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
+    .mdc-text-field--focused
+  ):hover
+  .mdc-notched-outline
+  .mdc-notched-outline__leading {
+    border-color:  var(--custom-border-color-hover, #ffbb00) !important;
+    border-width: var(--custom-border-width-hover, 1.5px) !important;
+  }
+
+::ng-deep   .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
+    .mdc-text-field--focused
+  ):hover
+  .mdc-notched-outline
+  .mdc-notched-outline__notch {
+    border-color:  var(--custom-border-color-hover, #ffbb00) !important;
+    border-width: var(--custom-border-width-hover, 1.5px) !important;
+  }
+
+::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(
+    .mdc-text-field--focused
+  ):hover
+  .mdc-notched-outline
+  .mdc-notched-outline__trailing {
+    border-color:  var(--custom-border-color-hover, #ffbb00) !important;
+    border-width: var(--custom-border-width-hover, 1.5px) !important;
+  }
+
+/* regular css for mat-form-field */
+ ::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece {
+  border-color:  var(--custom-border-color, #dddddd) !important;
+  border-width: var(--custom-border-width, 1.5px) !important;
+}
+
+/* field css for mat-form-input-field */
+::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled)
+  .mdc-text-field__input {
+  caret-color: var(--custom-caret-color, #ffbb00) !important;
+  /* font-size: var(--custom-font-size, 16px) !important; */
+  font-size: 12px !important;
+  font-weight: var(--custom-font-weight, 400) !important;
+  font-family: var(--custom-font-family, 'Mulish') !important;
+  color: var(--custom-font-color, #444444) !important;
+}
+/* Error state for mat-form-field */
+::ng-deep .mat-form-field-invalid
+  .mdc-text-field--outlined .mat-mdc-notch-piece {
+    border-color:  var(--custom-border-color-error, red) !important;
+    border-width: var(--custom-border-width-error, 1.5px) !important;
+}
+
+::ng-deep .mat-mdc-form-field.mat-form-field-disabled{
+ background: var(--custom-bg-color-disabled, #ECECEC) !important;
+}
+::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input {
+  color : var(--custom-font-color-disabled, #999999) !important;
+}
+::ng-deep .mdc-label {
+    color: var(--custom-font-color, #444) !important;
+    font-size: var(--custom-font-size, 16px) !important;
+    font-weight: var(--custom-font-weight, 400) !important;
+    font-family: var(--custom-font-family, 'Mulish') !important;
+}
+::placeholder {
+  color: #8f8f8f !important;
+  font-size: 12px !important;
+}
+::ng-deep .mat-mdc-form-field-hint-wrapper{
+  padding: 0px !important;
+ }
+::ng-deep .mat-mdc-form-field-error-wrapper{
+  padding: 0px !important;
+ }
+ ::ng-deep .mat-mdc-form-field-error{
+  color: #EE0000 !important;
+  font-size: 12px;
+  font-weight: 500;
+  font-family: "Mulish" !important;
+  letter-spacing: 0;
+ }
+::ng-deep .mdc-text-field--outlined {
+  --mdc-outlined-text-field-container-shape: var(--custom-border-radius ,  7px) !important;
+}
+::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece {
+    border-color:  var(--custom-border-color-error, red) !important;
+    border-width: var(--custom-border-width-error, 1.5px) !important;
+}
+
+::ng-deep .mat-mdc-form-field-subscript-wrapper {
+  display: none !important;
+}