cat-qw-lib 0.0.2 → 0.0.3

package/src/lib/shared/controls/check-box/check-box.component.html

@@ -1,22 +0,0 @@
-<div class="checkBoxContainer">
-   
-  <div class="checkBox">
-    <p-checkbox
-      [disabled]="attributeModel.readonly ?? false"
-      [binary]="true"
-      inputId="binary"
-      [label]="attributeModel.displayText ?? ''"
-      class="dynamic-checkbox"
-      #checkBox="ngModel"
-      [ngModel]="this.record[this.attributeModel.name]"
-      [style]="{
-        '--checkbox-size': attributeModel.customColumnWidth || '20px',
-        '--checkbox-height': attributeModel.customHeight || '20px'
-      }"
-      [required]="attributeModel.isRequired ?? false" 
-      (ngModelChange)="handleModelChange($event, checkBox.valid)"
-    >
-    </p-checkbox>
-    <span class="asterisk ml-1" *ngIf="attributeModel.isRequired">*</span>
-  </div>
-</div>

package/src/lib/shared/controls/check-box/check-box.component.scss

@@ -1,32 +0,0 @@
-.asterisk{
-    color: red;
-}
-
-.checkBoxContainer{
-    max-height: 100%;
-    display: flex;
-    align-items: center;
-    font-family:var(--font-family);
-    position: relative;
-}
-
-.checkBox {
-    position: relative;
-    max-width: 100%;
-    max-height: 100%;
-    word-wrap: break-word;
-  }
-
-
-::ng-deep {
-    .dynamic-checkbox {
-        .p-checkbox{
-            width: var(--checkbox-size) !important; 
-            height: var(--checkbox-height) !important;
-            .p-checkbox-box{
-                width: var(--checkbox-size) !important; 
-                height: var(--checkbox-height) !important;
-            }
-        }
-    }
-}

package/src/lib/shared/controls/check-box/check-box.component.spec.ts

@@ -1,26 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { CheckBoxComponent } from './check-box.component';
-
-describe('CheckBoxComponent', () => {
-  let component: CheckBoxComponent;
-
-  let fixture: ComponentFixture<CheckBoxComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [CheckBoxComponent]
-    })
-    .compileComponents();
-    
-    fixture = TestBed.createComponent(CheckBoxComponent);
-    component = fixture.componentInstance;
-    component.configSchema = { displayText: "", name: 'testCheckBox', value: true }
-    component.record = {}
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component.configSchema.value).toBeTruthy();
-  });
-});

package/src/lib/shared/controls/check-box/check-box.component.ts

@@ -1,16 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { CheckboxModule } from 'primeng/checkbox';
-import { BaseControlComponent } from '../../_base/base-control/base-control.component';
-
-@Component({
-  selector: 'check-box',
-  templateUrl: './check-box.component.html',
-  styleUrl: './check-box.component.scss',
-  standalone : true,
-  imports : [CommonModule,FormsModule, CheckboxModule]
-})
-export class CheckBoxComponent extends BaseControlComponent {
- 
-}

package/src/lib/shared/controls/date/date.component.html

@@ -1,43 +0,0 @@
-@if (attributeModel && record) {
-<div class="">
-  <div class="mb-2">
-    <label>{{
-      attributeModel?.displayText
-        ? attributeModel?.displayText
-        : attributeModel?.name
-    }}</label>
-    <span class="asterisk ml-1" *ngIf="attributeModel.isRequired">*</span>
-  </div>
-  @if (attributeModel.readonly) {
-  <div class="mb-2" [ngStyle]="{ 'font-size': '14px', color: '#0F1729', 'font-weight':'600' }">
-    <label>{{ getValue() }}</label>
-  </div>
-  } @else {
-  <div>
-    <p-calendar
-      [showIcon]="attributeModel.showCalenderIcon ?? true"
-      inputId="icon"
-      [disabled]="attributeModel?.readonly ?? false"
-      [required]="attributeModel?.isRequired ?? false"
-      [name]="attributeModel?.name ? attributeModel?.name : 'testDatePicker'"
-      [placeholder]="
-        attributeModel.placeholder ? attributeModel.placeholder : ''
-      "
-      [yearRange]="attributeModel.yearRange ?? '1950 : 2050'"
-      [title]="attributeModel.title ? attributeModel.title : ''"
-      [(ngModel)]="record[attributeModel?.name]"
-      #dateField="ngModel"
-      [dateFormat]="'dd/mm/yy'"
-      appendTo="body"
-      (ngModelChange)="handleModelChange($event, dateField.valid)"
-      [ngClass]="{
-        'ng-dirty ng-invalid': !dateField.valid && error == attributeModel?.name
-      }"
-      [hourFormat]="attributeModel?.hourFormat ? '24' : ''"
-    >
-    </p-calendar>
-  </div>
-  }
-</div>
-
-}

