master-control 0.2.6 → 0.2.8

package/src/lib/dob/dob.component.ts

@@ -0,0 +1,107 @@
+import { CommonModule } from '@angular/common';
+import { Component, input } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { MomentDateAdapter, MomentDateModule } from '@angular/material-moment-adapter';
+import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MasterControlService } from '../master-control.service';
+
+
+export const MY_DATE_FORMAT = {
+  parse: {
+    dateInput: [
+      'DD-MM-YYYY',
+      'MM/DD/YYYY',
+      'YYYY/MM/DD',
+      'DD/MM/YYYY',
+      'DD MMM YYYY',
+      'DD MMMM YYYY',
+      'DD-MMM-YYYY'
+    ]
+  },
+  display: {
+    dateInput: 'DD-MMM-YYYY',
+    monthYearLabel: 'MMM YYYY',
+    dateA11yLabel: 'DD-MMM-YYYY',
+    monthYearA11yLabel: 'MMMM YYYY'
+  }
+};
+
+@Component({
+  selector: 'lib-dob',
+  standalone: true,
+  imports: [MatInputModule, MatFormFieldModule, CommonModule, MatDatepickerModule, MomentDateModule, ReactiveFormsModule],
+    providers: [
+      {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: DobComponent,
+        multi: true
+      },
+    {
+      provide: DateAdapter,
+      useClass: MomentDateAdapter,
+      deps: []
+    },
+    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMAT }
+  ],
+  templateUrl: './dob.component.html',
+  styleUrl: './dob.component.css',
+})
+export class DobComponent implements ControlValueAccessor {
+  field: any = input.required<any>();
+  inputValue: any = null;
+  reactiveFormControlobject : any = input<any>();
+
+  constructor(public service : MasterControlService) {}
+
+  dateDivisionFormat(event: any) {
+    let evt = event.target;
+    if (evt.value.length > 2 && !evt.value.substr(2, 1).includes('-')) {
+      evt.value = [evt.value.slice(0, 2), '-', evt.value.slice(2)].join('');
+    } else if (
+      evt.value.length > 5 &&
+      Number(evt.value.substr(3, 2)) &&
+      !evt.value.substr(5, 1).includes('-')
+    ) {
+      evt.value = [evt.value.slice(0, 5), '-', evt.value.slice(5)].join('');
+    } else if (
+      evt.value.length > 6 &&
+      !Number(evt.value.substr(3, 2)) &&
+      !evt.value.substr(6, 1).includes('-')
+    ) {
+      evt.value = [evt.value.slice(0, 6), '-', evt.value.slice(6)].join('');
+    }
+  }
+
+  _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(event : any): void {
+    if (!this.service.checkIfValueIsEmpty(event.target.value)) {
+      if (isNaN(Date.parse(event.target.value))) {
+        event.target.value = '';
+      }
+
+    }
+    this._unTouched();
+  }
+
+}

package/src/lib/download-document/download-document.component.css

@@ -0,0 +1,53 @@
+* {
+  font-family: "mulish" !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;
+}
+.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;
+}
+.field-lable{
+  font-size: 10px !important;
+  font-weight: 700 !important;
+  color: #444 !important;
+  margin-bottom: 0px !important;
+}

package/src/lib/download-document/download-document.component.html

@@ -0,0 +1,38 @@
+<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 lightbackground"
+    *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 ,
+}"
+  >
+      <span class="upload-icon">
+        <span
+          ><img
+            src="https://cdn.godigit.com/retail-life/Download_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>
+  </button>

package/src/lib/download-document/download-document.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-download-document',
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule
+  ],
+  templateUrl: './download-document.component.html',
+  styleUrl: './download-document.component.css'
+})
+export class DownloadDocumentComponent {
+ field : any = input.required<any>();
+}

package/src/lib/email-with-domain/email-with-domain.component.css

