master-control 0.2.6 → 0.2.7

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

@@ -0,0 +1,77 @@
+<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"
+  *ngIf="field() && field()?.isVisible"
+  [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"
+    [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"
+    [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"
+   />
+}
+  <span matPrefix class="rupee-symbol">₹</span>
+  <!-- <span class="mx-3 right-amount-text"> ₹ 3.50 L </span> -->
+  <div matSuffix class="input-select">
+    <!-- <mat-form-field> -->
+      <mat-select (openedChange)="onSelectOpened($event)">
+        <mat-option *ngFor="let options of field()?.options" [value]="options.value">
+          {{ options.label }}
+        </mat-option>
+      </mat-select>
+    <!-- </mat-form-field> -->
+  </div>
+</mat-form-field>

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

@@ -0,0 +1,72 @@
+import { CommonModule } from '@angular/common';
+import { Component, input } from '@angular/core';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectChange, MatSelectModule } from '@angular/material/select';
+
+@Component({
+  selector: 'lib-select-textbox',
+  standalone: true,
+  imports: [MatInputModule, MatSelectModule, MatFormFieldModule, CommonModule, MatInputModule, ReactiveFormsModule],
+  templateUrl: './select-textbox.component.html',
+  styleUrl: './select-textbox.component.css',
+  providers: [
+      {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: SelectTextboxComponent,
+        multi: true
+      }
+    ]
+})
+export class SelectTextboxComponent {
+  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();
+  }
+
+ onSelectOpened(opened: boolean) {
+  const css = this.field()?.controlStyle;
+  if (opened) {
+    document.body.style.setProperty('--custom-select-option-background-color', css?.dropdownOptionBgColor || '#fff');
+    document.body.style.setProperty('--custom-select-option-font-color', css?.dropdownOptionColor || '#444');
+    document.body.style.setProperty('--custom-select-option-font-weight', css?.dropdownOptionFontWeight || '400');
+    document.body.style.setProperty('--custom-select-option-background-color-focus', css?.focusDropdownOptionBgColor || '#fff');
+    document.body.style.setProperty('--custom-select-option-font-color-focus', css?.focusDropdownOptionColor || '#444');
+    document.body.style.setProperty('--custom-select-option-font-weight-focus', css?.focusDropdownOptionFontWeight || '400');
+    document.body.style.setProperty('--custom-select-option-border-left-focus', css?.focusDropdownOptionBorderLeft || '#ffbb00');
+    document.body.style.setProperty('--custom-select-option-border-radius-focus', css?.focusDropdownOptionBorderRadius || '#ffbb00');
+  } else {
+    document.body.style.removeProperty('--custom-select-option-background-color');
+    document.body.style.removeProperty('--custom-select-option-font-color');
+    document.body.style.removeProperty('--custom-select-option-font-weight');
+    document.body.style.removeProperty('--custom-select-option-background-color-focus');
+    document.body.style.removeProperty('--custom-select-option-font-color-focus');
+    document.body.style.removeProperty('--custom-select-option-font-weight-focus');
+    document.body.style.removeProperty('--custom-select-option-border-left-focus');
+    document.body.style.removeProperty('--custom-select-option-border-radius-focus');
+  }
+}
+
+}

package/src/lib/stepper/stepper.component.css

@@ -0,0 +1,25 @@
+* {
+  font-family: "mulish" !important;
+}
+.step-img{
+  width: 24px;
+  position: relative;
+  bottom: 1px;
+}
+.step-label{
+  color: #444;
+  font-size: 14px;
+  font-weight: 600;
+}
+::ng-deep .mat-step-icon{
+  display: none;
+}
+::ng-deep .mat-horizontal-stepper-header-container{
+  background: #fff !important;
+}
+::ng-deep .mat-stepper-horizontal-line{
+  border-top: 1px dashed !important;
+}
+::ng-deep .mat-horizontal-content-container{
+  display: none;
+}

package/src/lib/stepper/stepper.component.html

@@ -0,0 +1,16 @@
+<div *ngIf="field() && field()?.isVisible">
+  <mat-stepper #stepperHeader>
+    <ng-container *ngFor="let steps of field().editStepper; let i = index">
+      <mat-step>
+        <ng-template matStepLabel>
+          <img
+            class="step-img"
+            [src]="steps.imgIconUrl"
+            alt=""
+          />
+          <span class="step-label mx-2">{{steps?.displayLabel}}</span>
+        </ng-template>
+      </mat-step>
+    </ng-container>
+  </mat-stepper>
+</div>

package/src/lib/stepper/stepper.component.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { Component, input } from '@angular/core';
+import { MatStepperModule } from '@angular/material/stepper';
+import { MasterControlService } from '../master-control.service';
+
+@Component({
+  selector: 'lib-stepper',
+  standalone: true,
+  imports: [MatStepperModule,CommonModule],
+  templateUrl: './stepper.component.html',
+  styleUrl: './stepper.component.css'
+})
+export class StepperComponent {
+field: any = input.required<any>();
+masterStepper:any;
+constructor(public masterSharedService:MasterControlService){}
+ngOnInit(){
+  this.field().editStepper = this.field().configData.stepperData ? this.field().configData.stepperData : this.masterSharedService?.configData?.stepper?.stepperData;
+}
+}

package/src/lib/sub-header/sub-header.component.css

