primekit 1.0.9 → 1.0.11

package/src/lib/lib/atomix-form/atomix-form-inputmask-component/atomix-form-inputmask-component.component.html

@@ -0,0 +1,14 @@
+<label *ngIf="label" [for]="controlName"
+  >{{ label }}
+  <span *ngIf="isLabelRequired" class="error-asterisk">*</span></label
+>
+<p-inputMask
+  [formControl]="control"
+  [id]="controlName"
+  [mask]="mask"
+  [placeholder]="placeholder"
+  [pTooltip]="tooltip"
+  [slotChar]="slotChar"
+  [tooltipPosition]="tooltipPosition"
+  [ngClass]="class"
+/>

package/src/lib/lib/atomix-form/atomix-form-inputmask-component/atomix-form-inputmask-component.component.spec.ts

@@ -0,0 +1,104 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { AtomixFormInputmaskComponent } from './atomix-form-inputmask-component.component';
+
+describe('AtomixFormInputmaskComponent', () => {
+  let component: AtomixFormInputmaskComponent;
+  let fixture: ComponentFixture<AtomixFormInputmaskComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixFormInputmaskComponent],
+      imports: [ReactiveFormsModule],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixFormInputmaskComponent);
+    component = fixture.componentInstance;
+    component.form = new FormGroup({ testField: new FormControl('') });
+    component.controlName = 'testField';
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('FormGroup binding', () => {
+    it('should return the correct FormControl from the form via control accessor', () => {
+      const control = component.control;
+      expect(control).toBe(component.form.get('testField'));
+    });
+
+    it('should return a FormControl instance', () => {
+      expect(component.control).toBeInstanceOf(FormControl);
+    });
+
+    it('should reflect the form control value', () => {
+      component.form.get('testField')!.setValue('12345');
+      expect(component.control.value).toBe('12345');
+    });
+  });
+
+  describe('mask pattern application', () => {
+    it('should have default mask as text', () => {
+      expect(component.mask).toBe('text');
+    });
+
+    it('should accept a custom mask pattern', () => {
+      component.mask = '(999) 999-9999';
+      expect(component.mask).toBe('(999) 999-9999');
+    });
+
+    it('should accept a date mask pattern', () => {
+      component.mask = '99/99/9999';
+      expect(component.mask).toBe('99/99/9999');
+    });
+  });
+
+  describe('input properties', () => {
+    it('should have default label as empty string', () => {
+      expect(component.label).toBe('');
+    });
+
+    it('should accept label input', () => {
+      component.label = 'Phone Number';
+      expect(component.label).toBe('Phone Number');
+    });
+
+    it('should have default placeholder as empty string', () => {
+      expect(component.placeholder).toBe('');
+    });
+
+    it('should accept placeholder input', () => {
+      component.placeholder = '(___) ___-____';
+      expect(component.placeholder).toBe('(___) ___-____');
+    });
+
+    it('should have default slotChar as empty string', () => {
+      expect(component.slotChar).toBe('');
+    });
+
+    it('should accept slotChar input', () => {
+      component.slotChar = '_';
+      expect(component.slotChar).toBe('_');
+    });
+
+    it('should have default tooltipPosition as bottom', () => {
+      expect(component.tooltipPosition).toBe('bottom');
+    });
+
+    it('should accept tooltipPosition input', () => {
+      component.tooltipPosition = 'top';
+      expect(component.tooltipPosition).toBe('top');
+    });
+
+    it('should have default isLabelRequired as false', () => {
+      expect(component.isLabelRequired).toBe(false);
+    });
+
+    it('should accept isLabelRequired input', () => {
+      component.isLabelRequired = true;
+      expect(component.isLabelRequired).toBe(true);
+    });
+  });
+});