@@ -0,0 +1,130 @@
+
+.field-lable{
+  font-size: 10px !important;
+  font-weight: 700 !important;
+  color: #444 !important;
+  margin-bottom: 0px !important;
+}
+.email-left-side{
+width: 40% !important;
+display: inline-block !important;
+}
+.email-right-side{
+width: 50% !important;
+display: inline-block !important;
+}
+.email-between{
+  padding: 0 8px;
+}
+
+.error-message{
+  color: red;
+}
+
+/* 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;
+}
+* {
+  font-family: "mulish" !important;
+}

package/src/lib/email-with-domain/email-with-domain.component.html

@@ -0,0 +1,73 @@
+<label *ngIf="field() && field()?.isVisible && field()?.isShowLabel" class="field-lable">{{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-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"
+      class="email-left-side"
+      [name]="field()?.fieldName + '_1'"
+      [id]="field()?.fieldName + '_1'"
+      [type]="field()?.controlType"
+      [placeholder]="field()?.placeHolder"
+      [required]="field()?.validators?.isRequired"
+      [disabled]="field()?.isDisable"
+      [pattern]="field()?.validators?.pattern"
+      (blur)="onInputBlur()"
+      [value]="inputValue"
+      [formControl]="reactiveFormControlobject()"
+    />
+ }@else {
+   <input
+      matInput
+      autocomplete="none"
+      class="email-left-side"
+      [name]="field()?.fieldName + '_1'"
+      [id]="field()?.fieldName + '_1'"
+      [type]="field()?.controlType"
+      [placeholder]="field()?.placeHolder"
+      [required]="field()?.validators?.isRequired"
+      [disabled]="field()?.isDisable"
+      [pattern]="field()?.validators?.pattern"
+      (blur)="onInputBlur()"
+      [value]="inputValue"
+    />
+ }
+    <span class="email-between">&#64;</span>
+    <input
+      matInput
+      autocomplete="none"
+      [name]="field()?.fieldName + '_2'"
+      [id]="field()?.fieldName + '_2'"
+      placeholder="domain.com"
+      class="email-right-side"
+      [required]="field()?.validators?.isRequired"
+      [disabled]="field()?.isDisable"
+    />
+    <mat-error *ngIf="false">
+      {{ field()?.validators?.isRequiredMessage }}
+    </mat-error>
+  </mat-form-field>
+<div class="error-message" *ngIf="false">
+  {{ field()?.validators?.isRequiredMessage }}.
+</div>
+<div class="error-message" *ngIf="false">
+  {{ field()?.validators?.patternMessage }}.
+</div>

package/src/lib/email-with-domain/email-with-domain.component.ts

@@ -0,0 +1,51 @@
+import { CommonModule } from '@angular/common';
+import { Component, input } from '@angular/core';
+import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+
+@Component({
+  selector: 'lib-email-with-domain',
+  standalone: true,
+  imports: [CommonModule, MatInputModule, MatFormFieldModule, FormsModule, ReactiveFormsModule],
+  templateUrl: './email-with-domain.component.html',
+  styleUrl: './email-with-domain.component.css',
+  providers: [
+      {
+        provide: NG_VALUE_ACCESSOR,
+        useExisting: EmailWithDomainComponent,
+        multi: true
+      }
+    ]
+})
+export class EmailWithDomainComponent {
+pincode: any = '';
+  emailUser:any='';
+  emailDomain:any='';
+
+  field: any = input.required<any>();
+  reactiveFormControlobject : any = input<any>();
+  inputValue: any = null;
+  _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/error-snackbar/error-snackbar.component.css

@@ -0,0 +1,36 @@
+* {
+  font-family: "mulish" !important;
+}
+.error-snackbar-card{
+  max-height: 58px;
+  max-width: 400px;
+  border-radius: 8px;
+  background: var(--Colours-Error-100, #FDE5E5);
+  border: 1px solid var(--Colours-Error-200, #FCCCCC);
+  box-shadow: 0px 2px 15px 2px #E3E6EC99;
+  padding: 10px 16px 10px 16px;
+}
+.cross{
+  width: 9.86px;
+  height: 9.86px;
+  cursor: pointer;
+}
+.mat-mdc-snack-bar-container .mat-mdc-snackbar-surface {
+    background-color: #444 !important;
+    color: #f5f5f5 !important;
+}
+.toaster-label{
+  font-size: 14px;
+  font-weight: 700;
+  color: #444;
+}
+.toaster-img{
+  height: 24px;
+  width: 24px;
+}
+.toaster-msg{
+  font-weight: 400;
+  font-size: 12px;
+  color: #444;
+  line-height: 0px;
+}

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

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

package/src/lib/error-snackbar/error-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-error-snackbar',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './error-snackbar.component.html',
+  styleUrl: './error-snackbar.component.css'
+})
+export class ErrorSnackbarComponent {
+field : any = input.required<any>();
+errorObj:any;
+
+constructor(public masterService : MasterControlService) {
+  this.errorObj = this.masterService.snackbars.find((item: any) => item.type === 'Error');
+}
+}

package/src/lib/grey-label/grey-label.component.css

@@ -0,0 +1,13 @@
+* {
+  font-family: "mulish" !important;
+}
+.bold-label{
+  color: var(--master-bold-label-font-color, #000000) !important;
+  font-size: var(--master-bold-label-font-size, 12px) !important;
+  font-weight: var(--master-bold-label-font-weight, 600) !important;
+}
+.bold-label{
+  color:  #000000;
+  font-size: 12px;
+  font-weight: 600;
+}

package/src/lib/grey-label/grey-label.component.html

@@ -0,0 +1,7 @@
+<div>
+    <span class="bold-label" [ngStyle]="{
+'--master-bold-label-font-color': field()?.controlStyle?.color,
+'--master-bold-label-font-size': field()?.controlStyle?.fontSize,
+'--master-bold-label-font-weight': field()?.controlStyle?.fontWeight
+}">{{field()?.label}}</span>
+</div>

package/src/lib/grey-label/grey-label.component.ts

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

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

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

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

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

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

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

package/src/lib/hr-line/hr-line.component.css

@@ -0,0 +1,13 @@
+* {
+  font-family: "mulish" !important;
+}
+.master-hr-line{
+  border: 1px dashed #DADADA;
+  opacity: initial;
+  border-image: repeating-linear-gradient(to right, #DADADA 0 6px, transparent 0px 12px) 1 stretch;
+}
+.master-hr-line{
+  border-width: var(--hr-line-border-width , 1px) !important;
+  border-style: var(--hr-line-border-style , dashed) !important;
+  border-color: var(--hr-line-border-color , #DADADA) !important;
+}

package/src/lib/hr-line/hr-line.component.html

@@ -0,0 +1,7 @@
+<div class="col-lg-12">
+  <hr class="master-hr-line"  [ngStyle]="{
+'--hr-line-border-width': field()?.controlStyle?.borderWidth,
+'--hr-line-border-color': field()?.controlStyle?.borderColor,
+'--hr-line-border-style': field()?.controlStyle?.borderStyle
+}"/>
+</div>

package/src/lib/hr-line/hr-line.component.ts

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