primekit 1.0.9 → 1.0.11

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

@@ -0,0 +1,169 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { AtomixFormAutocompleteComponent } from './atomix-form-autocomplete.component';
+
+describe('AtomixFormAutocompleteComponent', () => {
+  let component: AtomixFormAutocompleteComponent;
+  let fixture: ComponentFixture<AtomixFormAutocompleteComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixFormAutocompleteComponent],
+      imports: [ReactiveFormsModule],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixFormAutocompleteComponent);
+    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('test value');
+      expect(component.control.value).toBe('test value');
+    });
+  });
+
+  describe('suggestions input', () => {
+    it('should have default suggestions as empty array', () => {
+      expect(component.suggestions).toEqual([]);
+    });
+
+    it('should accept suggestions input', () => {
+      const suggestions = [{ name: 'Option 1' }, { name: 'Option 2' }];
+      component.suggestions = suggestions;
+      expect(component.suggestions).toEqual(suggestions);
+    });
+
+    it('should accept string suggestions', () => {
+      const suggestions = ['Apple', 'Banana', 'Cherry'];
+      component.suggestions = suggestions;
+      expect(component.suggestions).toEqual(suggestions);
+    });
+  });
+
+  describe('selection updating form control', () => {
+    it('should update form control value when a selection is made', () => {
+      const selectedValue = { name: 'Selected Option' };
+      component.control.setValue(selectedValue);
+      expect(component.form.get('testField')!.value).toEqual(selectedValue);
+    });
+
+    it('should update form control value with a string selection', () => {
+      component.control.setValue('Selected String');
+      expect(component.form.get('testField')!.value).toBe('Selected String');
+    });
+
+    it('should clear form control value when cleared', () => {
+      component.control.setValue('some value');
+      component.control.setValue('');
+      expect(component.form.get('testField')!.value).toBe('');
+    });
+  });
+
+  describe('output events', () => {
+    it('should emit queryEvent when onQuery is called', () => {
+      jest.spyOn(component.queryEvent, 'emit');
+      const event = { query: 'search term' } as any;
+      component.onQuery(event);
+      expect(component.queryEvent.emit).toHaveBeenCalledWith('search term');
+    });
+
+    it('should emit onSelect when onOptionSelected is called', () => {
+      jest.spyOn(component.onSelect, 'emit');
+      const event = { value: { name: 'Option 1' } } as any;
+      component.onOptionSelected(event);
+      expect(component.onSelect.emit).toHaveBeenCalledWith(event);
+    });
+  });
+
+  describe('input properties', () => {
+    it('should have default label as empty string', () => {
+      expect(component.label).toBe('');
+    });
+
+    it('should accept label input', () => {
+      component.label = 'Search';
+      expect(component.label).toBe('Search');
+    });
+
+    it('should have default placeholder as empty string', () => {
+      expect(component.placeholder).toBe('');
+    });
+
+    it('should accept placeholder input', () => {
+      component.placeholder = 'Type to search';
+      expect(component.placeholder).toBe('Type to search');
+    });
+
+    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 accept tooltip input', () => {
+      component.tooltip = 'Search for items';
+      expect(component.tooltip).toBe('Search for items');
+    });
+
+    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 accept styleClass input', () => {
+      component.styleClass = 'custom-autocomplete';
+      expect(component.styleClass).toBe('custom-autocomplete');
+    });
+
+    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 have default field as empty string', () => {
+      expect(component.field).toBe('');
+    });
+
+    it('should accept field input', () => {
+      component.field = 'name';
+      expect(component.field).toBe('name');
+    });
+
+    it('should have default dropdown as true', () => {
+      expect(component.dropdown).toBe(true);
+    });
+
+    it('should accept dropdown input', () => {
+      component.dropdown = false;
+      expect(component.dropdown).toBe(false);
+    });
+  });
+});

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