package/src/lib/shared/controls/date/date.component.spec.ts

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

package/src/lib/shared/controls/date/date.component.ts

@@ -1,42 +0,0 @@
-import { Component, OnChanges } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { BaseControlComponent } from '../../_base/base-control/base-control.component';
-import { DateParserService } from '../../services/date-parser.service';
-import { CalendarModule } from 'primeng/calendar';
-import { FormsModule } from '@angular/forms';
-import { SHARED } from '../../constant/SHARED';
-import moment from 'moment';
-
-@Component({
-  selector: 'date',
-  standalone: true,
-  imports: [CommonModule, CalendarModule, FormsModule],
-  templateUrl: './date.component.html',
-  styleUrl: './date.component.scss',
-})
-export class DateComponent extends BaseControlComponent implements OnChanges{
-  constructor(public dateService : DateParserService){
-    super()
-  }
-  override ngOnChanges(): void {
-    if(this.attributeModel.readonly){
-       this.getValue()
-    }else{
-
-      this.record[this.attributeModel.name] = this.dateService.parseDate(this.record[this.attributeModel?.name]) ??
-      new Date();
-    }
-  }
-  override getValue() {
-    if (this.record[this.attributeModel.name]) {
-      const formattedDate = moment(this.record[this.attributeModel.name]).format('DD/MM/YYYY');
-      if(formattedDate == "Invalid date"){
-        return SHARED.HIPHEN
-      }else{
-        return formattedDate
-      }
-    }
-    return SHARED.EMPTY
-  }
-  
-}

package/src/lib/shared/controls/dropdown/dropdown.component.html

@@ -1,28 +0,0 @@
-<ng-container>
-  <div class="mb-2">
-    <label>{{ attributeModel.displayText }}</label>
-    <span class="asterisk ml-1" *ngIf="attributeModel.isRequired">*</span>
-  </div>
-  <div class="dropdownbox">
-
-  <p-dropdown 
-  
-  [options]="options" 
-  [disabled]="attributeModel.readonly ?? false"
-  [showClear]="true"
-  [name]="attributeModel.name ?? 'testSingleSelect'" 
-  [ngModel]="record[attributeModel.name]" 
-  [placeholder]="attributeModel.placeholder ?? ''" 
-  [required]="attributeModel.isRequired ?? false"
-  filterBy="label" 
-  class="dropdownFeild"
-  #dropdown="ngModel"
-  (ngModelChange)="handleModelChange($event, dropdown.valid)" 
-  [ngClass]="!dropdown.valid && error == attributeModel.name ? 'ng-dirty ng-invalid':''" 
-  appendTo="body" 
-  optionLabel="label" 
-  optionValue="value">
-</p-dropdown>
-</div>
-
-</ng-container>

package/src/lib/shared/controls/dropdown/dropdown.component.scss

@@ -1,12 +0,0 @@
-.asterisk{
-    color: red;
-}
-.p-dropdown{
-    width: 100% !important;
-}
-.dropdownFeild{
-    width: 100% !important;
-}
-.dropdownbox{
-    position: relative;
-}

