@unipin/angular-applet 18.9.5 → 18.9.7

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

@@ -1,210 +0,0 @@
-import { Attribute, ChangeDetectorRef, ChangeDetectionStrategy, Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
-import { AbstractControl, ControlValueAccessor, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator } from '@angular/forms';
-import { Subscription } from 'rxjs';
-import { NgSelectModule } from '@ng-select/ng-select';
-import { Country } from '../../../../graphql/generated';
-import { CountryService } from '../../../services';
-import { getFormErrorMessage } from '../../../utils';
-
-@Component({
-  standalone: true,
-  selector: 'up-country-input',
-  styleUrl: './form-country-input.component.scss',
-  templateUrl: './form-country-input.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { 
-    class: 'd-block' 
-  },
-  imports: [
-    FormsModule,
-    NgSelectModule
-  ],
-  providers: [
-    {
-      multi: true,
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: FormCountryInputComponent
-    },
-    {
-      multi: true,
-      provide: NG_VALIDATORS,
-      useExisting: FormCountryInputComponent
-    }
-  ]
-})
-export class FormCountryInputComponent implements ControlValueAccessor, Validator, OnInit, OnDestroy {
-  
-  /**
-   * Input variable to determine whether the country input is clearable.
-   * @type {boolean}
-   * @default {true}
-   */
-  @Input() public clearable: boolean = true;
-
-  /**
-   * Input variable to determine whether the country input is required.
-   * @type {boolean}
-   * @default {false}
-   */
-  @Input() public required: boolean = false;
-
-  /**
-   * Input variable to determine whether the select input allows multiple selections.
-   * @type {boolean}
-   * @default false
-   */
-  @Input() public multiple: boolean = false;
-
-  /**
-   * Input variable to determine whether the country input is disabled.
-   * @type {boolean}
-   * @default {false}
-   */
-  @Input() public disabled: boolean = false;
-
-  /**
-   * Output variable to emit changes when the country input value changes.
-   * @type {EventEmitter<any>}
-   */
-  @Output() public onChange: EventEmitter<Country | undefined | null> = new EventEmitter();
-
-  /**
-   * Observable for displaying items in the country input.
-   * @type {Observable<any[]>}
-   */
-  public items: { label: string, value: string, data: Country }[] = [];
-
-  /**
-   * Boolean flag indicating whether the country input is loading.
-   * @type {boolean}
-   * @default {false}
-   */
-  public isLoading: boolean = true;
-
-  /**
-   * Boolean flag indicating whether the country input has been touched.
-   * @type {boolean}
-   * @default {false}
-   */
-  public isTouched: boolean = false;
-
-  /**
-   * The value of the country input.
-   * @type {any | null}
-   * @default {null}
-   */
-  public value: any | null = null;
-
-  /**
-   * Error message associated with the country input.
-   * @type {string}
-   * @default {undefined}
-   */
-  public errorMsg!: string;
-
-  /**
-   * The form control associated with the country input.
-   * @type {AbstractControl}
-   */
-  protected formControl!: AbstractControl;
-
-  /**
-   * Callback function to handle value changes in the country input.
-   * @type {(_val: any) => void}
-   */
-  protected changed: (_val: any) => void = (_val: any) => {};
-
-  /**
-   * Callback function to handle touch events in the country input.
-   * @type {() => void}
-   */
-  protected onTouched: () => void = () => {};
-
-  protected sub?: Subscription;
-
-  constructor(
-    @Attribute('placeholder') public placeholder: string,
-    protected readonly ch: ChangeDetectorRef,
-    protected readonly countryService: CountryService,
-  ) {}
-
-  public ngOnInit(): void{
-    this.sub = this.countryService.query().subscribe({
-      error: () => {
-        this.items = [];
-        this.setIsLoading(false);
-      },
-      next: ({ data: { webConfigMsCountry: { data }}}) => {
-        this.items = data.map((d) => ({ label: d.name!, value: d.code!, data: d }));
-        this.setIsLoading(false);
-      }
-    });
-  }
-
-  public ngOnDestroy(): void{
-    this.sub?.unsubscribe();
-  }
-  
-  /**
-   * Registers a callback function to be called when the select input value changes.
-   * @param {(_val: any) => void} fn - Callback function for value changes.
-   */
-  public registerOnChange(fn: any): void{ this.changed = fn; }
-  
-  /**
-   * Registers a callback function to be called when the select 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 select 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 select input.
-   * @param {boolean} d - The new disabled state.
-   */
-  public setDisabledState?(d: boolean): void{ 
-    this.disabled = d; 
-    this.ch.markForCheck();
-  }
-
-  /**
-   * Validates the select input.
-   * @param {AbstractControl} control - The abstract control representing the select input.
-   * @returns {(ValidationErrors | null)} - Validation errors if any, otherwise null.
-   */
-  public validate(control: AbstractControl): ValidationErrors | null{    
-    this.formControl = control;
-    return null;
-  }
-
-  public change(e?: any): void{
-    if (!this.isTouched) {
-      this.onTouched();
-      this.isTouched = true;
-    }
-    
-    if (!this.disabled) {
-      if (!e) this.value = null;
-      else {
-        this.value = !this.multiple? e.value : e.map((o: any) => o.value);
-      }
-
-      this.changed(this.value);
-      this.onChange.emit(e.data);
-      this.errorMsg = getFormErrorMessage(this.formControl.errors, 'Country');
-    }
-  }
-
-  protected setIsLoading(b: boolean): void{
-    this.isLoading = b;
-    this.ch.markForCheck();
-  }
-}

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