@@ -0,0 +1,41 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import {
+  AutoCompleteCompleteEvent,
+  AutoCompleteSelectEvent,
+} from 'primeng/autocomplete';
+
+@Component({
+  selector: 'atomix-form-autocomplete',
+  templateUrl: './atomix-form-autocomplete.component.html',
+  styleUrls: ['./atomix-form-autocomplete.component.scss'],
+})
+export class AtomixFormAutocompleteComponent {
+  @Input() controlName!: string;
+  @Input() form!: FormGroup;
+  @Input() label = '';
+  @Input() suggestions: any[] = [];
+  @Input() placeholder = '';
+  @Input() type = 'text';
+  @Input() tooltip!: string;
+  @Input() styleClass!: string;
+  @Input() isLabelRequired: boolean = false;
+  @Input() tooltipPosition: 'right' | 'left' | 'top' | 'bottom' = 'bottom';
+  @Input() field: string = '';
+  @Input() dropdown = true;
+  @Output() queryEvent = new EventEmitter<string>();
+  @Output() onSelect = new EventEmitter<AutoCompleteSelectEvent | Event>();
+
+  onQuery(event: AutoCompleteCompleteEvent) {
+    this.queryEvent.emit(event.query);
+  }
+
+  onOptionSelected(event: AutoCompleteSelectEvent) {
+    console.log('lib', event);
+    this.onSelect.emit(event);
+  }
+
+  get control() {
+    return this.form.get(this.controlName) as FormControl;
+  }
+}

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

@@ -0,0 +1,21 @@
+<label *ngIf="label" [for]="controlName"
+  >{{ label }}
+  <span *ngIf="isLabelRequired" class="error-asterisk">*</span></label
+>
+<p-calendar
+  [formControl]="control"
+  id="calendar"
+  tooltipPosition="top"
+  [view]="view"
+  [dateFormat]="dateFormat"
+  [maxDate]="maxDate"
+  [minDate]="minDate"
+  [selectionMode]="selectionMode"
+  [readonlyInput]="true"
+  [placeholder]="placeholder"
+  (onClose)="dateSelectHandler.emit()"
+  [inputStyleClass]="inputStyleClass"
+  [styleClass]="styleClass + '  form-calendar'"
+  appendTo="body"
+  (onSelect)="dateChangeHandler.emit($event)"
+/>

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

@@ -0,0 +1,7 @@
+::ng-deep .form-calendar {
+  width: 100%;
+  input {
+    border-radius: var(--global-border-radius) !important;
+    margin-top: 0.2rem;
+  }
+}

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

