primekit 1.0.9 → 1.0.10

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

@@ -0,0 +1,7 @@
+<p-divider
+  [layout]="layout"
+  [type]="type"
+  [align]="align"
+  [style]="style"
+  [styleClass]="styleClass"
+></p-divider>

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

@@ -0,0 +1,91 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AtomixDividerComponent } from './atomix-divider.component';
+
+describe('AtomixDividerComponent', () => {
+  let component: AtomixDividerComponent;
+  let fixture: ComponentFixture<AtomixDividerComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixDividerComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixDividerComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('configuration inputs', () => {
+    it('should have default layout as horizontal', () => {
+      expect(component.layout).toBe('horizontal');
+    });
+
+    it('should accept layout input as vertical', () => {
+      component.layout = 'vertical';
+      fixture.detectChanges();
+      expect(component.layout).toBe('vertical');
+    });
+
+    it('should have default type as solid', () => {
+      expect(component.type).toBe('solid');
+    });
+
+    it('should accept type input as dashed', () => {
+      component.type = 'dashed';
+      fixture.detectChanges();
+      expect(component.type).toBe('dashed');
+    });
+
+    it('should accept type input as dotted', () => {
+      component.type = 'dotted';
+      fixture.detectChanges();
+      expect(component.type).toBe('dotted');
+    });
+
+    it('should have default align as undefined', () => {
+      expect(component.align).toBeUndefined();
+    });
+
+    it('should accept align input as center', () => {
+      component.align = 'center';
+      fixture.detectChanges();
+      expect(component.align).toBe('center');
+    });
+
+    it('should accept align input as left', () => {
+      component.align = 'left';
+      fixture.detectChanges();
+      expect(component.align).toBe('left');
+    });
+
+    it('should accept align input as right', () => {
+      component.align = 'right';
+      fixture.detectChanges();
+      expect(component.align).toBe('right');
+    });
+
+    it('should have default style as undefined', () => {
+      expect(component.style).toBeUndefined();
+    });
+
+    it('should accept style input', () => {
+      component.style = { 'border-color': 'red' };
+      fixture.detectChanges();
+      expect(component.style).toEqual({ 'border-color': 'red' });
+    });
+
+    it('should have default styleClass as undefined', () => {
+      expect(component.styleClass).toBeUndefined();
+    });
+
+    it('should accept styleClass input', () => {
+      component.styleClass = 'custom-divider';
+      fixture.detectChanges();
+      expect(component.styleClass).toBe('custom-divider');
+    });
+  });
+});

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

@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'atomix-divider',
+  templateUrl: './atomix-divider.component.html',
+})
+export class AtomixDividerComponent {
+  @Input() style?: { [key: string]: any };
+
+  @Input() styleClass?: string;
+
+  @Input() layout: 'horizontal' | 'vertical' = 'horizontal';
+
+  @Input() type: 'solid' | 'dashed' | 'dotted' = 'solid';
+
+  @Input() align?: 'left' | 'right' | 'top' | 'bottom' | 'center';
+}

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

@@ -0,0 +1,25 @@
+::ng-deep .p-dropdown-panel {
+  margin-top: 5px !important;
+}
+
+.dropdown-image {
+  width: 25px;
+  margin-right: 0.7rem;
+}
+
+.dropdown-logo {
+  text-align: center;
+  font-size: 25px;
+  margin-right: 0.7rem;
+}
+
+::ng-deep .dropdown {
+  border-radius: var(--global-border-radius) !important;
+  .p-inputtext {
+    padding: 1rem 1rem !important;
+  }
+}
+
+.error-asterisk {
+  color: red;
+}

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

