primekit 1.0.9 → 1.0.10

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

@@ -0,0 +1,52 @@
+.lib-error-asterisk {
+  color: red;
+}
+
+.filter-dropdown-icon {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  z-index: 1;
+  cursor: pointer;
+  color: #6c757d;
+}
+
+.filter-dropdown-icon-left {
+  right: 40px; /* Move left to make space for search icon on right */
+}
+
+.search-icon.with-label,
+.filter-dropdown-icon.with-label {
+  top: 88%;
+}
+
+.search-icon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  color: var(--primary-text-color) !important;
+  font-size: 1rem;
+}
+
+.search-icon-left {
+  left: 10px;
+}
+
+.search-icon-right {
+  right: 0px;
+}
+
+.with-search-icon-left {
+  padding-left: 30px !important;
+  padding-right: 30px !important;
+}
+
+.with-search-icon-right {
+  padding-right: 60px;
+}
+
+::ng-deep .lib-input-field {
+  border-radius: var(--global-border-radius);
+}

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

@@ -0,0 +1,45 @@
+<label *ngIf="label" for="name"
+  >{{ label }}
+  <span *ngIf="isLabelRequired" class="lib-error-asterisk">*</span></label
+>
+
+<i
+  class="pi pi-search search-icon"
+  [ngClass]="
+    (searchIconPosition === 'left' ? 'search-icon-left' : 'search-icon-right') +
+    (label ? ' with-label' : '')
+  "
+  *ngIf="withSearchIcon"
+  (click)="onEnter()"
+></i>
+
+<input
+  [id]="name"
+  type="text"
+  pInputText
+  [value]="value"
+  [attr.placeholder]="placeholder"
+  (input)="onInput($event)"
+  (keydown.enter)="onEnter()"
+  [ngClass]="
+    class +
+    ' lib-input-field' +
+    (withSearchIcon ? ' with-search-icon-' + searchIconPosition : '') +
+    (isCrossRequired ? ' with-cross-icon' : '')
+  "
+  autocomplete="new-password"
+  [disabled]="disabled"
+  [type]="type"
+  #inputEl
+/>
+<i
+  class="pi pi-times filter-dropdown-icon"
+  [ngClass]="
+    (withSearchIcon && searchIconPosition === 'right'
+      ? 'filter-dropdown-icon-left'
+      : '') + (label ? ' with-label' : '')
+  "
+  style="cursor: pointer"
+  (click)="clearValue()"
+  *ngIf="isCrossRequired && value !== ''"
+></i>

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

