master-control 0.2.5 → 0.2.7

package/src/lib/otp-mob-number/otp-mob-number.component.ts

@@ -0,0 +1,54 @@
+import { CommonModule } from '@angular/common';
+import { Component, input } from '@angular/core';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'lib-otp-mob-number',
+  standalone: true,
+  imports: [
+    MatInputModule,
+    MatFormFieldModule,
+    CommonModule,
+    ReactiveFormsModule
+  ],
+  templateUrl: './otp-mob-number.component.html',
+  styleUrl: './otp-mob-number.component.css',
+  providers: [
+      {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: OtpMobNumberComponent,
+        multi: true
+      }
+    ]
+})
+export class OtpMobNumberComponent {
+  CountryCode: any = '+91';
+  field: any = input.required<any>();
+  inputValue: any = null;
+  reactiveFormControlobject : any = input<any>();
+  _onChange: any = (inputValue:any) => {};
+  _unTouched: any = () => {};
+
+  writeValue(obj: any): void{
+    this.inputValue=obj;
+  };
+  registerOnChange(fn: any): void{
+    this._onChange = fn;
+  };
+  registerOnTouched(fn: any): void{
+    this._unTouched = fn;
+  };
+  setDisabledState?(isDisabled: boolean): void{};
+
+  onInputChange(event: any): void {
+    this.inputValue = event.target.value;
+    this._onChange(this.inputValue);
+  }
+
+  onInputBlur(): void {
+    this._unTouched();
+  }
+}

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

