@ldquocc/dynamic-form 0.0.9 → 0.0.11

package/src/lib/shared/components/fields/input/input-formatted/input-formatted.component.html

@@ -1,31 +0,0 @@
-<div class="flex">
-  @if (modeSignal() === formModeEnum.View) {
-    @if (viewMode() === viewModeEnum.form) {
-      <input nz-input [value]="inputDisplayValues()" class="modeView" />
-    }
-    @if (viewMode() === viewModeEnum.text) {
-      <span class="modeView">{{ inputDisplayValues() }}</span>
-    }
-  } @else {
-    <!-- [value]="value" -->
-
-    <input
-      #inputFormatted
-      nz-input
-      class="input-control custom-input"
-      [placeholder]="displayPlaceholder()"
-      [disabled]="isDisabled"
-      (input)="handleChangeInputText()"
-      (blur)="onTouched()"
-    />
-  }
-
-  <!-- Suffixes -->
-  @if (field().suffixes.length > 0) {
-    @for (suffix of field().suffixes; track $index) {
-      @if (suffix.visibleOn?.includes(this.modeSignal())) {
-        <app-suffix [suffixConfig]="suffix"> </app-suffix>
-      }
-    }
-  }
-</div>

package/src/lib/shared/components/fields/input/input-formatted/input-formatted.component.scss

@@ -1,3 +0,0 @@
-.input-text-wrapper {
-  display: flex;
-}