@@ -0,0 +1,229 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AtomixInputComponent } from './atomix-input.component';
+
+describe('AtomixInputComponent', () => {
+  let component: AtomixInputComponent;
+  let fixture: ComponentFixture<AtomixInputComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixInputComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixInputComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('input bindings', () => {
+    it('should have default placeholder as empty string', () => {
+      expect(component.placeholder).toBe('');
+    });
+
+    it('should accept placeholder input', () => {
+      component.placeholder = 'Enter value';
+      fixture.detectChanges();
+      expect(component.placeholder).toBe('Enter value');
+    });
+
+    it('should have default type as text', () => {
+      expect(component.type).toBe('text');
+    });
+
+    it('should accept type input', () => {
+      component.type = 'password';
+      fixture.detectChanges();
+      expect(component.type).toBe('password');
+    });
+
+    it('should have default label as empty string', () => {
+      expect(component.label).toBe('');
+    });
+
+    it('should accept label input', () => {
+      component.label = 'Username';
+      fixture.detectChanges();
+      expect(component.label).toBe('Username');
+    });
+
+    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 value as empty string', () => {
+      expect(component.value).toBe('');
+    });
+
+    it('should accept value input', () => {
+      component.value = 'test value';
+      fixture.detectChanges();
+      expect(component.value).toBe('test value');
+    });
+
+    it('should have default name as empty string', () => {
+      expect(component.name).toBe('');
+    });
+
+    it('should accept name input', () => {
+      component.name = 'email';
+      fixture.detectChanges();
+      expect(component.name).toBe('email');
+    });
+
+    it('should have default withSearchIcon as false', () => {
+      expect(component.withSearchIcon).toBe(false);
+    });
+
+    it('should accept withSearchIcon input', () => {
+      component.withSearchIcon = true;
+      fixture.detectChanges();
+      expect(component.withSearchIcon).toBe(true);
+    });
+
+    it('should have default searchIconPosition as right', () => {
+      expect(component.searchIconPosition).toBe('right');
+    });
+
+    it('should accept searchIconPosition input', () => {
+      component.searchIconPosition = 'left';
+      fixture.detectChanges();
+      expect(component.searchIconPosition).toBe('left');
+    });
+
+    it('should have default isCrossRequired as true', () => {
+      expect(component.isCrossRequired).toBe(true);
+    });
+
+    it('should accept isCrossRequired input', () => {
+      component.isCrossRequired = false;
+      fixture.detectChanges();
+      expect(component.isCrossRequired).toBe(false);
+    });
+
+    it('should have default isLabelRequired as false', () => {
+      expect(component.isLabelRequired).toBe(false);
+    });
+
+    it('should accept isLabelRequired input', () => {
+      component.isLabelRequired = true;
+      fixture.detectChanges();
+      expect(component.isLabelRequired).toBe(true);
+    });
+  });
+
+  describe('value change emission', () => {
+    it('should emit changeValueHandler on input', () => {
+      const emitSpy = jest.fn();
+      component.changeValueHandler.subscribe(emitSpy);
+
+      const mockEvent = { target: { value: 'hello' } } as unknown as Event;
+      component.onInput(mockEvent);
+
+      expect(emitSpy).toHaveBeenCalledWith('hello');
+    });
+
+    it('should update value property on input', () => {
+      const mockEvent = { target: { value: 'world' } } as unknown as Event;
+      component.onInput(mockEvent);
+
+      expect(component.value).toBe('world');
+    });
+
+    it('should emit valueChange on enter', () => {
+      const emitSpy = jest.fn();
+      component.valueChange.subscribe(emitSpy);
+
+      component.value = 'search term';
+      component.onEnter();
+
+      expect(emitSpy).toHaveBeenCalledWith('search term');
+    });
+
+    it('should clear value and emit on clearValue', () => {
+      const changeEmitSpy = jest.fn();
+      const valueChangeEmitSpy = jest.fn();
+      component.changeValueHandler.subscribe(changeEmitSpy);
+      component.valueChange.subscribe(valueChangeEmitSpy);
+
+      component.value = 'some text';
+      component.clearValue();
+
+      expect(component.value).toBe('');
+      expect(changeEmitSpy).toHaveBeenCalledWith('');
+      expect(valueChangeEmitSpy).toHaveBeenCalledWith('');
+    });
+
+    it('should emit valueChange with empty string when search is cleared', () => {
+      const emitSpy = jest.fn();
+      component.valueChange.subscribe(emitSpy);
+
+      component.value = 'existing';
+      const mockEvent = { target: { value: '' } } as unknown as Event;
+      component.onSearchClear(mockEvent);
+
+      expect(component.value).toBe('');
+      expect(emitSpy).toHaveBeenCalledWith('');
+    });
+
+    it('should not emit valueChange when search input is not empty', () => {
+      const emitSpy = jest.fn();
+      component.valueChange.subscribe(emitSpy);
+
+      component.value = 'existing';
+      const mockEvent = { target: { value: 'still typing' } } as unknown as Event;
+      component.onSearchClear(mockEvent);
+
+      expect(component.value).toBe('existing');
+      expect(emitSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('ngAfterViewInit', () => {
+    it('should call focus on inputEl when autofocus is true', () => {
+      jest.useFakeTimers();
+      component.autofocus = true;
+      component.inputEl = { nativeElement: { focus: jest.fn() } } as any;
+
+      component.ngAfterViewInit();
+      jest.runAllTimers();
+
+      expect(component.inputEl.nativeElement.focus).toHaveBeenCalled();
+      jest.useRealTimers();
+    });
+
+    it('should not call focus when autofocus is false', () => {
+      jest.useFakeTimers();
+      component.autofocus = false;
+      component.inputEl = { nativeElement: { focus: jest.fn() } } as any;
+
+      component.ngAfterViewInit();
+      jest.runAllTimers();
+
+      expect(component.inputEl.nativeElement.focus).not.toHaveBeenCalled();
+      jest.useRealTimers();
+    });
+  });
+
+  describe('focus', () => {
+    it('should call focus on the native input element', () => {
+      component.inputEl = { nativeElement: { focus: jest.fn() } } as any;
+      component.focus();
+      expect(component.inputEl.nativeElement.focus).toHaveBeenCalled();
+    });
+
+    it('should handle undefined inputEl gracefully', () => {
+      component.inputEl = undefined as any;
+      expect(() => component.focus()).not.toThrow();
+    });
+  });
+});

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

@@ -0,0 +1,64 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  ElementRef,
+  ViewChild,
+} from '@angular/core';
+
+@Component({
+  selector: 'atomix-input',
+  templateUrl: './atomix-input.component.html',
+  styleUrls: ['./atomix-input.component.css'],
+})
+export class AtomixInputComponent {
+  @ViewChild('inputEl') inputEl!: ElementRef<HTMLInputElement>;
+  @Input() value: string = '';
+  @Input() name: string = '';
+  @Input() type: string = 'text';
+  @Input() placeholder: string = '';
+  @Output() valueChange = new EventEmitter<string>();
+  @Input() withSearchIcon: boolean = false;
+  @Input() searchIconPosition: 'left' | 'right' = 'right';
+  @Input() iconName: string = '';
+  @Input() containerClass: string = '';
+  @Input() class: string = '';
+  @Input() disabled: boolean = false;
+  @Input() isCrossRequired: boolean = true;
+  @Input() label: string = '';
+  @Input() isLabelRequired: boolean = false;
+  @Input() autofocus: boolean = false;
+  @Output() changeValueHandler = new EventEmitter<string>();
+
+  ngAfterViewInit(): void {
+    if (this.autofocus) {
+      // Timeout ensures input is available in the DOM
+      setTimeout(() => this.inputEl?.nativeElement?.focus());
+    }
+  }
+
+  onInput(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    this.value = input.value;
+    this.changeValueHandler.emit(this.value);
+  }
+  onEnter(): void {
+    this.valueChange.emit(this.value);
+  }
+  clearValue(): void {
+    this.value = '';
+    this.changeValueHandler.emit(this.value);
+    this.onEnter();
+  }
+  onSearchClear(event: Event) {
+    const input = event.target as HTMLInputElement;
+    if (input.value === '') {
+      this.value = '';
+      this.valueChange.emit('');
+    }
+  }
+  focus(): void {
+    this.inputEl?.nativeElement?.focus();
+  }
+}

package/src/lib/lib/atomix-input-switch/atomix-input-switch.component.css

@@ -0,0 +1,12 @@
+.input-switch-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.atomix-switch-button {
+  height: 30px;
+  padding: 0 12px;
+  font-size: 14px;
+  cursor: pointer;
+}

package/src/lib/lib/atomix-input-switch/atomix-input-switch.component.html

@@ -0,0 +1,17 @@
+<p-inputSwitch
+  [(ngModel)]="value"
+  [trueValue]="trueValue"
+  [falseValue]="falseValue"
+  [style]="style"
+  [styleClass]="styleClass"
+  [tabindex]="tabindex"
+  [inputId]="inputId"
+  [attr.name]="name"
+  [disabled]="disabled"
+  [readonly]="readonly"
+  [ariaLabel]="ariaLabel"
+  [ariaLabelledBy]="ariaLabelledBy"
+  [autofocus]="autofocus"
+  (onChange)="handleChange($event)"
+  (onBlur)="onTouched()"
+></p-inputSwitch>

package/src/lib/lib/atomix-input-switch/atomix-input-switch.component.spec.ts

@@ -0,0 +1,173 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { AtomixInputSwitchComponent } from './atomix-input-switch.component';
+
+describe('AtomixInputSwitchComponent', () => {
+  let component: AtomixInputSwitchComponent;
+  let fixture: ComponentFixture<AtomixInputSwitchComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixInputSwitchComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixInputSwitchComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('input bindings', () => {
+    it('should have default disabled as false', () => {
+      expect(component.disabled).toBe(false);
+    });
+
+    it('should accept disabled input', () => {
+      component.disabled = true;
+      expect(component.disabled).toBe(true);
+    });
+
+    it('should have default readonly as false', () => {
+      expect(component.readonly).toBe(false);
+    });
+
+    it('should accept readonly input', () => {
+      component.readonly = true;
+      expect(component.readonly).toBe(true);
+    });
+
+    it('should have default trueValue as true', () => {
+      expect(component.trueValue).toBe(true);
+    });
+
+    it('should accept custom trueValue', () => {
+      component.trueValue = 'yes';
+      expect(component.trueValue).toBe('yes');
+    });
+
+    it('should have default falseValue as false', () => {
+      expect(component.falseValue).toBe(false);
+    });
+
+    it('should accept custom falseValue', () => {
+      component.falseValue = 'no';
+      expect(component.falseValue).toBe('no');
+    });
+
+    it('should have default value as false', () => {
+      expect(component.value).toBe(false);
+    });
+
+    it('should have default autofocus as false', () => {
+      expect(component.autofocus).toBe(false);
+    });
+
+    it('should accept style input', () => {
+      component.style = { width: '100px' };
+      expect(component.style).toEqual({ width: '100px' });
+    });
+
+    it('should accept styleClass input', () => {
+      component.styleClass = 'custom-class';
+      expect(component.styleClass).toBe('custom-class');
+    });
+
+    it('should accept inputId input', () => {
+      component.inputId = 'my-switch';
+      expect(component.inputId).toBe('my-switch');
+    });
+
+    it('should accept name input', () => {
+      component.name = 'toggle';
+      expect(component.name).toBe('toggle');
+    });
+  });
+
+  describe('toggle value emission', () => {
+    it('should set value to trueValue when toggled on', () => {
+      component.handleChange({ checked: true } as any);
+      expect(component.value).toBe(true);
+    });
+
+    it('should set value to falseValue when toggled off', () => {
+      component.value = true;
+      component.handleChange({ checked: false } as any);
+      expect(component.value).toBe(false);
+    });
+
+    it('should call onChange with the new value when toggled', () => {
+      const onChangeSpy = jest.fn();
+      component.registerOnChange(onChangeSpy);
+
+      component.handleChange({ checked: true } as any);
+
+      expect(onChangeSpy).toHaveBeenCalledWith(true);
+    });
+
+    it('should call onTouched when toggled', () => {
+      const onTouchedSpy = jest.fn();
+      component.registerOnTouched(onTouchedSpy);
+
+      component.handleChange({ checked: true } as any);
+
+      expect(onTouchedSpy).toHaveBeenCalled();
+    });
+
+    it('should use custom trueValue/falseValue when toggled', () => {
+      const onChangeSpy = jest.fn();
+      component.registerOnChange(onChangeSpy);
+      component.trueValue = 'active';
+      component.falseValue = 'inactive';
+
+      component.handleChange({ checked: true } as any);
+      expect(component.value).toBe('active');
+      expect(onChangeSpy).toHaveBeenCalledWith('active');
+
+      component.handleChange({ checked: false } as any);
+      expect(component.value).toBe('inactive');
+      expect(onChangeSpy).toHaveBeenCalledWith('inactive');
+    });
+  });
+
+  describe('ControlValueAccessor', () => {
+    it('should write value via writeValue', () => {
+      component.writeValue(true);
+      expect(component.value).toBe(true);
+    });
+
+    it('should set falseValue when writeValue receives null', () => {
+      component.falseValue = 'off';
+      component.writeValue(null);
+      expect(component.value).toBe('off');
+    });
+
+    it('should set falseValue when writeValue receives undefined', () => {
+      component.writeValue(undefined);
+      expect(component.value).toBe(false);
+    });
+
+    it('should set disabled state via setDisabledState', () => {
+      component.setDisabledState(true);
+      expect(component.disabled).toBe(true);
+
+      component.setDisabledState(false);
+      expect(component.disabled).toBe(false);
+    });
+
+    it('should register onChange function', () => {
+      const fn = jest.fn();
+      component.registerOnChange(fn);
+      component.onChange('test');
+      expect(fn).toHaveBeenCalledWith('test');
+    });
+
+    it('should register onTouched function', () => {
+      const fn = jest.fn();
+      component.registerOnTouched(fn);
+      component.onTouched();
+      expect(fn).toHaveBeenCalled();
+    });
+  });
+});

package/src/lib/lib/atomix-input-switch/atomix-input-switch.component.ts

@@ -0,0 +1,62 @@
+import { Component, Input, forwardRef } from '@angular/core';
+import {
+  ControlValueAccessor,
+  NG_VALUE_ACCESSOR,
+  FormControl,
+} from '@angular/forms';
+import { InputSwitchChangeEvent } from 'primeng/inputswitch';
+
+@Component({
+  selector: 'atomix-inputSwitch',
+  templateUrl: './atomix-input-switch.component.html',
+  styleUrls: ['./atomix-input-switch.component.css'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => AtomixInputSwitchComponent),
+      multi: true,
+    },
+  ],
+})
+export class AtomixInputSwitchComponent implements ControlValueAccessor {
+  @Input() style?: { [key: string]: any };
+  @Input() styleClass?: string;
+  @Input() tabindex?: number;
+  @Input() inputId?: string;
+  @Input() name?: string;
+  @Input() disabled = false;
+  @Input() readonly = false;
+  @Input() trueValue: any = true;
+  @Input() falseValue: any = false;
+  @Input() ariaLabel?: string;
+  @Input() ariaLabelledBy?: string;
+  @Input() autofocus = false;
+  @Input() formControl?: FormControl;
+
+  value: any = false;
+
+  onChange = (_: any) => {};
+  onTouched = () => {};
+
+  writeValue(value: any): void {
+    this.value = value ?? this.falseValue;
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(disabled: boolean): void {
+    this.disabled = disabled;
+  }
+
+  handleChange(event: InputSwitchChangeEvent) {
+    this.value = event.checked ? this.trueValue : this.falseValue;
+    this.onChange(this.value);
+    this.onTouched();
+  }
+}