@@ -0,0 +1,168 @@
+.field-lable{
+  font-size: 10px !important;
+  font-weight: 700 !important;
+  color: #444 !important;
+  margin-bottom: 0px !important;
+}
+.get-otp{
+  padding: 4px 8px 6px 12px;
+  background: #ffbb00;
+  color: #444;
+  font-weight: 600;
+  font-size: 12px;
+  border-radius: 24px;
+  height: 24px;
+  width: 71px;
+  display: inline-flex;
+}
+.error-message{
+  color: red;
+}
+
+.verity-otp{
+  border-radius: 24px;
+  border: 1px solid #444;
+  background: #fff;
+  padding: 13px 8px 8px 8px;
+  width: 58px;
+  height: 28px;
+  font-size: 12px;
+  letter-spacing: 0;
+  font-weight: 700;
+  color: #444;
+}
+.checkbox-tag{
+  font-size: 10px;
+  font-weight: 700;
+  color: #444;
+  margin-right: 5px;
+}
+* {
+  font-family: "mulish" !important;
+}
+
+.checkbox{
+  padding: 4px 8px 3px 0px;
+  background: #f5f5f5;
+  border-radius: 4px;
+  margin-right: 8px;
+}
+
+.optional-checkbox.mat-mdc-checkbox label{
+  font-size: 10px !important;
+  font-weight: 700 !important;
+  color: #444 !important;
+  padding: 0px !important;
+  margin-bottom: 2px;
+}
+.optional-checkbox .mdc-checkbox{
+  flex: 0 0 12px !important;
+}
+.optional-checkbox, .mdc-checkbox__background{
+  transform: translate(-2px, -1px);
+}
+
+/* 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;
+}

package/src/lib/otp-textbox/otp-textbox.component.html

@@ -0,0 +1,84 @@
+<label class="field-lable" *ngIf="field() && field()?.isVisible && field().isShowLabel"
+  >{{ field()?.label
+  }}<span style="color: red" *ngIf="field() && field()?.validators?.isRequired"
+    >*</span
+  ></label
+>
+<mat-form-field class="w-100" appearance="outline" [ngStyle]="{
+'--custom-border-color': field()?.controlStyle?.borderColor ,
+'--custom-border-width': field()?.controlStyle?.borderWidth ,
+'--custom-border-radius': field()?.controlStyle?.borderRadius ,
+'--custom-bg-color': field()?.controlStyle?.background ,
+'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,
+'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,
+'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,
+'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,
+'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,
+'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,
+'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,
+'--custom-font-size': field()?.controlStyle?.fontSize ,
+'--custom-font-weight': field()?.controlStyle?.fontWeight ,
+'--custom-font-family': field()?.controlStyle?.fontFamily ,
+'--custom-font-color': field()?.controlStyle?.color ,
+'--custom-caret-color': field()?.controlStyle?.caretColor ,
+'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,
+'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,
+}">
+ @if(reactiveFormControlobject()) {
+  <input
+    matInput
+    autocomplete="none"
+    [type]="field()?.controlType"
+    [name]="field()?.fieldName"
+    [id]="field()?.fieldName"
+    [placeholder]="field()?.placeHolder"
+    [maxLength]="field()?.validators?.maxLength"
+    [minLength]="field()?.validators?.minLength"
+    [disabled]="field()?.isDisable"
+    [required]="field()?.validators?.isRequired"
+    [pattern]="field()?.validators?.pattern"
+    (input)="onInputChange($event)"
+    (blur)="onInputBlur()"
+    [value]="inputValue"
+    [formControl]="reactiveFormControlobject()"
+  />
+ }@else {
+  <input
+    matInput
+    autocomplete="none"
+    [type]="field()?.controlType"
+    [name]="field()?.fieldName"
+    [id]="field()?.fieldName"
+    [placeholder]="field()?.placeHolder"
+    [maxLength]="field()?.validators?.maxLength"
+    [minLength]="field()?.validators?.minLength"
+    [disabled]="field()?.isDisable"
+    [required]="field()?.validators?.isRequired"
+    [pattern]="field()?.validators?.pattern"
+    (input)="onInputChange($event)"
+    (blur)="onInputBlur()"
+    [value]="inputValue"
+  />
+ }
+  <mat-error *ngIf="false">
+    {{ field()?.validators?.requiredMessage }}
+  </mat-error>
+  <div matSuffix class="get-otp mx-2">
+    <span class="mt-2">Get OTP</span>
+  </div>
+  <div matSuffix class="verity-otp mx-2" *ngIf="false">
+    <span class="mx-1">Verify</span>
+  </div>
+  <span matSuffix class="mx-3" *ngIf="false">
+    <img src="https://cdn.godigit.com/retail-life/check-circle-ou.svg" alt="" />
+  </span>
+</mat-form-field>
+<div >
+  <span class="checkbox-tag">Tag as:</span>
+  <span *ngFor="let options of field()?.options" class="checkbox">
+    <mat-checkbox class="optional-checkbox">
+      {{options.label}}
+    </mat-checkbox>
+  </span>
+</div>
+

package/src/lib/otp-textbox/otp-textbox.component.ts

@@ -0,0 +1,57 @@
+import { Component, input } from '@angular/core';
+import { MatInputModule } from '@angular/material/input';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { CommonModule } from '@angular/common';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatSelectModule } from '@angular/material/select';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'lib-otp-textbox',
+  standalone: true,
+  imports: [
+    MatInputModule,
+    MatFormFieldModule,
+    CommonModule,
+    MatCheckboxModule,
+    MatSelectModule,
+    ReactiveFormsModule
+  ],
+  templateUrl: './otp-textbox.component.html',
+  styleUrl: './otp-textbox.component.css',
+  providers: [
+      {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: OtpTextboxComponent,
+        multi: true
+      }
+    ]
+})
+export class OtpTextboxComponent {
+constructor(){}
+  field : any = input.required<any>();
+   inputValue: any = null;
+   reactiveFormControlobject : any = input<any>();
+  _onChange: any = (inputValue:any) => {};
+  _unTouched: any = () => {};
+
+  writeValue(obj: any): void{
+    this.inputValue=obj;
+  };
+  registerOnChange(fn: any): void{
+    this._onChange = fn;
+  };
+  registerOnTouched(fn: any): void{
+    this._unTouched = fn;
+  };
+  setDisabledState?(isDisabled: boolean): void{};
+
+  onInputChange(event: any): void {
+    this.inputValue = event.target.value;
+    this._onChange(this.inputValue);
+  }
+
+  onInputBlur(): void {
+    this._unTouched();
+  }
+}

package/src/lib/page-nudge/page-nudge.component.css

@@ -0,0 +1,35 @@
+.nudge-container{
+width: var(--page-nudge-width , auto) !important;
+height: var(--page-nudge-height , auto);
+opacity: 1;
+padding: 16px;
+background: var(--page-nudge-bg , #F5F5F5);
+border-radius: var(--page-nudge-border-radius , 4px);
+border-width: var(--page-nudge-border-width , 1px);
+border-color:  var(--page-nudge-border-color , #DDDDDD);
+border-style:  var(--page-nudge-border-style , solid);
+position: relative;
+}
+
+.page-fold {
+    width: 0;
+    height: 0;
+    border-top: 12px solid transparent;
+    border-right: 12px solid #DDD;
+    border-bottom: 12px solid transparent;
+    position: absolute;
+    right: 6px;
+    transform: rotate(45deg);
+    bottom: 0px;
+}
+.page-fold-below{
+    width: 0;
+    height: 0;
+    border-top: 16px solid transparent;
+    border-left: 15px solid #ffffff;
+    border-bottom: 15px solid transparent;
+    position: absolute;
+    right: -4px;
+    transform: rotate(45deg);
+    bottom: -12px;
+}

package/src/lib/page-nudge/page-nudge.component.html

@@ -0,0 +1,13 @@
+<div class="nudge-container" *ngIf="field() && field()?.isVisible" [ngStyle]="{
+'--page-nudge-width': field()?.controlStyle?.borderColor ,
+'--page-nudge-height': field()?.controlStyle?.borderWidth ,
+'--page-nudge-bg': field()?.controlStyle?.borderRadius ,
+'--page-nudge-border-radius': field()?.controlStyle?.background ,
+'--page-nudge-border-width': field()?.controlStyle?.focusBorderColor ,
+'--page-nudge-border-color': field()?.controlStyle?.focusBorderWidth ,
+'--page-nudge-border-style': field()?.controlStyle?.focusBackground
+}">
+  {{ field()?.label }}
+    <div class="page-fold"></div>
+    <div class="page-fold-below"></div>
+</div>

package/src/lib/page-nudge/page-nudge.component.ts

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

package/src/lib/pay-get-card/pay-get-card.component.css

@@ -0,0 +1,36 @@
+.pay-card {
+  max-width: var(--pay-card-width , 296px) !important;
+  max-height: 62px;
+  border: 1px solid #f5f5f5;
+  border-radius: var(--pay-card-border-radius , 8px) !important;
+  background-color: var(--pay-card-bg-color , #f5f5f5) !important; 
+  padding: 2px 4px 10px 10px;
+  border-color: var(--pay-card-border-color , #f5f5f5) !important;
+  border-width:  var(--pay-card-border-width , none) !important;
+}
+.grey-label {
+  font-size: 12px;
+  font-weight: 700;
+  color: #696969;
+  line-height: 16px;
+}
+.bold-label {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 20px;
+  color: #444;
+}
+.light-label {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  color: #000;
+}
+.premium-card {
+  background: #ffffff;
+  padding: 0px 6px 6px 6px;
+  height: 54px;
+  width: 187px;
+  border-radius: 4px;
+  text-align: center;
+}

package/src/lib/pay-get-card/pay-get-card.component.html

@@ -0,0 +1,20 @@
+<div
+  class="d-flex justify-content-between pay-card"
+  [ngStyle]="{
+'--pay-card-border-color': field()?.controlStyle?.borderColor ,
+'--pay-card-border-width': field()?.controlStyle?.borderWidth ,
+'--pay-card-border-radius': field()?.controlStyle?.borderRadius ,
+'--pay-card-bg-color': field()?.controlStyle?.background ,
+'--pay-card-width': field()?.controlStyle?.width ,
+ }"
+>
+  <div class="text-center mx-2">
+    <span class="bold-label">Pay</span> <br />
+    <span class="grey-label">{{payAmount}}</span>
+  </div>
+  <div class="premium-card">
+    <span class="light-label"><b class="bold-label">{{premiumAmount}}</b>/ {{frequency}}</span>
+    <br />
+    <span class="grey-label">for {{ptValue}} years (till {{years}})</span>
+  </div>
+</div>

package/src/lib/pay-get-card/pay-get-card.component.ts

@@ -0,0 +1,18 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, input } from '@angular/core';
+
+@Component({
+  selector: 'lib-pay-get-card',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './pay-get-card.component.html',
+  styleUrl: './pay-get-card.component.css'
+})
+export class PayGetCardComponent {
+field: any = input.required<any>();
+ @Input() payAmount: any = '₹6,00,000';
+ @Input() premiumAmount: any= '₹10,000';
+ @Input() ptValue: any= 5;
+ @Input() years: any= '2030';
+ @Input() frequency: any= 'month';
+}

package/src/lib/radio/radio.component.css

@@ -0,0 +1,57 @@
+.radio-selection-border {
+  border: 1px solid #ffbb00 !important;
+  background: #fffaeb !important;
+}
+* {
+  font-family: "mulish" !important;
+}
+.field-lable{
+  font-size: 10px !important;
+  font-weight: 700 !important;
+  color: #444 !important;
+  margin-bottom: 0px !important;
+}
+.error-message{
+  color: red;
+}
+.radio-btn-group {
+  display: flex;
+  gap: 6px;
+  height: 32px;
+}
+::ng-deep .radio-btn-gender .mdc-form-field .mdc-radio {
+  display: none !important;
+}
+.radio-card-gender {
+  box-shadow: none;
+  border-color : var(--radio-button-border-color,#DADADA);
+  border-width : var(--radio-button-border-width, 1px solid);
+  background: var(--radio-button-background-color, #FFFFFF);
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  width: max-content !important;
+  border-radius: var(--radio-button-border-radius, 6px);;
+}
+::ng-deep .radioButtonGender .mdc-form-field .mdc-radio {
+  display: none !important;
+}
+.forRadioLabel {
+  font-size: var(--radio-button-font-size, 12px) !important;
+  font-weight: var(--radio-button-font-weight, 400);
+  cursor: pointer;
+  color: var(--radio-button-font-color, #444444);
+}
+.radio-btn-icon{
+  margin-top: -2px;
+  margin-left: 4px;
+}
+.selected-radio-btn {
+  border: 1px solid #ffbb00 !important;
+}
+.disable-radio-btn {
+  background: rgba(245, 245, 245, 1);
+  border: 1px solid var(--Colors-Greys-Border-Grey, rgba(221, 221, 221, 1));
+  pointer-events: none;
+  cursor: none;
+}

package/src/lib/radio/radio.component.html

@@ -0,0 +1,37 @@
+<label class="field-lable"  *ngIf="field() && field()?.isVisible && field().isShowLabel" [ngStyle]="{
+  }"> {{field()?.label}} <span class="error-message" *ngIf="field()?.validators?.isRequired">*</span> </label>
+  <mat-radio-group class="w-100" *ngIf="field() && field()?.isVisible"
+    class="radio-btn-group radio-btn-gender"
+    [required]="field()?.validators?.isRequired"
+    [value]="inputValue"
+    >
+    <div
+      class="card radio-card-gender  py-auto px-1"
+      *ngFor="let data of field()?.options"
+      [ngClass]="{'disable-radio-btn': field()?.isDisable}"
+       [ngStyle]="{
+    '--radio-button-border-color': inputValue === data.value ? field()?.controlStyle?.focusBorderColor : field()?.controlStyle?.borderColor,
+    '--radio-button-background-color': inputValue === data.value ? field()?.controlStyle?.focusBackground : field()?.controlStyle?.background,
+    '--radio-button-border-width': inputValue === data.value ? field()?.controlStyle?.focusBorderWidth : field()?.controlStyle?.borderWidth,
+    '--radio-button-border-radius': inputValue === data.value ? field()?.controlStyle?.borderRadius : field()?.controlStyle?.borderRadius,
+  }"
+      >
+      <mat-radio-button
+        style="min-width: 72px; text-align: center;"
+        class="radioButtonGender"
+        (click)="onValueChange(data.value)"
+        [value]="data.value"
+      >
+        <span style="white-space: pre-line;" class="forRadioLabel" [ngStyle]="{
+    '--radio-button-font-weight': field()?.controlStyle?.fontWeight,
+    '--radio-button-font-size': field()?.controlStyle?.fontSize,
+    '--radio-button-font-color': field()?.controlStyle?.color,
+  }">{{ data.label }}
+  <img class="radio-btn-icon" *ngIf="field()?.imageUrl" [src]="field()?.imageUrl" alt="">
+  </span>
+      </mat-radio-button>
+    </div>
+  </mat-radio-group>
+  <div class="error-message" *ngIf="false">
+    {{field()?.validators?.patternMessage}}.
+</div>

package/src/lib/radio/radio.component.ts

@@ -0,0 +1,55 @@
+import { CommonModule } from '@angular/common';
+import { Component, forwardRef, Input, input } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { MatRadioModule } from '@angular/material/radio';
+import { MasterControlService } from '../master-control.service';
+
+@Component({
+  selector: 'lib-radio',
+  standalone: true,
+  imports: [
+    MatRadioModule,
+    CommonModule,
+    ReactiveFormsModule
+  ],
+  templateUrl: './radio.component.html',
+  styleUrl: './radio.component.css',
+    providers: [
+      {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: RadioComponent,
+        multi: true
+      }
+    ]
+})
+export class RadioComponent implements ControlValueAccessor {
+  constructor(public masterService : MasterControlService){}
+  field : any = input.required<any>();
+  inputValue: any = null;
+
+  onChange: any = () => {};
+  onTouched: any = () => {};
+
+  ngOnInit(): void {
+    // Initialize inputValue with a default or initial value if needed
+  }
+
+  writeValue(value: any): void {
+    this.inputValue = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  onValueChange(newValue: any): void {
+    this.inputValue = newValue;
+    this.onChange(newValue);
+    this.onTouched();
+  }
+
+}