@@ -0,0 +1,13 @@
+* {
+  font-family: "mulish" !important;
+}
+.sub-heading{
+  font-weight: 700;
+  font-size: 16px;
+  color: #000000;
+}
+.sub-heading{
+  color: var(--sub-heading-font-color, #000000) !important;
+  font-size: var(--sub-heading-font-size, 16px) !important;
+  font-weight: var(--sub-heading-font-weight, 700) !important;
+}

package/src/lib/sub-header/sub-header.component.html

@@ -0,0 +1,9 @@
+<div>
+    <span class="sub-heading" [ngStyle]="{
+'--sub-heading-font-color': field()?.controlStyle?.color,
+'--sub-heading-font-size': field()?.controlStyle?.fontSize,
+'--sub-heading-font-weight': field()?.controlStyle?.fontWeight
+}">{{field()?.label}}
+<img [src]="field()?.imageUrl" *ngIf="field()?.imageUrl" alt="">
+</span>
+</div>

package/src/lib/sub-header/sub-header.component.ts

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

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

@@ -0,0 +1,139 @@
+.field-lable{
+  font-size: 10px !important;
+  font-weight: 700 !important;
+  color: #444 !important;
+  margin-bottom: 0px !important;
+}
+* {
+  font-family: "mulish" !important;
+}
+.years-text{
+  position: absolute;
+  left: 5%;
+  bottom: 5px;
+  font-size: 14px;
+}
+.error-message{
+  color: red;
+}
+
+.below-input-text{
+  font-weight: 400;
+  font-size: 12px;
+  color: #444;
+  font-family: "Mulish";
+}
+
+.textbox-subscript{
+  color: #8f8f8f;
+  font-size: 14px;
+  font-weight: 400;
+  position: absolute;
+  left: 15%;
+  bottom: 5px;
+}
+
+/* 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/subscript-textbox/subscript-textbox.component.html

@@ -0,0 +1,85 @@
+<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"
+  *ngIf="field() && field()?.isVisible"
+  [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"
+  />
+  }
+
+  <p class="years-text" *ngIf="inputValue">Years</p>
+  <p class="textbox-subscript">till 2026</p>
+  <mat-error *ngIf="false">
+    {{ field()?.validators?.isRequiredMessage }}
+  </mat-error>
+</mat-form-field>
+<div>
+  <span class="below-input-text">Allowed range is 10 to 30 years</span>
+</div>
+<div class="error-message" *ngIf="false">
+  {{ field()?.validators?.isRequiredMessage }}.
+</div>
+<div class="error-message" *ngIf="false">
+  {{ field()?.validators?.patternMessage }}.
+</div>

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

@@ -0,0 +1,53 @@
+import { CommonModule } from '@angular/common';
+import { Component, input } from '@angular/core';
+import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+
+@Component({
+  selector: 'lib-subscript-textbox',
+  standalone: true,
+  imports: [
+    MatInputModule,
+    MatFormFieldModule ,
+    CommonModule,
+    ReactiveFormsModule
+  ],
+  templateUrl: './subscript-textbox.component.html',
+  styleUrl: './subscript-textbox.component.css',
+   providers: [
+      {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: SubscriptTextboxComponent,
+        multi: true
+      }
+    ]
+})
+export class SubscriptTextboxComponent {
+ inputValue: any = null;
+  field : any = input.required<any>();
+  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/success-snackbar/success-snackbar.component.css

@@ -0,0 +1,32 @@
+* {
+  font-family: "mulish" !important;
+}
+.cross{
+  width: 9.86px;
+  height: 9.86px;
+  cursor: pointer;
+}
+.toaster-img{
+  height: 24px;
+  width: 24px;
+}
+.toaster-label{
+  font-size: 14px;
+  font-weight: 700;
+  color: #444;
+}
+.toaster-msg{
+  font-weight: 400;
+  font-size: 12px;
+  color: #444;
+  line-height: 0px;
+}
+.success-snackbar-card{
+  max-height: 58px;
+  max-width: 400px;
+  border-radius: 8px;
+  background: var(--Colours-Success-100, #E6F7F3);
+  border: 1px solid var(--Colours-Success-200, #CEF0E8);
+  box-shadow: 0px 2px 15px 2px #E3E6EC99;
+  padding: 10px 16px 10px 16px;
+}

package/src/lib/success-snackbar/success-snackbar.component.html

@@ -0,0 +1,21 @@
+<div [ngClass]="successObj.toasterCSS">
+  <div class="d-flex justify-content-between">
+    <div class="d-flex gap-3">
+      <span>
+        <img
+          [src]="successObj.imageURL"
+          alt=""
+          class="mt-1"
+          [ngClass]="successObj.imageCSS"
+        />
+      </span>
+      <span class="mb-2">
+        <p class="mb-2" [ngClass]="successObj.labelCSS">{{successObj.labelText}}</p>
+        <p class="m-0" [ngClass]="successObj.messageCSS">{{successObj.messageText}}</p>
+      </span>
+    </div>
+    <div >
+        <img class="cross" [ngClass]="successObj.closeIconCSS" [src]="successObj.closeIconImageURL" alt="">
+    </div>
+  </div>
+</div>

package/src/lib/success-snackbar/success-snackbar.component.ts

@@ -0,0 +1,19 @@
+import { Component, input } from '@angular/core';
+import { MasterControlService } from '../master-control.service';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'lib-success-snackbar',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './success-snackbar.component.html',
+  styleUrl: './success-snackbar.component.css'
+})
+export class SuccessSnackbarComponent {
+field : any = input.required<any>();
+successObj:any;
+
+constructor(public masterService : MasterControlService) {
+  this.successObj = this.masterService.snackbars.find((item: any) => item.type === 'Success');
+}
+}