@unipin/angular-applet 18.9.3 → 18.9.4

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

@@ -0,0 +1,150 @@
+import type { AngularRenderer, Meta, StoryObj } from '@storybook/angular';
+import { userEvent, within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { FormNumberComponent } from './form-number.component';
+
+const meta: Meta<FormNumberComponent> = {
+  title: 'Form/Number',
+  tags: [ 'autodocs' ],
+  component: FormNumberComponent,
+  argTypes: {
+    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'
+      },
+    },
+    locale: {
+      defaultValue: undefined,
+      description: 'Specifies the locale used for formatting numbers based on the specified locale. If no locale is provided, the default locale of the user\'s browser is used.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'string'
+      },
+    },
+    placeholder: {
+      defaultValue: undefined,
+      description: 'Instructional text that shows before the input has a value.',
+      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'
+      },
+    },
+    change: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    errorMsg: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    isTouched: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    onKeyDown: {
+      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<FormNumberComponent>;
+
+const play: any = async ({ canvasElement }: AngularRenderer) => {
+  const numberInput: any = within(canvasElement).getByPlaceholderText('Insert number');
+  await userEvent.type(numberInput, '5');
+
+  await expect(Number(numberInput.value)).toEqual(5);
+}
+
+export const Default: Story = {
+  play,
+  args: {
+    label: 'Number',
+    placeholder: 'Insert number'
+  }
+};
+
+export const Required: Story = {
+  play,
+  args: {
+    ...Default.args,
+    required: true
+  }
+};
+
+export const Disabled: Story = {
+  play,
+  args: {
+    ...Default.args,
+    disabled: true,
+  }
+};
+
+export const Error: Story = {
+  play,
+  args: {
+    ...Required.args,
+    errorMsg: 'Field is required',
+  },
+};

package/projects/unipin-angular/src/lib/components/forms/number/pipes/locale-number.pipe.ts

@@ -0,0 +1,32 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  pure: true,
+  standalone: true,
+  name: 'localeNumber',
+})
+export class LocaleNumberPipe implements PipeTransform {
+
+  public transform(value: string | null | undefined, locale: string): string {
+    if (value === null || value === undefined) return '';
+
+    const val = String(value);
+    if (!/[.,]/.test(val)) {
+      return Number(val).toLocaleString(locale);
+    }
+
+    return val.replace(/^(.+?)([.,])(\d*)$/, (_, intPart, decSep, decPart) =>
+      `${Number(intPart.replace(/[.,]/g, '')).toLocaleString(locale)}${decSep}${decPart}`
+    );
+  }
+
+  protected extractSeperator(input: string): string[]{
+    const seperators: string[] = [];
+
+    for (let i = 0; i < input.length; i++) {
+      const char = input[i];
+      if (char === '.' || char === ',') seperators.push(char);
+    }
+    return seperators;
+  }
+}

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

@@ -0,0 +1,11 @@
+<label class="form-label d-flex align-items-center">
+    <ng-content select="[icon]"/>
+    <span>{{ label }}</span>
+</label>
+
+<input [type]="type" autocomplete="{{ autocomplete }}" [required]="required" class="form-control pe-5" [value]="value" (change)="change($event.target)" (focus)="touch()" />
+<ion-icon name="{{ type === 'password'? 'eye' : 'eye-off' }}" class="position-absolute fs-4 cursor-pointer" (click)="changeType()"></ion-icon>
+
+@if (errorMsg) {
+    <label class="is-invalid">{{ errorMsg }}</label>
+}

package/projects/unipin-angular/src/lib/components/forms/password/form-password.component.scss

@@ -0,0 +1,5 @@
+ion-icon {
+    top: 33px;
+    right: 16px;
+    color: #616161;
+}

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

