primekit 1.0.9 → 1.0.10

package/src/lib/lib/atomix-form/atomix-form-chips/atomix-form-chips.component.spec.ts

@@ -0,0 +1,153 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { AtomixFormChipsComponent } from './atomix-form-chips.component';
+
+describe('AtomixFormChipsComponent', () => {
+  let component: AtomixFormChipsComponent;
+  let fixture: ComponentFixture<AtomixFormChipsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixFormChipsComponent],
+      imports: [ReactiveFormsModule],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixFormChipsComponent);
+    component = fixture.componentInstance;
+    component.form = new FormGroup({ testField: new FormControl([]) });
+    component.controlName = 'testField';
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('FormGroup binding', () => {
+    it('should return the correct FormControl from the form via control accessor', () => {
+      const control = component.control;
+      expect(control).toBe(component.form.get('testField'));
+    });
+
+    it('should return a FormControl instance', () => {
+      expect(component.control).toBeInstanceOf(FormControl);
+    });
+
+    it('should reflect the form control value', () => {
+      component.form.get('testField')!.setValue(['chip1', 'chip2']);
+      expect(component.control.value).toEqual(['chip1', 'chip2']);
+    });
+  });
+
+  describe('chip add/remove updating form control', () => {
+    it('should update form control value when a chip is added', () => {
+      component.control.setValue(['chip1']);
+      expect(component.form.get('testField')!.value).toEqual(['chip1']);
+    });
+
+    it('should update form control value when multiple chips are added', () => {
+      component.control.setValue(['chip1', 'chip2', 'chip3']);
+      expect(component.form.get('testField')!.value).toEqual(['chip1', 'chip2', 'chip3']);
+    });
+
+    it('should update form control value when a chip is removed', () => {
+      component.control.setValue(['chip1', 'chip2', 'chip3']);
+      component.control.setValue(['chip1', 'chip3']);
+      expect(component.form.get('testField')!.value).toEqual(['chip1', 'chip3']);
+    });
+
+    it('should update form control to empty array when all chips are removed', () => {
+      component.control.setValue(['chip1', 'chip2']);
+      component.control.setValue([]);
+      expect(component.form.get('testField')!.value).toEqual([]);
+    });
+  });
+
+  describe('input properties', () => {
+    it('should have default label as empty string', () => {
+      expect(component.label).toBe('');
+    });
+
+    it('should accept label input', () => {
+      component.label = 'Tags';
+      expect(component.label).toBe('Tags');
+    });
+
+    it('should have default placeholder as empty string', () => {
+      expect(component.placeholder).toBe('');
+    });
+
+    it('should accept placeholder input', () => {
+      component.placeholder = 'Add a tag';
+      expect(component.placeholder).toBe('Add a tag');
+    });
+
+    it('should accept tooltip input', () => {
+      component.tooltip = 'Enter tags separated by comma';
+      expect(component.tooltip).toBe('Enter tags separated by comma');
+    });
+
+    it('should have default tooltipPosition as bottom', () => {
+      expect(component.tooltipPosition).toBe('bottom');
+    });
+
+    it('should accept tooltipPosition input', () => {
+      component.tooltipPosition = 'top';
+      expect(component.tooltipPosition).toBe('top');
+    });
+
+    it('should have default type as text', () => {
+      expect(component.type).toBe('text');
+    });
+
+    it('should accept type input', () => {
+      component.type = 'email';
+      expect(component.type).toBe('email');
+    });
+
+    it('should have default styleClass as empty string', () => {
+      expect(component.styleClass).toBe('');
+    });
+
+    it('should accept styleClass input', () => {
+      component.styleClass = 'custom-class';
+      expect(component.styleClass).toBe('custom-class');
+    });
+
+    it('should have default allowDuplicate as false', () => {
+      expect(component.allowDuplicate).toBe(false);
+    });
+
+    it('should accept allowDuplicate input', () => {
+      component.allowDuplicate = true;
+      expect(component.allowDuplicate).toBe(true);
+    });
+
+    it('should have default isLabelIconRequired as false', () => {
+      expect(component.isLabelIconRequired).toBe(false);
+    });
+
+    it('should accept isLabelIconRequired input', () => {
+      component.isLabelIconRequired = true;
+      expect(component.isLabelIconRequired).toBe(true);
+    });
+
+    it('should have default isLabelIconData with empty values', () => {
+      expect(component.isLabelIconData).toEqual({
+        iconClass: '',
+        tooltip: '',
+      });
+    });
+
+    it('should accept isLabelIconData input', () => {
+      component.isLabelIconData = {
+        iconClass: 'pi pi-info-circle',
+        tooltip: 'Help text',
+      };
+      expect(component.isLabelIconData).toEqual({
+        iconClass: 'pi pi-info-circle',
+        tooltip: 'Help text',
+      });
+    });
+  });
+});

