master-control 0.2.14 → 0.2.15

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

@@ -1,157 +0,0 @@
-.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

@@ -1,84 +0,0 @@
-<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

@@ -1,54 +0,0 @@
-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

@@ -1,19 +0,0 @@
-* {
-  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

@@ -1,17 +0,0 @@
-<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

@@ -1,27 +0,0 @@
-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

@@ -1,121 +0,0 @@
-.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

@@ -1,41 +0,0 @@
-<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

@@ -1,23 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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();
-  }
-}