primekit 1.0.9 → 1.0.10

package/src/lib/lib/atomix-loading-overlay/atomix-loading-overlay.component.html

@@ -0,0 +1,47 @@
+<ng-container *ngIf="target && !fullscreen">
+  <p-blockUI [blocked]="blocked" [target]="target">
+    <div
+      class="flex flex-column align-items-center justify-content-center p-3 {{
+        customClass
+      }}"
+    >
+      <p-progressSpinner
+        *ngIf="icon === 'pi pi-spin pi-spinner'"
+        styleClass="w-{{ iconSize }} h-{{ iconSize }}"
+        strokeWidth="4"
+        animationDuration=".5s"
+      >
+      </p-progressSpinner>
+
+      <i
+        *ngIf="icon !== 'pi pi-spin pi-spinner'"
+        class="{{ icon }} text-{{ iconSize }} mb-3"
+      >
+      </i>
+
+      <span *ngIf="message" class="mt-3 font-bold text-lg">{{ message }}</span>
+    </div>
+  </p-blockUI>
+</ng-container>
+
+<div
+  *ngIf="fullscreen && blocked"
+  class="atomix-loading-overlay-fullscreen flex flex-column align-items-center justify-content-center"
+  [ngClass]="{ 'atomix-loading-overlay-transparent': transparent }"
+>
+  <p-progressSpinner
+    *ngIf="icon === 'pi pi-spin pi-spinner'"
+    styleClass="w-{{ iconSize }} h-{{ iconSize }}"
+    strokeWidth="4"
+    animationDuration=".5s"
+  >
+  </p-progressSpinner>
+
+  <i
+    *ngIf="icon !== 'pi pi-spin pi-spinner'"
+    class="{{ icon }} text-{{ iconSize }} mb-3"
+  >
+  </i>
+
+  <span *ngIf="message" class="mt-3 font-bold text-lg">{{ message }}</span>
+</div>

package/src/lib/lib/atomix-loading-overlay/atomix-loading-overlay.component.scss

@@ -0,0 +1,14 @@
+.atomix-loading-overlay-fullscreen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+  color: white;
+}
+
+.atomix-loading-overlay-transparent {
+  background-color: rgba(0, 0, 0, 0.2);
+}

package/src/lib/lib/atomix-loading-overlay/atomix-loading-overlay.component.spec.ts