package/src/lib/lib/atomix-form/atomix-form-chips/atomix-form-chips.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { LabelIconData } from './form.chips.models';
+
+@Component({
+  selector: 'atomix-form-chips',
+  templateUrl: './atomix-form-chips.component.html',
+  styleUrls: ['./atomix-form-chips.component.scss'],
+})
+export class AtomixFormChipsComponent {
+  @Input() controlName!: string;
+  @Input() form!: FormGroup;
+  @Input() label = '';
+  @Input() placeholder = '';
+  @Input() tooltip!: string;
+  @Input() tooltipPosition: 'right' | 'left' | 'top' | 'bottom' = 'bottom';
+  @Input() type = 'text';
+  @Input() styleClass = '';
+  @Input() allowDuplicate: boolean = false;
+  @Input() isLabelIconData: LabelIconData = {
+    iconClass: '',
+    tooltip: '',
+  };
+  @Input() isLabelIconRequired: boolean = false;
+  get control() {
+    return this.form.get(this.controlName) as FormControl;
+  }
+}

package/src/lib/lib/atomix-form/atomix-form-chips/form.chips.models.ts

@@ -0,0 +1,5 @@
+export type LabelIconData = {
+  iconClass: string;
+  tooltip: string;
+  required?: boolean;
+};

package/src/lib/lib/atomix-form/atomix-form-dropdown/atomix-form-dropdown.component.html

@@ -0,0 +1,24 @@
+<label *ngIf="label" [for]="controlName"
+  >{{ label }}
+  <span *ngIf="isLabelRequired" class="lib-error-asterisk">*</span>
+  <i
+    *ngIf="isLabelIconData.required"
+    [class]="isLabelIconData?.iconClass"
+    [pTooltip]="isLabelIconData?.tooltip"
+  ></i
+></label>
+<p-dropdown
+  [filter]="filterResults"
+  [formControl]="control"
+  [placeholder]="placeholder"
+  [options]="options"
+  [optionLabel]="optionLabel"
+  [optionValue]="optionValue"
+  [showClear]="showClear"
+  [pTooltip]="tooltip"
+  [tooltipPosition]="tooltipPosition"
+  (onChange)="selectionChange.emit($event)"
+  [styleClass]="styleClass + ' form-dropdown'"
+  appendTo="body"
+>
+</p-dropdown>

package/src/lib/lib/atomix-form/atomix-form-dropdown/atomix-form-dropdown.component.scss

@@ -0,0 +1,15 @@
+::ng-deep .form-dropdown {
+  margin-top: 0.2rem !important;
+  border-radius: 30px;
+  .p-inputtext {
+    padding: 1rem 1rem !important;
+  }
+}
+
+.lib-error-asterisk {
+  color: red;
+}
+
+.error-asterisk {
+  color: red;
+}

package/src/lib/lib/atomix-form/atomix-form-dropdown/atomix-form-dropdown.component.spec.ts