package/src/lib/shared/controls/dropdown/dropdown.component.ts

@@ -1,71 +0,0 @@
-import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { DropdownModule } from 'primeng/dropdown';
-import { BaseControlComponent } from '../../_base/base-control/base-control.component';
-import { FormsModule } from '@angular/forms';
-import { SelectItem } from 'primeng/api';
-import { ListService } from '../../services/list.service';
-import { List } from '../../models/list.model';
-import { BaseQuery } from '../../state/base.query';
-
-@Component({
-  selector: 'dropdown',
-  standalone: true,
-  imports: [CommonModule, DropdownModule, FormsModule],
-  templateUrl: './dropdown.component.html',
-  styleUrls: ['./dropdown.component.scss'],
-  encapsulation: ViewEncapsulation.None
-})
-export class DropdownComponent extends BaseControlComponent{
-  options: SelectItem[] | undefined = [];
-  list!: List | undefined;
-  childListRecords: any[] = [];
-  @Input() isStaticDropdown = false;
-
-  constructor(public listService: ListService) {
-    super();
-  }
-
-  override ngOnChanges() {
-    if(this.store) {
-      this.query = new BaseQuery(this.store);
-    }
-    if (this.attributeModel.options) {
-      this.options = this.attributeModel.options;
-    }
-    if (!this.isStaticDropdown) {
-      this.handleGetAndSetList();
-    }
-  }
-
-  handleGetAndSetList() {
-    try {
-      this.query.getLists().subscribe((response: List[]) => {
-        if (response) {
-          this.mapResponseToOptions(response);
-        }
-      });
-    } catch (error) {
-      console.error('Error fetching data:', error);
-    }
-  }
-
-  private mapResponseToOptions(lists: List[]): SelectItem[] {
-    if (lists && lists.length > 0) {
-      const clonedLists = JSON.parse(JSON.stringify(lists));
-      this.list = clonedLists.find((x: any) => x.forProperty === this.attributeModel.name);
-      if (this.list) {
-        this.options = this.list?.items ?? [];
-      }
-    }
-    if (!this.options || this.options.length === 0) {
-      this.options = this.attributeModel.options ?? [];
-    }
-    return this.options;
-  }
-
-
-  override handleModelChange(event: any, valid: boolean | null, val?: any): void {
-    super.handleModelChange(event, valid);
-  }
-}

package/src/lib/shared/controls/file-upload/file-upload.component.html

@@ -1,18 +0,0 @@
-<ng-container class="documentContainer">
-    @if(!attributeModel.hideLabelOnForm){
-    <div class="mb-2">
-      <label class="form-header-label">{{ attributeModel?.displayText }}</label>
-      <span class="asterisk ml-1" *ngIf="attributeModel.isRequired">*</span>
-    </div>
-    }
-<div class="card flex justify-content-center">
-    <p-fileUpload 
-        mode="basic" 
-        [chooseLabel]="record[attributeModel.name] ? attributeModel.displayText : 'No Files'"
-        chooseIcon="pi pi-plus"
-        [name]="attributeModel?.name"
-        accept="image/*,application/pdf" 
-        [maxFileSize]="209715200" class="fileUploader"
-        (onSelect)="handleSingleUpload($event)" />
-</div>
-</ng-container>

package/src/lib/shared/controls/file-upload/file-upload.component.spec.ts

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

package/src/lib/shared/controls/file-upload/file-upload.component.ts

@@ -1,19 +0,0 @@
-import { Component } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { BaseControlComponent } from '../../_base/base-control/base-control.component';
-import { FormsModule } from '@angular/forms';
-import { FileUploadModule } from 'primeng/fileupload';
-
-@Component({
-  selector: 'file-upload',
-  standalone: true,
-  imports: [CommonModule, FormsModule, FileUploadModule],
-  templateUrl: './file-upload.component.html',
-  styleUrl: './file-upload.component.scss',
-})
-export class FileUploadComponent extends BaseControlComponent {
-
-  handleSingleUpload(event:any){
-    console.log(event)
-  }
-}

