primekit 1.0.9 → 1.0.10

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

@@ -0,0 +1,210 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AtomixAutocompleteComponent } from './atomix-autocomplete.component';
+
+describe('AtomixAutocompleteComponent', () => {
+  let component: AtomixAutocompleteComponent;
+  let fixture: ComponentFixture<AtomixAutocompleteComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixAutocompleteComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).overrideComponent(AtomixAutocompleteComponent, {
+      set: {
+        template: '<div></div>',
+      },
+    });
+    fixture = TestBed.createComponent(AtomixAutocompleteComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('input bindings', () => {
+    it('should have default suggestions as empty array', () => {
+      expect(component.suggestions).toEqual([]);
+    });
+
+    it('should have default placeholder as empty string', () => {
+      expect(component.placeholder).toBe('');
+    });
+
+    it('should have default optionLabel as empty string', () => {
+      expect(component.optionLabel).toBe('');
+    });
+
+    it('should have default optionValue as empty string', () => {
+      expect(component.optionValue).toBe('');
+    });
+
+    it('should have default optionDescription as empty string', () => {
+      expect(component.optionDescription).toBe('');
+    });
+
+    it('should have default name as empty string', () => {
+      expect(component.name).toBe('');
+    });
+
+    it('should have default disabled as false', () => {
+      expect(component.disabled).toBe(false);
+    });
+
+    it('should have default showClear as true', () => {
+      expect(component.showClear).toBe(true);
+    });
+
+    it('should have default dropdown as false', () => {
+      expect(component.dropdown).toBe(false);
+    });
+
+    it('should have default styleClass as empty string', () => {
+      expect(component.styleClass).toBe('');
+    });
+
+    it('should have default autocompleteContainer as empty string', () => {
+      expect(component.autocompleteContainer).toBe('');
+    });
+
+    it('should have default label as empty string', () => {
+      expect(component.label).toBe('');
+    });
+
+    it('should have default delay as 300', () => {
+      expect(component.delay).toBe(300);
+    });
+
+    it('should have default virtualScroll as false', () => {
+      expect(component.virtualScroll).toBe(false);
+    });
+
+    it('should have default virtualScrollItemSize as 32', () => {
+      expect(component.virtualScrollItemSize).toBe(32);
+    });
+
+    it('should have default isLabelRequired as false', () => {
+      expect(component.isLabelRequired).toBe(false);
+    });
+
+    it('should accept suggestions input', () => {
+      const suggestions = [
+        { label: 'Item 1', value: 1 },
+        { label: 'Item 2', value: 2 },
+      ];
+      component.suggestions = suggestions;
+      expect(component.suggestions).toEqual(suggestions);
+    });
+
+    it('should accept placeholder input', () => {
+      component.placeholder = 'Search...';
+      expect(component.placeholder).toBe('Search...');
+    });
+
+    it('should accept disabled input', () => {
+      component.disabled = true;
+      expect(component.disabled).toBe(true);
+    });
+  });
+
+  describe('suggestions display', () => {
+    it('should store suggestions when provided', () => {
+      const suggestions = [
+        { name: 'Apple', code: 'A' },
+        { name: 'Banana', code: 'B' },
+        { name: 'Cherry', code: 'C' },
+      ];
+      component.suggestions = suggestions;
+      expect(component.suggestions).toEqual(suggestions);
+      expect(component.suggestions.length).toBe(3);
+    });
+
+    it('should handle empty suggestions array', () => {
+      component.suggestions = [];
+      expect(component.suggestions).toEqual([]);
+      expect(component.suggestions.length).toBe(0);
+    });
+
+    it('should update suggestions when new values are set', () => {
+      component.suggestions = [{ name: 'First' }];
+      expect(component.suggestions.length).toBe(1);
+
+      component.suggestions = [{ name: 'Second' }, { name: 'Third' }];
+      expect(component.suggestions.length).toBe(2);
+    });
+  });
+
+  describe('selection emission', () => {
+    it('should emit selectOptionHandler when a suggestion is selected', () => {
+      const emitSpy = jest.fn();
+      component.selectOptionHandler.subscribe(emitSpy);
+
+      const mockEvent = { value: { name: 'Apple', code: 'A' } };
+      component.name = 'fruit';
+      component.selectOptionHandler.emit([mockEvent, 'fruit']);
+
+      expect(emitSpy).toHaveBeenCalledWith([mockEvent, 'fruit']);
+    });
+
+    it('should emit queryHandler when autocomplete query is triggered', () => {
+      const emitSpy = jest.fn();
+      component.queryHandler.subscribe(emitSpy);
+
+      const mockEvent = { query: 'app' };
+      component.name = 'search';
+      component.queryHandler.emit([mockEvent, 'search']);
+
+      expect(emitSpy).toHaveBeenCalledWith([mockEvent, 'search']);
+    });
+
+    it('should emit selectedValuesChange on model change', () => {
+      const emitSpy = jest.fn();
+      component.selectedValuesChange.subscribe(emitSpy);
+
+      const selectedItem = { name: 'Apple', code: 'A' };
+      component.onModelChange(selectedItem);
+
+      expect(emitSpy).toHaveBeenCalledWith(selectedItem);
+    });
+
+    it('should update selectedValues on model change', () => {
+      const selectedItem = { name: 'Banana', code: 'B' };
+      component.onModelChange(selectedItem);
+
+      expect(component.selectedValues).toEqual(selectedItem);
+    });
+  });
+
+  describe('ControlValueAccessor', () => {
+    it('should write value via writeValue', () => {
+      const value = { name: 'Test', code: 'T' };
+      component.writeValue(value);
+      expect(component.selectedValues).toEqual(value);
+    });
+
+    it('should register onChange function', () => {
+      const fn = jest.fn();
+      component.registerOnChange(fn);
+
+      component.onModelChange('newValue');
+      expect(fn).toHaveBeenCalledWith('newValue');
+    });
+
+    it('should register onTouched function', () => {
+      const fn = jest.fn();
+      component.registerOnTouched(fn);
+
+      component.onModelChange('value');
+      expect(fn).toHaveBeenCalled();
+    });
+
+    it('should set disabled state', () => {
+      component.setDisabledState(true);
+      expect(component.disabled).toBe(true);
+
+      component.setDisabledState(false);
+      expect(component.disabled).toBe(false);
+    });
+  });
+});

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