@@ -1,175 +0,0 @@
-import { importProvidersFrom } from '@angular/core';
-import { provideHttpClient } from '@angular/common/http';
-import { FormControl } from '@angular/forms';
-import { InMemoryCache } from '@apollo/client';
-import { APOLLO_OPTIONS, ApolloModule } from 'apollo-angular';
-import { HttpLink } from 'apollo-angular/http';
-import { NgSelectModule } from '@ng-select/ng-select';
-import { moduleMetadata, type Meta, type StoryObj, applicationConfig, argsToTemplate } from '@storybook/angular';
-import { FormCountryInputComponent } from './form-country-input.component';
-
-const ctrl = new FormControl();
-ctrl.markAsTouched();
-
-const meta: Meta<FormCountryInputComponent> = {
-  title: 'Form/Country Input',
-  tags: ['autodocs'],
-  component: FormCountryInputComponent,
-  decorators: [
-    applicationConfig({
-      providers: [
-        provideHttpClient(),
-        importProvidersFrom([
-          ApolloModule
-        ]),
-        {
-          provide: APOLLO_OPTIONS,
-          deps: [ HttpLink ],
-          useFactory: (httpLink: HttpLink) => ({ cache: new InMemoryCache(), link: httpLink.create({ uri: 'https://ms-gateway.up.unipin.dev/graphql' }) }),
-        },
-      ],
-    }),
-    moduleMetadata({
-      imports: [ NgSelectModule, FormCountryInputComponent ],
-    })
-  ],
-  argTypes: {
-    clearable: {
-      defaultValue: true,
-      description: 'Allow to clear selected value. Default `true`',
-      table: {
-        category: 'Input'
-      },
-      type: {
-        required: false,
-        name: 'boolean'
-      }
-    },
-    disabled: {
-      defaultValue: false,
-      description: 'If `true`, the user cannot interact with the select.',
-      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'
-      },
-    },
-    change: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    errorMsg: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    isLoading: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    isTouched: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    onChange: {
-      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 }
-    },
-    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<FormCountryInputComponent>;
-
-export const Default: Story = {
-  render: (props) => ({
-    props,
-    template: `
-      <div style="width: 400px">
-        <up-country-input ${ argsToTemplate(props) } />
-      </div>
-    `,
-  }),
-};
-
-export const Required: Story = {
-  args: {
-    ...Default.args,
-    required: true
-  },
-  render: (props) => ({
-    props,
-    template: `
-      <div style="width: 400px">
-        <up-country-input ${ argsToTemplate(props) } />
-      </div>
-    `,
-  }),
-};
-
-export const Disabled: Story = {
-  args: {
-    ...Default.args,
-    disabled: true,
-  },
-  render: (props) => ({
-    props,
-    template: `
-      <div style="width: 400px">
-        <up-country-input ${ argsToTemplate(props) } />
-      </div>
-    `,
-  }),
-};
-
-export const Error: Story = {
-  args: {
-    ...Required.args,
-    errorMsg: 'Field is required',
-  },
-  render: (props) => ({
-    props,
-    template: `
-      <div style="width: 400px">
-        <up-country-input ${ argsToTemplate(props) } />
-      </div>
-    `,
-  }),
-};
-

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

