@unipin/angular-applet 18.9.2 → 18.9.4

package/projects/unipin-angular/src/lib/components/forms/input/form-input.component.ts

@@ -0,0 +1,177 @@
+import { Attribute, ChangeDetectorRef, ChangeDetectionStrategy, Component, Input, Output, EventEmitter } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator } from '@angular/forms';
+import { getFormErrorMessage } from '../../../utils';
+
+@Component({
+  standalone: true,
+  selector: 'up-input',
+  styleUrl: './form-input.component.scss',
+  templateUrl: './form-input.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'd-block'
+  },
+  providers: [
+    {
+      multi: true,
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: FormInputComponent
+    },
+    {
+      multi: true,
+      provide: NG_VALIDATORS,
+      useExisting: FormInputComponent
+    }
+  ]
+})
+export class FormInputComponent implements ControlValueAccessor, Validator {
+
+  /**
+   * Input variable for the label associated with the input.
+   * @type {string | undefined}
+   */
+  @Input() public label?: string;
+
+  /**
+   * Input variable for the initial value of the input.
+   * @type {string | null | undefined}
+   */
+  @Input() public value?: string | null;
+
+  /**
+   * Input variable to determine whether the input is required.
+   * @type {boolean}
+   * @default false
+   */
+  @Input() public required: boolean = false;
+
+  /**
+   * Input variable to determine whether the input is disabled.
+   * @type {boolean}
+   * @default false
+   */
+  @Input() public disabled: boolean = false;
+  
+  /**
+   * Input variable for the minimum value of the input.
+   * @type {string | undefined}
+   */
+  @Input() public min?: string;
+
+  /**
+   * Input variable for the maximum value of the input.
+   * @type {string | undefined}
+   */
+  @Input() public max?: string;
+
+  /**
+   * Output variable for emitting input events.
+   * @type {EventEmitter<any>}
+   */
+  @Output() public onInput: EventEmitter<any> = new EventEmitter<any>();
+
+  /**
+   * Boolean flag indicating whether the input has been touched.
+   * @type {boolean}
+   * @default false
+   */
+  public isTouched: boolean = false;
+
+  /**
+   * Error message associated with the input.
+   * @type {string}
+   * @default undefined
+   */
+  public errorMsg!: string;
+
+  /**
+   * The form control associated with the input.
+   * @type {AbstractControl}
+   */
+  protected formControl!: AbstractControl;
+
+  /**
+   * Callback function to handle value changes in the input.
+   * @type {(_val: any) => void}
+   */
+  protected onChange: (_val: any) => void = (_val: any) => {};
+
+  /**
+   * Callback function to handle touch events in the input.
+   * @type {() => void}
+   */
+  protected onTouched: () => void = () => {};
+
+  constructor(
+    @Attribute('placeholder') public placeholder: string,
+    @Attribute('type') public type: 'email' | 'hidden' | 'number' | 'search' | 'tel' | 'text' | 'url',
+    @Attribute('autocomplete') public autocomplete: 'name' | 'email' | 'tel' | 'url' | 'on' | 'off' | 'honorific-prefix' | 'given-name' | 'additional-name' | 'family-name' | 'honorific-suffix' | 'nickname' | 'username' | 'one-time-code' | 'organization-title' | 'organization' | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2' | 'address-level1' | 'country' | 'country-name' | 'postal-code' | 'cc-name' | 'cc-given-name' | 'cc-additional-name' | 'cc-family-name' | 'cc-number' | 'cc-exp' | 'cc-exp-month' | 'cc-exp-year' | 'cc-csc' | 'cc-type' | 'transaction-currency' | 'transaction-amount' | 'language' | 'bday' | 'bday-day' | 'bday-month' | 'bday-year' | 'sex' | 'tel-country-code' | 'tel-national' | 'tel-area-code' | 'tel-local' | 'tel-extension',
+    protected readonly ch: ChangeDetectorRef
+  ) { }
+
+  /**
+   * Registers a callback function to be called when the input value changes.
+   * @param {(_val: any) => void} fn - Callback function for value changes.
+   */
+  public registerOnChange(fn: any): void{ this.onChange = fn; }
+
+  /**
+   * Registers a callback function to be called when the input is touched.
+   * @param {() => void} fn - Callback function for touch events.
+   */
+  public registerOnTouched(fn: any): void{ this.onTouched = fn; } 
+
+  /**
+   * Emits an input event when the input value changes.
+   * @param {any} val - The new value of the input.
+   */
+  public input(val: any): void{ this.onInput.emit(val); }
+
+  /**
+   * Writes a new value to the input.
+   * @param {*} val - The new value to be set.
+   */
+  public writeValue(val: any): void{
+    this.value = val; 
+    this.ch.markForCheck();
+  }
+
+  /**
+   * Sets the disabled state of the input.
+   * @param {boolean} d - Whether the input should be disabled or not.
+   */
+  public setDisabledState?(d: boolean): void{ 
+    this.disabled = d; 
+    this.ch.markForCheck();
+  }
+
+  /**
+   * Validates the input.
+   * @param {AbstractControl} control - The abstract control representing the input.
+   * @returns {(ValidationErrors | null)} - Validation errors if any, otherwise null.
+   */
+  public validate(control: AbstractControl): ValidationErrors | null{
+    this.formControl = control;
+    return null;
+  }
+
+  /**
+   * Event handler for input changes in the input.
+   * If not touched, marks the input as touched.
+   * If not disabled, updates the value, triggers change detection, and emits the input event.
+   * Updates the error message based on form control errors and label.
+   * @param {any} param0 - Event detail containing the new input value.
+   */
+  public change({ value }: any): void{
+    if (!this.isTouched) {
+      this.onTouched();
+      this.isTouched = true;
+    }
+
+    if (!this.disabled) {
+      this.value = value;
+      this.onChange(this.value);
+      this.errorMsg = getFormErrorMessage(this.formControl.errors, this.label);
+    }
+  }
+}