@@ -0,0 +1,70 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  forwardRef,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'atomix-autocomplete',
+  templateUrl: './atomix-autocomplete.component.html',
+  styleUrls: ['./atomix-autocomplete.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => AtomixAutocompleteComponent),
+      multi: true,
+    },
+  ],
+})
+export class AtomixAutocompleteComponent implements ControlValueAccessor {
+  @Input() suggestions: any[] = [];
+  @Input() placeholder: string = '';
+  @Input() optionLabel: string = '';
+  @Input() optionValue: string = '';
+  @Input() optionDescription: string = '';
+  @Input() name: string = '';
+  @Input() disabled: boolean = false;
+  @Input() showClear: boolean = true;
+  @Input() dropdown: boolean = false;
+  @Input() styleClass: string = '';
+  @Input() autocompleteContainer: string = '';
+  @Input() label: string = '';
+  @Input() delay: number = 300;
+  @Input() virtualScroll: boolean = false;
+  @Input() virtualScrollItemSize: number = 32;
+  @Input() isLabelRequired: boolean = false;
+
+  @Output() queryHandler = new EventEmitter<any>();
+  @Output() selectOptionHandler = new EventEmitter<any>();
+
+  @Input() selectedValues: any;
+  @Output() selectedValuesChange = new EventEmitter<any>();
+  private onChange = (value: any) => {};
+  private onTouched = () => {};
+
+  writeValue(value: any): void {
+    this.selectedValues = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  onModelChange(value: any): void {
+    this.selectedValues = value;
+    this.onChange(value);
+    this.onTouched();
+    this.selectedValuesChange.emit(value);
+  }
+}

package/src/lib/lib/atomix-button/atomix-button.component.css

@@ -0,0 +1,70 @@
+::ng-deep .p-button-primary {
+  background-color: #63b77e;
+  color: white !important;
+  border-radius: var(--global-border-radius);
+  height: 40px;
+  padding: 10.5px 17.5px 10.5px 17.5px;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 17px;
+  outline: none;
+  border: none;
+  cursor: pointer;
+
+  &:enabled:hover {
+    background-color: #63b77e;
+  }
+
+  &:disabled {
+    .p-button-label {
+      color: rgba(0, 0, 0, 0.38) !important;
+    }
+  }
+}
+
+::ng-deep .p-button-outlined {
+  background-color: var(--button-outlined-bg) !important;
+  color: var(--button-outlined-text) !important;
+  border-radius: var(--global-border-radius);
+  height: 40px;
+  padding: 10.5px 17.5px 10.5px 17.5px;
+  font-size: 14px;
+  font-weight: 700;
+  outline: none;
+  line-height: 17px;
+  cursor: pointer;
+}
+
+::ng-deep .refresh-button {
+  background-color: var(--button-outlined-bg) !important;
+  border-radius: 50%;
+  height: 40px;
+  width: 40px;
+}
+
+::ng-deep .p-button-text {
+  color: #424242;
+  background: none;
+  border-radius: 1px solid gray;
+  &:disabled {
+    background: none !important;
+  }
+}
+
+::ng-deep .p-button-danger {
+  background-color: var(--error-color) !important;
+  border-color: var(--error-color) !important;
+  color: var(--error-color-text) !important;
+  border-radius: var(--global-border-radius);
+  height: 40px;
+  padding: 10.5px 17.5px 10.5px 17.5px;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 17px;
+  border: none;
+  cursor: pointer;
+
+  &:enabled:hover {
+    background-color: var(--error-color) !important;
+  }
+}

package/src/lib/lib/atomix-button/atomix-button.component.html

@@ -0,0 +1,20 @@
+<button
+  pButton
+  pRipple
+  [label]="label"
+  [ngClass]="[
+    class,
+    buttonType === 'primary' ? 'p-button-primary' : '',
+    buttonType === 'outlined' ? 'p-button-outlined' : '',
+    buttonType === 'text' ? 'p-button-text' : '',
+    buttonType === 'refresh' ? 'refresh-button' : '',
+    buttonType === 'danger' ? 'p-button-danger' : '',
+  ]"
+  [disabled]="disabled"
+  [loading]="loading"
+  [size]="size"
+  [icon]="icon"
+  [iconPos]="iconPos"
+  (click)="onButtonClick($event)"
+  [type]="type"
+></button>