@@ -0,0 +1,177 @@
+import { Attribute, ChangeDetectorRef, ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { AbstractControl, ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator } from '@angular/forms';
+import { IonicModule } from '@ionic/angular';
+import { getFormErrorMessage } from '../../../utils';
+
+@Component({
+  standalone: true,
+  selector: 'up-password',
+  styleUrl: './form-password.component.scss',
+  templateUrl: './form-password.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class: 'd-block position-relative'
+  },
+  imports: [
+    IonicModule
+  ],
+  providers: [
+    {
+      multi: true,
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: FormPasswordComponent
+    },
+    {
+      multi: true,
+      provide: NG_VALIDATORS,
+      useExisting: FormPasswordComponent
+    }
+  ]
+})
+export class FormPasswordComponent implements ControlValueAccessor, Validator {
+
+  /**
+   * Input variable to determine whether the password is required.
+   * @type {boolean}
+   * @default false
+   */
+  @Input() public required: boolean = false;
+
+  /**
+   * Input variable to determine whether the password must be the same as another input.
+   * @type {boolean}
+   * @default false
+   */
+  @Input() public mustSame: boolean = false;
+
+  /**
+   * Boolean flag indicating whether the password input has been touched.
+   * @type {boolean}
+   * @default false
+   */
+  public isTouched: boolean = false;
+
+  /**
+   * The type of the password input (text or password).
+   * @type {'text' | 'password'}
+   * @default 'password'
+   */
+  public type: 'text' | 'password' = 'password';
+
+  /**
+   * The value of the password input.
+   * @type {string}
+   * @default ''
+   */
+  public value: string = '';
+
+  /**
+   * Error message associated with the password input.
+   * @type {string}
+   * @default undefined
+   */
+  public errorMsg!: string;
+
+  /**
+   * The form control associated with the password input.
+   * @type {AbstractControl}
+   */
+  protected formControl!: AbstractControl;
+
+  /**
+   * Callback function to handle value changes in the password input.
+   * @type {(_val: any) => void}
+   */
+  protected onChange: (_val: any) => void = (_val: any) => {};
+
+  /**
+   * Callback function to handle touch events in the password input.
+   * @type {() => void}
+   */
+  protected onTouched: () => void = () => {};
+
+  constructor(
+    @Attribute('label') public label: string,
+    @Attribute('autocomplete') public autocomplete: 'current-password' | 'new-password',
+    protected readonly ch: ChangeDetectorRef
+  ) { }
+
+  /**
+   * Registers a callback function to be called when the password 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 password input is touched.
+   * @param {() => void} fn - Callback function for touch events.
+   */
+  public registerOnTouched(fn: any): void{ this.onTouched = fn; } 
+
+  /**
+   * Toggles the type of the password input between text and password.
+   */
+  public changeType(): void{ 
+    this.type = this.type === 'text'? 'password' : 'text';
+  }
+
+  /**
+   * Writes a new value to the password input.
+   * @param {*} val - The new value to be set.
+   */
+  public writeValue(val: any): void{ 
+    this.value = val; 
+    this.ch.markForCheck();
+  }
+
+  /**
+   * Validates the password input.
+   * @param {AbstractControl} control - The abstract control representing the password input.
+   * @returns {(ValidationErrors | null)} - Validation errors if any, otherwise null.
+   */
+  public validate(control: AbstractControl): ValidationErrors | null{
+    this.formControl = control;
+    return null;
+  }
+
+  /**
+   * Event handler to handle touch status.
+   * If the passsword input got focused, it will retrigger get error message to show the error message properly
+   * 
+   * @returns {void}
+   */
+  public touch(): void{
+    if (!this.isTouched) {
+      this.onTouched();
+      this.isTouched = true;
+    }
+    this.errorMsg = getFormErrorMessage(this.formControl.errors, this.label);
+  }
+
+  /**
+   * Event handler for changes in the password input.
+   * If not touched, marks the input as touched.
+   * Updates the value, triggers change detection, and handles validation based on form control errors and label.
+   * @param {any} param0 - Event detail containing the new password input value.
+   */
+  public change({ value }: any): void{
+    if (!this.isTouched) {
+      this.onTouched();
+      this.isTouched = true;
+    }
+
+    this.value = value;
+    this.onChange(this.value);
+
+    if (this.formControl.parent?.errors) {
+      if (this.mustSame && this.formControl.parent.hasError('isNotEqual')) {
+        this.errorMsg = `${ this.label } is not the same`;
+        return;
+      }
+
+      this.errorMsg = this.formControl.parent?.errors!['message'] || `${ this.label } has an invalid value`;
+      return;
+    }
+    this.errorMsg = getFormErrorMessage(this.formControl.errors, this.label);
+  }
+}

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