package/src/lib/shared/controls/number-feild/number-feild.component.html

@@ -1,39 +0,0 @@
-<ng-container>
-  <div class="">
-
-    <div *ngIf="attributeModel.displayText" class="mb-2">
-      <label>{{ attributeModel.displayText }}</label>
-      <span class="asterisk ml-1" *ngIf="attributeModel.isRequired">*</span>
-    </div>
-    @if (attributeModel.readonly) {
-      <div class="mb-2" [ngStyle]="{'font-size':'14px', 'color':'#0F1729', 'font-weight':'600'}">
-        @if(attributeModel.numberMode == "currency"){
-
-          <label>&#163; {{ getValue() }}.00</label>
-        }@else{
-          <label>{{ getValue() }}</label>
-
-        }
-      </div>
-    } @else {
-    <div class="inputTextBox">
-      <p-inputNumber [inputId]="attributeModel.inputId ?? 'currency-us'" [mode]="attributeModel.numberMode ?? 'decimal'"
-        [locale]="attributeModel.locale ??  'en-UK'" [currency]="attributeModel.currency ?? 'GBP'"
-        [ngModel]="record[attributeModel.name]" #numberField="ngModel" class="numberFeild"
-        [placeholder]="attributeModel.placeholder ?? ''"
-        [minFractionDigits]="attributeModel.allowFraction == 'Y' ? 2 : 0" [disabled]="attributeModel?.readonly ?? false"
-        [required]="attributeModel?.isRequired ?? false" [ngStyle]="{
-        width: attributeModel.customColumnWidth
-          ? attributeModel.customColumnWidth
-          : '',
-        padding: attributeModel.customPadding
-          ? attributeModel.customPadding
-          : ''
-      }" (ngModelChange)="handleModelChange($event, numberField.valid)" [ngClass]="{
-        'ng-dirty ng-invalid': !numberField.valid && error
-      }" />
-    </div>
-  }
-  </div>
-
-</ng-container>

package/src/lib/shared/controls/number-feild/number-feild.component.scss

@@ -1,13 +0,0 @@
-.asterisk{
-color: red;
-}
-.inputTextBox{
-    position: relative;
-}
-.p-inputnumber {
-    width: 100%;
-}
-
-.numberFeild{
-    width: 100%;
-}

package/src/lib/shared/controls/number-feild/number-feild.component.spec.ts

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

package/src/lib/shared/controls/number-feild/number-feild.component.ts

@@ -1,35 +0,0 @@
-import { Component, ViewEncapsulation } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { BaseControlComponent } from '../../_base/base-control/base-control.component';
-import { InputNumberModule } from 'primeng/inputnumber';
-import { FormsModule } from '@angular/forms';
-import { BaseQuery } from 'shared/src/lib/state/base.query';
-
-@Component({
-  selector: 'number-feild',
-  standalone: true,
-  imports: [CommonModule, InputNumberModule, FormsModule],
-  templateUrl: './number-feild.component.html',
-  styleUrl: './number-feild.component.scss',
-  encapsulation: ViewEncapsulation.None
-})
-export class NumberFeildComponent extends BaseControlComponent {
-
-
-  override ngOnChanges() {
-    if(this.store) {
-      this.query = new BaseQuery(this.store)
-    }
-    if (this.attributeModel.readonly) {
-      this.getValue()
-    }
-  }
-  override getValue() {
-    if (this.attributeModel.readonly) {
-      const value = this.record[this.attributeModel.name] ?? 0;
-      return new Intl.NumberFormat('gb-Uk').format(value);
-    }
-    return null;
-  }
-
-}

package/src/lib/shared/controls/password/password.component.html