package/src/lib/lib/atomix-button/atomix-button.component.spec.ts

@@ -0,0 +1,135 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AtomixButtonComponent } from './atomix-button.component';
+
+describe('AtomixButtonComponent', () => {
+  let component: AtomixButtonComponent;
+  let fixture: ComponentFixture<AtomixButtonComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixButtonComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixButtonComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('input bindings', () => {
+    it('should have default label as empty string', () => {
+      expect(component.label).toBe('');
+    });
+
+    it('should accept label input', () => {
+      component.label = 'Submit';
+      fixture.detectChanges();
+      expect(component.label).toBe('Submit');
+    });
+
+    it('should have default disabled as false', () => {
+      expect(component.disabled).toBe(false);
+    });
+
+    it('should accept disabled input', () => {
+      component.disabled = true;
+      fixture.detectChanges();
+      expect(component.disabled).toBe(true);
+    });
+
+    it('should have default loading as false', () => {
+      expect(component.loading).toBe(false);
+    });
+
+    it('should accept loading input', () => {
+      component.loading = true;
+      fixture.detectChanges();
+      expect(component.loading).toBe(true);
+    });
+
+    it('should have default size as small', () => {
+      expect(component.size).toBe('small');
+    });
+
+    it('should accept size input', () => {
+      component.size = 'large';
+      fixture.detectChanges();
+      expect(component.size).toBe('large');
+    });
+
+    it('should have default buttonType as primary', () => {
+      expect(component.buttonType).toBe('primary');
+    });
+
+    it('should accept buttonType input', () => {
+      component.buttonType = 'danger';
+      fixture.detectChanges();
+      expect(component.buttonType).toBe('danger');
+    });
+
+    it('should have default type as empty string', () => {
+      expect(component.type).toBe('');
+    });
+
+    it('should accept type input', () => {
+      component.type = 'submit';
+      fixture.detectChanges();
+      expect(component.type).toBe('submit');
+    });
+
+    it('should have default class as empty string', () => {
+      expect(component.class).toBe('');
+    });
+
+    it('should accept class input', () => {
+      component.class = 'custom-class';
+      fixture.detectChanges();
+      expect(component.class).toBe('custom-class');
+    });
+
+    it('should have default icon as empty string', () => {
+      expect(component.icon).toBe('');
+    });
+
+    it('should accept icon input', () => {
+      component.icon = 'pi pi-check';
+      fixture.detectChanges();
+      expect(component.icon).toBe('pi pi-check');
+    });
+
+    it('should have default iconPos as left', () => {
+      expect(component.iconPos).toBe('left');
+    });
+
+    it('should accept iconPos input', () => {
+      component.iconPos = 'right';
+      fixture.detectChanges();
+      expect(component.iconPos).toBe('right');
+    });
+  });
+
+  describe('buttonClick event emission', () => {
+    it('should emit buttonClick when onButtonClick is called', () => {
+      const emitSpy = jest.fn();
+      component.buttonClick.subscribe(emitSpy);
+
+      const mockEvent = new MouseEvent('click');
+      component.onButtonClick(mockEvent);
+
+      expect(emitSpy).toHaveBeenCalledWith(mockEvent);
+    });
+
+    it('should emit buttonClick only once per click', () => {
+      const emitSpy = jest.fn();
+      component.buttonClick.subscribe(emitSpy);
+
+      const mockEvent = new MouseEvent('click');
+      component.onButtonClick(mockEvent);
+
+      expect(emitSpy).toHaveBeenCalledTimes(1);
+    });
+  });
+});