@@ -1,42 +0,0 @@
-<label class="form-label" [class.required]="required">{{ label }}</label>
-
-<ng-template #selectForm>
-    <ng-select 
-        class="flex-shrink-0"
-        [class.number]="isInputNumber"
-        appendTo="body"
-        bindValue="value"
-        placeholder="{{ placeholder }}"
-        [virtualScroll]="true"
-        [items]="items"
-        [ngModel]="value"
-        [readonly]="disabled" 
-        [loading]="isLoading"
-        [clearable]="clearable"
-        (change)="change($event);"
-    >
-        <ng-template ng-option-tmp let-i="item">
-            <span>{{ isInputNumber? i.value : i.label }}</span>
-        </ng-template>
-
-        <ng-template ng-label-tmp let-i="item">
-            <span>{{ isInputNumber? i.value : i.label }}</span>
-        </ng-template>
-    </ng-select>
-</ng-template>
-
-@if (!isInputNumber) {
-    <ng-container *ngTemplateOutlet="selectForm" />
-} 
-@else {
-    <div class="d-flex justify-content-between gap-1 align-items-center">
-        <ng-container *ngTemplateOutlet="selectForm" />
-
-        <input type="number" [placeholder]="numberPlaceholder" class="form-control flex-grow-1" [disabled]="isNumberDisabled" [value]="numberValue" (keypress)="limitDecimal($event)" (input)="numberInput($event.target)">
-    </div>
-}
-
-@if (errorMsg) {
-    <label class="is-invalid">{{ errorMsg }}</label>
-}
-

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

@@ -1,4 +0,0 @@
-ng-select.number {
-    min-width: 105px;
-    max-width: 105px;
-}

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

