@unipin/angular-applet 18.9.3 → 18.9.5

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

@@ -0,0 +1,281 @@
+import { Attribute, ChangeDetectorRef, ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges, Output, EventEmitter, ViewChild } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
+import { AbstractControl, ControlValueAccessor, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator } from '@angular/forms';
+import { Observable, Subject, catchError, concat, debounceTime, distinctUntilChanged, map, of, switchMap, tap } from 'rxjs';
+import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select';
+import { getFormErrorMessage } from '../../../utils';
+
+@Component({
+  standalone: true,
+  selector: 'up-searchable-select',
+  styleUrl: './form-searchable-select.component.scss',
+  templateUrl: './form-searchable-select.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { 
+    class: 'd-block' 
+  },
+  imports: [
+    AsyncPipe,
+    FormsModule,
+    NgSelectModule
+  ],
+  providers: [
+    {
+      multi: true,
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: FormSearchableSelectComponent
+    },
+    {
+      multi: true,
+      provide: NG_VALIDATORS,
+      useExisting: FormSearchableSelectComponent
+    }
+  ]
+})
+export class FormSearchableSelectComponent implements ControlValueAccessor, Validator, OnChanges {
+
+  /**
+   * Input variable for the function to retrieve items based on a search keyword.
+   * @type {(keyword: string) => Observable<any>}
+   * @required
+   */
+  @Input({ required: true }) public queryFunc!: (keyword: string) => Observable<any>;
+
+  /**
+   * Input variable to determine whether the select input is clearable.
+   * @type {boolean}
+   * @default true
+   */
+  @Input() public clearable: boolean = true;
+
+  /**
+   * Input variable for the label associated with the select input.
+   * @type {string}
+   * @default ''
+   */
+  @Input() public label: string = '';
+
+  /**
+   * Input variable for the initial items to be displayed in the select input.
+   * @type {any[]}
+   * @default []
+   */
+  @Input() public initialItems: any[] = [];
+
+  /**
+   * Input variable to determine whether the select input is required.
+   * @type {boolean}
+   * @default false
+   */
+  @Input() public required: boolean = false;
+
+  /**
+   * Input variable to determine whether tags can be added to the select input.
+   * @type {boolean}
+   * @default false
+   */
+  @Input() public addTag: boolean = false;
+
+  /**
+   * Input variable to determine whether the select input is disabled.
+   * @type {boolean}
+   * @default false
+   */
+  @Input() public disabled: boolean = false;
+
+  /**
+   * Input variable to determine whether the select input allows multiple selections.
+   * @type {boolean}
+   * @default false
+   */
+  @Input() public multiple: boolean = false;
+
+  /**
+   * Input variable specifying the property to bind as the label for items in the select input.
+   * @type {string}
+   * @default 'label'
+   */
+  @Input() public bindLabel: string = 'label';
+
+  /**
+   * Input variable specifying the property to bind as the value for items in the select input.
+   * @type {string}
+   * @default 'value'
+   */
+  @Input() public bindValue: string = 'value';
+
+  /**
+   * Input variable specifying append dropdown to body or any other element using css selector. For correct positioning body should have position:relative.
+   * @type {string}
+   * @default ''
+   */
+  @Input() public appendTo: string = '';
+
+  /**
+   * Output variable to emit changes when the select input value changes.
+   * @type {EventEmitter<any>}
+   */
+  @Output() public onChange: EventEmitter<any> = new EventEmitter<any>();
+
+  /**
+   * ViewChild for the ng-select component to act as helper to manipulate the ng-select component.
+   * @type {NgSelectComponent}
+   */
+  @ViewChild(NgSelectComponent) public readonly ngSelect!: NgSelectComponent;
+
+  /**
+   * Subject for handling typeahead events to trigger item queries based on the search keyword.
+   * @type {Subject<string>}
+   */
+  public readonly typeahead: Subject<string> = new Subject<string>();
+
+  /**
+   * Observable for handling item queries based on the search keyword.
+   * @type {Observable<any[]>}
+   */
+  protected readonly query$: Observable<any[]> = this.typeahead.pipe(
+    distinctUntilChanged(),
+    debounceTime(300),
+    tap(() => this.isLoading = true),
+    switchMap((k: string) => this.queryFunc(k).pipe(
+      map((result: any[]) => result.length === 0? this.initialItems : result),
+      catchError(() => of(this.initialItems))
+    )),
+    tap(() => this.isLoading = false)
+  );
+
+  /**
+   * Observable for displaying items in the select input.
+   * @type {Observable<any[]>}
+   */
+  public items$: Observable<any[]> = this.query$;
+
+  /**
+   * Boolean flag indicating whether the select input is loading.
+   * @type {boolean}
+   * @default false
+   */
+  public isLoading: boolean = false;
+
+  /**
+   * 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;
+
+  /**
+   * 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 = () => {};
+
+  constructor(
+    @Attribute('placeholder') public placeholder: string,
+    protected readonly ch: ChangeDetectorRef
+  ) { }
+
+  /**
+   * Lifecycle hook called when changes occur to input properties.
+   * Updates the items$ observable when the initialItems input changes.
+   * @param {SimpleChanges} changes - Object containing the changed properties.
+   */
+  public ngOnChanges(changes: SimpleChanges): void{
+    if (changes['initialItems']) this.items$ = concat(of(this.initialItems), this.query$);
+  }
+
+  /**
+   * 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 (this.ngSelect && !val) {
+      this.ngSelect.handleClearClick();
+    }
+    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.
+   * Emits the onChange event, updates the initialItems, and handles validation based on form control errors and label.
+   * @param {any} e - The event containing the new select input value.
+   */
+  public change(e?: any): void{
+    this.onChange.emit(e);
+    this.initialItems = e;
+
+    if (!this.isTouched) {
+      this.onTouched();
+      this.isTouched = true;
+    }
+    
+    if (!this.disabled) {
+      if (!e) this.value = null;
+      else {
+        this.value = !this.multiple? e[this.bindValue] : e.map((o: any) => o[this.bindValue]);
+      }
+
+      this.changed(this.value);
+      this.errorMsg = getFormErrorMessage(this.formControl.errors, this.label);
+    }
+  }
+}

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

