ngx-axis-appforge 0.0.0

package/axis-components/table/table.ts

@@ -0,0 +1,204 @@
+import { ChangeDetectionStrategy, Component, computed, effect, ElementRef, model, signal, ViewChild } from '@angular/core';
+import { TableFieldOptions, TableOptions } from './table.options';
+import { Base, DynamicDirective, ScopeDirective } from 'ngx-axis-appforge/core';
+import { NzTableFilterFn, NzTableFilterList, NzTableModule } from 'ng-zorro-antd/table';
+import { FormsModule } from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { Select } from './select';
+import { Expand } from './expand';
+import { TableSetter } from './table-setter/table-setter';
+import { NzResizableModule } from 'ng-zorro-antd/resizable';
+import { NzFlexModule } from 'ng-zorro-antd/flex';
+
+
+@Component({
+  selector: 'axis-table',
+  imports: [NzTableModule, ScopeDirective, DynamicDirective, FormsModule, CommonModule, TableSetter, NzResizableModule, NzFlexModule],
+  templateUrl: './table.html',
+  styleUrl: './table.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Table extends Base<TableOptions> {
+
+  constructor(private elementRef: ElementRef) {
+    super();
+    effect(() => {
+      this.fields().forEach((f, i) => {
+        this.bindWithConfig(this.options.fields()[i], { options: f, tag: `bindField.${i}` });
+      });
+    });
+    effect(() => {
+      clearInterval(this.timer);
+      this.refreshScoll();
+      if (this.options.heightExpanded()) {
+        this.timer = setInterval(() => {
+          this.refreshScoll();
+        }, 500);
+      }
+    });
+  }
+
+  protected override options: TableOptions = new TableOptions();
+
+  readonly displayData = computed(() => this.buildDisplayData());
+  select = new Select(this.options, this.displayData, this.getScope(), () => this.onSelectedChange());
+  expand = new Expand();
+  readonly pageSizeOptions = computed(() => this.options.pageSizeOptions().split(",").map(size => +size));
+  readonly scroll = signal<{ x: string, y: string }>({ x: "", y: "" });
+  readonly fields = computed(() => this.buildFields());
+  readonly displayFields = computed(() => this.buildDisplayFields());
+  readonly rowtotal = signal<number>(0);
+  readonly pageIndex = model<number>(1);
+  readonly fieldsControlsMap = computed(() => this.buildFieldControls());
+  readonly rowActions = computed(() => this.actionsFieldWidth() > 0 ? this.options.rowActions() : []);
+  readonly leaderFieldWidth = computed(() => this.buildLeaderFieldWidth());
+  readonly actionsFieldWidth = computed(() => this.buildActionsFieldWidth());
+  readonly fixFields = signal<TableFieldOptions[]>([]);
+  timer?: number;
+
+  resizeHandleOffsetX(field: TableFieldOptions): number {
+    if (field.sortAble() && field.filterAble()) {
+      return 42;
+    } else if (field.sortAble()) {
+      return 22;
+    } else if (field.filterAble()) {
+      return 28;
+    }
+    return 0;
+  }
+
+  @ViewChild(TableSetter)
+  tableSetter?: TableSetter;
+
+  trackByKeyField = (i: number, data: any): any => {
+    return data[this.options.keyField()];
+  }
+
+  private buildDisplayData(): any[] | null {
+    return this.options.data();
+  }
+
+  private buildFields(): TableFieldOptions[] {
+    return this.options.fields().map(opt => new TableFieldOptions());
+  }
+
+  private buildDisplayFields(): TableFieldOptions[] {
+    return (this.options.showTableTitleSet() ? this.fixFields() : this.fields()).filter(f => f.inuse());
+  }
+
+  private buildFieldControls(): { [field: string]: { sortFn?: any, filterItems?: NzTableFilterList, filterFn?: any } | undefined } {
+    const res: { [field: string]: { sortFn?: any, filterItems?: NzTableFilterList, filterFn?: any } } = {};
+    for (const field of this.displayFields()) {
+      res[field.field()] = {};
+      if (field.filterAble()) {
+        const valueSet = new Set<any>();
+        for (const row of this.displayData() ?? []) {
+          valueSet.add(row[field.field()]);
+        }
+        res[field.field()].filterItems = Array.from(valueSet).map(v => ({ text: v, value: v }));
+        res[field.field()].filterFn = (fd: any[] | any, row: any) => {
+          if (fd instanceof Array) {
+            return fd.includes(row[field.field()]);
+          } else {
+            return fd == row[field.field()];
+          }
+        };
+      }
+      if (field.sortAble()) {
+        if (this.options.data()?.some((r: any) => r[field.field()] != undefined && typeof (r[field.field()]) == "number")) {
+          res[field.field()].sortFn = (a: any, b: any) => a[field.field()] - b[field.field()];
+        } else {
+          res[field.field()].sortFn = (a: any, b: any) => {
+            return ((a[field.field()] || "") + "").localeCompare(b[field.field()])
+          };
+        }
+      }
+    }
+    return res;
+  }
+
+  filterFn: NzTableFilterFn = (fd, row) => {
+    console.log(111, fd, row)
+    return false;
+  };
+
+  private buildLeaderFieldWidth(): number {
+    switch (this.options.size()) {
+      case "small":
+        return 45;
+      case "middle":
+        return 50;
+      default:
+        return 65;
+    }
+  }
+
+  private buildActionsFieldWidth(): number {
+    if (this.options.actionsFieldWidth() == 0 || this.options.rowActions().length == 0) {
+      return 0;
+    }
+    return this.options.actionsFieldWidth() ?? this.options.rowActions().length * 60;
+  }
+
+  private refreshScoll() {
+    let x = 0;
+    if (this.options.showCheckbox()) {
+      x += this.leaderFieldWidth();
+    }
+    if (this.options.showExpand()) {
+      x += this.leaderFieldWidth();
+    }
+    if (this.options.showOrder()) {
+      x += this.leaderFieldWidth();
+    }
+    this.displayFields().forEach(f => {
+      if (f.width()) {
+        x += f.width()!;
+      } else {
+        x += 120;
+      }
+    });
+    x += this.actionsFieldWidth();
+    let y = "";
+    if (this.options.heightExpanded()) {
+      const element = this.elementRef.nativeElement as HTMLElement;
+      const table = element.querySelector("nz-table");
+      const head = element.querySelector("table[nz-table-content]>thead.ant-table-thead");
+      const headRect = head?.getBoundingClientRect();
+      const innerTableRect = head?.parentElement?.parentElement?.parentElement?.getBoundingClientRect();
+      const outterTableRect = table?.getBoundingClientRect();
+      if (headRect) {
+        // y = 视口高度(window.innerHeight) - 表头底部位置(headRect.bottom) - 表尾部高度(outterTableRect.bottom - innerTableRect.bottom)
+        y = `${window.innerHeight - (headRect?.bottom ?? 0) - (outterTableRect?.bottom ?? 0) + (innerTableRect?.bottom ?? 0)}px`;
+      }
+    }
+    this.scroll.set({ x: x + "px", y: y });
+  }
+
+  currentPageDataChange() { }
+
+  onPageChange() {
+  }
+
+  filterChange(field: string, event: any) {
+
+  }
+  sortChange(field: string, event: any) {
+
+  }
+
+  rowspan(field: string, index: number): number {
+    return 1;
+  }
+
+  onSelectedChange() {
+    if (this.hasEventHandler("onSelectedChange")) {
+      this.triggeEvents("onSelectedChange", { selectedRows: this.select.getSelectedData() }).subscribe();
+    }
+  }
+
+  override ngOnDestroy(): void {
+    super.ngOnDestroy();
+    clearInterval(this.timer);
+  }
+}

package/axis-components/text/design/config.ts

@@ -0,0 +1,30 @@
+import { NextInfo, DesignBuildResult, DesignBindElementsResult, DesignConfig, OptionsNode, nameCode, SimpleMenu } from "ngx-axis-appforge/core";
+import { Setting } from "./setting/setting";
+
+export const Config: DesignConfig = {
+
+    componentName: "文本",
+    buildOptionsNodes(nextInfo: NextInfo): DesignBuildResult {
+        return {
+            treeNode: new OptionsNode({
+                parentId: nextInfo.parentId,
+                scopeId: nextInfo.scopeId,
+                name: nameCode("文本", nextInfo.currentObject.data),
+                canSetting: true,
+                canDrag: true,
+                dragType: "component",
+                parentObj: nextInfo.parentObject,
+                indexOfParentObj: nextInfo.indexOfParent,
+                rootOptions: nextInfo.currentObject,
+                settingType: Setting,
+                contextMenu: SimpleMenu,
+                icon: "file-text"
+            })
+        };
+    },
+    bindElementsOptionsNode(element: HTMLElement, options: any): DesignBindElementsResult {
+        return {
+            [options.id]: { element }
+        }
+    },
+};

package/axis-components/text/design/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "config.ts"
+    }
+}