@@ -1,285 +0,0 @@
-import { Attribute, ChangeDetectorRef, ChangeDetectionStrategy, Component, Input, Output, EventEmitter, OnInit, OnDestroy } from '@angular/core';
-import { NgTemplateOutlet } from '@angular/common';
-import { AbstractControl, ControlValueAccessor, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator } from '@angular/forms';
-import { Subscription } from 'rxjs';
-import { NgSelectModule } from '@ng-select/ng-select';
-import { Currency } from '../../../../graphql/generated';
-import { getFormErrorMessage } from '../../../utils';
-import { CurrencyService } from '../../../services';
-
-@Component({
-  standalone: true,
-  selector: 'up-currency-input',
-  styleUrl: './form-currency-input.component.scss',
-  templateUrl: './form-currency-input.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { 
-    class: 'd-block' 
-  },
-  imports: [
-    FormsModule,
-    NgSelectModule,
-    NgTemplateOutlet,
-  ],
-  providers: [
-    {
-      multi: true,
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: FormCurrencyInputComponent
-    },
-    {
-      multi: true,
-      provide: NG_VALIDATORS,
-      useExisting: FormCurrencyInputComponent
-    }
-  ]
-})
-export class FormCurrencyInputComponent implements ControlValueAccessor, Validator, OnInit, OnDestroy {
-  
-  /**
-   * Input variable for the label associated with the input.
-   * @type {string}
-   * @default ''
-   */
-  @Input() public label: string = 'Currency';
-
-  /**
-   * Input variable to determine whether the select input is clearable.
-   * @type {boolean}
-   * @default {true}
-   */
-  @Input() public clearable: boolean = true;
-
-  /**
-   * Input variable to determine whether the number input form is hide or show.
-   * @type {boolean}
-   * @default {false}
-   */
-  @Input() public isInputNumber: boolean = false;
-
-  /**
-   * Input variable to set the value of input number field.
-   * @type {number | null}
-   * @default {null}
-   */
-  @Input() public numberValue: number | null = null;
-
-  /**
-   * Input variable to determine whether the number input is disabled.
-   * @type {boolean}
-   * @default {false}
-   */
-  @Input() public isNumberDisabled: boolean = false;
-
-  /**
-   * Input variable to determine whether the select input is required.
-   * @type {boolean}
-   * @default {false}
-   */
-  @Input() public required: boolean = false;
-
-  /**
-   * Input variable to determine whether the select input is disabled.
-   * @type {boolean}
-   * @default {false}
-   */
-  @Input() public disabled: boolean = false;
-
-  /**
-   * Output variable to emit changes when the select input value changes.
-   * @type {EventEmitter<any>}
-   */
-  @Output() public onChange: EventEmitter<{ selectedItem?: Currency, number: number | null }> = new EventEmitter();
-
-  /**
-   * Observable for displaying items in the select input.
-   * @type {Observable<any[]>}
-   */
-  public items: { label: string, value: string, data: Currency }[] = [];
-
-  /**
-   * Boolean flag indicating whether the select input is loading.
-   * @type {boolean}
-   * @default {false}
-   */
-  public isLoading: boolean = true;
-
-  /**
-   * Boolean flag indicating whether the select input has been touched.
-   * @type {boolean}
-   * @default {false}
-   */
-  public isTouched: boolean = false;
-
-  /**
-   * The value of the select input.
-   * @type {any | null}
-   * @default {null}
-   */
-  public value: any | null = null;
-
-  /**
-   * Error message associated with the select input.
-   * @type {string}
-   * @default {undefined}
-   */
-  public errorMsg!: string;
-
-  /**
-   * The form control associated with the select input.
-   * @type {AbstractControl}
-   */
-  protected formControl!: AbstractControl;
-
-  /**
-   * The number of maximum digits allowed behind the comma.
-   * @type {number}
-   * @default {0}
-   */
-  protected decimalLimiter: number = 0;
-
-  /**
-   * Callback function to handle value changes in the select input.
-   * @type {(_val: any) => void}
-   */
-  protected changed: (_val: any) => void = (_val: any) => {};
-
-  /**
-   * Callback function to handle touch events in the select input.
-   * @type {() => void}
-   */
-  protected onTouched: () => void = () => {};
-
-  protected sub?: Subscription;
-  protected selectedItem?: Currency;
-
-  constructor(
-    @Attribute('placeholder') public placeholder: string,
-    @Attribute('numberPlaceholder') public numberPlaceholder: string,
-    protected readonly ch: ChangeDetectorRef,
-    protected readonly currencyService: CurrencyService,
-  ) {}
-
-  public ngOnInit(): void{
-    this.sub = this.currencyService.query().subscribe({
-      error: () => {
-        this.items = [];
-        this.setIsLoading(false);
-      },
-      next: ({ data: { webConfigMsCurrency: { data }}}) => {
-        this.items = data.map((d) => ({ label: `[${ d.code }] ${ d.name }`, value: d.code!, data: d }));
-        this.setIsLoading(false);
-      }
-    });
-  }
-
-  public ngOnDestroy(): void{
-    this.sub?.unsubscribe();
-  }
-  
-  /**
-   * Registers a callback function to be called when the select input value changes.
-   * @param {(_val: any) => void} fn - Callback function for value changes.
-   */
-  public registerOnChange(fn: any): void{ this.changed = fn; }
-  
-  /**
-   * Registers a callback function to be called when the select 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 select input.
-   * @param {*} val - The new value to be set.
-   */
-  public writeValue(val: any): void{
-    this.value = val;
-
-    if (!val) this.change(null);
-    else {
-      const d = this.items.find(({ value }) => value === val);
-      
-      if (d) {
-        this.change({ value: val, data: d.data });
-      }
-    }
-    this.ch.markForCheck();
-  }
-  
-   /**
-   * Sets the disabled state of the select input.
-   * @param {boolean} d - The new disabled state.
-   */
-  public setDisabledState?(d: boolean): void{ 
-    this.disabled = d; 
-    this.ch.markForCheck();
-  }
-
-  /**
-   * Validates the select input.
-   * @param {AbstractControl} control - The abstract control representing the select input.
-   * @returns {(ValidationErrors | null)} - Validation errors if any, otherwise null.
-   */
-  public validate(control: AbstractControl): ValidationErrors | null{    
-    this.formControl = control;
-    return null;
-  }
-  
-  /**
-   * Event handler for changes in the select input.
-   * Set the number as null if currency changed to prevent mismatch between selected currency and the number comma allowed limit.
-   * Emits the onChange event, updates the initialItems, and handles validation based on form control errors and label.
-   * Set the decimalLimiter based on selected magnifyValue
-   * @param {any} e - The event containing the new select input value.
-   */
-  public change(e?: any): void{
-    if (!this.isTouched) {
-      this.onTouched();
-      this.isTouched = true;
-    }
-    
-    if (!this.disabled) {
-      this.value = e?.value;
-      this.selectedItem = e?.data;
-
-      this.changed(this.value);
-      this.onChange.emit({ selectedItem: e, number: this.numberValue });
-      this.errorMsg = getFormErrorMessage(this.formControl?.errors, this.label);
-    }
-    
-    if (e?.magnifyValue === 1) this.decimalLimiter = 0;
-    else {
-      this.decimalLimiter = Math.floor(Math.log10(e?.data.magnifyValue));
-    }
-  }
-
-  /**
-   * Triggered on form number input.
-   * Set the numberValue with current value.
-   * Emit the selected currency and the number value to the parent component.
-   * @param {any} - Contain `value` the value of inputed number.
-   */
-  public numberInput({ value }: any): void{
-    this.numberValue = value;
-    this.onChange.emit({ selectedItem: this.selectedItem, number: value });
-  }
-
-  /**
-   * Triggered on form number keypress.
-   * Controlling input in a number field, restricting the number of decimal places allowed.
-   * @param {any} - Contain
-   * charCode - the character code of the key pressed.
-   * preventDefault - the function to prevent the default behaviour of the event.
-   * target.value - the current value of the input field.
-   */
-  public limitDecimal({ charCode, preventDefault, target: { value }}: any): void{
-    const reg = this.decimalLimiter > 0? new RegExp(`^\\d*(\\.\\d{0,${ this.decimalLimiter }})?$`) : /^\d+$/;
-    if (!reg.test(value + String.fromCharCode(charCode))) preventDefault();
-  }
-
-  protected setIsLoading(b: boolean): void{
-    this.isLoading = b;
-    this.ch.markForCheck();
-  }
-}