primekit 1.0.8 → 1.0.10

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

@@ -0,0 +1,145 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AtomixCalendarComponent } from './atomix-calendar.component';
+
+describe('AtomixCalendarComponent', () => {
+  let component: AtomixCalendarComponent;
+  let fixture: ComponentFixture<AtomixCalendarComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixCalendarComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixCalendarComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('date selection property binding', () => {
+    it('should have default placeholder as empty string', () => {
+      expect(component.placeholder).toBe('');
+    });
+
+    it('should accept placeholder input', () => {
+      component.placeholder = 'Select a date';
+      fixture.detectChanges();
+      expect(component.placeholder).toBe('Select a date');
+    });
+
+    it('should have default selectionMode as single', () => {
+      expect(component.selectionMode).toBe('single');
+    });
+
+    it('should accept selectionMode input as multiple', () => {
+      component.selectionMode = 'multiple';
+      fixture.detectChanges();
+      expect(component.selectionMode).toBe('multiple');
+    });
+
+    it('should accept selectionMode input as range', () => {
+      component.selectionMode = 'range';
+      fixture.detectChanges();
+      expect(component.selectionMode).toBe('range');
+    });
+
+    it('should have default styleClass as empty string', () => {
+      expect(component.styleClass).toBe('');
+    });
+
+    it('should accept styleClass input', () => {
+      component.styleClass = 'custom-class';
+      fixture.detectChanges();
+      expect(component.styleClass).toBe('custom-class');
+    });
+
+    it('should have default inputStyleClass as empty string', () => {
+      expect(component.inputStyleClass).toBe('');
+    });
+
+    it('should accept inputStyleClass input', () => {
+      component.inputStyleClass = 'input-custom';
+      fixture.detectChanges();
+      expect(component.inputStyleClass).toBe('input-custom');
+    });
+
+    it('should have default disabled as false', () => {
+      expect(component.disabled).toBe(false);
+    });
+
+    it('should accept disabled input', () => {
+      component.disabled = true;
+      fixture.detectChanges();
+      expect(component.disabled).toBe(true);
+    });
+
+    it('should have default selectedDate as null', () => {
+      expect(component.selectedDate).toBeNull();
+    });
+
+    it('should accept selectedDate as a single Date', () => {
+      const date = new Date(2024, 0, 15);
+      component.selectedDate = date;
+      fixture.detectChanges();
+      expect(component.selectedDate).toBe(date);
+    });
+
+    it('should accept selectedDate as an array of Dates', () => {
+      const dates = [new Date(2024, 0, 15), new Date(2024, 0, 20)];
+      component.selectedDate = dates;
+      fixture.detectChanges();
+      expect(component.selectedDate).toBe(dates);
+    });
+
+    it('should accept maxDate input', () => {
+      const maxDate = new Date(2025, 11, 31);
+      component.maxDate = maxDate;
+      fixture.detectChanges();
+      expect(component.maxDate).toBe(maxDate);
+    });
+
+    it('should accept minDate input', () => {
+      const minDate = new Date(2020, 0, 1);
+      component.minDate = minDate;
+      fixture.detectChanges();
+      expect(component.minDate).toBe(minDate);
+    });
+
+    it('should emit dateRangeChange when onDateRangeChange is called', () => {
+      const emitSpy = jest.fn();
+      component.dateRangeChange.subscribe(emitSpy);
+
+      const dateRange = [new Date(2024, 0, 1), new Date(2024, 0, 31)];
+      component.onDateRangeChange(dateRange);
+
+      expect(emitSpy).toHaveBeenCalledWith(dateRange);
+    });
+
+    it('should emit dateRangeChange with null', () => {
+      const emitSpy = jest.fn();
+      component.dateRangeChange.subscribe(emitSpy);
+
+      component.onDateRangeChange(null);
+
+      expect(emitSpy).toHaveBeenCalledWith(null);
+    });
+
+    it('should clear selectedDate when clearDateRange is called', () => {
+      component.selectedDate = new Date(2024, 5, 15);
+      component.clearDateRange();
+      expect(component.selectedDate).toBeNull();
+    });
+
+    it('should have enLocale defined with correct structure', () => {
+      expect(component.enLocale).toBeDefined();
+      expect(component.enLocale.firstDayOfWeek).toBe(0);
+      expect(component.enLocale.dayNames).toHaveLength(7);
+      expect(component.enLocale.monthNames).toHaveLength(12);
+      expect(component.enLocale.today).toBe('Today');
+      expect(component.enLocale.clear).toBe('Clear');
+    });
+  });
+});

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

