primekit 1.0.9 → 1.0.10

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

@@ -0,0 +1,68 @@
+<label *ngIf="label" for="searchName">
+  {{ label }}
+  <span *ngIf="isLabelRequired" class="lib-error-asterisk">*</span>
+</label>
+
+<div [ngClass]="containerClass">
+  <div class="search-dropdown-container">
+    <input
+      [id]="searchName"
+      type="text"
+      pInputText
+      [value]="searchValue"
+      [attr.placeholder]="searchPlaceholder"
+      (input)="onSearchInput($event)"
+      (keydown.enter)="onSearchEnter()"
+      [ngClass]="searchClass + ' lib-input-field'"
+      autocomplete="new-password"
+      [disabled]="searchDisabled"
+      [type]="searchType"
+      #searchInputEl
+      class="search-input"
+    />
+    <span>
+      <i
+        class="pi pi-times filter-dropdown-icon"
+        style="cursor: pointer"
+        (click)="clearSearchValue()"
+        *ngIf="!searchDisabled && searchIsCrossRequired && searchValue !== ''"
+      ></i>
+    </span>
+  </div>
+
+  <p-dropdown
+    [options]="dropdownOptions"
+    [(ngModel)]="dropdownSelected"
+    (onChange)="onDropdownChange($event)"
+    [name]="dropdownName"
+    [optionValue]="dropdownOptionValue"
+    [optionLabel]="dropdownOptionLabel"
+    [showClear]="dropdownShowClear"
+    [filter]="dropdownFilter"
+    [filterBy]="dropdownOptionLabel"
+    appendTo="body"
+    [disabled]="dropdownDisabled"
+    [styleClass]="dropdownStyleClass"
+    (onFilter)="onDropdownFilter($event)"
+    [placeholder]="dropdownPlaceholder"
+    class="search-dropdown"
+  >
+    <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[dropdownOptionLabel] }}</span>
+      </div>
+    </ng-template>
+  </p-dropdown>
+</div>

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