package/src/lib/shared/components/fields/input/input-formatted/input-formatted.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { InputFormattedComponent } from './input-formatted.component';
-
-describe('InputTextComponent', () => {
-  let component: InputFormattedComponent;
-  let fixture: ComponentFixture<InputFormattedComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [InputFormattedComponent],
-    });
-    fixture = TestBed.createComponent(InputFormattedComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/shared/components/fields/input/input-formatted/input-formatted.component.ts

@@ -1,148 +0,0 @@
-import {
-  Component,
-  computed,
-  effect,
-  ElementRef,
-  forwardRef,
-  signal,
-  untracked,
-  viewChild,
-} from "@angular/core";
-import { NG_VALUE_ACCESSOR } from "@angular/forms";
-import {
-  createInputPlaceholder,
-  createPlaceholder,
-} from "../../../../utils/dynamic-form/dynamic-form";
-import { BaseValueAccessor } from "../../../../base/base-value-accessor";
-import { FieldTypeEnum } from "../../../../enums/fields";
-import {
-  CORE_MODULES,
-  FORM_MODULES,
-  NO_INFO_TEXT,
-} from "../../../../consts/common";
-import { ControlTypeEnum } from "../../../../enums/controls";
-import { SuffixComponent } from "../../components/suffix/suffix.component";
-import { InputFormattedField } from "../../../../models/fields/input/input-formatted-field.model";
-import AutoNumeric from "@zeedhi/autonumeric";
-import { AutoNumericOptionsFactory } from "../../../../factories/auto-numeric-options.factory";
-import { NzInputModule } from "ng-zorro-antd/input";
-
-const zorroModules = [NzInputModule];
-@Component({
-  selector: "app-input-formatted",
-  standalone: true,
-  imports: [...CORE_MODULES, ...FORM_MODULES, ...zorroModules, SuffixComponent],
-  templateUrl: "./input-formatted.component.html",
-  styleUrls: ["./input-formatted.component.scss"],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => InputFormattedComponent),
-      multi: true,
-    },
-  ],
-})
-export class InputFormattedComponent extends BaseValueAccessor<string> {
-  readonly field = computed(() => {
-    const base = this.fieldInput();
-    if (
-      !(base instanceof InputFormattedField) ||
-      (base.type !== FieldTypeEnum.InputFormatted &&
-        base.controlType !== ControlTypeEnum.Input)
-    ) {
-      throw new Error("Expected InputFormattedField");
-    }
-    return base;
-  });
-
-  private autoNumeric?: AutoNumeric;
-
-  readonly inputFormattedEle =
-    viewChild<ElementRef<HTMLInputElement>>("inputFormatted");
-
-  readonly autoNumericOptions = computed(() =>
-    AutoNumericOptionsFactory.create(this.field()),
-  );
-
-  readonly internalValue = signal<string>("");
-
-  readonly inputDisplayValues = computed(() => {
-    const isView = this.isView();
-    const autoNumericOptions = this.autoNumericOptions();
-    const value = this.internalValue();
-    if (isView) {
-      const viewValue = value
-        ? AutoNumeric.format(value, autoNumericOptions)
-        : undefined;
-      return viewValue || NO_INFO_TEXT;
-    }
-    return "";
-  });
-
-  readonly autoNumericLifeCycleEffect = effect((onCleanup) => {
-    const nativeEle = this.inputFormattedEle()?.nativeElement;
-    const isAddOrEdit = this.isAddOrEdit();
-    const autoNumericOptions = untracked(() => this.autoNumericOptions());
-    const value = untracked(() => this.valueSignal());
-
-    // 1. TẠO BIẾN CỤC BỘ Ở ĐÂY (Đây là mấu chốt)
-    let localAutoNumeric: AutoNumeric | undefined;
-
-    if (nativeEle && isAddOrEdit) {
-      // 2. Gán vào biến cục bộ
-      localAutoNumeric = new AutoNumeric(nativeEle, value, autoNumericOptions);
-      // 3. Vẫn cập nhật biến class để xài ở chỗ khác
-      this.autoNumeric = localAutoNumeric;
-    }
-
-    onCleanup(() => {
-      // 4. CHỈ REMOVE BIẾN CỤC BỘ (Không dùng this.autoNumeric ở đây)
-      if (localAutoNumeric) {
-        localAutoNumeric?.remove();
-
-        // Dọn dẹp biến class nếu nó đang giữ cái vừa bị remove
-        if (this.autoNumeric === localAutoNumeric) {
-          this.autoNumeric = undefined;
-        }
-      }
-    });
-  });
-
-  constructor() {
-    super();
-  }
-
-  // Xử lý tạo placeholder text tự động nếu chưa truyền placeholder vào config của field
-  override resolvePlaceholderText(): string {
-    const isDisabled = this.field().isDisabled;
-    return isDisabled ? NO_INFO_TEXT : createInputPlaceholder(this.field());
-  }
-
-  // event: Event;
-  handleChangeInputText(): void {
-    const { key } = this.field();
-    // const inputValue = (event.target as HTMLInputElement).value;
-
-    // Lấy giá trị RAW chuẩn từ AutoNumeric (không lấy event.target.value nữa)
-    // Dùng fallback string rỗng nếu chưa có
-    const rawNumericValue = this.autoNumeric?.getNumericString() || "";
-
-    this.propagateValue(rawNumericValue);
-
-    // Gán data vào đầu ra của form.
-    this.patchFormData(key, rawNumericValue.trim());
-  }
-
-  // Chỗ này vẫn xử lý bình thường cho CVA không liên quan đến AutoNumeric.
-  protected override writeValueToView(value: string): void {
-    // 2. NẾU AutoNumeric ĐÃ ĐƯỢC TẠO (đang ở nhánh Add/Edit), thì ép nó format lại giá trị mới
-    if (this.autoNumeric) {
-      this.autoNumeric.set(value);
-    }
-
-    const { key } = untracked(() => this.field());
-
-    // Gán data vào đầu ra của form.
-    this.patchFormData(key, value);
-  }
-}

package/src/lib/shared/components/fields/input/input-password/input-password.component.html

@@ -1,18 +0,0 @@
-<nz-input-group [nzSuffix]="suffixTemplate">
-  <input
-    nz-input
-    [value]="value"
-    [type]="passwordVisible ? 'text' : 'password'"
-    autocomplete="new-password"
-    [placeholder]="displayPlaceholder()"
-    (input)="handleChangeInputPassword($event)"
-    (blur)="onTouched()"
-  />
-</nz-input-group>
-<ng-template #suffixTemplate>
-  <span
-    nz-icon
-    [nzType]="passwordVisible ? 'eye-invisible' : 'eye'"
-    (click)="passwordVisible = !passwordVisible"
-  ></span>
-</ng-template>