package/axis-components/text/design/setting/setting.html

@@ -0,0 +1,84 @@
+<form [formGroup]="fg" nz-form>
+    <nz-collapse [nzBordered]="false">
+        <nz-collapse-panel nzHeader="基本设置" nzActive>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    转换器
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <nz-select formControlName="transfer">
+                        <nz-option nzLabel="不转换" nzValue="text"></nz-option>
+                        <nz-option nzLabel="日期/时间" nzValue="date"></nz-option>
+                        <nz-option nzLabel="数值" nzValue="number"></nz-option>
+                        <nz-option nzLabel="百分比" nzValue="percent"></nz-option>
+                        <nz-option nzLabel="深层对象" nzValue="deepObj"></nz-option>
+                    </nz-select>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue().transfer == "date") {
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    快捷设置
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <nz-space [nzSplit]="split">
+                        <ng-template #split>
+                            <nz-divider nzType="vertical"></nz-divider>
+                        </ng-template>
+                        <a *nzSpaceItem (click)="setDefault('datetime')">日期+时间</a>
+                        <a *nzSpaceItem (click)="setDefault('date')">日期</a>
+                        <a *nzSpaceItem (click)="setDefault('time')">时间</a>
+                    </nz-space>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    输出日期格式
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <input nz-input formControlName="dateFormat" />
+                </nz-form-control>
+            </nz-form-item>
+            }@else if (formValue().transfer == "number"||formValue().transfer == "percent") {
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    最短整数位数
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <nz-input-number style="width: 100%;" nzMin="1"
+                        formControlName="integerMinLength"></nz-input-number>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    小数位数长度
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <nz-slider nzRange formControlName="decimalRange" [nzMax]="10"></nz-slider>
+                </nz-form-control>
+            </nz-form-item>
+            }@else if (formValue().transfer == "deepObj") {
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    对象路径
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <input nz-input formControlName="objPath" />
+                </nz-form-control>
+            </nz-form-item>
+            }
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    文本数据
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="data" #dataFunField>
+                        <ng-container [axisDynamic]="{component:'axis-components/input-json',inuse:true}"
+                            [standalone]="true" ngModel [ngModelOptions]="{standalone:true}"></ng-container>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+        </nz-collapse-panel>
+        <axis-base-design-setting [fg]="fg"></axis-base-design-setting>
+    </nz-collapse>
+</form>