@@ -0,0 +1,142 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { AtomixFormCalendarComponent } from './atomix-form-calendar.component';
+
+describe('AtomixFormCalendarComponent', () => {
+  let component: AtomixFormCalendarComponent;
+  let fixture: ComponentFixture<AtomixFormCalendarComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixFormCalendarComponent],
+      imports: [ReactiveFormsModule],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixFormCalendarComponent);
+    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('2024-01-15');
+      expect(component.control.value).toBe('2024-01-15');
+    });
+  });
+
+  describe('date selection updating form control', () => {
+    it('should update form control value when set programmatically', () => {
+      const date = new Date(2024, 5, 15);
+      component.control.setValue(date);
+      expect(component.form.get('testField')!.value).toBe(date);
+    });
+
+    it('should emit dateSelectHandler on calendar close', () => {
+      const emitSpy = jest.fn();
+      component.dateSelectHandler.subscribe(emitSpy);
+
+      component.dateSelectHandler.emit();
+
+      expect(emitSpy).toHaveBeenCalled();
+    });
+
+    it('should emit dateChangeHandler on date select', () => {
+      const emitSpy = jest.fn();
+      component.dateChangeHandler.subscribe(emitSpy);
+
+      const mockDate = new Date(2024, 5, 15);
+      component.dateChangeHandler.emit(mockDate);
+
+      expect(emitSpy).toHaveBeenCalledWith(mockDate);
+    });
+  });
+
+  describe('input properties', () => {
+    it('should have default label as empty string', () => {
+      expect(component.label).toBe('');
+    });
+
+    it('should accept label input', () => {
+      component.label = 'Start Date';
+      expect(component.label).toBe('Start Date');
+    });
+
+    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 have default placeholder as empty string', () => {
+      expect(component.placeholder).toBe('');
+    });
+
+    it('should accept placeholder input', () => {
+      component.placeholder = 'Select a date';
+      expect(component.placeholder).toBe('Select a date');
+    });
+
+    it('should accept view input', () => {
+      component.view = 'month';
+      expect(component.view).toBe('month');
+    });
+
+    it('should accept dateFormat input', () => {
+      component.dateFormat = 'mm/dd/yy';
+      expect(component.dateFormat).toBe('mm/dd/yy');
+    });
+
+    it('should accept maxDate input', () => {
+      const maxDate = new Date(2025, 11, 31);
+      component.maxDate = maxDate;
+      expect(component.maxDate).toBe(maxDate);
+    });
+
+    it('should accept minDate input', () => {
+      const minDate = new Date(2020, 0, 1);
+      component.minDate = minDate;
+      expect(component.minDate).toBe(minDate);
+    });
+
+    it('should accept selectionMode input', () => {
+      component.selectionMode = 'range';
+      expect(component.selectionMode).toBe('range');
+    });
+
+    it('should have default styleClass as empty string', () => {
+      expect(component.styleClass).toBe('');
+    });
+
+    it('should accept styleClass input', () => {
+      component.styleClass = 'custom-calendar';
+      expect(component.styleClass).toBe('custom-calendar');
+    });
+
+    it('should have default inputStyleClass as empty string', () => {
+      expect(component.inputStyleClass).toBe('');
+    });
+
+    it('should accept inputStyleClass input', () => {
+      component.inputStyleClass = 'custom-input';
+      expect(component.inputStyleClass).toBe('custom-input');
+    });
+  });
+});

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

@@ -0,0 +1,32 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { CalendarTypeView } from 'primeng/calendar';
+
+@Component({
+  selector: 'atomix-form-calendar',
+  templateUrl: './atomix-form-calendar.component.html',
+  styleUrls: ['./atomix-form-calendar.component.scss'],
+})
+export class AtomixFormCalendarComponent {
+  @Input() controlName!: string;
+  @Input() form!: FormGroup;
+  @Input() view!: CalendarTypeView;
+  @Input() dateFormat!: string;
+  @Input() label = '';
+  @Input() isLabelRequired: boolean = false;
+
+  @Input() maxDate!: Date;
+  @Input() minDate!: Date;
+  @Input() selectionMode!: 'single' | 'multiple' | 'range' | undefined;
+  @Input() placeholder = '';
+
+  @Input() styleClass = '';
+  @Input() inputStyleClass = '';
+
+  @Output() dateSelectHandler = new EventEmitter<any>();
+  @Output() dateChangeHandler = new EventEmitter<any>();
+
+  get control() {
+    return this.form.get(this.controlName) as FormControl;
+  }
+}

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

@@ -0,0 +1,13 @@
+<div [ngClass]="inline ? 'checkbox-item-inline' : 'checkbox-item'">
+  <label [htmlFor]="controlName" *ngIf="label" [htmlFor]="controlName">{{
+    label
+  }}</label>
+  <p-checkbox
+    [binary]="true"
+    [formControl]="control"
+    [inputId]="controlName"
+    [pTooltip]="tooltip"
+    [tooltipPosition]="tooltipPosition"
+    (onChange)="onChange($event)"
+  ></p-checkbox>
+</div>

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

