@unipin/angular-applet 18.9.4 → 18.9.6

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

@@ -1,150 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,11 +0,0 @@
-<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

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

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

@@ -1,177 +0,0 @@
-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

@@ -1,151 +0,0 @@
-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

@@ -1,30 +0,0 @@
-<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>
-}