package/src/lib/lib/atomix-form/atomix-form-inputmask-component/atomix-form-inputmask-component.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'atomix-form-inputmask',
+  templateUrl: './atomix-form-inputmask-component.component.html',
+  styleUrls: ['./atomix-form-inputmask-component.component.scss'],
+})
+export class AtomixFormInputmaskComponent {
+  @Input() controlName!: string;
+  @Input() form!: FormGroup;
+  @Input() mask = 'text';
+  @Input() label = '';
+  @Input() placeholder = '';
+  @Input() slotChar = '';
+  @Input() tooltip!: string;
+  @Input() tooltipPosition: 'right' | 'left' | 'top' | 'bottom' = 'bottom';
+  @Input() isLabelRequired: boolean = false;
+  @Input() class!: string;
+
+  get control() {
+    return this.form.get(this.controlName) as FormControl;
+  }
+}

package/src/lib/lib/atomix-form/atomix-form-password-component/atomix-form-password-component.component.html

@@ -0,0 +1,16 @@
+<label *ngIf="label" [for]="controlName"
+  >{{ label }}
+  <span *ngIf="isLabelRequired" class="error-asterisk">*</span></label
+>
+<p-password
+  [id]="controlName"
+  [formControl]="control"
+  [placeholder]="placeholder"
+  [pTooltip]="tooltip"
+  [tooltipPosition]="tooltipPosition"
+  [ngClass]="class"
+  autocomplete="off"
+  [feedback]="feedback"
+  [toggleMask]="true"
+  autocomplete="new-password"
+/>

package/src/lib/lib/atomix-form/atomix-form-password-component/atomix-form-password-component.component.spec.ts

@@ -0,0 +1,92 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { AtomixFormPasswordComponent } from './atomix-form-password-component.component';
+
+describe('AtomixFormPasswordComponent', () => {
+  let component: AtomixFormPasswordComponent;
+  let fixture: ComponentFixture<AtomixFormPasswordComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixFormPasswordComponent],
+      imports: [ReactiveFormsModule],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixFormPasswordComponent);
+    component = fixture.componentInstance;
+    component.form = new FormGroup({ testField: new FormControl('') });
+    component.controlName = 'testField';
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('FormGroup binding', () => {
+    it('should return the correct FormControl from the form via control accessor', () => {
+      const control = component.control;
+      expect(control).toBe(component.form.get('testField'));
+    });
+
+    it('should return a FormControl instance', () => {
+      expect(component.control).toBeInstanceOf(FormControl);
+    });
+
+    it('should reflect the form control value', () => {
+      component.form.get('testField')!.setValue('secret123');
+      expect(component.control.value).toBe('secret123');
+    });
+  });
+
+  describe('password input rendering', () => {
+    it('should have default label as empty string', () => {
+      expect(component.label).toBe('');
+    });
+
+    it('should accept label input', () => {
+      component.label = 'Password';
+      expect(component.label).toBe('Password');
+    });
+
+    it('should have default placeholder as empty string', () => {
+      expect(component.placeholder).toBe('');
+    });
+
+    it('should accept placeholder input', () => {
+      component.placeholder = 'Enter password';
+      expect(component.placeholder).toBe('Enter password');
+    });
+
+    it('should have default type as text', () => {
+      expect(component.type).toBe('text');
+    });
+
+    it('should have default feedback as false', () => {
+      expect(component.feedback).toBe(false);
+    });
+
+    it('should accept feedback input', () => {
+      component.feedback = true;
+      expect(component.feedback).toBe(true);
+    });
+
+    it('should have default isLabelRequired as false', () => {
+      expect(component.isLabelRequired).toBe(false);
+    });
+
+    it('should accept isLabelRequired input', () => {
+      component.isLabelRequired = true;
+      expect(component.isLabelRequired).toBe(true);
+    });
+
+    it('should have default tooltipPosition as bottom', () => {
+      expect(component.tooltipPosition).toBe('bottom');
+    });
+
+    it('should accept tooltipPosition input', () => {
+      component.tooltipPosition = 'top';
+      expect(component.tooltipPosition).toBe('top');
+    });
+  });
+});

