primekit 1.0.9 → 1.0.11

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

@@ -0,0 +1,27 @@
+import { ChangeDetectorRef, Component } from '@angular/core';
+
+@Component({
+  selector: 'atomix-snackbar',
+  templateUrl: './atomix-snackbar.component.html',
+  styleUrls: ['./atomix-snackbar.component.css'],
+})
+export class AtomixSnackbarComponent {
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  isVisible = false;
+  message = '';
+
+  showSnackbar(message: string) {
+    this.message = message;
+    this.isVisible = true;
+    this.cdr.detectChanges();
+
+    setTimeout(() => {
+      this.isVisible = false;
+    }, 3000);
+  }
+
+  hideSnackbar() {
+    this.isVisible = false;
+  }
+}

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

@@ -0,0 +1,7 @@
+<p-progressSpinner
+  ariaLabel="loading"
+  [animationDuration]="animationDuration"
+  [styleClass]="styleClass"
+  [strokeWidth]="strokeWidth"
+  [fill]="fill"
+/>

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

@@ -0,0 +1,70 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AtomixSpinnerComponent } from './atomix-spinner.component';
+
+describe('AtomixSpinnerComponent', () => {
+  let component: AtomixSpinnerComponent;
+  let fixture: ComponentFixture<AtomixSpinnerComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixSpinnerComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixSpinnerComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('rendering', () => {
+    it('should render the p-progressSpinner element', () => {
+      fixture.detectChanges();
+      const compiled = fixture.nativeElement as HTMLElement;
+      const spinner = compiled.querySelector('p-progressSpinner');
+      expect(spinner).toBeTruthy();
+    });
+
+    it('should have default animationDuration of 2s', () => {
+      expect(component.animationDuration).toBe('2s');
+    });
+
+    it('should accept animationDuration input', () => {
+      component.animationDuration = '1s';
+      fixture.detectChanges();
+      expect(component.animationDuration).toBe('1s');
+    });
+
+    it('should have default styleClass as empty string', () => {
+      expect(component.styleClass).toBe('');
+    });
+
+    it('should accept styleClass input', () => {
+      component.styleClass = 'custom-spinner';
+      fixture.detectChanges();
+      expect(component.styleClass).toBe('custom-spinner');
+    });
+
+    it('should have default strokeWidth of 2', () => {
+      expect(component.strokeWidth).toBe('2');
+    });
+
+    it('should accept strokeWidth input', () => {
+      component.strokeWidth = '4';
+      fixture.detectChanges();
+      expect(component.strokeWidth).toBe('4');
+    });
+
+    it('should have default fill as none', () => {
+      expect(component.fill).toBe('none');
+    });
+
+    it('should accept fill input', () => {
+      component.fill = 'blue';
+      fixture.detectChanges();
+      expect(component.fill).toBe('blue');
+    });
+  });
+});

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

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'atomix-spinner',
+  templateUrl: './atomix-spinner.component.html',
+  styleUrls: ['./atomix-spinner.component.css'],
+})
+export class AtomixSpinnerComponent {
+  @Input() animationDuration: string = '2s';
+  @Input() styleClass: string = '';
+  @Input() strokeWidth: string = '2';
+  @Input() fill: string = 'none';
+}

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

@@ -0,0 +1,9 @@
+<p-steps
+  [model]="model"
+  [activeIndex]="activeIndex"
+  [readonly]="readonly"
+  [style]="style"
+  [styleClass]="styleClass"
+  [exact]="exact"
+  (activeIndexChange)="onIndexChange($event)"
+></p-steps>

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