@@ -0,0 +1,37 @@
+<label *ngIf="label"
+  >{{ label }}
+  <span *ngIf="isLabelRequired" class="error-asterisk">*</span></label
+>
+<p-dropdown
+  [options]="options"
+  [(ngModel)]="selectedValues"
+  (onChange)="onChange($event)"
+  [optionValue]="optionValue"
+  [optionLabel]="optionLabel"
+  [showClear]="showClear"
+  [filter]="filter"
+  [filterBy]="optionLabel"
+  appendTo="body"
+  [disabled]="disabled"
+  [styleClass]="dropDownStyleClass + ' dropdown'"
+  (onFilter)="onFilter($event)"
+  [placeholder]="placeholder"
+>
+  <ng-template let-option pTemplate="item">
+    <div class="custom-item">
+      <i
+        [ngClass]="option.dropdownIcon"
+        class="dropdown-logo"
+        *ngIf="option.dropdownIcon"
+      ></i>
+      <img
+        [alt]="option.dropdownImage"
+        [src]="option.dropdownImage"
+        *ngIf="option.dropdownImage"
+        class="dropdown-image"
+      />
+
+      <span>{{ option[optionLabel] }}</span>
+    </div>
+  </ng-template>
+</p-dropdown>

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

@@ -0,0 +1,178 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { AtomixDropdownComponent } from './atomix-dropdown.component';
+
+describe('AtomixDropdownComponent', () => {
+  let component: AtomixDropdownComponent;
+  let fixture: ComponentFixture<AtomixDropdownComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixDropdownComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).overrideComponent(AtomixDropdownComponent, {
+      set: {
+        template: '<div></div>',
+      },
+    });
+    fixture = TestBed.createComponent(AtomixDropdownComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('input bindings', () => {
+    it('should have default options as empty array', () => {
+      expect(component.options).toEqual([]);
+    });
+
+    it('should have default selectedValues as undefined', () => {
+      expect(component.selectedValues).toBeUndefined();
+    });
+
+    it('should have default optionValue as empty string', () => {
+      expect(component.optionValue).toBe('');
+    });
+
+    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 filter as true', () => {
+      expect(component.filter).toBe(true);
+    });
+
+    it('should have default name as empty string', () => {
+      expect(component.name).toBe('');
+    });
+
+    it('should have default dropDownStyleClass as empty string', () => {
+      expect(component.dropDownStyleClass).toBe('');
+    });
+
+    it('should have default withIcon as false', () => {
+      expect(component.withIcon).toBe(false);
+    });
+
+    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 iconName as empty string', () => {
+      expect(component.iconName).toBe('');
+    });
+
+    it('should have default containerClass as empty string', () => {
+      expect(component.containerClass).toBe('');
+    });
+
+    it('should have default label as empty string', () => {
+      expect(component.label).toBe('');
+    });
+
+    it('should have default isLabelRequired as false', () => {
+      expect(component.isLabelRequired).toBe(false);
+    });
+
+    it('should accept options input', () => {
+      const options = [
+        { label: 'Option 1', value: 1 },
+        { label: 'Option 2', value: 2 },
+      ];
+      component.options = options;
+      expect(component.options).toEqual(options);
+    });
+
+    it('should accept placeholder input', () => {
+      component.placeholder = 'Select an option';
+      expect(component.placeholder).toBe('Select an option');
+    });
+
+    it('should accept disabled input', () => {
+      component.disabled = true;
+      expect(component.disabled).toBe(true);
+    });
+
+    it('should accept selectedValues input', () => {
+      component.selectedValues = 'value1';
+      expect(component.selectedValues).toBe('value1');
+    });
+  });
+
+  describe('selection emission', () => {
+    it('should emit handleDropdownValueChange with value and name on onChange', () => {
+      const emitSpy = jest.fn();
+      component.handleDropdownValueChange.subscribe(emitSpy);
+
+      component.name = 'testDropdown';
+      const mockEvent = { value: 'selectedOption' };
+      component.onChange(mockEvent);
+
+      expect(emitSpy).toHaveBeenCalledWith(['selectedOption', 'testDropdown']);
+    });
+
+    it('should emit handleDropdownValueChange with null value when cleared', () => {
+      const emitSpy = jest.fn();
+      component.handleDropdownValueChange.subscribe(emitSpy);
+
+      component.name = 'myDropdown';
+      const mockEvent = { value: null };
+      component.onChange(mockEvent);
+
+      expect(emitSpy).toHaveBeenCalledWith([null, 'myDropdown']);
+    });
+
+    it('should emit value as array with event value and component name', () => {
+      const emitSpy = jest.fn();
+      component.handleDropdownValueChange.subscribe(emitSpy);
+
+      component.name = 'category';
+      component.onChange({ value: 'electronics' });
+
+      expect(emitSpy).toHaveBeenCalledWith(['electronics', 'category']);
+    });
+  });
+
+  describe('filter emission', () => {
+    it('should emit handleOnFilter after debounce when onFilter is called', fakeAsync(() => {
+      const emitSpy = jest.fn();
+      component.handleOnFilter.subscribe(emitSpy);
+
+      const mockFilterEvent = { filter: 'search term' } as any;
+      component.onFilter(mockFilterEvent);
+
+      tick(300);
+
+      expect(emitSpy).toHaveBeenCalledWith(mockFilterEvent);
+    }));
+
+    it('should debounce rapid filter calls', fakeAsync(() => {
+      const emitSpy = jest.fn();
+      component.handleOnFilter.subscribe(emitSpy);
+
+      const event1 = { filter: 'a' } as any;
+      const event2 = { filter: 'ab' } as any;
+      const event3 = { filter: 'abc' } as any;
+
+      component.onFilter(event1);
+      tick(100);
+      component.onFilter(event2);
+      tick(100);
+      component.onFilter(event3);
+      tick(300);
+
+      expect(emitSpy).toHaveBeenCalledTimes(1);
+      expect(emitSpy).toHaveBeenCalledWith(event3);
+    }));
+  });
+});

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