@@ -0,0 +1,282 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  ComponentFixture,
+  TestBed,
+  fakeAsync,
+  tick,
+} from '@angular/core/testing';
+import { AtomixSearchDropdownComponent } from './atomix-search-dropdown.component';
+
+describe('AtomixSearchDropdownComponent', () => {
+  let component: AtomixSearchDropdownComponent;
+  let fixture: ComponentFixture<AtomixSearchDropdownComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixSearchDropdownComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).overrideComponent(AtomixSearchDropdownComponent, {
+      set: {
+        template: '<div></div>',
+      },
+    });
+    fixture = TestBed.createComponent(AtomixSearchDropdownComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('search input bindings', () => {
+    it('should have default searchValue as empty string', () => {
+      expect(component.searchValue).toBe('');
+    });
+
+    it('should have default searchPlaceholder as "Search"', () => {
+      expect(component.searchPlaceholder).toBe('Search');
+    });
+
+    it('should have default searchType as "search"', () => {
+      expect(component.searchType).toBe('search');
+    });
+
+    it('should have default searchDisabled as false', () => {
+      expect(component.searchDisabled).toBe(false);
+    });
+
+    it('should have default searchLabel as empty string', () => {
+      expect(component.searchLabel).toBe('');
+    });
+
+    it('should have default searchIsLabelRequired as false', () => {
+      expect(component.searchIsLabelRequired).toBe(false);
+    });
+
+    it('should have default searchClass as empty string', () => {
+      expect(component.searchClass).toBe('');
+    });
+
+    it('should have default searchIsCrossRequired as true', () => {
+      expect(component.searchIsCrossRequired).toBe(true);
+    });
+
+    it('should have default searchName as empty string', () => {
+      expect(component.searchName).toBe('');
+    });
+
+    it('should accept searchValue input', () => {
+      component.searchValue = 'test query';
+      expect(component.searchValue).toBe('test query');
+    });
+
+    it('should accept searchPlaceholder input', () => {
+      component.searchPlaceholder = 'Type to search...';
+      expect(component.searchPlaceholder).toBe('Type to search...');
+    });
+
+    it('should accept searchDisabled input', () => {
+      component.searchDisabled = true;
+      expect(component.searchDisabled).toBe(true);
+    });
+  });
+
+  describe('dropdown input bindings', () => {
+    it('should have default dropdownOptions as empty array', () => {
+      expect(component.dropdownOptions).toEqual([]);
+    });
+
+    it('should have default dropdownPlaceholder as "Column"', () => {
+      expect(component.dropdownPlaceholder).toBe('Column');
+    });
+
+    it('should have default dropdownOptionLabel as "display"', () => {
+      expect(component.dropdownOptionLabel).toBe('display');
+    });
+
+    it('should have default dropdownOptionValue as empty string', () => {
+      expect(component.dropdownOptionValue).toBe('');
+    });
+
+    it('should have default dropdownDisabled as false', () => {
+      expect(component.dropdownDisabled).toBe(false);
+    });
+
+    it('should have default dropdownShowClear as true', () => {
+      expect(component.dropdownShowClear).toBe(true);
+    });
+
+    it('should have default dropdownFilter as false', () => {
+      expect(component.dropdownFilter).toBe(false);
+    });
+
+    it('should have default dropdownLabel as empty string', () => {
+      expect(component.dropdownLabel).toBe('');
+    });
+
+    it('should have default dropdownIsLabelRequired as false', () => {
+      expect(component.dropdownIsLabelRequired).toBe(false);
+    });
+
+    it('should have default dropdownStyleClass as empty string', () => {
+      expect(component.dropdownStyleClass).toBe('');
+    });
+
+    it('should have default dropdownName as empty string', () => {
+      expect(component.dropdownName).toBe('');
+    });
+
+    it('should accept dropdownOptions input', () => {
+      const options = [
+        { display: 'Option A', value: 'a' },
+        { display: 'Option B', value: 'b' },
+      ];
+      component.dropdownOptions = options;
+      expect(component.dropdownOptions).toEqual(options);
+    });
+
+    it('should accept dropdownSelected input', () => {
+      component.dropdownSelected = 'selectedValue';
+      expect(component.dropdownSelected).toBe('selectedValue');
+    });
+  });
+
+  describe('general input bindings', () => {
+    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 have default containerClass', () => {
+      expect(component.containerClass).toBe(
+        'billing-input-column-container search-filter-container'
+      );
+    });
+
+    it('should accept containerClass input', () => {
+      component.containerClass = 'custom-class';
+      expect(component.containerClass).toBe('custom-class');
+    });
+  });
+
+  describe('search filtering', () => {
+    it('should update searchValue on onSearchInput', () => {
+      const mockEvent = { target: { value: 'hello' } } as unknown as Event;
+      component.onSearchInput(mockEvent);
+      expect(component.searchValue).toBe('hello');
+    });
+
+    it('should emit searchValueChange on onSearchInput when isCustomFilter is true', () => {
+      const emitSpy = jest.fn();
+      component.searchValueChange.subscribe(emitSpy);
+      component.isCustomFilter = true;
+
+      const mockEvent = {
+        target: { value: 'filter text' },
+      } as unknown as Event;
+      component.onSearchInput(mockEvent);
+
+      expect(emitSpy).toHaveBeenCalledWith('filter text');
+    });
+
+    it('should NOT emit searchValueChange on onSearchInput when isCustomFilter is falsy', () => {
+      const emitSpy = jest.fn();
+      component.searchValueChange.subscribe(emitSpy);
+      component.isCustomFilter = false;
+
+      const mockEvent = {
+        target: { value: 'filter text' },
+      } as unknown as Event;
+      component.onSearchInput(mockEvent);
+
+      expect(emitSpy).not.toHaveBeenCalled();
+    });
+
+    it('should emit searchValueChange on onSearchEnter', () => {
+      const emitSpy = jest.fn();
+      component.searchValueChange.subscribe(emitSpy);
+      component.searchValue = 'search term';
+
+      component.onSearchEnter();
+
+      expect(emitSpy).toHaveBeenCalledWith('search term');
+    });
+
+    it('should clear searchValue and emit on clearSearchValue', () => {
+      const emitSpy = jest.fn();
+      component.searchValueChange.subscribe(emitSpy);
+      component.searchValue = 'something';
+
+      component.clearSearchValue();
+
+      expect(component.searchValue).toBe('');
+      expect(emitSpy).toHaveBeenCalledWith('');
+    });
+  });
+
+  describe('dropdown selection emission', () => {
+    it('should emit dropdownValueChange with value and name on onDropdownChange', () => {
+      const emitSpy = jest.fn();
+      component.dropdownValueChange.subscribe(emitSpy);
+      component.dropdownName = 'testDropdown';
+
+      const mockEvent = { value: 'selectedOption' };
+      component.onDropdownChange(mockEvent);
+
+      expect(emitSpy).toHaveBeenCalledWith(['selectedOption', 'testDropdown']);
+    });
+
+    it('should emit dropdownValueChange with null value when cleared', () => {
+      const emitSpy = jest.fn();
+      component.dropdownValueChange.subscribe(emitSpy);
+      component.dropdownName = 'myDropdown';
+
+      const mockEvent = { value: null };
+      component.onDropdownChange(mockEvent);
+
+      expect(emitSpy).toHaveBeenCalledWith([null, 'myDropdown']);
+    });
+  });
+
+  describe('dropdown filter emission', () => {
+    it('should emit dropdownFilterChange after debounce when onDropdownFilter is called', fakeAsync(() => {
+      const emitSpy = jest.fn();
+      component.dropdownFilterChange.subscribe(emitSpy);
+
+      const mockFilterEvent = { filter: 'search term' } as any;
+      component.onDropdownFilter(mockFilterEvent);
+
+      tick(300);
+
+      expect(emitSpy).toHaveBeenCalledWith(mockFilterEvent);
+    }));
+
+    it('should debounce rapid filter calls', fakeAsync(() => {
+      const emitSpy = jest.fn();
+      component.dropdownFilterChange.subscribe(emitSpy);
+
+      const event1 = { filter: 'a' } as any;
+      const event2 = { filter: 'ab' } as any;
+      const event3 = { filter: 'abc' } as any;
+
+      component.onDropdownFilter(event1);
+      tick(100);
+      component.onDropdownFilter(event2);
+      tick(100);
+      component.onDropdownFilter(event3);
+      tick(300);
+
+      expect(emitSpy).toHaveBeenCalledTimes(1);
+      expect(emitSpy).toHaveBeenCalledWith(event3);
+    }));
+  });
+
+  describe('focusSearch', () => {
+    it('should not throw when searchInputEl is undefined', () => {
+      expect(() => component.focusSearch()).not.toThrow();
+    });
+  });
+});

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