@@ -0,0 +1,14 @@
+.checkbox-item {
+  min-height: 72px !important;
+  display: flex;
+  justify-content: space-evenly;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.checkbox-item-inline {
+  display: flex;
+  justify-content: flex-end;
+  flex-direction: row-reverse;
+  gap: 0.5rem;
+}

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

@@ -0,0 +1,112 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { AtomixFormCheckboxComponent } from './atomix-form-checkbox.component';
+
+describe('AtomixFormCheckboxComponent', () => {
+  let component: AtomixFormCheckboxComponent;
+  let fixture: ComponentFixture<AtomixFormCheckboxComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixFormCheckboxComponent],
+      imports: [ReactiveFormsModule],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixFormCheckboxComponent);
+    component = fixture.componentInstance;
+    component.form = new FormGroup({ testField: new FormControl(false) });
+    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(true);
+      expect(component.control.value).toBe(true);
+    });
+  });
+
+  describe('checkbox toggle updating form control', () => {
+    it('should update form control value when toggled to true', () => {
+      component.control.setValue(true);
+      expect(component.form.get('testField')!.value).toBe(true);
+    });
+
+    it('should update form control value when toggled to false', () => {
+      component.control.setValue(true);
+      component.control.setValue(false);
+      expect(component.form.get('testField')!.value).toBe(false);
+    });
+
+    it('should emit valueChange on onChange', () => {
+      const emitSpy = jest.fn();
+      component.valueChange.subscribe(emitSpy);
+
+      const mockEvent = { checked: true };
+      component.onChange(mockEvent);
+
+      expect(emitSpy).toHaveBeenCalledWith(mockEvent);
+    });
+  });
+
+  describe('input properties', () => {
+    it('should have default binary as false', () => {
+      expect(component.binary).toBe(false);
+    });
+
+    it('should accept binary input', () => {
+      component.binary = true;
+      expect(component.binary).toBe(true);
+    });
+
+    it('should have default inline as false', () => {
+      expect(component.inline).toBe(false);
+    });
+
+    it('should accept inline input', () => {
+      component.inline = true;
+      expect(component.inline).toBe(true);
+    });
+
+    it('should have default label as empty string', () => {
+      expect(component.label).toBe('');
+    });
+
+    it('should accept label input', () => {
+      component.label = 'Accept Terms';
+      expect(component.label).toBe('Accept Terms');
+    });
+
+    it('should accept tooltip input', () => {
+      component.tooltip = 'Check to agree';
+      expect(component.tooltip).toBe('Check to agree');
+    });
+
+    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 accept value input', () => {
+      component.value = 'option1';
+      expect(component.value).toBe('option1');
+    });
+  });
+});

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

@@ -0,0 +1,28 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'atomix-form-checkbox',
+  templateUrl: './atomix-form-checkbox.component.html',
+  styleUrls: ['./atomix-form-checkbox.component.scss'],
+})
+export class AtomixFormCheckboxComponent {
+  @Input() binary = false;
+  @Input() controlName!: string;
+  @Input() form!: FormGroup;
+  @Input() inline = false;
+  @Input() label = '';
+  @Input() tooltip!: string;
+  @Input() tooltipPosition: 'right' | 'left' | 'top' | 'bottom' = 'bottom';
+  @Input() value!: string;
+
+  @Output() valueChange = new EventEmitter();
+
+  get control() {
+    return this.form.get(this.controlName) as FormControl;
+  }
+
+  onChange(event: any) {
+    this.valueChange.emit(event);
+  }
+}

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

@@ -0,0 +1,20 @@
+<div class="item flex flex-column">
+  <label *ngIf="label" [htmlFor]="controlName"
+    >{{ label }}
+    <i
+      *ngIf="isLabelIconRequired"
+      [class]="isLabelIconData?.iconClass + ' ml-2'"
+      [pTooltip]="isLabelIconData?.tooltip"
+    ></i
+  ></label>
+  <p-chips
+    separator=","
+    placeholder="Separate values with a comma or enter."
+    [formControl]="control"
+    [id]="controlName"
+    [pTooltip]="tooltip"
+    [tooltipPosition]="tooltipPosition"
+    [styleClass]="styleClass + '  lib-form-chips'"
+    [allowDuplicate]="allowDuplicate"
+  ></p-chips>
+</div>

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

@@ -0,0 +1,3 @@
+::ng-deep .lib-form-chips {
+  margin-top: 0.2rem;
+}