@@ -0,0 +1,71 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+  selector: 'atomix-calendar',
+  templateUrl: './atomix-calendar.component.html',
+  styleUrls: ['./atomix-calendar.component.css'],
+})
+export class AtomixCalendarComponent {
+  @Input() placeholder: string = '';
+  @Input() selectionMode: 'single' | 'multiple' | 'range' = 'single';
+  @Input() styleClass: string = '';
+  @Input() inputStyleClass: string = '';
+  @Input() disabled: boolean = false;
+  @Input() selectedDate: Date[] | null | Date = null;
+  @Output() dateRangeChange = new EventEmitter<any>();
+  @Input() maxDate!: Date;
+  @Input() minDate!: Date;
+
+  enLocale = {
+    firstDayOfWeek: 0,
+    dayNames: [
+      'Sunday',
+      'Monday',
+      'Tuesday',
+      'Wednesday',
+      'Thursday',
+      'Friday',
+      'Saturday',
+    ],
+    dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+    dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+    monthNames: [
+      'January',
+      'February',
+      'March',
+      'April',
+      'May',
+      'June',
+      'July',
+      'August',
+      'September',
+      'October',
+      'November',
+      'December',
+    ],
+    monthNamesShort: [
+      'Jan',
+      'Feb',
+      'Mar',
+      'Apr',
+      'May',
+      'Jun',
+      'Jul',
+      'Aug',
+      'Sep',
+      'Oct',
+      'Nov',
+      'Dec',
+    ],
+    today: 'Today',
+    clear: 'Clear',
+  };
+
+  clearDateRange() {
+    this.selectedDate = null;
+  }
+
+  onDateRangeChange(dateRange: Date[] | null): void {
+    this.dateRangeChange.emit(dateRange);
+  }
+}

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

@@ -0,0 +1,4 @@
+::ng-deep .p-card {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  border-radius: var(--global-border-radius) !important;
+}

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

@@ -0,0 +1,3 @@
+<p-card [class]="class">
+  <ng-content></ng-content>
+</p-card>

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

@@ -0,0 +1,63 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AtomixCardComponent } from './atomix-card.component';
+
+describe('AtomixCardComponent', () => {
+  let component: AtomixCardComponent;
+  let fixture: ComponentFixture<AtomixCardComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixCardComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixCardComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('input bindings', () => {
+    it('should have header as undefined by default', () => {
+      expect(component.header).toBeUndefined();
+    });
+
+    it('should accept header input', () => {
+      component.header = 'Card Title';
+      fixture.detectChanges();
+      expect(component.header).toBe('Card Title');
+    });
+
+    it('should have footer as undefined by default', () => {
+      expect(component.footer).toBeUndefined();
+    });
+
+    it('should accept footer input', () => {
+      component.footer = 'Card Footer';
+      fixture.detectChanges();
+      expect(component.footer).toBe('Card Footer');
+    });
+
+    it('should have content as undefined by default', () => {
+      expect(component.content).toBeUndefined();
+    });
+
+    it('should accept content input', () => {
+      component.content = 'Card Content';
+      fixture.detectChanges();
+      expect(component.content).toBe('Card Content');
+    });
+
+    it('should have class as undefined by default', () => {
+      expect(component.class).toBeUndefined();
+    });
+
+    it('should accept class input', () => {
+      component.class = 'custom-card-class';
+      fixture.detectChanges();
+      expect(component.class).toBe('custom-card-class');
+    });
+  });
+});

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

@@ -0,0 +1,13 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'atomix-card',
+  templateUrl: './atomix-card.component.html',
+  styleUrls: ['./atomix-card.component.css'],
+})
+export class AtomixCardComponent {
+  @Input() header: string | undefined;
+  @Input() footer: string | undefined;
+  @Input() content: string | undefined;
+  @Input() class: string | undefined;
+}

package/src/lib/lib/atomix-confirmation-dialog/atomix-confirmation-dialog.component.css