@@ -0,0 +1,119 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ElementRef,
+  ViewChild,
+} from '@angular/core';
+import { DropdownFilterEvent } from 'primeng/dropdown';
+import {
+  debounceTime,
+  distinctUntilChanged,
+  Subject,
+  Subscription,
+} from 'rxjs';
+
+@Component({
+  selector: 'atomix-search-dropdown',
+  templateUrl: './atomix-search-dropdown.component.html',
+  styleUrls: ['./atomix-search-dropdown.component.css'],
+})
+export class AtomixSearchDropdownComponent {
+  @ViewChild('searchInputEl') searchInputEl!: ElementRef<HTMLInputElement>;
+
+  @Input() searchValue: string = '';
+  @Input() searchPlaceholder: string = 'Search';
+  @Input() searchType: string = 'search';
+  @Input() searchDisabled: boolean = false;
+  @Input() searchLabel: string = '';
+  @Input() searchIsLabelRequired: boolean = false;
+  @Input() searchClass: string = '';
+  @Input() searchIsCrossRequired: boolean = true;
+  @Input() searchName: string = '';
+
+  @Input() dropdownOptions: any[] = [];
+  @Input() dropdownSelected: any;
+  @Input() dropdownPlaceholder: string = 'Column';
+  @Input() dropdownOptionLabel: string = 'display';
+  @Input() dropdownOptionValue: string = '';
+  @Input() dropdownDisabled: boolean = false;
+  @Input() dropdownShowClear: boolean = true;
+  @Input() dropdownFilter: boolean = false;
+  @Input() dropdownLabel: string = '';
+  @Input() dropdownIsLabelRequired: boolean = false;
+  @Input() dropdownStyleClass: string = '';
+  @Input() dropdownName: string = '';
+
+  @Input() label: string = '';
+  @Input() isLabelRequired: boolean = false;
+  @Input() isCustomFilter?: boolean;
+
+  @Input() containerClass: string =
+    'billing-input-column-container search-filter-container';
+
+  @Output() searchValueChange = new EventEmitter<string>();
+  @Output() dropdownValueChange = new EventEmitter<any>();
+  @Output() dropdownFilterChange = new EventEmitter<DropdownFilterEvent>();
+
+  /**
+   * The input from the user used to search dropdown list
+   */
+  dropdownFilterValue = 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
+   */
+  dropdownFilterTrigger = this.dropdownFilterValue.pipe(
+    debounceTime(this.debounceTime),
+    distinctUntilChanged()
+  );
+
+  /**
+   * Subscription to trigger
+   */
+  subscription: Subscription = new Subscription();
+
+  constructor() {
+    this.subscription.add(
+      this.dropdownFilterTrigger.subscribe(($event) => {
+        this.dropdownFilterChange.emit($event);
+      })
+    );
+  }
+
+  onSearchInput(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    this.searchValue = input.value;
+
+    if (this.isCustomFilter) {
+      this.searchValueChange.emit(this.searchValue);
+    }
+  }
+
+  onSearchEnter(): void {
+    this.searchValueChange.emit(this.searchValue);
+  }
+
+  clearSearchValue(): void {
+    this.searchValue = '';
+    this.searchValueChange.emit(this.searchValue);
+  }
+
+  onDropdownChange(event: any): void {
+    this.dropdownValueChange.emit([event.value, this.dropdownName]);
+  }
+
+  onDropdownFilter(event: DropdownFilterEvent): void {
+    this.dropdownFilterValue.next(event);
+  }
+
+  focusSearch(): void {
+    this.searchInputEl?.nativeElement?.focus();
+  }
+}

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