package/projects/unipin-angular/src/lib/components/forms/input/form-input.stories.ts

@@ -0,0 +1,185 @@
+import { FormControl } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { FormInputComponent } from './form-input.component';
+
+const ctrl = new FormControl();
+ctrl.markAsTouched();
+
+const meta: Meta<FormInputComponent> = {
+  title: 'Form/Input',
+  tags: [ 'autodocs' ],
+  component: FormInputComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ 
+        IonicModule
+      ],
+    })
+  ],
+  argTypes: {
+    autocomplete: {
+      defaultValue: undefined,
+      description: 'Indicates whether the value of the control can be automatically completed by the browser.',
+      options: [ 'name', 'email', 'tel', 'url', 'on', 'off', 'honorific-prefix', 'given-name', 'additional-name', 'family-name', 'honorific-suffix', 'nickname', 'username', 'one-time-code', 'organization-title', 'organization', 'street-address', 'address-line1', 'address-line2', 'address-line3', 'address-level4', 'address-level3', 'address-level2', 'address-level1', 'country', 'country-name', 'postal-code', 'cc-name', 'cc-given-name', 'cc-additional-name', 'cc-family-name', 'cc-number', 'cc-exp', 'cc-exp-month', 'cc-exp-year', 'cc-csc', 'cc-type', 'transaction-currency', 'transaction-amount', 'language', 'sex', 'tel-country-code', 'tel-national', 'tel-area-code', 'tel-local', 'tel-extension' ],
+      control: {
+        type: 'select'
+      },
+      table: {
+        category: 'Input',
+        subcategory: 'Attribute'
+      },
+      type: {
+        required: false,
+        name: 'string'
+      },
+    },
+    disabled: {
+      defaultValue: false,
+      description: 'If `true`, the user cannot interact with the input.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'boolean'
+      },
+    },
+    label: {
+      defaultValue: undefined,
+      description: 'The visible label associated with the input.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'string'
+      },
+    },
+    placeholder: {
+      defaultValue: undefined,
+      description: 'Instructional text that shows before the input has a value. This property applies only when the type property is set to `email`, `number`, `password`, `search`, `tel`, `text`, or `url`, otherwise it is ignored.',
+      table: {
+        category: 'Input',
+        subcategory: 'Attribute'
+      },
+      type: {
+        required: false,
+        name: 'string'
+      },
+    },
+    required: {
+      defaultValue: false,
+      description: 'If `true`, the user must fill in a value before submitting a form.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'boolean'
+      },
+    },
+    type: {
+      type: 'string',
+      defaultValue: undefined,
+      description: 'The type of control to display.',
+      options: [ 'email', 'hidden', 'search', 'tel', 'text', 'url' ],
+      control: {
+        type: 'select'
+      },
+      table: {
+        category: 'Input',
+        subcategory: 'Attribute'
+      }
+    },
+    change: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    errorMsg: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    input: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    isTouched: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    onInput: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    registerOnChange: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    registerOnTouched: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    setDisabledState: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    writeValue: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    validate: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    value: {
+      table: { disable: true },
+      control: { disable: true }
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<FormInputComponent>;
+
+export const Default: Story = {
+  args: {
+    type: 'text',
+    label: 'Name',
+    autocomplete: 'name',
+    placeholder: 'Insert your name'
+  }
+};
+
+export const WithIcon: Story = {
+  name: 'With Icon',
+  render: (props) => ({
+    props,
+    template: `
+      <up-input label="Name" name="name" placeholder="Insert your name">
+        <ion-icon name="person-circle" class="me-1" icon />
+      </up-input>
+    `
+  })
+};
+
+export const Required: Story = {
+  args: {
+    ...Default.args,
+    required: true
+  }
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  }
+};
+
+export const Error: Story = {
+  args: {
+    ...Required.args,
+    errorMsg: 'Field is required',
+  }
+};