@@ -0,0 +1,12 @@
+.action-button-container {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+@media (max-width: 768px) {
+  .dialog-width {
+    width: 95% !important;
+  }
+}

package/src/lib/lib/atomix-confirmation-dialog/atomix-confirmation-dialog.component.html

@@ -0,0 +1,9 @@
+<p class="global-sub-heading">
+  {{ config?.data?.message }}
+</p>
+
+<div class="action-button-container">
+  <atomix-button buttonType="outlined" (buttonClick)="onNoClick()" label="No">
+  </atomix-button>
+  <atomix-button label="Yes" (buttonClick)="onYesClick()"></atomix-button>
+</div>

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

@@ -0,0 +1,63 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { AtomixConfirmationDialogComponent } from './atomix-confirmation-dialog.component';
+
+describe('AtomixConfirmationDialogComponent', () => {
+  let component: AtomixConfirmationDialogComponent;
+  let fixture: ComponentFixture<AtomixConfirmationDialogComponent>;
+  let mockDialogConfig: { data: { message: string } };
+  let mockDialogRef: { close: jest.Mock };
+
+  beforeEach(() => {
+    mockDialogConfig = { data: { message: 'Are you sure?' } };
+    mockDialogRef = { close: jest.fn() };
+
+    TestBed.configureTestingModule({
+      declarations: [AtomixConfirmationDialogComponent],
+      providers: [
+        { provide: DynamicDialogConfig, useValue: mockDialogConfig },
+        { provide: DynamicDialogRef, useValue: mockDialogRef },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixConfirmationDialogComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('input configuration', () => {
+    it('should have default message as empty string', () => {
+      expect(component.message).toBe('');
+    });
+
+    it('should accept message input', () => {
+      component.message = 'Delete this item?';
+      fixture.detectChanges();
+      expect(component.message).toBe('Delete this item?');
+    });
+
+    it('should have access to DynamicDialogConfig', () => {
+      expect(component.config).toBe(mockDialogConfig);
+    });
+
+    it('should read message from config data', () => {
+      expect(component.config.data.message).toBe('Are you sure?');
+    });
+  });
+
+  describe('dialog actions', () => {
+    it('should close dialog with true when onYesClick is called', () => {
+      component.onYesClick();
+      expect(mockDialogRef.close).toHaveBeenCalledWith(true);
+    });
+
+    it('should close dialog with false when onNoClick is called', () => {
+      component.onNoClick();
+      expect(mockDialogRef.close).toHaveBeenCalledWith(false);
+    });
+  });
+});

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

@@ -0,0 +1,22 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+
+@Component({
+  selector: 'atomix-confirmation-dialog',
+  templateUrl: './atomix-confirmation-dialog.component.html',
+  styleUrls: ['./atomix-confirmation-dialog.component.css'],
+})
+export class AtomixConfirmationDialogComponent {
+  @Input() message: string = '';
+  constructor(
+    public config: DynamicDialogConfig,
+    private ref: DynamicDialogRef
+  ) {}
+  onYesClick(): void {
+    this.ref.close(true);
+  }
+
+  onNoClick(): void {
+    this.ref.close(false);
+  }
+}

package/src/lib/lib/atomix-daterange-calendar/atomix-daterange-calendar.component.html

@@ -0,0 +1,233 @@
+<div>
+  <ng-container *ngIf="!inline; else inlineBlock">
+    <div [ngClass]="styleClass" class="input-wrapper">
+      <input
+        pInputText
+        type="text"
+        [ngClass]="inputStyleClass"
+        [placeholder]="placeholder"
+        [value]="getDateRangeLabel()"
+        readonly
+        [disabled]="disabled"
+        (click)="overlayPanel?.toggle($event)"
+        (keydown)="onInputKeyDown($event)"
+      />
+      <i
+        class="pi pi-calendar input-icon"
+        title="Open calendar"
+        (click)="!disabled && overlayPanel?.toggle($event)"
+      ></i>
+      <i
+        *ngIf="hasSelection"
+        class="pi pi-times input-clear-icon"
+        title="Clear"
+        tabindex="0"
+        (click)="!disabled && clearAndStop($event)"
+        (keydown.enter)="!disabled && clearAndStop($event)"
+        (keydown.space)="!disabled && clearAndStop($event)"
+      ></i>
+    </div>
+
+    <p-overlayPanel
+      #overlayPanel
+      [dismissable]="true"
+      appendTo="body"
+      styleClass="atomix-date-range-overlay"
+      (onShow)="onOverlayShow()"
+      (onHide)="onOverlayHide()"
+    >
+      <div class="overlay-inner">
+        <div class="overlay-left">
+          <div class="preset-list">
+            <button
+              pButton
+              pRipple
+              type="button"
+              class="preset-btn"
+              (click)="applyPreset('today')"
+              [ngClass]="{ active: selectedPreset === 'today' }"
+              label="Today"
+            ></button>
+            <button
+              pButton
+              pRipple
+              type="button"
+              class="preset-btn"
+              (click)="applyPreset('yesterday')"
+              [ngClass]="{ active: selectedPreset === 'yesterday' }"
+              label="Yesterday"
+            ></button>
+            <button
+              pButton
+              pRipple
+              type="button"
+              class="preset-btn"
+              (click)="applyPreset('last7days')"
+              [ngClass]="{ active: selectedPreset === 'last7days' }"
+              label="Last 7 days"
+            ></button>
+            <button
+              pButton
+              pRipple
+              type="button"
+              class="preset-btn"
+              (click)="applyPreset('last30days')"
+              [ngClass]="{ active: selectedPreset === 'last30days' }"
+              label="Last 30 days"
+            ></button>
+            <button
+              pButton
+              pRipple
+              type="button"
+              class="preset-btn"
+              (click)="applyPreset('last3months')"
+              [ngClass]="{ active: selectedPreset === 'last3months' }"
+              label="Last 3 months"
+            ></button>
+            <button
+              pButton
+              pRipple
+              type="button"
+              class="preset-btn"
+              (click)="applyPreset('last6months')"
+              [ngClass]="{ active: selectedPreset === 'last6months' }"
+              label="Last 6 months"
+            ></button>
+            <button
+              pButton
+              pRipple
+              type="button"
+              class="preset-btn"
+              (click)="applyPreset('last1year')"
+              [ngClass]="{ active: selectedPreset === 'last1year' }"
+              label="Last 1 year"
+            ></button>
+            <a class="reset-link" (click)="resetAndClose()">Reset</a>
+          </div>
+        </div>
+        <div class="overlay-right">
+          <p-calendar
+            [(ngModel)]="modelDate"
+            [selectionMode]="'range'"
+            [inline]="true"
+            [dateFormat]="'mm/dd/yyyy'"
+            [showOtherMonths]="true"
+            [locale]="enLocale"
+            [showIcon]="false"
+            [styleClass]="'atomix-overlay-calendar'"
+            (ngModelChange)="onModelChange($event)"
+            (onMonthChange)="onCalendarViewChanged($event)"
+            (onYearChange)="onCalendarViewChanged($event)"
+            [disabled]="disabled"
+            [maxDate]="maxDate"
+            [minDate]="minDate"
+          ></p-calendar>
+        </div>
+      </div>
+    </p-overlayPanel>
+  </ng-container>
+
+  <ng-template #inlineBlock>
+    <div [ngClass]="styleClass" class="input-wrapper">
+      <input
+        pInputText
+        type="text"
+        [ngClass]="inputStyleClass"
+        [placeholder]="placeholder"
+        [value]="getDateRangeLabel()"
+        readonly
+        [disabled]="disabled"
+        (keydown)="onInputKeyDown($event)"
+      />
+      <i class="pi pi-calendar input-icon" title="Open calendar"></i>
+      <i
+        *ngIf="hasSelection"
+        class="pi pi-times input-clear-icon"
+        title="Clear"
+        tabindex="0"
+        (click)="clearAndStop($event)"
+        (keydown.enter)="clearAndStop($event)"
+        (keydown.space)="clearAndStop($event)"
+      ></i>
+    </div>
+    <div class="overlay-inner inline-calendar flex">
+      <div class="overlay-left">
+        <div class="preset-list">
+          <button
+            pButton
+            pRipple
+            type="button"
+            class="preset-btn"
+            (click)="applyPreset('today')"
+            [ngClass]="{ active: selectedPreset === 'today' }"
+            label="Today"
+          ></button>
+          <button
+            pButton
+            pRipple
+            type="button"
+            class="preset-btn"
+            (click)="applyPreset('yesterday')"
+            [ngClass]="{ active: selectedPreset === 'yesterday' }"
+            label="Yesterday"
+          ></button>
+          <button
+            pButton
+            pRipple
+            type="button"
+            class="preset-btn"
+            (click)="applyPreset('last7days')"
+            [ngClass]="{ active: selectedPreset === 'last7days' }"
+            label="Last 7 days"
+          ></button>
+          <button
+            pButton
+            pRipple
+            type="button"
+            class="preset-btn"
+            (click)="applyPreset('last30days')"
+            [ngClass]="{ active: selectedPreset === 'last30days' }"
+            label="Last 30 days"
+          ></button>
+          <button
+            pButton
+            pRipple
+            type="button"
+            class="preset-btn"
+            (click)="applyPreset('last3months')"
+            [ngClass]="{ active: selectedPreset === 'last3months' }"
+            label="Last 3 months"
+          ></button>
+          <button
+            pButton
+            pRipple
+            type="button"
+            class="preset-btn"
+            (click)="applyPreset('last1year')"
+            [ngClass]="{ active: selectedPreset === 'last1year' }"
+            label="Last 1 year"
+          ></button>
+          <a class="reset-link" (click)="resetAndClose()">Reset</a>
+        </div>
+      </div>
+      <div class="overlay-right">
+        <p-calendar
+          [(ngModel)]="modelDate"
+          [selectionMode]="'range'"
+          [inline]="true"
+          [dateFormat]="'mm/dd/yyyy'"
+          [showOtherMonths]="true"
+          [locale]="enLocale"
+          [showIcon]="false"
+          [styleClass]="'atomix-overlay-calendar'"
+          (ngModelChange)="onModelChange($event)"
+          (onMonthChange)="onCalendarViewChanged($event)"
+          (onYearChange)="onCalendarViewChanged($event)"
+          [disabled]="disabled"
+          [maxDate]="maxDate"
+          [minDate]="minDate"
+        ></p-calendar>
+      </div>
+    </div>
+  </ng-template>
+</div>