@@ -1,4 +1,4 @@
-export interface SelectButtonStateOption {
-    label: string;
-    value: string;
-}
+export interface SelectButtonStateOption {
+  label: string;
+  value: string;
+}

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

@@ -0,0 +1,5 @@
+::ng-deep .p-selectbutton .p-button.p-highlight {
+  background: #63b77e;
+  border-color: #63b77e;
+  color: #ffffff;
+}

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

@@ -0,0 +1,7 @@
+<p-selectButton
+  [options]="stateOptions"
+  [(ngModel)]="value"
+  optionLabel="label"
+  optionValue="value"
+  (onOptionClick)="optionClickHandler($event.option.value)"
+/>

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

@@ -0,0 +1,73 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AtomixSelectButtonComponent } from './atomix-select-button.component';
+
+describe('AtomixSelectButtonComponent', () => {
+  let component: AtomixSelectButtonComponent;
+  let fixture: ComponentFixture<AtomixSelectButtonComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixSelectButtonComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixSelectButtonComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('options input', () => {
+    it('should have default stateOptions as empty array', () => {
+      expect(component.stateOptions).toEqual([]);
+    });
+
+    it('should have default value as empty string', () => {
+      expect(component.value).toBe('');
+    });
+
+    it('should accept stateOptions input', () => {
+      const options = [
+        { label: 'Option A', value: 'A' },
+        { label: 'Option B', value: 'B' },
+        { label: 'Option C', value: 'C' },
+      ];
+      component.stateOptions = options;
+      expect(component.stateOptions).toEqual(options);
+    });
+
+    it('should accept value input', () => {
+      component.value = 'B';
+      expect(component.value).toBe('B');
+    });
+  });
+
+  describe('selection change emission', () => {
+    it('should emit onOptionClick when optionClickHandler is called', () => {
+      const emitSpy = jest.fn();
+      component.onOptionClick.subscribe(emitSpy);
+      const event = { option: { label: 'Option A', value: 'A' } } as any;
+
+      component.optionClickHandler(event);
+
+      expect(emitSpy).toHaveBeenCalledWith(event);
+    });
+
+    it('should emit onOptionClick with the correct event payload', () => {
+      const emitSpy = jest.fn();
+      component.onOptionClick.subscribe(emitSpy);
+      const options = [
+        { label: 'Active', value: 'active' },
+        { label: 'Inactive', value: 'inactive' },
+      ];
+      component.stateOptions = options;
+
+      const event = { option: options[1], index: 1 } as any;
+      component.optionClickHandler(event);
+
+      expect(emitSpy).toHaveBeenCalledWith(event);
+    });
+  });
+});

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