package/projects/unipin-angular/src/lib/components/forms/number/form-number.component.html

@@ -0,0 +1,6 @@
+<label class="form-label">{{ label }}</label>
+<input type="text" placeholder="{{ placeholder }}" class="form-control" [required]="required" [disabled]="disabled" [value]="value | localeNumber:locale" (keydown)="onKeyDown($event)" (change)="change($event.target)" />
+
+@if (errorMsg) {
+    <label class="is-invalid">{{ errorMsg }}</label>
+}

package/projects/unipin-angular/src/lib/components/forms/number/form-number.component.ts

@@ -0,0 +1,176 @@
+import { Attribute, ChangeDetectorRef, ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator } from '@angular/forms';
+import { getFormErrorMessage } from '../../../utils';
+import { LocaleNumberPipe } from './pipes/locale-number.pipe';
+
+@Component({
+  standalone: true,
+  selector: 'up-number',
+  styleUrl: './form-number.component.scss',
+  templateUrl: './form-number.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'd-block'
+  },
+  imports: [ 
+    FormsModule, 
+    LocaleNumberPipe 
+  ],
+  providers: [
+    {
+      multi: true,
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: FormNumberComponent
+    },
+    {
+      multi: true,
+      provide: NG_VALIDATORS,
+      useExisting: FormNumberComponent
+    }
+  ]
+})
+export class FormNumberComponent implements ControlValueAccessor, Validator {
+
+  /**
+   * Input variable for the label associated with the input.
+   * @type {string | undefined}
+   */
+  @Input() public label?: string;
+  
+  /**
+   * Input variable for the initial value of the input.
+   * @type {string | null | undefined}
+   */
+  @Input() public value?: string | null;
+  
+  /**
+   * Input variable to determine whether the input is required.
+   * @type {boolean}
+   * @default false
+   */
+  @Input() public required: boolean = false;
+
+  /**
+   * Input variable to determine whether the input is disabled.
+   * @type {boolean}
+   * @default false
+   */
+  @Input() public disabled: boolean = false;
+
+  /**
+   * Input variable specifying the locale to be used for masking numbers based on locale.
+   * @type {string}
+   * @default navigator.language
+   */
+  @Input() public locale: string = navigator.language;
+  
+  /**
+   * Boolean flag indicating whether the input has been touched.
+   * @type {boolean}
+   * @default false
+   */
+  public isTouched: boolean = false;
+
+  /**
+   * Error message associated with the input.
+   * @type {string}
+   * @default undefined
+   */
+  public errorMsg!: string;
+
+  /**
+   * The form control associated with the input.
+   * @type {AbstractControl}
+   */
+  protected formControl!: AbstractControl;
+
+  /**
+   * Callback function to handle value changes in the input.
+   * @type {(_val: any) => void}
+   */
+  protected onChange: (_val: any) => void = (_val: any) => {};
+
+  /**
+   * Callback function to handle touch events in the input.
+   * @type {() => void}
+   */
+  protected onTouched: () => void = () => {};
+
+  constructor(
+    @Attribute('placeholder') public placeholder: string,
+    protected readonly ch: ChangeDetectorRef
+  ) { }
+
+  /**
+   * Registers a callback function to be called when the input value changes.
+   * @param {(_val: any) => void} fn - Callback function for value changes.
+   */
+  public registerOnChange(fn: any): void{ this.onChange = fn; }
+
+  /**
+   * Registers a callback function to be called when the input is touched.
+   * @param {() => void} fn - Callback function for touch events.
+   */
+  public registerOnTouched(fn: any): void{ this.onTouched = fn; } 
+
+  /**
+   * Writes a new value to the input.
+   * @param {*} val - The new value to be set.
+   */
+  public writeValue(val: any): void{
+    this.value = val; 
+    this.ch.markForCheck();
+  }
+
+  /**
+   * Sets the disabled state of the input.
+   * @param {boolean} d - Whether the input should be disabled or not.
+   */
+  public setDisabledState?(d: boolean): void{ 
+    this.disabled = d; 
+    this.ch.markForCheck();
+  }
+
+  /**
+   * Validates the input.
+   * @param {AbstractControl} control - The abstract control representing the input.
+   * @returns {(ValidationErrors | null)} - Validation errors if any, otherwise null.
+   */
+  public validate(control: AbstractControl): ValidationErrors | null{
+    this.formControl = control;
+    return null;
+  }
+
+ /**
+   * Event handler for input changes in the input.
+   * If not touched, marks the input as touched.
+   * If not disabled, updates the value, triggers change detection, and emits the input event.
+   * Updates the error message based on form control errors and label.
+   * @param {any} param - Event detail containing the new input value.
+   */
+ public change({ value }: any): void{
+    if (!this.isTouched) {
+      this.onTouched();
+      this.isTouched = true;
+    }
+
+    if (!this.disabled) {
+      this.value = value; 
+      this.onChange(this.value);
+      this.errorMsg = getFormErrorMessage(this.formControl?.errors, this.label);
+    }
+  }
+
+  /**
+   * Event handler for keydown events in the input.
+   * Prevents input of non-numeric characters except for specific allowed keys.
+   * @param {KeyboardEvent} event - The keyboard event object.
+   */
+  public onKeyDown(ev: KeyboardEvent): void{
+    const allowedKeys = new Set(['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Home', 'End', ',', '.']);
+    const key = ev.key;
+
+    if (allowedKeys.has(key)) return;
+    if (!/^\d$/.test(key)) ev.preventDefault();
+  }
+}