package/src/lib/lib/atomix-form/atomix-form-password-component/atomix-form-password-component.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'atomix-form-password',
+  templateUrl: './atomix-form-password-component.component.html',
+  styleUrls: ['./atomix-form-password-component.component.scss'],
+})
+export class AtomixFormPasswordComponent {
+  @Input() controlName!: string;
+  @Input() form!: FormGroup;
+  @Input() label = '';
+  @Input() placeholder = '';
+  @Input() type = 'text';
+  @Input() tooltip!: string;
+  @Input() class!: string;
+  @Input() feedback: boolean = false;
+  @Input() isLabelRequired: boolean = false;
+  @Input() tooltipPosition: 'right' | 'left' | 'top' | 'bottom' = 'bottom';
+
+  get control() {
+    return this.form.get(this.controlName) as FormControl;
+  }
+}

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

@@ -0,0 +1,23 @@
+<div>
+  <label *ngIf="label" [for]="controlName"
+    >{{ label }} <span *ngIf="isLabelRequired" class="error-asterisk">*</span>
+    <i
+      *ngIf="labelIconData?.required"
+      [class]="labelIconData?.iconClass + ' ml-2'"
+      [pTooltip]="labelIconData?.tooltip"
+    ></i
+  ></label>
+</div>
+<div style="margin-top: 0.2rem" [class]="radioButtonContainerClass">
+  <span
+    *ngFor="let option of radioGroupOptions; let i = index"
+    [ngClass]="{ indented: i > 0 }"
+  >
+    <p-radioButton
+      [formControl]="control"
+      [inputId]="controlName"
+      [value]="option.key"
+    ></p-radioButton>
+    <label [for]="controlName" class="ml-2">{{ option.name }}</label>
+  </span>
+</div>

package/src/lib/lib/atomix-form/atomix-form-radio-button/atomix-radio-button.component.scss

@@ -0,0 +1,3 @@
+.indented {
+  margin-left: 1rem;
+}

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