@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AtomixLoadingOverlayComponent } from './atomix-loading-overlay.component';
+
+describe('AtomixLoadingOverlayComponent', () => {
+  let component: AtomixLoadingOverlayComponent;
+  let fixture: ComponentFixture<AtomixLoadingOverlayComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [AtomixLoadingOverlayComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(AtomixLoadingOverlayComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/lib/atomix-loading-overlay/atomix-loading-overlay.component.ts

@@ -0,0 +1,25 @@
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+
+@Component({
+  selector: 'atomix-loading-overlay',
+  templateUrl: './atomix-loading-overlay.component.html',
+  styleUrls: ['./atomix-loading-overlay.component.scss'],
+})
+export class AtomixLoadingOverlayComponent implements OnChanges {
+  @Input() loading = false;
+  @Input() target: any;
+  @Input() message = 'Processing...';
+  @Input() icon = 'pi pi-spin pi-spinner';
+  @Input() iconSize = '3rem';
+  @Input() customClass = '';
+  @Input() fullscreen = false;
+  @Input() transparent = false;
+
+  blocked = false;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['loading']) {
+      this.blocked = this.loading;
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+<p-messages
+  [(value)]="value"
+  [enableService]="false"
+  [closable]="closable"
+  [severity]="severity"
+  [escape]="escape"
+  [enableService]="enableService"
+  [styleClass]="styleClass"
+></p-messages>

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

@@ -0,0 +1,115 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AtomixMessagesComponent } from './messages.component';
+
+describe('AtomixMessagesComponent', () => {
+  let component: AtomixMessagesComponent;
+  let fixture: ComponentFixture<AtomixMessagesComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixMessagesComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+
+    fixture = TestBed.createComponent(AtomixMessagesComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('default values', () => {
+    it('should have empty value array by default', () => {
+      expect(component.value).toEqual([]);
+    });
+
+    it('should have closable set to true by default', () => {
+      expect(component.closable).toBe(true);
+    });
+
+    it('should have empty severity by default', () => {
+      expect(component.severity).toBe('');
+    });
+
+    it('should have escape set to true by default', () => {
+      expect(component.escape).toBe(true);
+    });
+
+    it('should have enableService set to true by default', () => {
+      expect(component.enableService).toBe(true);
+    });
+
+    it('should have empty styleClass by default', () => {
+      expect(component.styleClass).toBe('');
+    });
+
+    it('should have empty text by default', () => {
+      expect(component.text).toBe('');
+    });
+  });
+
+  describe('message display', () => {
+    it('should accept message value input', () => {
+      const messages = [
+        {
+          severity: 'success',
+          summary: 'Success',
+          detail: 'Operation completed',
+        },
+      ];
+      component.value = messages;
+      fixture.detectChanges();
+
+      expect(component.value).toEqual(messages);
+    });
+
+    it('should accept multiple messages', () => {
+      const messages = [
+        { severity: 'success', summary: 'Success', detail: 'Done' },
+        { severity: 'error', summary: 'Error', detail: 'Failed' },
+        { severity: 'warn', summary: 'Warning', detail: 'Caution' },
+      ];
+      component.value = messages;
+      fixture.detectChanges();
+
+      expect(component.value).toHaveLength(3);
+    });
+
+    it('should accept severity input', () => {
+      component.severity = 'error';
+      fixture.detectChanges();
+
+      expect(component.severity).toBe('error');
+    });
+
+    it('should accept closable input', () => {
+      component.closable = false;
+      fixture.detectChanges();
+
+      expect(component.closable).toBe(false);
+    });
+
+    it('should accept escape input', () => {
+      component.escape = false;
+      fixture.detectChanges();
+
+      expect(component.escape).toBe(false);
+    });
+
+    it('should accept enableService input', () => {
+      component.enableService = false;
+      fixture.detectChanges();
+
+      expect(component.enableService).toBe(false);
+    });
+
+    it('should accept styleClass input', () => {
+      component.styleClass = 'custom-class';
+      fixture.detectChanges();
+
+      expect(component.styleClass).toBe('custom-class');
+    });
+  });
+});

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

@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+import { Message } from 'primeng/api';
+
+@Component({
+  selector: 'atomix-messages',
+  templateUrl: './messages.component.html',
+  styleUrls: ['./messages.component.css'],
+})
+export class AtomixMessagesComponent {
+  @Input() value: Message[] = [];
+  @Input() closable: boolean = true;
+  @Input() severity: string = '';
+  @Input() escape: boolean = true;
+  @Input() enableService: boolean = true;
+  @Input() styleClass: string = '';
+  @Input() text: string = '';
+}

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

@@ -0,0 +1,19 @@
+.pagination-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 1rem;
+
+  .p-inputwrapper {
+    width: auto;
+    max-width: 7rem;
+  }
+}
+
+::ng-deep .pagination-dropdown {
+  border-radius: 6px;
+
+  .p-inputtext {
+    padding: 0.4rem 1rem;
+  }
+}

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

@@ -0,0 +1,24 @@
+<div class="pagination-container">
+  <span class="mx-1 text-color table-text" *ngIf="getScreenWidth > 768"
+    >Items per page:
+  </span>
+  <p-dropdown
+    *ngIf="getScreenWidth > 768"
+    [options]="options"
+    optionLabel="label"
+    optionValue="value"
+    [(ngModel)]="size"
+    (onChange)="handleDropdownValueChange.emit($event)"
+    styleClass="pagination-dropdown"
+  />
+  <p-paginator
+    [first]="page * size"
+    [rows]="size"
+    [totalRecords]="totalRecords"
+    (onPageChange)="paginatorChange.emit($event)"
+    [showCurrentPageReport]="true"
+    currentPageReportTemplate="{first} - {last} of {totalRecords}"
+    [showPageLinks]="false"
+    [showFirstLastIcon]="false"
+  ></p-paginator>
+</div>

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

@@ -0,0 +1,98 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AtomixPaginationComponent } from './atomix-pagination.component';
+
+describe('AtomixPaginationComponent', () => {
+  let component: AtomixPaginationComponent;
+  let fixture: ComponentFixture<AtomixPaginationComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixPaginationComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixPaginationComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('input bindings', () => {
+    it('should have default dataLength as 0', () => {
+      expect(component.dataLength).toBe(0);
+    });
+
+    it('should accept dataLength input', () => {
+      component.dataLength = 50;
+      fixture.detectChanges();
+      expect(component.dataLength).toBe(50);
+    });
+
+    it('should have default totalRecords as 0', () => {
+      expect(component.totalRecords).toBe(0);
+    });
+
+    it('should accept totalRecords input', () => {
+      component.totalRecords = 200;
+      fixture.detectChanges();
+      expect(component.totalRecords).toBe(200);
+    });
+
+    it('should have default page as 0', () => {
+      expect(component.page).toBe(0);
+    });
+
+    it('should accept page input', () => {
+      component.page = 3;
+      fixture.detectChanges();
+      expect(component.page).toBe(3);
+    });
+
+    it('should have default size as 25', () => {
+      expect(component.size).toBe(25);
+    });
+
+    it('should accept size input', () => {
+      component.size = 50;
+      fixture.detectChanges();
+      expect(component.size).toBe(50);
+    });
+  });
+
+  describe('options array', () => {
+    it('should have predefined pagination options', () => {
+      expect(component.options).toBeDefined();
+      expect(component.options.length).toBe(6);
+    });
+
+    it('should contain expected option values', () => {
+      const expectedValues = [10, 25, 50, 75, 100, 500];
+      const optionValues = component.options.map((opt) => opt.value);
+      expect(optionValues).toEqual(expectedValues);
+    });
+
+    it('should have matching label and value for each option', () => {
+      component.options.forEach((opt) => {
+        expect(opt.label).toBe(opt.value);
+      });
+    });
+  });
+
+  describe('window resize handler', () => {
+    it('should have initial getScreenWidth as 0', () => {
+      expect(component.getScreenWidth).toBe(0);
+    });
+
+    it('should update getScreenWidth on window resize', () => {
+      component.onWindowResize();
+      expect(component.getScreenWidth).toBe(window.innerWidth);
+    });
+
+    it('should respond to window resize event', () => {
+      window.dispatchEvent(new Event('resize'));
+      expect(component.getScreenWidth).toBe(window.innerWidth);
+    });
+  });
+});

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

@@ -0,0 +1,36 @@
+import {
+  Component,
+  EventEmitter,
+  HostListener,
+  Input,
+  Output,
+} from '@angular/core';
+import { DropdownChangeEvent } from 'primeng/dropdown';
+
+@Component({
+  selector: 'app-pagination',
+  templateUrl: './atomix-pagination.component.html',
+  styleUrls: ['./atomix-pagination.component.css'],
+})
+export class AtomixPaginationComponent {
+  @Input() dataLength: number = 0;
+  @Input() totalRecords: number = 0;
+  @Input() page: number = 0;
+  @Input() size: number = 25;
+  @Output() handleDropdownValueChange = new EventEmitter<DropdownChangeEvent>();
+  @Output() paginatorChange = new EventEmitter<any>();
+  getScreenWidth: number = 0;
+  options = [
+    { label: 10, value: 10 },
+    { label: 25, value: 25 },
+    { label: 50, value: 50 },
+    { label: 75, value: 75 },
+    { label: 100, value: 100 },
+    { label: 500, value: 500 },
+  ];
+
+  @HostListener('window:resize', ['$event'])
+  onWindowResize() {
+    this.getScreenWidth = window.innerWidth;
+  }
+}

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

@@ -0,0 +1,7 @@
+<p-radioButton
+  [name]="name"
+  [value]="value"
+  [(ngModel)]="selectedValue"
+  [inputId]="inputId"
+  (onChange)="onChange($event)"
+/>

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

@@ -0,0 +1,116 @@
+import { NO_ERRORS_SCHEMA, forwardRef } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+import { AtomixRadioButtonComponent } from './atomix-radio-button.component';
+
+describe('AtomixRadioButtonComponent', () => {
+  let component: AtomixRadioButtonComponent;
+  let fixture: ComponentFixture<AtomixRadioButtonComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixRadioButtonComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).overrideComponent(AtomixRadioButtonComponent, {
+      set: {
+        template: '<div></div>',
+      },
+    });
+    fixture = TestBed.createComponent(AtomixRadioButtonComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('input bindings', () => {
+    it('should have default name as empty string', () => {
+      expect(component.name).toBe('');
+    });
+
+    it('should have default value as empty string', () => {
+      expect(component.value).toBe('');
+    });
+
+    it('should have default selectedValue as empty string', () => {
+      expect(component.selectedValue).toBe('');
+    });
+
+    it('should have default inputId as empty string', () => {
+      expect(component.inputId).toBe('');
+    });
+
+    it('should accept name input', () => {
+      component.name = 'gender';
+      expect(component.name).toBe('gender');
+    });
+
+    it('should accept value input', () => {
+      component.value = 'male';
+      expect(component.value).toBe('male');
+    });
+
+    it('should accept selectedValue input', () => {
+      component.selectedValue = 'female';
+      expect(component.selectedValue).toBe('female');
+    });
+
+    it('should accept inputId input', () => {
+      component.inputId = 'radio-1';
+      expect(component.inputId).toBe('radio-1');
+    });
+  });
+
+  describe('ControlValueAccessor', () => {
+    it('should set selectedValue when writeValue is called', () => {
+      component.writeValue('option1');
+      expect(component.selectedValue).toBe('option1');
+    });
+
+    it('should register onChange callback', () => {
+      const fn = jest.fn();
+      component.registerOnChange(fn);
+      component.onChange('test');
+      expect(fn).toHaveBeenCalledWith('test');
+    });
+
+    it('should register onTouched callback', () => {
+      const fn = jest.fn();
+      component.registerOnTouched(fn);
+      component.onTouched();
+      expect(fn).toHaveBeenCalled();
+    });
+
+    it('should call onChange when selection changes', () => {
+      const onChangeSpy = jest.fn();
+      component.registerOnChange(onChangeSpy);
+
+      component.onChange('selectedOption');
+
+      expect(onChangeSpy).toHaveBeenCalledWith('selectedOption');
+    });
+  });
+
+  describe('NG_VALUE_ACCESSOR provider', () => {
+    it('should provide itself as NG_VALUE_ACCESSOR via forwardRef', () => {
+      // Create a fresh TestBed without template override to test the provider registration
+      TestBed.resetTestingModule();
+      TestBed.configureTestingModule({
+        declarations: [AtomixRadioButtonComponent],
+        schemas: [NO_ERRORS_SCHEMA],
+      });
+      const fix = TestBed.createComponent(AtomixRadioButtonComponent);
+      const injector = fix.debugElement.injector;
+      const valueAccessors = injector.get(NG_VALUE_ACCESSOR);
+      expect(valueAccessors).toBeDefined();
+      expect(valueAccessors.length).toBeGreaterThan(0);
+      expect(valueAccessors[0]).toBe(fix.componentInstance);
+    });
+
+    it('should resolve forwardRef to AtomixRadioButtonComponent', () => {
+      const resolved = forwardRef(() => AtomixRadioButtonComponent);
+      expect(resolved).toBeDefined();
+    });
+  });
+});

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

@@ -0,0 +1,37 @@
+import { Component, Input, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms';
+
+@Component({
+  selector: 'atomix-radio-button',
+  templateUrl: './atomix-radio-button.component.html',
+  styleUrl: './atomix-radio-button.component.css',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => AtomixRadioButtonComponent),
+      multi: true,
+    },
+  ],
+})
+export class AtomixRadioButtonComponent {
+  @Input() name: string = '';
+  @Input() value: string = '';
+  @Input() selectedValue: string = '';
+  @Input() inputId: string = '';
+  model: any;
+
+  onChange = (_: any) => {};
+  onTouched = () => {};
+
+  writeValue(value: any): void {
+    this.selectedValue = value;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+}

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

@@ -0,0 +1,49 @@
+/* Hide the default browser clear icon for search inputs */
+input[type='search']::-webkit-search-cancel-button {
+  display: none;
+}
+
+input[type='search']::-moz-search-cancel-button {
+  display: none;
+}
+
+input[type='search']::-ms-clear {
+  display: none;
+}
+
+.lib-error-asterisk {
+  color: red;
+}
+
+.billing-input-column-container {
+  display: flex;
+}
+.filter-dropdown-icon {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  z-index: 1;
+  cursor: pointer;
+  color: #6c757d;
+  right: 10px;
+}
+.search-dropdown {
+  width: max-content !important;
+  border-top-left-radius: 0px !important;
+  border-bottom-left-radius: 0px !important;
+  width: max-content !important;
+}
+
+.search-input {
+  background-color: var(--filter-inventory-bg);
+  border: 1px solid var(--border-color) !important;
+  margin-top: 0 !important;
+  border-right: none !important;
+  padding-right: 8px;
+}
+
+.search-dropdown-container {
+  position: relative;
+  flex: 1;
+}