primekit 1.0.11 → 1.0.12

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

@@ -1,7 +0,0 @@
-<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

@@ -1,91 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,25 +0,0 @@
-::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

@@ -1,37 +0,0 @@
-<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

@@ -1,178 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,128 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,12 +0,0 @@
-// 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

@@ -1,20 +0,0 @@
-<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

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