@unipin/angular-applet 18.9.5 → 18.9.6

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

@@ -1,119 +0,0 @@
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
-import { NgSelectModule } from '@ng-select/ng-select';
-import { Observable, of } from 'rxjs';
-import { FormCurrencyInputComponent } from './form-currency-input.component';
-import { CurrencyService } from '../../../services';
-
-describe('FormCurrencyInputComponent', () => {
-  let component: FormCurrencyInputComponent;
-  let fixture: ComponentFixture<FormCurrencyInputComponent>;
-  let currencyServiceStub: Partial<CurrencyService>;
-
-  currencyServiceStub = {
-    query: (): Observable<any> => {
-      return of({
-        data: {
-          webConfigMsCurrency: {
-            data: [
-              { code: 'IDR', name: 'Indonesia Rupiah', magnifyValue: 0 },
-              { code: 'MYR', name: 'Malaysia Ringgit', magnifyValue: 100 }
-            ]
-          }
-        }
-      });
-    }
-  };
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [FormCurrencyInputComponent],
-      imports: [FormsModule, NgSelectModule],
-      providers: [{ provide: CurrencyService, useValue: currencyServiceStub }]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(FormCurrencyInputComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should have correct initial values', () => {
-    expect(component.clearable).toBe(true);
-    expect(component.isInputNumber).toBe(false);
-  });
-
-  // it('ngOnInit should set bindLabel to value when isInputNumber is true', () => {
-  //   component.isInputNumber = true;
-  //   expect(component.bindLabel).toBe('value');
-  // });
-
-  // it('ngOnChanges should update items$ and decimalLimiter when initialItems change', () => {
-  //   const mockInitialItems = [{ label: 'Indonesia Rupiah', value: 'IDR', magnifyValue: 0 }];
-  //   component.initialItems = mockInitialItems;
-  //   component.ngOnChanges({ initialItems: {
-  //     currentValue: mockInitialItems,
-  //     previousValue: undefined,
-  //     firstChange: false,
-  //     isFirstChange: function (): boolean {
-  //       throw new Error('Function not implemented.');
-  //     }
-  //   } });
-  //   expect(component.items$).toBeDefined();
-  // });
-
-  it('writeValue should set the value correctly', () => {
-    const mockValue = { label: 'Indonesia Rupiah', value: 'IDR', magnifyValue: 0 };
-    component.writeValue(mockValue);
-    expect(component.value).toEqual(mockValue);
-  });
-
-  it('validate should return null', () => {
-    const mockFormControl: any = {};
-    const validation = component.validate(mockFormControl);
-    expect(validation).toBeNull();
-  });
-
-  // it('change should emit correct values and update internal state', () => {
-  //   const mockValue = { label: 'IDR', value: 'Indonesia Rupiah', magnifyValue: 0 };
-  //   spyOn(component.onChange, 'emit');
-  //   component.change(mockValue);
-  //   expect(component.onChange.emit).toHaveBeenCalledWith({ ccy: mockValue, number: null });
-  //   expect(component.initialItems).toEqual([mockValue]);
-  //   expect(component.isTouched).toBe(true);
-  // });
-
-  // it('numberInput should update numberValue and emit correct event', () => {
-  //   const mockValue = 100;
-  //   spyOn(component.onChange, 'emit');
-  //   component.numberInput({ value: mockValue });
-  //   expect(component.numberValue).toBe(mockValue);
-  //   expect(component.onChange.emit).toHaveBeenCalledWith({ ccy: component.initialItems, number: mockValue });
-  // });
-
-  it('limitDecimal should limit the number of decimal places allowed', () => {
-    const mockEvent: any = { charCode: 46, preventDefault: () => {}, target: { value: '10.00' }};
-    spyOn(mockEvent, 'preventDefault');
-    component.limitDecimal(mockEvent);
-    expect(mockEvent.preventDefault).toHaveBeenCalled();
-  });
-
-  // it('queryFunc should return correct data based on the provided keyword', () => {
-  //   component.items$.subscribe((data) => {
-  //     expect(data).toEqual([{ label: 'Indonesia Rupiah', value: 'IDR', magnifyValue: 0 }]);
-  //   });
-  // });
-
-  // it('typeahead should emit correct values and trigger queryFunc', () => {
-  //   const mockKeyword = 'IDR';
-  //   component.typeahead.next(mockKeyword);
-  //   component.items$.subscribe((data) => {
-  //     expect(data).toEqual([{ label: 'Indonesia Rupiah', value: 'IDR', magnifyValue: 0 }]);
-  //   });
-  // });
-});

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