@@ -0,0 +1,156 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { AtomixFormDropdownComponent } from './atomix-form-dropdown.component';
+
+describe('AtomixFormDropdownComponent', () => {
+  let component: AtomixFormDropdownComponent;
+  let fixture: ComponentFixture<AtomixFormDropdownComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixFormDropdownComponent],
+      imports: [ReactiveFormsModule],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixFormDropdownComponent);
+    component = fixture.componentInstance;
+    component.form = new FormGroup({ testField: new FormControl('') });
+    component.controlName = 'testField';
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('FormGroup binding', () => {
+    it('should return the correct FormControl from the form via control accessor', () => {
+      const control = component.control;
+      expect(control).toBe(component.form.get('testField'));
+    });
+
+    it('should return a FormControl instance', () => {
+      expect(component.control).toBeInstanceOf(FormControl);
+    });
+
+    it('should reflect the form control value', () => {
+      component.form.get('testField')!.setValue('optionA');
+      expect(component.control.value).toBe('optionA');
+    });
+  });
+
+  describe('options input', () => {
+    it('should accept options input', () => {
+      const options = [
+        { label: 'Option A', value: 'a' },
+        { label: 'Option B', value: 'b' },
+      ];
+      component.options = options;
+      expect(component.options).toEqual(options);
+    });
+
+    it('should accept optionLabel input', () => {
+      component.optionLabel = 'name';
+      expect(component.optionLabel).toBe('name');
+    });
+
+    it('should accept optionValue input', () => {
+      component.optionValue = 'id';
+      expect(component.optionValue).toBe('id');
+    });
+  });
+
+  describe('selection updating form control', () => {
+    it('should emit selectionChange when selection occurs', () => {
+      const emitSpy = jest.fn();
+      component.selectionChange.subscribe(emitSpy);
+
+      const mockEvent = { value: 'selectedValue' };
+      component.selectionChange.emit(mockEvent);
+
+      expect(emitSpy).toHaveBeenCalledWith(mockEvent);
+    });
+
+    it('should update form control value when set programmatically', () => {
+      component.control.setValue('newSelection');
+      expect(component.form.get('testField')!.value).toBe('newSelection');
+    });
+  });
+
+  describe('input properties', () => {
+    it('should have default label as empty string', () => {
+      expect(component.label).toBe('');
+    });
+
+    it('should accept label input', () => {
+      component.label = 'Select Country';
+      expect(component.label).toBe('Select Country');
+    });
+
+    it('should have default placeholder as empty string', () => {
+      expect(component.placeholder).toBe('');
+    });
+
+    it('should accept placeholder input', () => {
+      component.placeholder = 'Choose an option';
+      expect(component.placeholder).toBe('Choose an option');
+    });
+
+    it('should have default filterResults as false', () => {
+      expect(component.filterResults).toBe(false);
+    });
+
+    it('should accept filterResults input', () => {
+      component.filterResults = true;
+      expect(component.filterResults).toBe(true);
+    });
+
+    it('should have default showClear as true', () => {
+      expect(component.showClear).toBe(true);
+    });
+
+    it('should accept showClear input', () => {
+      component.showClear = false;
+      expect(component.showClear).toBe(false);
+    });
+
+    it('should have default tooltipPosition as bottom', () => {
+      expect(component.tooltipPosition).toBe('bottom');
+    });
+
+    it('should accept tooltipPosition input', () => {
+      component.tooltipPosition = 'top';
+      expect(component.tooltipPosition).toBe('top');
+    });
+
+    it('should have default isLabelRequired as false', () => {
+      expect(component.isLabelRequired).toBe(false);
+    });
+
+    it('should accept isLabelRequired input', () => {
+      component.isLabelRequired = true;
+      expect(component.isLabelRequired).toBe(true);
+    });
+
+    it('should accept styleClass input', () => {
+      component.styleClass = 'custom-class';
+      expect(component.styleClass).toBe('custom-class');
+    });
+
+    it('should accept tooltip input', () => {
+      component.tooltip = 'Help text';
+      expect(component.tooltip).toBe('Help text');
+    });
+  });
+
+  describe('filterEvent output', () => {
+    it('should emit filterEvent when triggered', () => {
+      const emitSpy = jest.fn();
+      component.filterEvent.subscribe(emitSpy);
+
+      component.filterEvent.emit('search term');
+
+      expect(emitSpy).toHaveBeenCalledWith('search term');
+    });
+  });
+});

package/src/lib/lib/atomix-form/atomix-form-dropdown/atomix-form-dropdown.component.ts

@@ -0,0 +1,36 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { LabelIconData } from '../atomix-form-chips/form.chips.models';
+
+@Component({
+  selector: 'atomix-form-dropdown',
+  templateUrl: './atomix-form-dropdown.component.html',
+  styleUrls: ['./atomix-form-dropdown.component.scss'],
+})
+export class AtomixFormDropdownComponent {
+  @Input() controlName!: string;
+  @Input() filterResults = false;
+  @Input() form!: FormGroup;
+  @Input() label = '';
+  @Input() optionLabel = '';
+  @Input() optionValue = '';
+  @Input() options!: any;
+  @Input() placeholder = '';
+  @Input() showClear = true;
+  @Input() tooltip!: string;
+  @Input() tooltipPosition: 'right' | 'left' | 'top' | 'bottom' = 'bottom';
+  @Input() isLabelRequired: boolean = false;
+  @Input() styleClass!: string;
+  @Input() isLabelIconData: LabelIconData = {
+    iconClass: '',
+    tooltip: '',
+    required: false,
+  };
+
+  @Output() selectionChange = new EventEmitter();
+  @Output() filterEvent = new EventEmitter<string>();
+
+  get control() {
+    return this.form.get(this.controlName) as FormControl;
+  }
+}