package/projects/unipin-angular/src/lib/components/forms/number/form-number.spec.ts

@@ -0,0 +1,62 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { FormNumberComponent } from './form-number.component';
+import { FormsModule, AbstractControl, FormControl } from '@angular/forms';
+
+describe('FormNumberComponent', () => {
+  let component: FormNumberComponent;
+  let fixture: ComponentFixture<FormNumberComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FormNumberComponent, FormsModule]
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FormNumberComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should write value', () => {
+    const value = '123';
+    component.writeValue(value);
+
+    expect(component.value).toEqual(value);
+  });
+
+  it('should validate', () => {
+    const control: AbstractControl = new FormControl();
+    const validationErrors = component.validate(control);
+
+    expect(validationErrors).toBeNull();
+  });
+
+  it('should prevent input of non-numeric characters except for specific allowed keys', () => {
+    const event = new KeyboardEvent('keydown', { key: 'a' });
+    spyOn(event, 'preventDefault');
+
+    component.onKeyDown(event);
+
+    expect(event.preventDefault).toHaveBeenCalled();
+  });
+
+  it('should not prevent input of allowed keys', () => {
+    const allowedKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Home', 'End', ',', '.'];
+
+    allowedKeys.forEach(key => {
+      const event = new KeyboardEvent('keydown', {
+        key
+      });
+
+      spyOn(event, 'preventDefault');
+
+      component.onKeyDown(event);
+      expect(event.preventDefault).not.toHaveBeenCalled();
+    });
+  });
+});