package/src/lib/lib/atomix-button/atomix-button.component.ts

@@ -0,0 +1,28 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ButtonSize, ButtonIconPosition } from './atomix-button.models';
+
+@Component({
+  selector: 'atomix-button',
+  templateUrl: './atomix-button.component.html',
+  styleUrls: ['./atomix-button.component.css'],
+})
+export class AtomixButtonComponent {
+  @Input() label: string = '';
+  @Input() disabled: boolean = false;
+  @Input() loading: boolean = false;
+  @Input() size: ButtonSize = 'small';
+  @Input() buttonType: 'primary' | 'danger' | 'text' | 'outlined' | 'refresh' =
+    'primary';
+  @Input() type: string = '';
+  @Input() class: string = '';
+
+  @Input() icon: string = '';
+  @Input() iconPos: ButtonIconPosition = 'left';
+
+  @Input() buttonData: any;
+  @Output() buttonClick = new EventEmitter<Event>();
+
+  onButtonClick(event: MouseEvent) {
+    this.buttonClick.emit(event); // Emit the event when button is clicked
+  }
+}

package/{lib/lib/atomix-button/atomix-button.models.d.ts → src/lib/lib/atomix-button/atomix-button.models.ts}

@@ -1,2 +1,2 @@
-export type ButtonSize = 'small' | 'large' | null | undefined;
-export type ButtonIconPosition = 'left' | 'right';
+export type ButtonSize = 'small' | 'large' | null | undefined;
+export type ButtonIconPosition = 'left' | 'right';

package/src/lib/lib/atomix-calendar/atomix-calendar.component.css

@@ -0,0 +1,5 @@
+::ng-deep .p-calendar {
+  button {
+    background-color: transparent !important;
+  }
+}

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

@@ -0,0 +1,20 @@
+<p-calendar
+  [(ngModel)]="selectedDate"
+  [selectionMode]="selectionMode"
+  [showButtonBar]="true"
+  [dateFormat]="'mm/dd/yy'"
+  [showOtherMonths]="true"
+  [showOnFocus]="true"
+  [locale]="enLocale"
+  [showIcon]="true"
+  [placeholder]="placeholder"
+  [styleClass]="styleClass"
+  [inputStyleClass]="inputStyleClass"
+  (ngModelChange)="onDateRangeChange($event)"
+  appendTo="body"
+  [showClear]="true"
+  [disabled]="disabled"
+  [maxDate]="maxDate"
+  [minDate]="minDate"
+>
+</p-calendar>