@@ -0,0 +1,267 @@
+import { FormControl } from '@angular/forms';
+import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { of } from 'rxjs';
+import { FormSearchableSelectComponent } from './form-searchable-select.component';
+
+const ctrl = new FormControl();
+ctrl.markAsTouched();
+
+const meta: Meta<FormSearchableSelectComponent> = {
+  title: 'Form/Searchable Select',
+  tags: ['autodocs'],
+  component: FormSearchableSelectComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ NgSelectModule, FormSearchableSelectComponent ],
+    })
+  ],
+  argTypes: {
+    addTag: {
+      defaultValue: false,
+      description: 'Allows to create custom options.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'boolean'
+      },
+    },
+    bindLabel: {
+      defaultValue: 'label',
+      description: 'Binds the property of the items to be displayed as the label in the dropdown. Default `label`.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'string'
+      }
+    },
+    bindValue: {
+      defaultValue: 'value',
+      description: 'Binds the property of the items to be used as the value when an option is selected.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'string'
+      }
+    },
+    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'
+      },
+    },
+    initialItems: {
+      defaultValue: [],
+      description: 'The initial array of items to be displayed in the dropdown that available before fetching from the API.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        name: 'array',
+        value: {
+          name: 'string'
+        }
+      }
+    },
+    label: {
+      defaultValue: undefined,
+      description: 'The visible label associated with the select',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'string'
+      }
+    },
+    multiple: {
+      defaultValue: false,
+      description: 'Allows to select multiple items.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: false,
+        name: 'boolean'
+      },
+    },
+    placeholder: {
+      defaultValue: undefined,
+      description: 'Instructional text that shows before the select has a value.',
+      table: {
+        category: 'Input',
+        subcategory: 'Attribute'
+      },
+      type: {
+        required: false,
+        name: 'string'
+      },
+    },
+    queryFunc: {
+      defaultValue: undefined,
+      description: 'A function that takes a keyword as a parameter and returns an Observable of items based on the query.',
+      table: {
+        category: 'Input'
+      },
+      type: {
+        required: true,
+        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 }
+    },
+    items$: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    isLoading: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    isTouched: {
+      table: { disable: true },
+      control: { disable: true }
+    },
+    ngOnChanges: {
+      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 }
+    },
+    typeahead: {
+      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<FormSearchableSelectComponent>;
+
+export const Default: Story = {
+  args: {
+    label: 'Country',
+    initialItems: [{ label: 'Indonesia', value: 'ID' }, { label: 'Malaysia', value: 'MY' }],
+    queryFunc: (name: string) => {
+      return of([{ label: name, value: name }]);
+    }
+  },
+  render: (props) => ({
+    props,
+    template: `
+      <div style="width: 250px">
+        <up-searchable-select ${ argsToTemplate(props) } />
+      </div>
+    `
+  })
+};
+
+export const Required: Story = {
+  args: {
+    ...Default.args,
+    required: true
+  },
+  render: (props) => ({
+    props,
+    template: `
+      <div style="width: 250px">
+        <up-searchable-select ${ argsToTemplate(props) } />
+      </div>
+    `
+  })
+};
+
+export const Disabled: Story = {
+  args: {
+    ...Default.args,
+    disabled: true,
+  },
+  render: (props) => ({
+    props,
+    template: `
+      <div style="width: 250px">
+        <up-searchable-select ${ argsToTemplate(props) } />
+      </div>
+    `
+  })
+};
+
+export const Error: Story = {
+  args: {
+    ...Required.args,
+    errorMsg: 'Field is required',
+  },
+  render: (props) => ({
+    props,
+    template: `
+      <div style="width: 250px">
+        <up-searchable-select ${ argsToTemplate(props) } />
+      </div>
+    `
+  })
+};

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

@@ -0,0 +1,25 @@
+<label class="form-label d-flex align-items-center" [class.required]="required">
+    <ng-content select="[icon]"/>
+    <span>{{ label }}</span>
+</label>
+
+<ng-select
+    bindLabel="{{ bindLabel }}"
+    bindValue="{{ bindValue }}"
+    placeholder="{{ placeholder }}"
+    [virtualScroll]="true"
+    [items]="items"
+    [ngModel]="value"
+    [addTag]="addTag"
+    [multiple]="multiple"
+    [readonly]="disabled"
+    [appendTo]="appendTo"
+    [clearable]="clearable"
+    [searchable]="searchable"
+    [groupBy]="groupBy"
+    (change)="change($event);"
+/>
+
+@if (errorMsg) {
+    <label class="is-invalid">{{ errorMsg }}</label>
+}

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

@@ -0,0 +1 @@
+@import "./../../../../assets/scss/select.scss";