package/src/lib/shared/components/fields/input/input-password/input-password.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { InputPasswordComponent } from './input-password.component';
-
-describe('InputPasswordComponent', () => {
-  let component: InputPasswordComponent;
-  let fixture: ComponentFixture<InputPasswordComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [InputPasswordComponent],
-    });
-    fixture = TestBed.createComponent(InputPasswordComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/shared/components/fields/input/input-password/input-password.component.ts

@@ -1,56 +0,0 @@
-import { Component, computed, effect, forwardRef } from "@angular/core";
-import { InputPasswordField } from "../../../../models/fields/input";
-import { NG_VALUE_ACCESSOR } from "@angular/forms";
-import { NzInputModule } from "ng-zorro-antd/input";
-import { BaseValueAccessor } from "../../../../base/base-value-accessor";
-import { NzIconModule } from "ng-zorro-antd/icon";
-import { createInputPlaceholder } from "../../../../utils/dynamic-form/dynamic-form";
-import { FieldTypeEnum } from "../../../../enums/fields";
-import { ControlTypeEnum } from "../../../../enums/controls";
-
-const ZORRO_MODULES = [NzInputModule, NzIconModule];
-
-@Component({
-  selector: "app-input-password",
-  standalone: true,
-  imports: [...ZORRO_MODULES],
-  templateUrl: "./input-password.component.html",
-  styleUrls: ["./input-password.component.scss"],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => InputPasswordComponent),
-      multi: true,
-    },
-  ],
-})
-export class InputPasswordComponent extends BaseValueAccessor<string> {
-  readonly field = computed(() => {
-    const base = this.fieldInput();
-    if (
-      !(base instanceof InputPasswordField) ||
-      (base.type !== FieldTypeEnum.InputPassword &&
-        base.controlType !== ControlTypeEnum.Input)
-    ) {
-      throw new Error("Expected InputPasswordField");
-    }
-    return base;
-  });
-
-  passwordVisible = false;
-
-  constructor() {
-    super();
-  }
-
-  // Xử lý tạo placeholder text tự động nếu chưa truyền placeholder vào config của field
-  override resolvePlaceholderText(): string {
-    return createInputPlaceholder(this.field());
-  }
-
-  handleChangeInputPassword(event: Event): void {
-    const inputValue = (event.target as HTMLInputElement).value;
-    this.propagateValue(inputValue);
-    this.patchFormData(this.fieldKey(), inputValue);
-  }
-}

package/src/lib/shared/components/fields/input/input-text/input-text.component.html

@@ -1,73 +0,0 @@
-<div class="flex">
-  @if (modeSignal() === formModeEnum.View) {
-    @if (field().viewMode === viewModeEnum.form) {
-      @if (field().isCurrency) {
-        <input
-          nz-input
-          [ngModel]="viewDisplayValue()"
-          class="modeView"
-          [currencyMask]="{
-            prefix: '',
-            suffix: ' VND',
-            thousands: ',',
-            decimal: '.',
-            precision: 2,
-            align: 'left',
-          }"
-        />
-      } @else {
-        <input nz-input [value]="viewDisplayValue()" class="modeView" />
-      }
-    }
-    @if (field().viewMode === viewModeEnum.text) {
-      @if (field().isCurrency) {
-        <span class="modeView">
-          {{
-            viewDisplayValue() | currency: "VND" : "symbol" : "1.0-0" : "vi-VN"
-          }}
-        </span>
-      } @else {
-        <span class="modeView">{{ viewDisplayValue() }}</span>
-      }
-    }
-  } @else {
-    @if (field().isCurrency) {
-      <input
-        nz-input
-        class="input-control"
-        [currencyMask]="{
-          prefix: '',
-          suffix: ' VND',
-          thousands: ',',
-          decimal: '.',
-          precision: 2,
-          align: 'left',
-        }"
-        [(ngModel)]="value"
-        [placeholder]="displayPlaceholder()"
-        [disabled]="isDisabled"
-        (ngModelChange)="handleChangeFormValue($event)"
-        (blur)="onTouched()"
-      />
-    } @else {
-      <input
-        nz-input
-        class="input-control"
-        [value]="value"
-        [placeholder]="displayPlaceholder()"
-        [disabled]="isDisabled"
-        (input)="handleChangeInputText($event)"
-        (blur)="onTouched()"
-      />
-    }
-  }
-
-  <!-- Suffixes -->
-  @if (field().suffixes.length > 0) {
-    @for (suffix of field().suffixes; track $index) {
-      @if (suffix.visibleOn?.includes(this.modeSignal())) {
-        <app-suffix [suffixConfig]="suffix" [formId]="formId"> </app-suffix>
-      }
-    }
-  }
-</div>

