master-control 0.2.6 → 0.2.7

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

@@ -0,0 +1,157 @@
+.field-lable{
+  font-size: 10px !important;
+  font-weight: 700 !important;
+  color: #444 !important;
+  margin-bottom: 0px !important;
+}
+.right-input-text{
+  font-weight: 400;
+  font-size: 12px;
+  color: #696969;
+}
+.error-message{
+  color: red;
+}
+
+.checkbox-tag{
+  font-size: 10px;
+  font-weight: 700;
+  color: #444;
+  margin-right: 5px;
+}
+
+.checkbox{
+  padding: 4px 8px 3px 0px;
+  background: #f5f5f5;
+  border-radius: 4px;
+  margin-right: 8px;
+}
+* {
+  font-family: "mulish" !important;
+}
+
+.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);
+}
+
+.below-input-text{
+  font-weight: 400;
+  font-size: 12px;
+  color: #444;
+  font-family: "Mulish";
+}
+
+/* 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/suffix-textbox/suffix-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
+  >
+    <img class="ms-1" [src]="field().configData?.labelIconUrl" [title]="field().configData?.tooltipMessage" />
+  </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>
+  <span matSuffix class="mx-3" *ngIf="false">
+    <img src="https://cdn.godigit.com/retail-life/check-circle-ou.svg" alt="" />
+  </span>
+  <span matSuffix class="mx-3 right-input-text" *ngIf="field().configData?.suffix"> {{field().configData?.suffix}} </span>
+</mat-form-field>
+<div *ngIf="field().configData?.isShowTagAs">
+  <span class="checkbox-tag">Tag as:</span>
+  <span *ngFor="let option of field()?.options" class="checkbox">
+    <mat-checkbox class="optional-checkbox">
+      {{ option.label }}
+    </mat-checkbox>
+  </span>
+</div>
+<div *ngIf="field().configData?.infoMessage">
+  <span class="below-input-text">{{field().configData?.infoMessage}}</span>
+</div>

package/src/lib/suffix-textbox/suffix-textbox.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-suffix-textbox',
+  standalone: true,
+  imports: [
+    MatFormFieldModule,
+    CommonModule,
+    MatInputModule,
+    MatCheckboxModule,
+    ReactiveFormsModule
+  ],
+  templateUrl: './suffix-textbox.component.html',
+  styleUrl: './suffix-textbox.component.css',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: SuffixTextboxComponent,
+      multi: true
+    }
+  ]
+})
+export class SuffixTextboxComponent {
+  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/tab/tab.component.css

@@ -0,0 +1,19 @@
+* {
+  font-family: "mulish" !important;
+}
+::ng-deep .mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{
+  font-weight: var(--tab-font-weight, 800) !important;
+ }
+ ::ng-deep .mdc-tab__text-label{
+  font-size: var(--tab-font-size, 16px) !important;
+  color: var(--tab-font-color, #444) !important;
+ }
+ ::ng-deep .mat-mdc-tab-group .mdc-tab-indicator__content--underline {
+  border-color:  var(--tab-border-color, #FFBB00) !important;
+  border-width:  var(--tab-border-width, 3px) !important;
+  border-top-left-radius: 6px !important;
+  border-top-right-radius: 6px !important;
+}
+::ng-deep .mat-mdc-tab-label-container{
+  border-bottom: 1px solid #dadada !important;
+}

package/src/lib/tab/tab.component.html

@@ -0,0 +1,17 @@
+<mat-tab-group *ngIf="field() && field()?.isVisible"
+[ngStyle]="{
+ '--tab-border-color': field()?.controlStyle?.borderColor ,
+ '--tab-border-width': field()?.controlStyle?.borderWidth,
+  '--tab-font-size': field()?.controlStyle?.fontSize,
+ '--tab-font-weight': field()?.controlStyle?.fontWeight,
+ '--tab-font-color': field()?.controlStyle?.color,
+ }"
+[(selectedIndex)]="selectedIndex" (selectedIndexChange)="onTabChange($event)">
+   <mat-tab *ngFor="let data of field()?.options; let i = index">
+    <ng-template mat-tab-label>
+      <img [src]="data.value" alt="" class="mx-2">
+      {{ data.label }}
+    </ng-template>
+    <ng-content select="tab[i]"></ng-content>
+  </mat-tab>
+</mat-tab-group>

package/src/lib/tab/tab.component.ts

@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, input, Output } from '@angular/core';
+import { MatTabChangeEvent, MatTabsModule } from '@angular/material/tabs';
+import { MasterControlService } from '../master-control.service';
+
+@Component({
+  selector: 'lib-tab',
+  standalone: true,
+  imports: [MatTabsModule,CommonModule],
+  templateUrl: './tab.component.html',
+  styleUrl: './tab.component.css'
+})
+export class TabComponent {
+field : any = input.required<any>();
+@Output() selectedIndexChange = new EventEmitter<number>();
+selectedIndex = 0;
+
+constructor(public masterService : MasterControlService){}
+
+ngOnInit(){
+    this.field().selectedIndex = this.selectedIndex;
+}
+  onTabChange(event: number) {
+  this.selectedIndex = event;
+  this.field().selectedIndex = this.selectedIndex;
+}
+}

package/src/lib/table/table.component.css

@@ -0,0 +1,121 @@
+.styled-table {
+  width: 100%;
+  margin: 16px 0;
+  font-size: 1em;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+}
+* {
+  font-family: "mulish" !important;
+}
+
+.styled-table th,
+.styled-table td {
+  border: none;
+  padding: 8px 12px;
+  text-align: left;
+}
+
+.styled-table thead tr {
+  background-color: #444444;
+  color: #fff;
+}
+
+.styled-table tbody tr:nth-child(even) {
+  background-color: #f3f3f3;
+}
+
+.styled-table tbody tr:hover {
+  background-color: #e0f7fa;
+}
+
+.custom_input {
+  width: 100%;
+  border: none;
+  background: transparent;
+  font-weight: bold;
+  color: #fff;
+}
+
+.styled-table th:first-child {
+  border-top-left-radius: 8px;
+}
+
+.styled-table th:last-child {
+  border-top-right-radius: 8px;
+}
+
+.popup-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.action-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+}
+
+.actions-popup-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: transparent;
+  z-index: 1000;
+}
+
+.actions-popup-menu {
+  position: absolute;
+  min-width: 260px;
+  background: #fff;
+  border-radius: 12px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
+  padding: 0;
+  z-index: 1001;
+  color: #333;
+  font-family: inherit;
+}
+
+.actions-popup-menu ul {
+  list-style: none;
+  margin: 0;
+  padding: 0 0 8px 0;
+}
+
+.actions-popup-menu li {
+  display: flex;
+  align-items: center;
+  padding: 10px 20px;
+  cursor: pointer;
+  font-size: 15px;
+  border-radius: 6px;
+  transition: background 0.2s;
+}
+
+.actions-popup-menu li mat-icon {
+  margin-right: 12px;
+  font-size: 20px;
+}
+
+.actions-popup-menu li.selected,
+.actions-popup-menu li:hover {
+  background: #fff6d1;
+  color: #222;
+}
+
+.styled-table-container {
+  max-width: 100%;
+  overflow-x: auto;
+  max-height: 400px;
+  overflow-y: auto;
+}

package/src/lib/table/table.component.html

@@ -0,0 +1,41 @@
+<div class="styled-table-container">
+<table *ngIf="field()?.tableData?.columnlength && field()?.tableData?.rowlength" class="styled-table">
+  <thead>
+    <tr>
+      <th *ngIf="field()?.tableData?.showCheckBox"></th>
+      <th *ngFor="let header of field().tableData?.tableHeaders; let i = index; trackBy: trackByIndex">
+        <ng-container *ngIf="!readonly(); else headerText">{{header.columnName}}
+          <!-- <input type="text" [(ngModel)]="header.columnName" (ngModelChange)="renameHeader(i, $event)"
+            [disabled]="readonly()" class="custom_input" [matTooltip]="header.toolTip" matTooltipPosition="above"> -->
+        </ng-container>
+        <ng-template #headerText>{{ header?.columnName }}</ng-template>
+      </th>
+      <th *ngIf="field()?.tableData?.showActions">Action</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let row of field()?.tableData?.tdData;let rowIndex = index">
+      <td *ngIf="field()?.tableData?.showCheckBox"><input type="checkbox"></td>
+      <td *ngFor="let cell of row">{{ cell }}</td>
+      <td *ngIf="field()?.tableData?.showActions">
+        <button class="action-btn" (click)="openActionsPopup($event, rowIndex)" [disabled]="readonly()">
+          <mat-icon>more_vert</mat-icon>
+        </button>
+      </td>
+    </tr>
+  </tbody>
+</table>
+</div>
+
+<div *ngIf="showActionsPopup" class="actions-popup-backdrop" (click)="closeActionsPopup()">
+  <div class="actions-popup-menu" [ngStyle]="{'top.px': popupPosition.top, 'left.px': popupPosition.left}"
+    (click)="$event.stopPropagation()">
+    <ul>
+      <li *ngFor="let actionData of field().tableData?.userSelectedOptions[selectedRow]" [matTooltip]="actionData?.displayTitle"
+        matTooltipPosition="above">
+        <mat-icon>{{actionData?.matIconName}}</mat-icon>
+        {{actionData?.displayTitle}}
+      </li>
+    </ul>
+  </div>
+</div>

package/src/lib/table/table.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TableComponent } from './table.component';
+
+describe('TableComponent', () => {
+  let component: TableComponent;
+  let fixture: ComponentFixture<TableComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TableComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TableComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/table/table.component.ts

@@ -0,0 +1,84 @@
+import { Component, HostListener, input } from '@angular/core';
+import { CommonModule, NgFor, NgIf } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MasterControlService } from '../master-control.service';
+@Component({
+  selector: 'lib-table',
+  standalone: true,
+  imports: [NgIf, NgFor, FormsModule, CommonModule, MatIconModule, MatTooltipModule],
+  templateUrl: './table.component.html',
+  styleUrl: './table.component.css'
+})
+export class TableComponent {
+  field: any = input.required<any>();
+  readonly = input(false);
+  showActionsPopup = false;
+  popupPosition = { top: 0, left: 0 };
+  selectedRow: any = 0;
+  highlightedIndex = -1;
+  constructor(public masterControlService : MasterControlService) { }
+
+  ngOnInit() {
+    this.setColumns();
+  }
+  trackByIndex(index: any, item: any) {
+    return index;
+  }
+
+  setColumns() {
+    let checkConfigData = this.field().configData;
+    if(Object.keys(checkConfigData).length > 0){
+      this.masterControlService.configData.table = checkConfigData;
+    }
+    if (this.masterControlService.configData.table.rowlength > 0 && this.masterControlService.configData.table.columnlength > 0) {
+      this.field().tableData = this.masterControlService.configData.table;
+      for (let i = 0; i < this.masterControlService.configData.table.columnlength; i++) {
+        if(Object.keys(checkConfigData).length <= 0){
+          let headerObj = {
+            "columnName": `${'Name - ' + i}`,
+            "isSortingNeeded": "Y",
+            "toolTip": `${'tooltip - ' + i}`
+          }
+          const exists = this.field().tableData.tableHeaders.some(
+            (header: any) => header.columnName === headerObj.columnName
+          );
+          if (!exists && this.field().tableData.tableHeaders.length < this.masterControlService.configData.table.columnlength) {
+            this.field().tableData.tableHeaders.push(headerObj);
+          }
+        }
+      }
+      this.field().tableData.tdData = Array(this.masterControlService.configData.table.rowlength).fill(null).map((_, rowIdx) =>
+        Array(this.masterControlService.configData.table.columnlength).fill('').map((_, colIdx) => `Dummy Row ${rowIdx + 1}`)
+      );
+
+      this.masterControlService.saveTableFieldState(this.field());
+      this.field().configData = this.field().tableData
+
+    }
+  }
+
+  openActionsPopup(event: MouseEvent, rowIndex: number) {
+    event.stopPropagation();
+    this.selectedRow = rowIndex;
+    this.showActionsPopup = true;
+    this.highlightedIndex = 1;
+    const rect = (event.target as HTMLElement).getBoundingClientRect();
+    this.popupPosition = {
+      top: rect.bottom + window.scrollY - 30,
+      left: rect.left + window.scrollX + 30
+    };
+  }
+
+  closeActionsPopup() {
+    this.showActionsPopup = false;
+    this.selectedRow  = 0;
+    this.highlightedIndex = -1;
+  }
+
+  @HostListener('document:keydown.escape', ['$event'])
+  onEscKey(event: KeyboardEvent) {
+    this.closeActionsPopup();
+  }
+}