@@ -0,0 +1,126 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { AtomixFormRadioButtonComponent } from './atomix-radio-button.component';
+
+describe('AtomixFormRadioButtonComponent', () => {
+  let component: AtomixFormRadioButtonComponent;
+  let fixture: ComponentFixture<AtomixFormRadioButtonComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixFormRadioButtonComponent],
+      imports: [ReactiveFormsModule],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixFormRadioButtonComponent);
+    component = fixture.componentInstance;
+    component.form = new FormGroup({ testField: new FormControl('') });
+    component.controlName = 'testField';
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('FormGroup binding', () => {
+    it('should return the correct FormControl from the form via control accessor', () => {
+      const control = component.control;
+      expect(control).toBe(component.form.get('testField'));
+    });
+
+    it('should return a FormControl instance', () => {
+      expect(component.control).toBeInstanceOf(FormControl);
+    });
+
+    it('should reflect the form control value', () => {
+      component.form.get('testField')!.setValue('optionA');
+      expect(component.control.value).toBe('optionA');
+    });
+  });
+
+  describe('radio selection updating form control', () => {
+    it('should update form control value when a radio option is selected', () => {
+      component.control.setValue('optionB');
+      expect(component.form.get('testField')!.value).toBe('optionB');
+    });
+
+    it('should update form control value when selection changes', () => {
+      component.control.setValue('optionA');
+      expect(component.form.get('testField')!.value).toBe('optionA');
+      component.control.setValue('optionC');
+      expect(component.form.get('testField')!.value).toBe('optionC');
+    });
+
+    it('should clear form control value when set to empty', () => {
+      component.control.setValue('optionA');
+      component.control.setValue('');
+      expect(component.form.get('testField')!.value).toBe('');
+    });
+  });
+
+  describe('input properties', () => {
+    it('should have default label as empty string', () => {
+      expect(component.label).toBe('');
+    });
+
+    it('should accept label input', () => {
+      component.label = 'Select an option';
+      expect(component.label).toBe('Select an option');
+    });
+
+    it('should have default isLabelRequired as false', () => {
+      expect(component.isLabelRequired).toBe(false);
+    });
+
+    it('should accept isLabelRequired input', () => {
+      component.isLabelRequired = true;
+      expect(component.isLabelRequired).toBe(true);
+    });
+
+    it('should have default value with empty name and key', () => {
+      expect(component.value).toEqual({ name: '', key: '' });
+    });
+
+    it('should accept value input', () => {
+      component.value = { name: 'Option A', key: 'optionA' };
+      expect(component.value).toEqual({ name: 'Option A', key: 'optionA' });
+    });
+
+    it('should accept radioGroupOptions input', () => {
+      const options = [
+        { name: 'Option A', key: 'optionA' },
+        { name: 'Option B', key: 'optionB' },
+      ];
+      component.radioGroupOptions = options;
+      expect(component.radioGroupOptions).toEqual(options);
+    });
+
+    it('should have default labelIconData with empty values', () => {
+      expect(component.labelIconData).toEqual({
+        iconClass: '',
+        tooltip: '',
+        required: false,
+      });
+    });
+
+    it('should accept labelIconData input', () => {
+      const iconData = {
+        iconClass: 'pi pi-info-circle',
+        tooltip: 'Help text',
+        required: true,
+      };
+      component.labelIconData = iconData;
+      expect(component.labelIconData).toEqual(iconData);
+    });
+
+    it('should have default radioButtonContainerClass as empty string', () => {
+      expect(component.radioButtonContainerClass).toBe('');
+    });
+
+    it('should accept radioButtonContainerClass input', () => {
+      component.radioButtonContainerClass = 'flex-row';
+      expect(component.radioButtonContainerClass).toBe('flex-row');
+    });
+  });
+});

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

@@ -0,0 +1,26 @@
+import { Component, Input } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+import { LabelIconData } from '../atomix-form-chips/form.chips.models';
+
+@Component({
+  selector: 'atomix-form-radio-group',
+  templateUrl: './atomix-radio-button.component.html',
+  styleUrls: ['./atomix-radio-button.component.scss'],
+})
+export class AtomixFormRadioButtonComponent {
+  @Input() controlName!: string;
+  @Input() form!: FormGroup;
+  @Input() value: { name: string; key: string } = { name: '', key: '' };
+  @Input() label = '';
+  @Input() isLabelRequired: boolean = false;
+  @Input() radioGroupOptions!: any;
+  @Input() labelIconData: LabelIconData = {
+    iconClass: '',
+    tooltip: '',
+    required: false,
+  };
+  @Input() radioButtonContainerClass = '';
+  get control() {
+    return this.form.get(this.controlName) as FormControl;
+  }
+}

package/src/lib/lib/atomix-form/atomix-form-textarea/atomix-form-textarea.component.html

@@ -0,0 +1,17 @@
+<label *ngIf="label"
+  >{{ label }}
+  <span *ngIf="isLabelRequired" class="error-asterisk">*</span></label
+>
+<textarea
+  variant="filled"
+  pInputTextarea
+  [rows]="rows"
+  [id]="controlName"
+  [cols]="cols"
+  [ngClass]="class + ' atomix-form-textarea'"
+  [disabled]="disabled"
+  autocomplete="new-password"
+  [formControl]="control"
+  [placeholder]="placeholder"
+  [style.height]="height"
+></textarea>

package/src/lib/lib/atomix-form/atomix-form-textarea/atomix-form-textarea.component.scss

@@ -0,0 +1,6 @@
+::ng-deep .atomix-form-textarea {
+  border-radius: var(--global-border-radius);
+  margin-top: 0.2rem;
+  font-family: 'Inter var', sans-serif;
+  padding: 0.5rem;
+}