package/src/lib/shared/components/fields/input/input-text/input-text.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { InputTextComponent } from './input-text.component';
-
-describe('InputTextComponent', () => {
-  let component: InputTextComponent;
-  let fixture: ComponentFixture<InputTextComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [InputTextComponent],
-    });
-    fixture = TestBed.createComponent(InputTextComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

package/src/lib/shared/components/fields/input/input-text/input-text.component.ts

@@ -1,98 +0,0 @@
-import {
-  Component,
-  computed,
-  effect,
-  forwardRef,
-  inject,
-  untracked,
-} from "@angular/core";
-import { FormsModule, NG_VALUE_ACCESSOR } from "@angular/forms";
-import { InputTextField } from "../../../../models/fields/input";
-import {
-  createInputPlaceholder,
-  createPlaceholder,
-} from "../../../../utils/dynamic-form/dynamic-form";
-import { BaseValueAccessor } from "../../../../base/base-value-accessor";
-import { FieldTypeEnum } from "../../../../enums/fields";
-import { NO_INFO_TEXT } from "../../../../consts/common";
-import { ControlTypeEnum } from "../../../../enums/controls";
-import { SuffixComponent } from "../../components/suffix/suffix.component";
-import { NzInputModule } from "ng-zorro-antd/input";
-import { CommonModule, CurrencyPipe } from "@angular/common";
-import { NgxCurrencyDirective } from "ngx-currency";
-
-const ZORRO_MODULES = [
-  NzInputModule,
-  NgxCurrencyDirective,
-  CurrencyPipe,
-  CommonModule,
-  FormsModule,
-];
-const COMPONENTS = [SuffixComponent];
-@Component({
-  selector: "app-input-text",
-  standalone: true,
-  imports: [...ZORRO_MODULES, ...COMPONENTS],
-  templateUrl: "./input-text.component.html",
-  styleUrls: ["./input-text.component.scss"],
-  providers: [
-    {
-      provide: NG_VALUE_ACCESSOR,
-      useExisting: forwardRef(() => InputTextComponent),
-      multi: true,
-    },
-  ],
-})
-export class InputTextComponent extends BaseValueAccessor<string> {
-  readonly field = computed(() => {
-    const base = this.fieldInput();
-    if (
-      !(base instanceof InputTextField) ||
-      (base.type !== FieldTypeEnum.InputText &&
-        base.controlType !== ControlTypeEnum.Input)
-    ) {
-      throw new Error("Expected InputTextField");
-    }
-    return base;
-  });
-
-  readonly viewDisplayValue = computed(() => {
-    // 1. Nếu không phải View thì không cần quan tâm text này
-    if (!this.isView()) return "";
-
-    // 2. Lấy giá trị từ valueSignal
-    const val = this.valueSignal();
-    return val ? val : NO_INFO_TEXT;
-  });
-
-  constructor() {
-    super();
-  }
-
-  // Xử lý tạo placeholder text tự động nếu chưa truyền placeholder vào config của field
-  override resolvePlaceholderText(): string {
-    return createInputPlaceholder(this.field());
-  }
-
-  // Xử lý khi nhập giá trị mới vào input
-  handleChangeInputText(event: Event): void {
-    const inputValue = (event.target as HTMLInputElement).value;
-    this.propagateValue(inputValue);
-
-    // Gán data vào đầu ra của form.
-    this.patchFormData(this.fieldKey(), inputValue);
-  }
-
-  handleChangeFormValue(value: number): void {
-    const inputValue = value?.toString();
-    this.propagateValue(inputValue);
-    this.patchFormData(this.fieldKey(), inputValue);
-  }
-
-  protected override writeValueToView(value: string): void {
-    if (!this.isAddOrEdit()) return;
-
-    // Gán data vào đầu ra của form.
-    this.patchFormData(this.fieldKey(), value);
-  }
-}

package/src/lib/shared/components/fields/select/multi-select/multi-select.component.html

@@ -1,73 +0,0 @@
-<div class="flex">
-  @if (modeSignal() === formModeEnum.View) {
-    @if (viewMode() === viewModeEnum.form) {
-      @if (field().value!.length > 0) {
-        <nz-select
-          nzAllowClear
-          [nzMode]="'multiple'"
-          [ngModel]="viewDisplayValue()"
-          [nzMaxTagCount]="field().maxTagCount!"
-          [nzMaxMultipleCount]="field().maxMultipleCount!"
-          [nzDisabled]="true"
-        >
-          @for (displayOption of viewDisplayValue(); track $index) {
-            <nz-option [nzValue]="displayOption" [nzLabel]="displayOption">
-            </nz-option>
-          }
-        </nz-select>
-      } @else {
-        <input nz-input [value]="displayNoValueText" [disabled]="true" />
-      }
-    }
-
-    @if (viewMode() === viewModeEnum.text) {
-      @if (viewDisplayValue().length) {
-        <ul class="view-list">
-          @for (label of viewDisplayValue(); track $index) {
-            <li>{{ label }}</li>
-          }
-        </ul>
-      } @else {
-        <span class="modeView">{{ displayNoValueText }}</span>
-      }
-    }
-  } @else {
-    <nz-select
-      [id]="fieldKey()"
-      nzShowSearch
-      nzAllowClear
-      [nzDisabled]="disabled()"
-      [nzMode]="'multiple'"
-      [nzPlaceHolder]="displayPlaceholder()"
-      [nzMaxTagCount]="field().maxTagCount!"
-      [nzMaxMultipleCount]="field().maxMultipleCount!"
-      [nzSuffixIcon]="optionsResource.isLoading() ? loadingIcon : null"
-      [ngModel]="value"
-      (ngModelChange)="handleChangeOptions($event)"
-    >
-      @for (
-        option of options();
-        track `${option[this.field().bindValue]}-${$index}`
-      ) {
-        <nz-option
-          [nzValue]="transformOptionValue(option)"
-          [nzLabel]="getOptionLabel(option)"
-        >
-        </nz-option>
-      }
-    </nz-select>
-
-    <ng-template #loadingIcon>
-      <nz-spin nzSimple [nzSize]="'small'"></nz-spin>
-    </ng-template>
-  }
-
-  <!-- Suffixes -->
-  @if (field().suffixes.length > 0) {
-    @for (suffix of field().suffixes; track $index) {
-      @if (suffix.visibleOn?.includes(this.modeSignal())) {
-        <app-suffix [suffixConfig]="suffix" [formId]="formId"> </app-suffix>
-      }
-    }
-  }
-</div>

package/src/lib/shared/components/fields/select/multi-select/multi-select.component.scss

@@ -1,21 +0,0 @@
-.view-list {
-  margin-bottom: 0;
-  padding-inline-start: 24px !important;
-}
-:host ::ng-deep {
-  .ant-input[disabled] {
-    background-color: white;
-    color: #575757 !important;
-    // font-size: 12px;
-  }
-  .ant-select-multiple.ant-select-disabled.ant-select:not(
-      .ant-select-customize-input
-    )
-    .ant-select-selector {
-    background: #ffffff;
-  }
-  .ant-select-disabled.ant-select-multiple .ant-select-selection-item {
-    color: #575757;
-    // font-size: 12px;
-  }
-}

package/src/lib/shared/components/fields/select/multi-select/multi-select.component.spec.ts

@@ -1,21 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { MultiSelectComponent } from './multi-select.component';
-
-describe('MultiSelectComponent', () => {
-  let component: MultiSelectComponent;
-  let fixture: ComponentFixture<MultiSelectComponent>;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [MultiSelectComponent],
-    });
-    fixture = TestBed.createComponent(MultiSelectComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});