package/axis-components/text/design/setting/setting.ts

@@ -0,0 +1,54 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzCollapseModule } from 'ng-zorro-antd/collapse';
+import { NzDividerModule } from 'ng-zorro-antd/divider';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzSpaceModule } from 'ng-zorro-antd/space';
+import { BaseDesignSetting, baseFbConfig, baseFunField, DynamicDirective, FormValidators, FunField, FunFieldOptions, FunFieldValueBase } from 'ngx-axis-appforge/core';
+import { NzSliderModule } from 'ng-zorro-antd/slider';
+
+@Component({
+  selector: 'axis-design-text-setting',
+  imports: [FormsModule, NzFormModule, ReactiveFormsModule, NzCollapseModule, BaseDesignSetting, NzSelectModule, NzSpaceModule, NzDividerModule, NzInputNumberModule, NzInputModule, DynamicDirective, FunField, NzSliderModule],
+  templateUrl: './setting.html',
+  styleUrl: './setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Setting extends FunFieldValueBase {
+
+  override fg: UntypedFormGroup = this.fb.group({
+    ...baseFbConfig,
+    data: [],
+    transfer: ["text", FormValidators.required],
+    dateFormat: ["yyyy-MM-dd HH:mm:ss", FormValidators.required],
+    integerMinLength: [1, FormValidators.required],
+    decimalRange: [[0, 0], FormValidators.required],
+    objPath: [],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    ...baseFunField,
+    data: {
+      defaultValue: undefined
+    }
+  };
+
+  setDefault(type: string) {
+    let outFormat;
+    switch (type) {
+      case "datetime":
+        outFormat = "yyyy-MM-dd HH:mm:ss";
+        break;
+      case "date":
+        outFormat = "yyyy-MM-dd";
+        break;
+      case "time":
+        outFormat = "HH:mm:ss";
+        break;
+    }
+    this.fg.get("dateFormat")?.setValue(outFormat);
+  }
+}

package/axis-components/text/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "text.ts"
+    }
+}