@@ -0,0 +1,89 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  NgZone,
+  ChangeDetectorRef,
+} from '@angular/core';
+import { DropdownFilterEvent } from 'primeng/dropdown';
+import {
+  debounceTime,
+  distinctUntilChanged,
+  Subject,
+  Subscription,
+} from 'rxjs';
+
+@Component({
+  selector: 'atomix-dropdown',
+  templateUrl: './atomix-dropdown.component.html',
+  styleUrls: ['./atomix-dropdown.component.css'],
+})
+export class AtomixDropdownComponent {
+  @Input() options: any[] = []; //
+  @Input() selectedValues: any;
+  @Input() optionValue: string = '';
+  @Input() placeholder: string = '';
+  @Input() optionLabel: string = '';
+  @Input() filter: boolean = true;
+  @Input() name: string = '';
+  @Input() dropDownStyleClass: string = '';
+  @Input() withIcon: boolean = false;
+  @Input() disabled: boolean = false;
+  @Input() showClear: boolean = true;
+  @Input() iconName: string = '';
+  @Input() containerClass: string = ''; //
+  @Input() label: string = '';
+  @Input() isLabelRequired: boolean = false;
+  @Output() handleDropdownValueChange = new EventEmitter<any>();
+  @Output() handleOnFilter = new EventEmitter<DropdownFilterEvent>();
+
+  /**
+   * The input from the user used to search list
+   */
+  filerValue = new Subject<DropdownFilterEvent>();
+
+  /**
+   * The time in ms that it takes to register when user is done typing
+   */
+  debounceTime = 300;
+
+  /**
+   * The trigger that uses the debounce time to create delay of when user types to actual filtering
+   */
+  trigger = this.filerValue.pipe(
+    debounceTime(this.debounceTime),
+    distinctUntilChanged()
+  );
+
+  /**
+   * Subscription to trigger
+   */
+  subscription: Subscription = new Subscription();
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+    private ngZone: NgZone
+  ) {
+    this.subscription.add(
+      this.trigger.subscribe(($event) => {
+        this.handleOnFilter.emit($event);
+      })
+    );
+  }
+
+  onChange(event: any) {
+    this.ngZone.run(() => {
+      this.handleDropdownValueChange.emit([event.value, this.name]);
+      this.cdr.detectChanges(); // Ensure changes are detected
+    });
+  }
+
+  /**
+   *
+   * @param event
+   */
+  onFilter(event: DropdownFilterEvent) {
+    this.filerValue.next(event);
+  }
+}