@@ -1,22 +0,0 @@
-<ng-container>
-
-  <div class="password-control">
-    <span class="p-input-icon-left">
-      <i class="pi pi-key"></i>
-      <input type="password" autocomplete="off" pInputText [placeholder]="attributeModel.placeholder ?? ''"
-        [ngModel]="record[attributeModel.name]" [required]="attributeModel.isRequired ?? false" #passwordField="ngModel"
-        (ngModelChange)="handleModelChange($event, passwordField.valid)" [ngClass]="{
-      'ng-dirty ng-invalid': !passwordField.valid && error == attributeModel.name
-    }" class="block p-inputtext" />
-
-    </span>
-  </div>
-  @if (!passwordField.valid && passwordField.dirty) {
-  <div>
-    <small id="password-help" class="p-error">{{
-      invalidPasswordErrorMsg
-      }}</small>
-  </div>
-  }
-
-</ng-container>

package/src/lib/shared/controls/password/password.component.spec.ts

@@ -1,28 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { PasswordComponent } from './password.component';
-
-describe('PasswordComponent', () => {
-  let component: PasswordComponent;
-  let fixture: ComponentFixture<PasswordComponent>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [PasswordComponent],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(PasswordComponent);
-    component = fixture.componentInstance;
-    component.attributeModel = {
-      placeholder: "Enter username",
-      name: "username",
-      isRequired: true,
-      readonly: false
-    };
-    component.record = {};
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/shared/controls/password/password.component.ts

@@ -1,24 +0,0 @@
-import { Component , OnInit} from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { BaseControlComponent } from '../../_base/base-control/base-control.component';
-import { FormsModule } from '@angular/forms';
-
-@Component({
-  selector: 'password',
-  standalone: true,
-  imports: [CommonModule, FormsModule],
-  templateUrl: './password.component.html',
-  styleUrl: './password.component.scss',
-})
-export class PasswordComponent extends BaseControlComponent {
-  invalidPasswordErrorMsg: string | undefined
-  
-  constructor(){
-    super()
-  }
-
-  ngOninit():void{
-    this.invalidPasswordErrorMsg = "Invalid Password";
-  }
-
-}

package/src/lib/shared/controls/text-area/text-area.component.html

@@ -1,36 +0,0 @@
-<ng-container class="textAreaContainer">
-  <div *ngIf="attributeModel.displayText" class="mb-2">
-    <label>{{ attributeModel.displayText }}</label>
-    <span class="asterisk ml-1" *ngIf="attributeModel.isRequired">*</span>
-  </div>
-   @if (attributeModel.readonly) {
-    <div class="mb-2" [ngStyle]="{'font-size':'14px', 'color':'#0F1729', 'font-weight':'600' }">
-      <label class="text-value-wrapper" [ngStyle]="{color: attributeModel.textColorOnReadonly}">{{ getValue() }}</label>
-    </div>
-  } @else {
-    <div class="textAreaControl">
-      <textarea
-        pInputTextarea
-        [rows]="rowspan ?? 3"
-        cols="30"
-        [disabled]="attributeModel?.readonly ?? false"
-        [ngModel]="record[attributeModel.name]"
-        [name]="attributeModel.name ?? 'textArea'"
-        [required]="attributeModel?.isRequired ?? false"
-        [ngStyle]="{
-          width: attributeModel.customColumnWidth
-            ? attributeModel.customColumnWidth
-            : ''
-        }"
-        #textArea="ngModel"
-        (ngModelChange)="handleModelChange($event, textArea.valid)"
-        [ngClass]="{
-          'ng-dirty ng-invalid':
-            (!textArea.valid && error == attributeModel?.name)
-           
-        }"
-      ></textarea>
-      
-    </div>
-  }
-</ng-container>

package/src/lib/shared/controls/text-area/text-area.component.scss

@@ -1,22 +0,0 @@
-.asterisk {
-  color: red;
-}
-
-.textAreaControl {
-  textarea {
-    width: 100%;
-    resize: vertical;
-  }
-  position: relative;
-}
-
-.textCount {
-  position: absolute;
-  bottom: 10%;
-  right: 2%;
-  color: #bcbcbc;
-}
-
-.markRed {
-  color: red;
-}

package/src/lib/shared/controls/text-area/text-area.component.spec.ts

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