package/axis-components/text/text.css

@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}

package/axis-components/text/text.html

@@ -0,0 +1,17 @@
+@switch (options.transfer()) {
+@case ("date") {
+{{date() | date:options.dateFormat()}}
+}
+@case ("number") {
+{{options.data() | number:digitsInfo()}}
+}
+@case ("percent") {
+{{options.data() | percent:digitsInfo()}}
+}
+@case ("deepObj") {
+{{deepObjectValue()}}
+}
+@default {
+{{options.data()}}
+}
+}

package/axis-components/text/text.options.ts

@@ -0,0 +1,10 @@
+import { signal } from "@angular/core";
+import { DataOptions } from "ngx-axis-appforge/core";
+
+export class TextOptions extends DataOptions {
+    transfer = signal<"text" | "date" | "number" | "percent" | "deepObj">("text");
+    dateFormat = signal<string>("yyyy-MM-dd HH:mm:ss");
+    integerMinLength = signal<number>(1);
+    decimalRange = signal<[number, number]>([0, 0]);
+    objPath = signal<string>("");
+}

package/axis-components/text/text.ts

@@ -0,0 +1,54 @@
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
+import { TextOptions } from './text.options';
+import { Base } from 'ngx-axis-appforge/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'axis-text',
+  imports: [CommonModule],
+  templateUrl: './text.html',
+  styleUrl: './text.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Text extends Base<TextOptions> {
+
+  override options: TextOptions = new TextOptions();
+
+  readonly date = computed(() => this.buildDate());
+  readonly digitsInfo = computed(() => this.buildDigitsInfo());
+  readonly deepObjectValue = computed(() => this.buildDeepObjectValue());
+
+  private buildDate(): Date | undefined {
+    if (this.options.transfer() == "date" && this.options.data()) {
+      return new Date(this.options.data());
+    }
+    return undefined;
+  }
+
+  private buildDigitsInfo(): string | undefined {
+    if (this.options.transfer() == "number" || this.options.transfer() == "percent") {
+      return `${this.options.integerMinLength()}.${this.options.decimalRange()[0]}-${this.options.decimalRange()[1]}`;
+    }
+    return undefined;
+  }
+
+  private buildDeepObjectValue(): any {
+    if (this.options.transfer() == "deepObj" && this.options.data()) {
+      if (this.options.objPath()) {
+        const patharr = this.options.objPath().split(".").map(p => p.trim());
+        let outValue = this.options.data();
+        for (let p of patharr) {
+          if (Array.isArray(outValue)) {
+            outValue = outValue?.[+p];
+          } else {
+            outValue = outValue?.[p];
+          }
+        }
+        return outValue;
+      }
+      return this.options.data();
+    }
+    return "";
+  }
+
+}

package/axis-components/textarea/design/config.ts

@@ -0,0 +1,30 @@
+import { NextInfo, DesignBuildResult, DesignBindElementsResult, DesignConfig, OptionsNode, SimpleMenu } from "ngx-axis-appforge/core";
+import { Setting } from "./setting/setting";
+
+export const Config: DesignConfig = {
+
+    componentName: "文本输入域",
+    buildOptionsNodes(nextInfo: NextInfo): DesignBuildResult {
+        return {
+            treeNode: new OptionsNode({
+                parentId: nextInfo.parentId,
+                scopeId: nextInfo.scopeId,
+                name: "文本输入域",
+                canSetting: true,
+                canDrag: true,
+                dragType: "component",
+                parentObj: nextInfo.parentObject,
+                indexOfParentObj: nextInfo.indexOfParent,
+                rootOptions: nextInfo.currentObject,
+                settingType: Setting,
+                contextMenu: SimpleMenu,
+                icon: "align-left",
+            }),
+        };
+    },
+    bindElementsOptionsNode(element: HTMLElement, options: any): DesignBindElementsResult {
+        return {
+            [options.id]: { element },
+        }
+    },
+};