@@ -1,243 +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 { FormCurrencyInputComponent } from './form-currency-input.component';
-
-const ctrl = new FormControl();
-ctrl.markAsTouched();
-
-const meta: Meta<FormCurrencyInputComponent> = {
-  title: 'Form/Currency Input',
-  tags: ['autodocs'],
-  component: FormCurrencyInputComponent,
-  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, FormCurrencyInputComponent ],
-    })
-  ],
-  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'
-      },
-    },
-    isInputNumber: {
-      defaultValue: false,
-      description: 'If true the input number form will shown.',
-      table: {
-        category: 'Input'
-      },
-      type: {
-        name: 'boolean',
-        required: false
-      }
-    },
-    isNumberDisabled: {
-      defaultValue: false,
-      description: 'If `true`, the user cannot interact with the input number.',
-      table: {
-        category: 'Input'
-      },
-      type: {
-        required: false,
-        name: 'boolean'
-      },
-    },
-    numberValue: {
-      defaultValue: null,
-      description: 'To set the input number form value.',
-      table: {
-        category: 'Input'
-      },
-      type: {
-        required: false,
-        name: 'number'
-      }
-    },
-    numberPlaceholder: {
-      defaultValue: undefined,
-      description: 'Instructional text that shows before the input number 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 }
-    },
-    isLoading: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    isTouched: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    limitDecimal: {
-      table: { disable: true },
-      control: { disable: true }
-    },
-    numberInput: {
-      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<FormCurrencyInputComponent>;
-
-export const Default: Story = {
-  render: (props) => ({
-    props,
-    template: `
-      <div style="width: 400px">
-        <up-currency-input ${ argsToTemplate(props) } />
-      </div>
-    `,
-  }),
-};
-
-export const Required: Story = {
-  args: {
-    ...Default.args,
-    required: true
-  },
-  render: (props) => ({
-    props,
-    template: `
-      <div style="width: 400px">
-        <up-currency-input ${ argsToTemplate(props) } />
-      </div>
-    `,
-  }),
-};
-
-export const Disabled: Story = {
-  args: {
-    ...Default.args,
-    disabled: true,
-  },
-  render: (props) => ({
-    props,
-    template: `
-      <div style="width: 400px">
-        <up-currency-input ${ argsToTemplate(props) } />
-      </div>
-    `,
-  }),
-};
-
-export const Error: Story = {
-  args: {
-    ...Required.args,
-    errorMsg: 'Field is required',
-  },
-  render: (props) => ({
-    props,
-    template: `
-      <div style="width: 400px">
-        <up-currency-input ${ argsToTemplate(props) } />
-      </div>
-    `,
-  }),
-};
-
-export const ShowInputNumber: Story = {
-  args: {
-    ...Required.args,
-    isInputNumber: true,
-    numberPlaceholder: 'Amount'
-  },
-  render: (props) => ({
-    props,
-    template: `
-      <div style="width: 400px">
-        <up-currency-input ${ argsToTemplate(props) } />
-      </div>
-    `,
-  }),
-}

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

@@ -1,27 +0,0 @@
-<label class="form-label d-flex align-items-center">
-    <ng-content select="[icon]" />
-    <span>{{ label }}</span>
-</label>
-
-<input readonly type="text" id="{{ name }}-date" placeholder="{{ placeholder }}" class="form-control cursor-pointer" [disabled]="disabled" [required]="required" [value]="value | date:dateFormat ">
-<ion-icon name="calendar" class="position-absolute fs-4 cursor-pointer" />
-
-<ion-modal trigger="{{ name }}-date">
-    <ng-template>
-        <ion-datetime 
-            mode="md" 
-            hourCycle="h23" 
-            value="{{ localValue }}"
-            [min]="minDate"
-            [max]="maxDate"
-            [showDefaultButtons]="true" 
-            [presentation]="presentation"
-            [showClearButton]="clearButton"
-            (ionChange)="changeDate($event)" 
-        />
-    </ng-template>
-</ion-modal>
-
-@if (errorMsg) {
-    <label class="is-invalid">{{ errorMsg }}</label>
-}

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

@@ -1,7 +0,0 @@
-ion-datetime { --background: white; }
-ion-modal { --width: 290px; --height: auto; }
-ion-icon {
-    top: 32px;
-    right: 16px;
-    color: #616161;
-}

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

@@ -1,225 +0,0 @@
-import { Attribute, ChangeDetectorRef, ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
-import { DatePipe } from '@angular/common';
-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-date',
-  styleUrl: './form-date.component.scss',
-  templateUrl: './form-date.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'd-block position-relative'
-  },
-  imports: [
-    DatePipe,
-    IonicModule
-  ],
-  providers: [
-    {
-      multi: true,
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: FormDateComponent
-    },
-    {
-      multi: true,
-      provide: NG_VALIDATORS,
-      useExisting: FormDateComponent
-    }
-  ]
-})
-export class FormDateComponent implements ControlValueAccessor, Validator, OnInit {
-
-  /**
-   * Input variable for the name associated with the date input.
-   * @type {string}
-   * @required
-   */
-  @Input({ required: true }) public name!: string;
-
-  /**
-   * Input variable for the label associated with the date input.
-   * @type {string | undefined}
-   */
-  @Input() public label?: string;
-
-  /**
-   * Input variable to determine whether the date input is required.
-   * @type {boolean}
-   * @default false
-   */
-  @Input() public required: boolean = false;
-
-  /**
-   * Input variable to determine whether the date input is disabled.
-   * @type {boolean}
-   * @default false
-   */
-  @Input() public disabled: boolean = false;
-
-  /**
-   * Input variable to determine whether the date picker is date only or date and time.
-   * @type {string}
-   * @default 'date'
-   */
-  @Input() public presentation: 'date' | 'date-time' | 'month-year' = 'date';
-
-  /**
-   * Input variable to determine what is the minimum date allowed.
-   * @type {string}
-   */
-  @Input() public minDate?: string;
-
-  /**
-   * Input variable to determine what is the maximum date allowed.
-   * @type {string}
-   */
-  @Input() public maxDate?: string;
-
-  /**
-   * Input variable to determine if the date picker should show a clear button
-   * @type {boolean}
-   */
-  @Input() public clearButton: boolean = false;
-
-  /**
-   * The format of date.
-   * @type {string}
-   * @default 'dd LLL yyyy'
-   */
-  @Input() public dateFormat: string = 'dd LLL yyyy';
-
-  /**
-   * Boolean flag indicating whether the date input has been touched.
-   * @type {boolean}
-   * @default false
-   */
-  public isTouched: boolean = false;
-
-  /**
-   * The value of the date input.
-   * @type {string}
-   * @default ''
-   */
-  public value: string = '';
-
-  /**
-   * The value of the localization date.
-   * @type {string}
-   * @default ''
-   */
-  public localValue: string= '';
-
-  /**
-   * Error message associated with the date input.
-   * @type {string}
-   * @default undefined
-   */
-  public errorMsg!: string;
-
-  /**
-   * The form control associated with the date input.
-   * @type {AbstractControl}
-   */
-  protected formControl!: AbstractControl;
-
-  /**
-   * Callback function to handle value changes in the date input.
-   * @type {(_val: any) => void}
-   */
-  protected onChange: (_val: any) => void = (_val: any) => {};
-
-  /**
-   * Callback function to handle touch events in the date input.
-   * @type {() => void}
-   */
-  protected onTouched: () => void = () => {};
-
-  constructor(
-    @Attribute('placeholder') public placeholder: string,
-    protected readonly ch: ChangeDetectorRef
-  ) {}
-
-  /**
-   * Lifecycle hook called a moment before the component is created.
-   * Check if the presentation is 'date-time' then the date format should be changed to dd LLL yyyy HH:mm.
-   */
-  public ngOnInit(): void{
-    if (this.presentation === 'date-time') this.dateFormat = `${ this.dateFormat } HH:mm`;
-  }
-
-  /**
-   * Registers a callback function to be called when the date 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 date 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 date input.
-   * Calculate and writes the local value for ionic datetime picker.
-   * @param {*} val - The new value to be set.
-   */
-  public writeValue(val: any): void{ 
-    this.value = val;
-    if (!val) {
-      this.ch.markForCheck();
-      return;
-    };
-
-    let localTime = new Date(val);
-
-    localTime = new Date(localTime.getTime() - (localTime.getTimezoneOffset() * 60000));
-    this.localValue = localTime.toISOString();
-
-    this.ch.markForCheck();
-  }
-
-  /**
-   * Sets the disabled state of the date input.
-   * @param {boolean} d - Whether the date input should be disabled or not.
-   */
-  public setDisabledState?(d: boolean): void{ 
-    this.disabled = d; 
-    this.ch.markForCheck();
-  }
-
-  /**
-   * Validates the date input.
-   * @param {AbstractControl} control - The abstract control representing the date input.
-   * @returns {(ValidationErrors | null)} - Validation errors if any, otherwise null.
-   */
-  public validate(control: AbstractControl): ValidationErrors | null{
-    this.formControl = control;
-    return null;
-  }
-
-  /**
-   * Event handler for date changes in the date input.
-   * If not touched, marks the input as touched.
-   * If not disabled, updates the value, triggers change detection, and emits the change event.
-   * Updates the error message based on form control errors and label.
-   * @param {any} param0 - Event detail containing the new date value.
-   */
-  public changeDate({ detail: { value }}: any): void{
-    if (!this.isTouched) {
-      this.onTouched();
-      this.isTouched = true;
-    }
-
-    if (!this.disabled) {
-      this.value = this.localValue = value;
-      this.ch.markForCheck();
-
-      this.onChange(this.value);
-      this.errorMsg = getFormErrorMessage(this.formControl.errors, this.label);
-    }
-  }
-}