package/src/lib/lib/atomix-dynamic-dialog/atomix-dynamic-dialog.component.spec.ts

@@ -0,0 +1,128 @@
+import { Component, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { AtomixDynamicDialogComponent } from './atomix-dynamic-dialog.component';
+import { AtomixDialogConfig } from './atomix-dynamic-dialog.models';
+
+@Component({ selector: 'mock-component', template: '' })
+class MockDialogContentComponent {}
+
+describe('AtomixDynamicDialogComponent', () => {
+  let component: AtomixDynamicDialogComponent;
+  let fixture: ComponentFixture<AtomixDynamicDialogComponent>;
+  let mockDialogService: { open: jest.Mock };
+  let mockDialogRef: Partial<DynamicDialogRef>;
+
+  beforeEach(() => {
+    mockDialogRef = { close: jest.fn() } as any;
+    mockDialogService = { open: jest.fn().mockReturnValue(mockDialogRef) };
+
+    TestBed.configureTestingModule({
+      declarations: [AtomixDynamicDialogComponent],
+      providers: [{ provide: DialogService, useValue: mockDialogService }],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixDynamicDialogComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('dialog visibility management', () => {
+    it('should open a dialog via DialogService', () => {
+      const config: AtomixDialogConfig = {
+        component: MockDialogContentComponent,
+        header: 'Test Dialog',
+      };
+
+      component.openDialog(config);
+
+      expect(mockDialogService.open).toHaveBeenCalledTimes(1);
+    });
+
+    it('should return a DynamicDialogRef when opening a dialog', () => {
+      const config: AtomixDialogConfig = {
+        component: MockDialogContentComponent,
+      };
+
+      const ref = component.openDialog(config);
+
+      expect(ref).toBe(mockDialogRef);
+    });
+
+    it('should pass the component to DialogService.open', () => {
+      const config: AtomixDialogConfig = {
+        component: MockDialogContentComponent,
+      };
+
+      component.openDialog(config);
+
+      expect(mockDialogService.open).toHaveBeenCalledWith(
+        MockDialogContentComponent,
+        expect.any(Object)
+      );
+    });
+
+    it('should apply default config values when not provided', () => {
+      const config: AtomixDialogConfig = {
+        component: MockDialogContentComponent,
+      };
+
+      component.openDialog(config);
+
+      const passedConfig = mockDialogService.open.mock.calls[0][1];
+      expect(passedConfig.header).toBe('');
+      expect(passedConfig.width).toBe('80%');
+      expect(passedConfig.height).toBe('fit-content');
+      expect(passedConfig.styleClass).toBe('dialog-width');
+      expect(passedConfig.dismissableMask).toBe(true);
+      expect(passedConfig.maximizable).toBe(true);
+    });
+
+    it('should override default config values with provided values', () => {
+      const config: AtomixDialogConfig = {
+        component: MockDialogContentComponent,
+        header: 'Custom Header',
+        width: '50%',
+        height: '400px',
+        dismissableMask: false,
+        maximizable: false,
+      };
+
+      component.openDialog(config);
+
+      const passedConfig = mockDialogService.open.mock.calls[0][1];
+      expect(passedConfig.header).toBe('Custom Header');
+      expect(passedConfig.width).toBe('50%');
+      expect(passedConfig.height).toBe('400px');
+      expect(passedConfig.dismissableMask).toBe(false);
+      expect(passedConfig.maximizable).toBe(false);
+    });
+
+    it('should pass additional config options to DialogService', () => {
+      const config: AtomixDialogConfig = {
+        component: MockDialogContentComponent,
+        data: { id: 123, name: 'Test' },
+      };
+
+      component.openDialog(config);
+
+      const passedConfig = mockDialogService.open.mock.calls[0][1];
+      expect(passedConfig.data).toEqual({ id: 123, name: 'Test' });
+    });
+
+    it('should not pass the component property in the dialog config', () => {
+      const config: AtomixDialogConfig = {
+        component: MockDialogContentComponent,
+        header: 'Test',
+      };
+
+      component.openDialog(config);
+
+      const passedConfig = mockDialogService.open.mock.calls[0][1];
+      expect(passedConfig.component).toBeUndefined();
+    });
+  });
+});

package/src/lib/lib/atomix-dynamic-dialog/atomix-dynamic-dialog.component.ts

@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+import {
+  DialogService,
+  DynamicDialogConfig,
+  DynamicDialogRef,
+} from 'primeng/dynamicdialog';
+import { AtomixDialogConfig } from './atomix-dynamic-dialog.models';
+
+@Component({
+  selector: 'atomix-dynamic-dialog',
+  templateUrl: './atomix-dynamic-dialog.component.html',
+  styleUrl: './atomix-dynamic-dialog.component.css',
+})
+export class AtomixDynamicDialogComponent {
+  constructor(private dialogService: DialogService) {}
+
+  /**
+   * Open a dynamic dialog with the given configuration
+   * @param config Configuration object for the dialog
+   * @returns DynamicDialogRef instance
+   */
+  public openDialog(config: AtomixDialogConfig): DynamicDialogRef {
+    // Extract the component and create a dialog configuration
+    const { component, ...dialogConfig } = config;
+
+    // Set default values if not provided
+    const finalConfig: DynamicDialogConfig = {
+      header: '',
+      width: '80%',
+      height: 'fit-content',
+      styleClass: 'dialog-width',
+      dismissableMask: true,
+      maximizable: true,
+      ...dialogConfig,
+    };
+
+    // Open the dialog
+    const dialogRef = this.dialogService.open(component, finalConfig);
+
+    return dialogRef;
+  }
+}

package/src/lib/lib/atomix-dynamic-dialog/atomix-dynamic-dialog.models.ts

@@ -0,0 +1,12 @@
+// Reuse the same interface
+export interface AtomixDialogConfig {
+  component: any;
+  data?: any;
+  header?: string;
+  width?: string;
+  height?: string;
+  styleClass?: string;
+  dismissableMask?: boolean;
+  maximizable?: boolean;
+  [key: string]: any; // Allow any additional PrimeNG DynamicDialog configuration options
+}

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

@@ -0,0 +1,20 @@
+<label *ngIf="label" [for]="controlName"
+  >{{ label }}
+  <span *ngIf="isLabelRequired" class="error-asterisk">*</span></label
+>
+<p-autoComplete
+  [appendTo]="'body'"
+  [formControl]="control"
+  [id]="controlName"
+  [suggestions]="suggestions"
+  [placeholder]="placeholder"
+  [pTooltip]="tooltip"
+  [tooltipPosition]="tooltipPosition"
+  field="name"
+  (completeMethod)="onQuery($event)"
+  (onSelect)="onOptionSelected($event)"
+  [showClear]="true"
+  [dropdown]="dropdown"
+  (onClear)="this.onSelect.emit($event)"
+  [styleClass]="styleClass + ' lib-form-autocomplete'"
+/>

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

@@ -0,0 +1,7 @@
+::ng-deep .lib-form-autocomplete {
+  margin-top: 0.2rem !important;
+  input {
+    border-top-left-radius: 30px;
+    border-bottom-left-radius: 30px;
+  }
+}