@@ -0,0 +1,120 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AtomixStepsComponent } from './atomix-steps.component';
+
+describe('AtomixStepsComponent', () => {
+  let component: AtomixStepsComponent;
+  let fixture: ComponentFixture<AtomixStepsComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixStepsComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixStepsComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('input bindings', () => {
+    it('should have default activeIndex as 0', () => {
+      expect(component.activeIndex).toBe(0);
+    });
+
+    it('should have default model as empty array', () => {
+      expect(component.model).toEqual([]);
+    });
+
+    it('should have default readonly as true', () => {
+      expect(component.readonly).toBe(true);
+    });
+
+    it('should have default exact as true', () => {
+      expect(component.exact).toBe(true);
+    });
+
+    it('should accept model input with step items', () => {
+      const steps = [
+        { label: 'Step 1' },
+        { label: 'Step 2' },
+        { label: 'Step 3' },
+      ];
+      component.model = steps;
+      fixture.detectChanges();
+      expect(component.model).toEqual(steps);
+    });
+
+    it('should accept activeIndex input', () => {
+      component.activeIndex = 2;
+      fixture.detectChanges();
+      expect(component.activeIndex).toBe(2);
+    });
+
+    it('should accept readonly input', () => {
+      component.readonly = false;
+      fixture.detectChanges();
+      expect(component.readonly).toBe(false);
+    });
+
+    it('should accept exact input', () => {
+      component.exact = false;
+      fixture.detectChanges();
+      expect(component.exact).toBe(false);
+    });
+
+    it('should accept style input', () => {
+      const style = { width: '100%' };
+      component.style = style;
+      fixture.detectChanges();
+      expect(component.style).toEqual(style);
+    });
+
+    it('should accept styleClass input', () => {
+      component.styleClass = 'custom-steps';
+      fixture.detectChanges();
+      expect(component.styleClass).toBe('custom-steps');
+    });
+  });
+
+  describe('active index tracking', () => {
+    it('should update activeIndex when onIndexChange is called', () => {
+      component.model = [{ label: 'Step 1' }, { label: 'Step 2' }];
+      component.onIndexChange(1);
+      expect(component.activeIndex).toBe(1);
+    });
+
+    it('should emit activeIndexChange when onIndexChange is called', () => {
+      const emitSpy = jest.fn();
+      component.activeIndexChange.subscribe(emitSpy);
+      component.model = [{ label: 'Step 1' }, { label: 'Step 2' }];
+
+      component.onIndexChange(1);
+
+      expect(emitSpy).toHaveBeenCalledWith(1);
+    });
+
+    it('should emit stepChange with index and item when onIndexChange is called', () => {
+      const emitSpy = jest.fn();
+      component.stepChange.subscribe(emitSpy);
+      const steps = [{ label: 'Step 1' }, { label: 'Step 2' }];
+      component.model = steps;
+
+      component.onIndexChange(1);
+
+      expect(emitSpy).toHaveBeenCalledWith({ index: 1, item: steps[1] });
+    });
+
+    it('should emit stepChange with undefined item when model is empty', () => {
+      const emitSpy = jest.fn();
+      component.stepChange.subscribe(emitSpy);
+      component.model = [];
+
+      component.onIndexChange(0);
+
+      expect(emitSpy).toHaveBeenCalledWith({ index: 0, item: undefined });
+    });
+  });
+});

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