package/src/lib/lib/atomix-form/atomix-form-input-component/atomix-form-input-component.component.html

@@ -0,0 +1,33 @@
+<label *ngIf="label" [for]="controlName"
+  >{{ label }} <span *ngIf="isLabelRequired" class="error-asterisk">*</span
+  ><i
+    *ngIf="isLabelIconRequired"
+    [class]="isLabelIconData?.iconClass + ' ml-2'"
+    [pTooltip]="isLabelIconData?.tooltip"
+  ></i
+></label>
+<div class="input-wrapper">
+  <input
+    pInputText
+    [id]="controlName"
+    [formControl]="control"
+    [placeholder]="placeholder"
+    [maxlength]="max"
+    [min]="min"
+    (input)="onInput($event)"
+    [pTooltip]="tooltip"
+    [type]="type"
+    [tooltipPosition]="tooltipPosition"
+    [ngClass]="class + ' lib-input-field' + (buttonText ? ' with-button' : '')"
+    autocomplete="new-password"
+    [style]="style"
+  />
+  <button
+    *ngIf="buttonText"
+    (click)="buttonClick.emit()"
+    class="inline-button"
+    [type]="buttonType"
+  >
+    {{ buttonText }}
+  </button>
+</div>

package/src/lib/lib/atomix-form/atomix-form-input-component/atomix-form-input-component.component.scss

@@ -0,0 +1,32 @@
+::ng-deep .lib-input-field {
+  border-radius: var(--global-border-radius);
+  margin-top: 0.2rem;
+}
+::ng-deep .lib-input-field.with-button {
+  padding-right: 6rem;
+}
+.error-asterisk {
+  color: red;
+}
+.input-wrapper {
+  position: relative;
+}
+.inline-button {
+  position: absolute;
+  right: 5px;
+  background-color: transparent;
+  color: #63b77e;
+  font-weight: 700;
+  border: none;
+  cursor: pointer;
+  font-size: 0.875rem;
+  height: 95%;
+  margin-top: 0.2rem;
+  border-left: 1px solid grey;
+  &:focus {
+    outline: none;
+  }
+  &:hover {
+    background-color: transparent;
+  }
+}

package/src/lib/lib/atomix-form/atomix-form-input-component/atomix-form-input-component.component.spec.ts

