@unipin/angular-applet 18.9.5 → 18.9.6

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

@@ -1,223 +0,0 @@
-import { Attribute, ChangeDetectorRef, ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { AbstractControl, ControlValueAccessor, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator } from '@angular/forms';
-import { NgSelectModule } from '@ng-select/ng-select';
-import { getFormErrorMessage } from '../../../utils';
-
-@Component({
-  standalone: true,
-  selector: 'up-select',
-  styleUrl: './form-select.component.scss',
-  templateUrl: './form-select.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: { 
-    class: 'd-block' 
-  },
-  imports: [
-    FormsModule,
-    NgSelectModule
-  ],
-  providers: [
-    {
-      multi: true,
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: FormSelectComponent
-    },
-    {
-      multi: true,
-      provide: NG_VALIDATORS,
-      useExisting: FormSelectComponent
-    }
-  ]
-})
-export class FormSelectComponent implements ControlValueAccessor, Validator {
-
-  /**
-   * Input variable for the items to be displayed in the select input.
-   * @type {any[]}
-   * @required
-   */
-  @Input({ required: true }) public items!: 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 to determine whether the select input allows multiple selections.
-   * @type {boolean}
-   * @default false
-   */
-  @Input() public multiple: 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 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 is searchable.
-   * @type {boolean}
-   * @default false
-   */
-  @Input() public searchable: 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 = '';
-
-  /**
-   * Input variable specifying how to group the items in the select input.
-   * @type {string}
-   * @default ''
-   */
-  @Input() public groupBy: string = '';
-
-  /**
-   * 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 onChange: (_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
-  ) { }
-
-  /**
-   * 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.onChange = 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;
-  }
-
-  /**
-   * Event handler for changes in the select input.
-   * Emits the onChange event 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{
-    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.onChange(this.value);
-      this.errorMsg = getFormErrorMessage(this.formControl.errors, this.label);
-    }
-  }
-}

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

@@ -1,220 +0,0 @@
-import { FormControl } from '@angular/forms';
-import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
-import { NgSelectModule } from '@ng-select/ng-select';
-import { FormSelectComponent } from './form-select.component';
-
-const ctrl = new FormControl();
-ctrl.markAsTouched();
-
-const meta: Meta<FormSelectComponent> = {
-  title: 'Form/Select',
-  tags: ['autodocs'],
-  component: FormSelectComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [ 
-        NgSelectModule, 
-        FormSelectComponent 
-      ],
-    })
-  ],
-  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. By default binds to whole object.',
-      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 input.',
-      table: {
-        category: 'Input'
-      },
-      type: {
-        required: false,
-        name: 'boolean'
-      },
-    },
-    items: {
-      defaultValue: undefined,
-      description: 'Array of items to be displayed in the dropdown.',
-      table: {
-        category: 'Input'
-      },
-      type: {
-        required: true,
-        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'
-      },
-    },
-    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'
-      },
-    },
-    searchable: {
-      defaultValue: true,
-      description: 'A boolean attribute that, when present, enables a search input within the dropdown. Default `true`',
-      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 }
-    },
-    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<FormSelectComponent>;
-
-export const Default: Story = {
-  args: {
-    label: 'Country',
-    items: [
-      { label: 'Indonesia', value: 'ID' },
-      { label: 'Malaysia', value: 'MY' },
-      { label: 'Thailand', value: 'TH' },
-      { label: 'Philipine', value: 'PH' },
-    ],
-  },
-};
-
-export const Required: Story = {
-  args: {
-    ...Default.args,
-    required: true
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    ...Default.args,
-    disabled: true,
-  },
-};
-
-export const Error: Story = {
-  args: {
-    ...Required.args,
-    errorMsg: 'Field is required',
-  },
-};

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

@@ -1,9 +0,0 @@
-<label class="form-label d-flex align-items-center">
-    <ng-content select="[icon]"/>
-    <span>{{ label }}</span>
-</label>
-<textarea autocomplete="{{ autocomplete }}" placeholder="{{ placeholder }}" rows="3" class="form-control" [required]="required" [disabled]="disabled" [value]="value" (change)="change($event.target)"></textarea>
-
-@if (errorMsg) {
-    <label class="is-invalid">{{ errorMsg }}</label>
-}

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

@@ -1,146 +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 { getFormErrorMessage } from '../../../utils';
-
-@Component({
-  standalone: true,
-  selector: 'up-textarea',
-  styleUrl: './form-textarea.component.scss',
-  templateUrl: './form-textarea.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {
-    class: 'd-block'
-  },
-  providers: [
-    {
-      multi: true,
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: FormTextareaComponent
-    },
-    {
-      multi: true,
-      provide: NG_VALIDATORS,
-      useExisting: FormTextareaComponent
-    }
-  ]
-})
-export class FormTextareaComponent implements ControlValueAccessor, Validator {
-
-  /**
-   * Input variable to determine the initial value of the textarea.
-   * @type {(string | null)}
-   * @default undefined
-   */
-  @Input() public value?: string | null;
-
-  /**
-   * Input variable to determine whether the textarea is required.
-   * @type {boolean}
-   * @default false
-   */
-  @Input() public required: boolean = false;
-
-  /**
-   * Input variable to determine whether the textarea is disabled.
-   * @type {boolean}
-   * @default false
-   */
-  @Input() public disabled: boolean = false;
-
-  /**
-   * Boolean flag indicating whether the textarea has been touched.
-   * @type {boolean}
-   * @default false
-   */
-  public isTouched: boolean = false;
-
-  /**
-   * Error message associated with the textarea.
-   * @type {string}
-   * @default undefined
-   */
-  public errorMsg!: string;
-
-  /**
-   * The form control associated with the textarea.
-   * @type {AbstractControl}
-   */
-  protected formControl!: AbstractControl;
-
-  /**
-   * Callback function to handle value changes in the textarea.
-   * @type {(_val: any) => void}
-   */
-  protected onChange: (_val: any) => void = (_val: any) => {};
-
-  /**
-   * Callback function to handle touch events in the textarea.
-   * @type {() => void}
-   */
-  protected onTouched: () => void = () => {};
-
-  constructor(
-    @Attribute('label') public label: string,
-    @Attribute('placeholder') public placeholder: string,
-    @Attribute('autocomplete') public autocomplete: 'url' | 'on' | 'off' | 'street-address' | 'address-line1' | 'address-line2' | 'address-line3' | 'address-level4' | 'address-level3' | 'address-level2' | 'address-level1',
-    protected readonly ch: ChangeDetectorRef
-  ) { }
-
-  /**
-   * Registers a callback function to be called when the textarea 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 textarea is touched.
-   * @param {() => void} fn - Callback function for touch events.
-   */
-  public registerOnTouched(fn: any): void{ this.onTouched = fn; }
-
-  /**
-   * Writes a new value to the textarea.
-   * @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 textarea.
-   * @param {boolean} d - The new disabled state.
-   */
-  public setDisabledState?(d: boolean): void{ 
-    this.disabled = d; 
-    this.ch.markForCheck();
-  }
-
-  /**
-   * Validates the textarea.
-   * @param {AbstractControl} control - The abstract control representing the textarea.
-   * @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 textarea.
-   * Emits the onChange event and handles validation based on form control errors and label.
-   * @param {any} value - The new textarea value.
-   */
-  public change({ value }: any): void{
-    if (!this.isTouched) {
-      this.onTouched();
-      this.isTouched = true;
-    }
-
-    if (!this.disabled) {
-      this.value = value;
-      this.onChange(this.value);
-      this.errorMsg = getFormErrorMessage(this.formControl.errors, this.label);
-    }
-  }
-}