package/src/lib/lib/atomix-form/atomix-form-textarea/atomix-form-textarea.component.spec.ts

@@ -0,0 +1,120 @@
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { AtomixFormTextareaComponent } from './atomix-form-textarea.component';
+
+describe('AtomixFormTextareaComponent', () => {
+  let component: AtomixFormTextareaComponent;
+  let fixture: ComponentFixture<AtomixFormTextareaComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AtomixFormTextareaComponent],
+      imports: [ReactiveFormsModule],
+      schemas: [NO_ERRORS_SCHEMA],
+    });
+    fixture = TestBed.createComponent(AtomixFormTextareaComponent);
+    component = fixture.componentInstance;
+    component.form = new FormGroup({ testField: new FormControl('') });
+    component.controlName = 'testField';
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('FormGroup binding', () => {
+    it('should return the correct FormControl from the form via control accessor', () => {
+      const control = component.control;
+      expect(control).toBe(component.form.get('testField'));
+    });
+
+    it('should return a FormControl instance', () => {
+      expect(component.control).toBeInstanceOf(FormControl);
+    });
+
+    it('should reflect the form control value', () => {
+      component.form.get('testField')!.setValue('hello world');
+      expect(component.control.value).toBe('hello world');
+    });
+
+    it('should update form control value programmatically', () => {
+      component.control.setValue('updated text');
+      expect(component.form.get('testField')!.value).toBe('updated text');
+    });
+  });
+
+  describe('textarea-specific properties', () => {
+    it('should have default rows of 5', () => {
+      expect(component.rows).toBe(5);
+    });
+
+    it('should accept rows input', () => {
+      component.rows = 10;
+      fixture.detectChanges();
+      expect(component.rows).toBe(10);
+    });
+
+    it('should have default cols of 30', () => {
+      expect(component.cols).toBe(30);
+    });
+
+    it('should accept cols input', () => {
+      component.cols = 50;
+      fixture.detectChanges();
+      expect(component.cols).toBe(50);
+    });
+
+    it('should have default height as empty string', () => {
+      expect(component.height).toBe('');
+    });
+
+    it('should accept height input', () => {
+      component.height = '200px';
+      fixture.detectChanges();
+      expect(component.height).toBe('200px');
+    });
+  });
+
+  describe('input properties', () => {
+    it('should have default label as empty string', () => {
+      expect(component.label).toBe('');
+    });
+
+    it('should accept label input', () => {
+      component.label = 'Description';
+      fixture.detectChanges();
+      expect(component.label).toBe('Description');
+    });
+
+    it('should have default placeholder as empty string', () => {
+      expect(component.placeholder).toBe('');
+    });
+
+    it('should accept placeholder input', () => {
+      component.placeholder = 'Enter description';
+      fixture.detectChanges();
+      expect(component.placeholder).toBe('Enter description');
+    });
+
+    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 isLabelRequired as false', () => {
+      expect(component.isLabelRequired).toBe(false);
+    });
+
+    it('should accept isLabelRequired input', () => {
+      component.isLabelRequired = true;
+      fixture.detectChanges();
+      expect(component.isLabelRequired).toBe(true);
+    });
+  });
+});

package/src/lib/lib/atomix-form/atomix-form-textarea/atomix-form-textarea.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'atomix-form-textarea',
+  templateUrl: './atomix-form-textarea.component.html',
+  styleUrls: ['./atomix-form-textarea.component.scss'],
+})
+export class AtomixFormTextareaComponent {
+  @Input() controlName!: string;
+  @Input() form!: FormGroup;
+  @Input() label = '';
+  @Input() rows: number = 5;
+  @Input() cols: number = 30;
+  @Input() placeholder = '';
+  @Input() disabled: boolean = false;
+  @Input() class!: string;
+  @Input() isLabelRequired: boolean = false;
+  @Input() height: string = '';
+
+  get control() {
+    return this.form.get(this.controlName) as FormControl;
+  }
+}