@@ -0,0 +1,19 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { SelectButtonOptionClickEvent } from 'primeng/selectbutton';
+import { SelectButtonStateOption } from './atomix-select-button-models';
+
+@Component({
+  selector: 'atomix-select-button',
+  templateUrl: './atomix-select-button.component.html',
+  styleUrls: ['./atomix-select-button.component.css'],
+})
+export class AtomixSelectButtonComponent {
+  @Output() onOptionClick = new EventEmitter<SelectButtonOptionClickEvent>();
+  @Input() stateOptions: SelectButtonStateOption[] = [];
+
+  @Input() value: string = '';
+
+  optionClickHandler(event: SelectButtonOptionClickEvent) {
+    this.onOptionClick.emit(event);
+  }
+}

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

@@ -0,0 +1,30 @@
+.snackbar {
+  visibility: visible;
+  min-width: 250px;
+  background-color: #606060;
+  color: #fff;
+  text-align: center;
+  border-radius: 5px;
+  padding: 16px;
+  position: fixed;
+  left: 50%;
+  bottom: 30px;
+  transform: translateX(-50%);
+  font-size: 17px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+  z-index: 99999999;
+  transition:
+    opacity 0.5s,
+    bottom 0.5s;
+}
+
+.snackbar.show {
+  opacity: 1;
+  bottom: 50px;
+}
+
+.close-btn {
+  margin-left: 15px;
+  font-weight: bold;
+  cursor: pointer;
+}

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

@@ -0,0 +1,4 @@
+<div *ngIf="isVisible" class="snackbar">
+  {{ message }}
+  <span class="close-btn" (click)="hideSnackbar()">✖</span>
+</div>

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

@@ -0,0 +1,60 @@
+import { ChangeDetectorRef, NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AtomixSnackbarComponent } from './atomix-snackbar.component';
+
+describe('AtomixSnackbarComponent', () => {
+  let component: AtomixSnackbarComponent;
+  let fixture: ComponentFixture<AtomixSnackbarComponent>;
+  let mockCdr: { detectChanges: jest.Mock };
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+
+    mockCdr = { detectChanges: jest.fn() };
+
+    TestBed.configureTestingModule({
+      declarations: [AtomixSnackbarComponent],
+      providers: [{ provide: ChangeDetectorRef, useValue: mockCdr }],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+
+    fixture = TestBed.createComponent(AtomixSnackbarComponent);
+    component = fixture.componentInstance;
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('showSnackbar', () => {
+    it('should set isVisible to true and set the message', () => {
+      component.showSnackbar('Item copied!');
+
+      expect(component.isVisible).toBe(true);
+      expect(component.message).toBe('Item copied!');
+    });
+
+    it('should set isVisible to false after 3000ms timeout', () => {
+      component.showSnackbar('Timeout test');
+
+      expect(component.isVisible).toBe(true);
+
+      jest.advanceTimersByTime(3000);
+
+      expect(component.isVisible).toBe(false);
+    });
+  });
+
+  describe('hideSnackbar', () => {
+    it('should set isVisible to false', () => {
+      component.isVisible = true;
+      component.hideSnackbar();
+
+      expect(component.isVisible).toBe(false);
+    });
+  });
+});