package/axis-components/textarea/design/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "config.ts"
+    }
+}

package/axis-components/textarea/design/setting/setting.html

@@ -0,0 +1,76 @@
+<form [formGroup]="fg" nz-form>
+    <nz-collapse [nzBordered]="false">
+        <nz-collapse-panel nzHeader="基本设置" nzActive>
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    最大长度
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="maxlength">
+                        <nz-input-number style="width: 100%;" ngModel [ngModelOptions]="{standalone:true}" [nzMin]="1">
+                        </nz-input-number>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    防抖时间
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="debounceTime">
+                        <nz-input-number style="width: 100%;" nzPlaceHolder="毫秒" ngModel
+                            [ngModelOptions]="{standalone:true}" [nzMin]="1">
+                        </nz-input-number>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    形态变体
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <nz-select formControlName="variant">
+                        <nz-option nzValue="outlined" nzLabel="外边框"></nz-option>
+                        <nz-option nzValue="borderless" nzLabel="无边框"></nz-option>
+                        <nz-option nzValue="filled" nzLabel="填充"></nz-option>
+                        <nz-option nzValue="underlined" nzLabel="下边线"></nz-option>
+                    </nz-select>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    占位符
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="placeholder">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    默认行数
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="rows">
+                        <nz-input-number style="width: 100%;" ngModel [ngModelOptions]="{standalone:true}" [nzMin]="1">
+                        </nz-input-number>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    高度拖动
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="resize">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+        </nz-collapse-panel>
+        <axis-value-design-setting [fg]="fg"></axis-value-design-setting>
+        <axis-base-design-setting [fg]="fg"></axis-base-design-setting>
+        <axis-input-trigger formControlName="triggeEvents" [internalTriggers]="['valueChange']"></axis-input-trigger>
+    </nz-collapse>
+</form>

package/axis-components/textarea/design/setting/setting.ts

@@ -0,0 +1,55 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzCollapseModule } from 'ng-zorro-antd/collapse';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzInputNumberModule } from 'ng-zorro-antd/input-number';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { NzSelectModule } from 'ng-zorro-antd/select';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { BaseDesignSetting, baseFbConfig, baseFunField, FormValidators, FunField, FunFieldOptions, FunFieldValueBase, InputTrigger, ValueDesignSetting, valueFbConfig, valueFunField } from 'ngx-axis-appforge/core';
+
+@Component({
+  selector: 'axis-design-input-setting',
+  imports: [FormsModule, NzCollapseModule, ReactiveFormsModule, NzInputNumberModule, NzInputModule, NzFormModule, FunField, NzSwitchModule, BaseDesignSetting, InputTrigger, ValueDesignSetting, NzSelectModule],
+  templateUrl: './setting.html',
+  styleUrl: './setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Setting extends FunFieldValueBase {
+
+  override fg: UntypedFormGroup = this.fb.group({
+    ...baseFbConfig,
+    ...valueFbConfig,
+    placeholder: [],
+    variant: ["outlined", FormValidators.required],
+    maxlength: [null],
+    debounceTime: [],
+    rows: [undefined, FormValidators.requiredFun],
+    autoResize: [undefined, FormValidators.requiredFun],
+    resize: [undefined, FormValidators.requiredFun],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    ...baseFunField,
+    ...valueFunField,
+    placeholder: {
+      defaultValue: ""
+    },
+    maxlength: {
+      defaultValue: null
+    },
+    debounceTime: {
+      defaultValue: null
+    },
+    rows: {
+      defaultValue: 5
+    },
+    autoResize: {
+      defaultValue: false
+    },
+    resize: {
+      defaultValue: true
+    },
+  };
+}

package/axis-components/textarea/ng-package.json

@@ -0,0 +1,5 @@
+{
+    "lib": {
+        "entryFile": "textarea.ts"
+    }
+}

package/axis-components/textarea/textarea.css

@@ -0,0 +1,4 @@
+:host {
+    display: block;
+    width: 100%;
+}