@@ -0,0 +1,32 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ChangeDetectionStrategy,
+} from '@angular/core';
+import { MenuItem } from 'primeng/api';
+
+@Component({
+  selector: 'atomix-steps',
+  templateUrl: './atomix-steps.component.html',
+  styleUrls: ['./atomix-steps.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AtomixStepsComponent {
+  @Input() activeIndex = 0;
+  @Input() model: MenuItem[] = [];
+  @Input() readonly = true;
+  @Input() exact = true;
+  @Input() style: any;
+  @Input() styleClass?: string;
+
+  @Output() activeIndexChange = new EventEmitter<number>();
+  @Output() stepChange = new EventEmitter<{ index: number; item?: MenuItem }>();
+
+  onIndexChange(index: number) {
+    this.activeIndex = index;
+    this.activeIndexChange.emit(index);
+    this.stepChange.emit({ index, item: this.model?.[index] });
+  }
+}

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

@@ -0,0 +1,26 @@
+<p-tabMenu
+  [model]="model"
+  [(activeItem)]="activeItem"
+  [scrollable]="scrollable"
+  [style]="style"
+  [styleClass]="styleClass"
+  [ariaLabel]="ariaLabel"
+  [ariaLabelledBy]="ariaLabelledBy"
+  (activeItemChange)="onTabChange($event)"
+>
+  <ng-template pTemplate="item" let-item let-i="index">
+    <ng-container *ngIf="itemTemplate">
+      <ng-container
+        *ngTemplateOutlet="itemTemplate; context: { $implicit: item, index: i }"
+      ></ng-container>
+    </ng-container>
+  </ng-template>
+
+  <ng-template pTemplate="nexticon" *ngIf="nextIconTemplate">
+    <ng-container *ngTemplateOutlet="nextIconTemplate"></ng-container>
+  </ng-template>
+
+  <ng-template pTemplate="previousicon" *ngIf="previousIconTemplate">
+    <ng-container *ngTemplateOutlet="previousIconTemplate"></ng-container>
+  </ng-template>
+</p-tabMenu>

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

@@ -0,0 +1,106 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AtomixTabMenuComponent } from './atomix-tabMenu.component';
+
+describe('AtomixTabMenuComponent', () => {
+  let component: AtomixTabMenuComponent;
+  let fixture: ComponentFixture<AtomixTabMenuComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixTabMenuComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixTabMenuComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('input bindings', () => {
+    it('should have default model as empty array', () => {
+      expect(component.model).toEqual([]);
+    });
+
+    it('should have default scrollable as false', () => {
+      expect(component.scrollable).toBe(false);
+    });
+
+    it('should accept model input with menu items', () => {
+      const items = [
+        { label: 'Tab 1', icon: 'pi pi-home' },
+        { label: 'Tab 2', icon: 'pi pi-user' },
+        { label: 'Tab 3', icon: 'pi pi-cog' },
+      ];
+      component.model = items;
+      fixture.detectChanges();
+      expect(component.model).toEqual(items);
+    });
+
+    it('should accept activeItem input', () => {
+      const item = { label: 'Tab 1' };
+      component.activeItem = item;
+      fixture.detectChanges();
+      expect(component.activeItem).toEqual(item);
+    });
+
+    it('should accept scrollable input', () => {
+      component.scrollable = true;
+      fixture.detectChanges();
+      expect(component.scrollable).toBe(true);
+    });
+
+    it('should accept style input', () => {
+      const style = { width: '100%' };
+      component.style = style;
+      fixture.detectChanges();
+      expect(component.style).toEqual(style);
+    });
+
+    it('should accept styleClass input', () => {
+      component.styleClass = 'custom-tab-menu';
+      fixture.detectChanges();
+      expect(component.styleClass).toBe('custom-tab-menu');
+    });
+
+    it('should accept ariaLabel input', () => {
+      component.ariaLabel = 'Navigation tabs';
+      fixture.detectChanges();
+      expect(component.ariaLabel).toBe('Navigation tabs');
+    });
+
+    it('should accept ariaLabelledBy input', () => {
+      component.ariaLabelledBy = 'tab-heading';
+      fixture.detectChanges();
+      expect(component.ariaLabelledBy).toBe('tab-heading');
+    });
+  });
+
+  describe('selection event emission', () => {
+    it('should emit activeItemChange when onTabChange is called', () => {
+      const emitSpy = jest.fn();
+      component.activeItemChange.subscribe(emitSpy);
+      const selectedItem = { label: 'Tab 2' };
+
+      component.onTabChange(selectedItem);
+
+      expect(emitSpy).toHaveBeenCalledWith(selectedItem);
+    });
+
+    it('should emit activeItemChange with the correct menu item', () => {
+      const emitSpy = jest.fn();
+      component.activeItemChange.subscribe(emitSpy);
+      const items = [
+        { label: 'Tab 1', icon: 'pi pi-home' },
+        { label: 'Tab 2', icon: 'pi pi-user' },
+      ];
+      component.model = items;
+
+      component.onTabChange(items[1]);
+
+      expect(emitSpy).toHaveBeenCalledWith(items[1]);
+    });
+  });
+});

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

@@ -0,0 +1,36 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  TemplateRef,
+  ContentChild,
+} from '@angular/core';
+import { MenuItem } from 'primeng/api';
+
+@Component({
+  selector: 'atomix-tabMenu',
+  templateUrl: './atomix-tabMenu.component.html',
+  styleUrls: ['./atomix-tabMenu.component.css'],
+})
+export class AtomixTabMenuComponent {
+  @Input() model: MenuItem[] = [];
+  @Input() activeItem?: MenuItem;
+  @Input() scrollable: boolean = false;
+  @Input() style?: any;
+  @Input() styleClass?: string;
+  @Input() ariaLabel?: string;
+  @Input() ariaLabelledBy?: string;
+
+  @Input() nextIconTemplate?: TemplateRef<any>;
+  @Input() previousIconTemplate?: TemplateRef<any>;
+
+  @ContentChild(TemplateRef) itemTemplate?: TemplateRef<any>;
+
+  @Output() activeItemChange: EventEmitter<MenuItem> =
+    new EventEmitter<MenuItem>();
+
+  onTabChange(event: any) {
+    this.activeItemChange.emit(event);
+  }
+}

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