@@ -0,0 +1,151 @@
+import { IonicModule } from '@ionic/angular';
+import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { FormPasswordComponent } from './form-password.component';
+
+const meta: Meta<FormPasswordComponent> = {
+  title: 'Form/Password',
+  tags: [ 'autodocs' ],
+  component: FormPasswordComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ 
+        IonicModule
+      ],
+    })
+  ],
+  argTypes: {
+    autocomplete: {
+      defaultValue: undefined,
+      description: 'Indicates whether the value of the control can be automatically completed by the browser.',
+      options: [ 'current-password', 'new-password' ],
+      control: {
+        type: 'select'
+      },
+      table: {
+        category: 'Input',
+        subcategory: 'Attribute'
+      },
+      type: {
+        required: false,
+        name: 'string'
+      },
+    },
+    label: {
+      defaultValue: undefined,
+      description: 'The visible label associated with the password.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'string'
+      }
+    },
+    mustSame: {
+      defaultValue: false,
+      description: 'When set to `true`, enables validation for ensuring that the entered password matches another password input within the same form.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'boolean'
+      }
+    },
+    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: [ 'text', 'password' ],
+      control: {
+        type: 'select'
+      },
+      table: {
+        category: 'Input',
+        subcategory: 'Attribute'
+      }
+    },
+    change: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    changeType: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    errorMsg: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    isTouched: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    registerOnChange: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    registerOnTouched: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    validate: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    value: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    writeValue: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+  }
+};
+
+export default meta;
+type Story = StoryObj<FormPasswordComponent>;
+
+export const Default: Story = {
+  args: {
+    label: 'Password',
+  },
+};
+
+export const WithIcon: Story = {
+  name: 'With Icon',
+  render: (props) => ({
+    props,
+    template: `
+      <up-password label="Password">
+        <ion-icon name="lock" class="me-1" icon />
+      </up-password>
+    `
+  })
+};
+
+export const Required: Story = {
+  args: {
+    ...Default.args,
+    required: true
+  },
+};
+
+export const Error: Story = {
+  args: {
+    ...Required.args,
+    errorMsg: 'Field is required',
+  },
+};

package/projects/unipin-angular/src/lib/components/forms/rate-group-code-input/form-rate-group-code-input.component.html

@@ -0,0 +1,30 @@
+<label 
+    class="form-label d-flex align-items-center" 
+    [class.required]="required"
+>
+    <ng-content select="[icon]" />
+    <span>{{ label }}</span>
+</label>
+
+<ng-select 
+    typeToSearchText="Please enter 3 or more characters"
+    bindLabel="{{ bindLabel }}"
+    bindValue="{{ bindValue }}"
+    placeholder="{{ placeholder }}"
+    [minTermLength]="3"
+    [addTag]="true"
+    [virtualScroll]="true"
+    [editableSearchTerm]="true"
+    [ngModel]="value"
+    [readonly]="disabled" 
+    [loading]="isLoading"
+    [appendTo]="appendTo" 
+    [clearable]="clearable"
+    [typeahead]="typeahead"
+    [items]="items$ | async"
+    (change)="change($event);"
+/>
+
+@if (errorMsg) {
+    <label class="is-invalid">{{ errorMsg }}</label>
+}