@@ -0,0 +1,156 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { AtomixFormInputComponent } from './atomix-form-input-component.component';
+
+describe('AtomixFormInputComponent', () => {
+  let component: AtomixFormInputComponent;
+  let fixture: ComponentFixture<AtomixFormInputComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixFormInputComponent],
+      imports: [ReactiveFormsModule],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixFormInputComponent);
+    component = fixture.componentInstance;
+    component.form = new FormGroup({ testField: new FormControl('') });
+    component.controlName = 'testField';
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('FormGroup binding', () => {
+    it('should return the correct FormControl from the form via control accessor', () => {
+      const control = component.control;
+      expect(control).toBe(component.form.get('testField'));
+    });
+
+    it('should return a FormControl instance', () => {
+      expect(component.control).toBeInstanceOf(FormControl);
+    });
+
+    it('should reflect the form control value', () => {
+      component.form.get('testField')!.setValue('hello');
+      expect(component.control.value).toBe('hello');
+    });
+  });
+
+  describe('input properties', () => {
+    it('should have default label as empty string', () => {
+      expect(component.label).toBe('');
+    });
+
+    it('should accept label input', () => {
+      component.label = 'Username';
+      fixture.detectChanges();
+      expect(component.label).toBe('Username');
+    });
+
+    it('should have default placeholder as empty string', () => {
+      expect(component.placeholder).toBe('');
+    });
+
+    it('should accept placeholder input', () => {
+      component.placeholder = 'Enter value';
+      fixture.detectChanges();
+      expect(component.placeholder).toBe('Enter value');
+    });
+
+    it('should have default type as text', () => {
+      expect(component.type).toBe('text');
+    });
+
+    it('should accept type input', () => {
+      component.type = 'number';
+      fixture.detectChanges();
+      expect(component.type).toBe('number');
+    });
+
+    it('should have default tooltipPosition as bottom', () => {
+      expect(component.tooltipPosition).toBe('bottom');
+    });
+
+    it('should accept tooltipPosition input', () => {
+      component.tooltipPosition = 'top';
+      fixture.detectChanges();
+      expect(component.tooltipPosition).toBe('top');
+    });
+
+    it('should have default buttonText as empty string', () => {
+      expect(component.buttonText).toBe('');
+    });
+
+    it('should accept buttonText input', () => {
+      component.buttonText = 'Submit';
+      fixture.detectChanges();
+      expect(component.buttonText).toBe('Submit');
+    });
+
+    it('should have default buttonType as button', () => {
+      expect(component.buttonType).toBe('button');
+    });
+
+    it('should accept buttonType input', () => {
+      component.buttonType = 'submit';
+      fixture.detectChanges();
+      expect(component.buttonType).toBe('submit');
+    });
+
+    it('should have default isLabelRequired as false', () => {
+      expect(component.isLabelRequired).toBe(false);
+    });
+
+    it('should accept isLabelRequired input', () => {
+      component.isLabelRequired = true;
+      fixture.detectChanges();
+      expect(component.isLabelRequired).toBe(true);
+    });
+
+    it('should have default isLabelIconRequired as false', () => {
+      expect(component.isLabelIconRequired).toBe(false);
+    });
+
+    it('should accept isLabelIconRequired input', () => {
+      component.isLabelIconRequired = true;
+      fixture.detectChanges();
+      expect(component.isLabelIconRequired).toBe(true);
+    });
+  });
+
+  describe('changeValueHandler emission', () => {
+    it('should emit changeValueHandler when onInput is called', () => {
+      const emitSpy = jest.fn();
+      component.changeValueHandler.subscribe(emitSpy);
+
+      const mockEvent = { target: { value: 'new value' } } as unknown as Event;
+      component.onInput(mockEvent);
+
+      expect(emitSpy).toHaveBeenCalledWith('new value');
+    });
+
+    it('should emit empty string when input is cleared', () => {
+      const emitSpy = jest.fn();
+      component.changeValueHandler.subscribe(emitSpy);
+
+      const mockEvent = { target: { value: '' } } as unknown as Event;
+      component.onInput(mockEvent);
+
+      expect(emitSpy).toHaveBeenCalledWith('');
+    });
+  });
+
+  describe('buttonClick emission', () => {
+    it('should emit buttonClick when triggered', () => {
+      const emitSpy = jest.fn();
+      component.buttonClick.subscribe(emitSpy);
+
+      component.buttonClick.emit();
+
+      expect(emitSpy).toHaveBeenCalled();
+    });
+  });
+});

package/src/lib/lib/atomix-form/atomix-form-input-component/atomix-form-input-component.component.ts

@@ -0,0 +1,42 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { LabelIconData } from '../atomix-form-chips/form.chips.models';
+
+@Component({
+  selector: 'atomix-form-input',
+  templateUrl: './atomix-form-input-component.component.html',
+  styleUrls: ['./atomix-form-input-component.component.scss'],
+})
+export class AtomixFormInputComponent {
+  @Input() controlName!: string;
+  @Input() form!: FormGroup;
+  @Input() label = '';
+  @Input() max!: number | null;
+  @Input() min!: number;
+  @Input() placeholder = '';
+  @Input() type = 'text';
+  @Input() tooltip!: string;
+  @Input() class!: string;
+  @Input() style: any;
+  @Input() isLabelIconData: LabelIconData = {
+    iconClass: '',
+    tooltip: '',
+  };
+  @Input() isLabelIconRequired: boolean = false;
+  @Input() isLabelRequired: boolean = false;
+  @Input() tooltipPosition: 'right' | 'left' | 'top' | 'bottom' = 'bottom';
+  @Input() buttonText: string = '';
+  @Input() buttonType: 'button' | 'submit' = 'button';
+  @Output() changeValueHandler = new EventEmitter<string>();
+  @Output() buttonClick = new EventEmitter<void>();
+
+  get control() {
+    return this.form.get(this.controlName) as FormControl;
+  }
+  onInput(event: Event): void {
+    console.log(this.buttonType);
+    const input = event.target as HTMLInputElement;
+
+    this.changeValueHandler.emit(input.value);
+  }
+}