@@ -0,0 +1,152 @@
+@import 'primeicons/primeicons.css';
+
+.caption {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-left: 1rem;
+  .left-caption-options {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 150%;
+    justify-content: space-between;
+
+    .select-all-checkbox {
+      display: flex;
+      .checkbox-typography {
+        margin-left: 0.75em;
+      }
+    }
+  }
+}
+
+.table-sort-icon {
+  opacity: 0;
+  transition: opacity 0.2s;
+  margin-left: 0.8rem;
+  cursor: pointer !important;
+}
+
+.icon-container:hover .inactive-sort-column.sort-icon {
+  opacity: 1;
+}
+
+.active-sort-column.sort-icon {
+  opacity: 1;
+  font-weight: 600;
+  font-size: 12px;
+}
+
+.inactive-sort-column {
+  color: #c7cbd3;
+}
+
+.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: 30px;
+}
+
+.header-content {
+  color: #374151;
+  font-weight: 600;
+}
+
+.empty-table-container {
+  padding: 2rem;
+  text-align: center;
+}
+
+.empty-table-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.empty-table-image {
+  max-width: 200px;
+  margin-bottom: 1rem;
+}
+
+.empty-table-message {
+  font-size: 1rem;
+  color: #6b7280;
+  font-weight: 500;
+}
+
+::ng-deep .lib-table-header-checkbox {
+  margin-left: 0.5rem;
+}
+
+:host ::ng-deep .p-column-filter-menu-button.p-column-filter-menu-button-active,
+.p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+  background-color: #e5f4ec !important;
+}
+
+:host ::ng-deep .p-column-filter-menu-button.p-column-filter-menu-button-active,
+.p-column-filter-menu-button.p-column-filter-menu-button-active:hover {
+  color: #63b77e !important;
+}
+
+.child-row-header {
+  background: var(--child-row-header-bg);
+}
+
+.child-row-header > td {
+  height: 40px;
+  padding: 0.5rem 1rem;
+  font-weight: 500;
+  color: var(--primary-text-color);
+  font-size: 12px;
+}
+
+::ng-deep .p-progressbar {
+  height: 13px;
+  border-radius: 13px;
+}
+.progress-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+}
+
+.progress-bar-wrapper {
+  position: relative;
+  width: 150px;
+  display: flex;
+  align-items: center;
+}
+
+.progress-bar-wrapper p-progressbar {
+  width: 100%;
+  flex: 1;
+}
+
+.progress-text-overlay {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #374151;
+  white-space: nowrap;
+}
+
+::ng-deep .p-column-filter-buttonbar {
+  gap: 20px !important;
+}