ngx-axis-appforge 0.0.0

package/axis-components/input/input.html

@@ -0,0 +1,32 @@
+@if (options.readonly()) {
+<span>
+    {{value()}}
+</span>
+}@else {
+@if (options.variant()=="outlined") {
+<nz-input-group [nzSuffix]="suffixTemplate" [nzPrefix]="prefixTemplate">
+    <input (keydown.enter)="onEnter()" [type]="options.type()" nz-input [disabled]="options.disabled()"
+        [(ngModel)]="inputValue" (ngModelChange)="inputSubject.next($event)" [placeholder]="options.placeholder()"
+        [maxLength]="options.maxlength()||9999999" [autofocus]="options.autofocus()" />
+</nz-input-group>
+<ng-template #prefixTemplate>
+    <div class="prefix-container">
+        @if (options.prefix()) {
+        <ng-container [axisDynamic]="options.prefix()"></ng-container>
+        }
+    </div>
+</ng-template>
+<ng-template #suffixTemplate>
+    <div class="suffix-container">
+        @if (options.suffix()) {
+        <ng-container [axisDynamic]="options.suffix()"></ng-container>
+        }
+    </div>
+</ng-template>
+}@else {
+<input (keydown.enter)="onEnter()" [type]="options.type()" nz-input [nzVariant]="options.variant()"
+    [disabled]="options.disabled()" [(ngModel)]="inputValue" (ngModelChange)="inputSubject.next($event)"
+    [placeholder]="options.placeholder()" [maxLength]="options.maxlength()||9999999"
+    [autofocus]="options.autofocus()" />
+}
+}

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

@@ -0,0 +1,14 @@
+import { signal } from "@angular/core";
+import { ValueAccessOptions } from "ngx-axis-appforge/core";
+
+export class InputOptions extends ValueAccessOptions {
+
+    readonly placeholder = signal("");
+    readonly maxlength = signal<number | null>(null);
+    readonly debounceTime = signal<number | null>(null);
+    readonly autofocus = signal<boolean>(false);
+    readonly type = signal<"text" | "password">("text");
+    readonly prefix = signal<any>(undefined);
+    readonly suffix = signal<any>(undefined);
+    readonly variant = signal<'outlined' | 'borderless' | 'filled' | 'underlined'>("outlined");
+}

package/axis-components/input/input.ts

@@ -0,0 +1,53 @@
+import { ChangeDetectionStrategy, Component, effect, model } from '@angular/core';
+import { InputOptions } from './input.options';
+import { FormsModule } from '@angular/forms';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { DynamicDirective, ValueAccess } from 'ngx-axis-appforge/core';
+import { debounceTime, Subject } from 'rxjs';
+
+@Component({
+  selector: 'axis-input',
+  imports: [NzInputModule, FormsModule, DynamicDirective],
+  templateUrl: './input.html',
+  styleUrl: './input.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Input extends ValueAccess<InputOptions> {
+  constructor() {
+    super();
+    effect(() => {
+      this.unsubscribe(["change"]);
+      if (this.options.debounceTime() ?? 0 > 0) {
+        this.addSubscribe(this.inputSubject.pipe(debounceTime(this.options.debounceTime()!)).subscribe(value => {
+          this.value.set(value);
+          this.onChange?.(value);
+        }), "change");
+      } else {
+        this.addSubscribe(this.inputSubject.subscribe(value => {
+          this.value.set(value);
+          this.onChange?.(value);
+        }), "change");
+      }
+    });
+    effect(() => {
+      if (this.options.initValue() !== undefined) {
+        this.inputValue.set(this.options.initValue());
+      }
+    })
+  }
+
+  override options: InputOptions = new InputOptions();
+
+  readonly inputValue = model<string>();
+  readonly inputSubject = new Subject();
+
+  override writeValue(value: any): void {
+    super.writeValue(value);
+    this.inputValue.set(value);
+  }
+
+  onEnter() {
+    this.triggeEvents("enterKeydown").subscribe();
+  }
+
+}

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

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

package/axis-components/input-component/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: "build"
+            })
+        };
+    },
+    bindElementsOptionsNode(element: HTMLElement, options: any): DesignBindElementsResult {
+        return {
+            [options.id]: { element }
+        }
+    },
+};

package/axis-components/input-component/design/ng-package.json

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

package/axis-components/input-component/design/setting/setting.html

@@ -0,0 +1,33 @@
+<form [formGroup]="fg" nz-form>
+    <nz-collapse [nzBordered]="false">
+        <nz-collapse-panel nzHeader="基本设置" nzActive>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzTooltipTitle="注入的数据对象，格式：{数据名:数据}">
+                    数据注入
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="injectData">
+                        <ng-container ngModel [ngModelOptions]="{standalone:true}"
+                            [axisDynamic]="{component:'axis-components/input-json',inuse:true}"
+                            [standalone]="true"></ng-container>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzTooltipTitle="可以选择的权限列表，格式：{权限编码:权限名字}">
+                    权限列表
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="allPermissions">
+                        <ng-container ngModel [ngModelOptions]="{standalone:true}"
+                            [axisDynamic]="{component:'axis-components/input-json',inuse:true}"
+                            [standalone]="true"></ng-container>
+                    </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/input-component/design/setting/setting.ts

@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { BaseDesignSetting, baseFbConfig, baseFunField, DynamicDirective, FunField, FunFieldOptions, FunFieldValueBase, InputTrigger, ValueDesignSetting, valueFbConfig, valueFunField } from 'ngx-axis-appforge/core';
+import { NzCollapseModule } from 'ng-zorro-antd/collapse';
+
+@Component({
+  selector: 'axis-design-input-icon-setting',
+  imports: [FormsModule, NzFormModule, ReactiveFormsModule, NzCollapseModule, NzInputModule, BaseDesignSetting, InputTrigger, ValueDesignSetting, DynamicDirective, FunField],
+  templateUrl: './setting.html',
+  styleUrl: './setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Setting extends FunFieldValueBase {
+  override fg: UntypedFormGroup = this.fb.group(({
+    ...baseFbConfig,
+    ...valueFbConfig,
+    injectData: [],
+    allPermissions: []
+  }));
+
+  protected override funFields: FunFieldOptions = {
+    ...baseFunField,
+    ...valueFunField,
+    injectData: {
+      defaultValue: {}
+    },
+    allPermissions: {
+      defaultValue: {}
+    }
+  };
+}

package/axis-components/input-component/input-component.css

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

package/axis-components/input-component/input-component.html

@@ -0,0 +1,25 @@
+<nz-input-group (click)="isVisible.set(!options.disabled())" [nzPrefix]="prefix" [nzSuffix]="suffix">
+    <input nz-input [disabled]="options.disabled()" [placeholder]="options.readonly()?'查看组件':'配置组件'" readonly />
+</nz-input-group>
+<ng-template #prefix>
+    <i nz-icon nzType="build"></i>
+</ng-template>
+<ng-template #suffix>
+    <i nz-icon [nzType]="options.readonly()?'eye':'edit'"></i>
+</ng-template>
+<nz-modal [(nzVisible)]="isVisible" (nzOnOk)="onOk()" (nzOnCancel)="isVisible.set(false)" nzWidth="800"
+    [nzBodyStyle]="{padding:'0',height:'70vh',overflow:'hidden',position:'relative'}" (nzAfterOpen)="afterOpen()">
+    <ng-container *nzModalTitle>
+        <div tabindex="-1" autofocus="true" (keydown.escape)="isVisible.set(false)">
+            <i nz-icon nzType="build"></i> {{options.readonly()?'查看组件':'配置组件'}}
+        </div>
+    </ng-container>
+    <div *nzModalContent #content style="height: 100%;" tabindex="-1" autofocus="true"
+        (keydown.escape)="isVisible.set(false)">
+        @if (!options.readonly()) {
+        <ng-container [axisDynamic]="designOptions()" [standalone]="true" [(ngModel)]="designValue"></ng-container>
+        }@else {
+        <ng-container [axisDynamic]="value()" [standalone]="true"></ng-container>
+        }
+    </div>
+</nz-modal>

package/axis-components/input-component/input-component.options.ts

@@ -0,0 +1,7 @@
+import { signal } from "@angular/core";
+import { ValueAccessOptions } from "ngx-axis-appforge/core";
+
+export class InputComponentOptions extends ValueAccessOptions {
+    readonly injectData = signal<any>({});
+    readonly allPermissions = signal<{ [permission: string]: string }>({});
+}

package/axis-components/input-component/input-component.ts

@@ -0,0 +1,50 @@
+import { ChangeDetectionStrategy, Component, computed, ElementRef, model, ViewChild } from '@angular/core';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { InputComponentOptions } from './input-component.options';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { DynamicDirective, ValueAccess } from 'ngx-axis-appforge/core';
+import { NzModalModule } from 'ng-zorro-antd/modal';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+
+@Component({
+  selector: 'axis-input-component',
+  imports: [NzFormModule, NzInputModule, NzFormModule, DynamicDirective, NzModalModule, ReactiveFormsModule, NzIconModule, FormsModule],
+  templateUrl: './input-component.html',
+  styleUrl: './input-component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InputComponent extends ValueAccess<InputComponentOptions> {
+  protected override options: InputComponentOptions = new InputComponentOptions();
+
+  readonly isVisible = model(false);
+  readonly designValue = model<any>();
+  readonly designOptions = computed(() => ({ component: 'axis-components/design', inuse: true, injectData: this.options.injectData(), allPermissions: this.options.allPermissions() }));
+
+  @ViewChild("content")
+  content?: ElementRef<HTMLElement>;
+
+  override writeValue(value: any): void {
+    super.writeValue(value);
+    this.designValue.set(this.value());
+  }
+
+  override setInitValue(value: any): void {
+    super.setInitValue(value);
+    if (this.value() !== undefined) {
+      this.designValue.set(this.value());
+    }
+  }
+
+  afterOpen() {
+    setTimeout(() => {
+      this.content?.nativeElement.focus();
+    }, 100);
+  }
+
+  onOk() {
+    this.value.set({ ...this.designValue() });
+    this.onChange?.(this.value())
+    this.isVisible.set(false);
+  }
+}

package/axis-components/input-component/ng-package.json

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

package/axis-components/input-icon/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: "highlight"
+            })
+        };
+    },
+    bindElementsOptionsNode(element: HTMLElement, options: any): DesignBindElementsResult {
+        return {
+            [options.id]: { element }
+        }
+    },
+};

package/axis-components/input-icon/design/ng-package.json

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

package/axis-components/input-icon/design/setting/setting.html

@@ -0,0 +1,29 @@
+<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">
+                    <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="modalTitle">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                    </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/input-icon/design/setting/setting.ts

@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { BaseDesignSetting, baseFbConfig, baseFunField, FunField, FunFieldOptions, FunFieldValueBase, InputTrigger, ValueDesignSetting, valueFbConfig, valueFunField } from 'ngx-axis-appforge/core';
+import { NzCollapseModule } from 'ng-zorro-antd/collapse';
+
+@Component({
+  selector: 'axis-design-input-icon-setting',
+  imports: [FormsModule, NzFormModule, ReactiveFormsModule, NzCollapseModule, NzInputModule, BaseDesignSetting, FunField, InputTrigger, ValueDesignSetting],
+  templateUrl: './setting.html',
+  styleUrl: './setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Setting extends FunFieldValueBase {
+  override fg: UntypedFormGroup = this.fb.group(({
+    ...baseFbConfig,
+    ...valueFbConfig,
+    placeholder: [],
+    modalTitle: [],
+  }));
+
+  protected override funFields: FunFieldOptions = {
+    ...baseFunField,
+    ...valueFunField,
+    placeholder: {
+      defaultValue: "设置图标"
+    },
+    modalTitle: {
+      defaultValue: "设置图标"
+    },
+  };
+}

package/axis-components/input-icon/input-icon.css

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

package/axis-components/input-icon/input-icon.html

@@ -0,0 +1,70 @@
+@if (!options.readonly()) {
+<nz-input-group (click)="isVisible.set(!options.disabled())" [nzPrefix]="value()?.component? iconInp:undefined"
+    [nzSuffix]="iconSuffix">
+    <input nz-input [disabled]="options.disabled()" [placeholder]="options.placeholder()" readonly />
+</nz-input-group>
+<ng-template #iconInp>
+    <ng-container [axisDynamic]="value()" [standalone]="true"></ng-container>
+</ng-template>
+<ng-template #iconSuffix>
+    <i nz-icon nzType="right" style="color:rgba(0, 0, 0, 0.25)" nzTheme="outline"></i>
+</ng-template>
+<nz-modal [(nzVisible)]="isVisible" [nzTitle]="options.modalTitle()" (nzOnOk)="onOk()"
+    (nzOnCancel)="isVisible.set(false)" (nzAfterClose)="resetForm()">
+    <ng-container *nzModalContent>
+        <form [formGroup]="fg">
+            <nz-form-item>
+                <nz-form-label nzSpan="6" nzRequired>图标库</nz-form-label>
+                <nz-form-control nzSpan="18">
+                    <nz-radio-group formControlName="lib">
+                        <label nz-radio-button nzValue="antdesign">antdesign</label>
+                        <label nz-radio-button nzValue="iconfont">iconfont</label>
+                    </nz-radio-group>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue() == undefined || formValue()?.lib == 'antdesign') {
+            <nz-form-item>
+                <nz-form-label nzSpan="6" nzRequired>图标主题</nz-form-label>
+                <nz-form-control nzSpan="18">
+                    <nz-radio-group formControlName="theme">
+                        <label nz-radio-button nzValue="outline">outline</label>
+                        <label nz-radio-button nzValue="fill">fill</label>
+                        <label nz-radio-button nzValue="twotone">twotone</label>
+                    </nz-radio-group>
+                </nz-form-control>
+            </nz-form-item>
+            }
+            <nz-form-item>
+                <nz-form-label nzSpan="6" nzRequired>图标</nz-form-label>
+                <nz-form-control nzSpan="18">
+                    <nz-input-group style="max-width: 200px;" [nzSuffix]="iconPreview">
+                        <input autofocus placeholder="输入图标类型，如 edit" nz-input formControlName="icon" />
+                    </nz-input-group>
+                    <ng-template #iconPreview>
+                        <ng-container [axisDynamic]="preview()" [standalone]="true"></ng-container>
+                    </ng-template>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="6">
+                    antdesign 图标库
+                </nz-form-label>
+                <nz-form-control nzSpan="18">
+                    <a target="_blank"
+                        href="https://ng.ant.design/components/icon/zh">https://ng.ant.design/components/icon/zh</a>
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="6">
+                    iconfont 图标库
+                </nz-form-label>
+                <nz-form-control nzSpan="18">
+                    <a target="_blank" href="https://www.iconfont.cn/">https://www.iconfont.cn/</a>
+                </nz-form-control>
+            </nz-form-item>
+        </form>
+    </ng-container>
+</nz-modal>
+}@else if(value()?.comonent){
+<ng-container [axisDynamic]="value()" [standalone]="true"></ng-container>
+}

package/axis-components/input-icon/input-icon.options.ts

@@ -0,0 +1,7 @@
+import { signal } from "@angular/core";
+import { ValueAccessOptions } from "ngx-axis-appforge/core";
+
+export class InputIconOptions extends ValueAccessOptions {
+    readonly placeholder = signal("设置图标");
+    readonly modalTitle = signal("设置图标");
+}

package/axis-components/input-icon/input-icon.ts

@@ -0,0 +1,51 @@
+import { ChangeDetectionStrategy, Component, computed, inject, model } from '@angular/core';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzInputModule } from 'ng-zorro-antd/input';
+import { InputIconOptions } from './input-icon.options';
+import { FormsModule, ReactiveFormsModule, UntypedFormBuilder } from '@angular/forms';
+import { DynamicDirective, FormValidators, ValueAccess } from 'ngx-axis-appforge/core';
+import { NzModalModule } from 'ng-zorro-antd/modal';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+import { NzRadioModule } from 'ng-zorro-antd/radio';
+import { toSignal } from '@angular/core/rxjs-interop';
+
+@Component({
+  selector: 'axis-input-icon',
+  imports: [NzFormModule, NzInputModule, NzFormModule, DynamicDirective, NzModalModule, ReactiveFormsModule, NzIconModule, NzRadioModule, FormsModule],
+  templateUrl: './input-icon.html',
+  styleUrl: './input-icon.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InputIcon extends ValueAccess<InputIconOptions> {
+  protected override options: InputIconOptions = new InputIconOptions();
+
+  private readonly fb = inject(UntypedFormBuilder);
+  readonly fg = this.fb.group({
+    lib: ["antdesign", FormValidators.required],
+    theme: ["outline", FormValidators.required],
+    icon: [undefined, FormValidators.required]
+  });
+  readonly formValue = toSignal(this.fg.valueChanges);
+  readonly preview = computed(() => ({ component: "axis-components/icon", inuse: true, ...this.formValue() }))
+
+  isVisible = model(false);
+
+  override writeValue(value: any): void {
+    super.writeValue(value);
+    this.fg.reset(value);
+  }
+
+  resetForm() {
+    this.fg.reset({
+      lib: "antdesign",
+      theme: "outline",
+      icon: undefined,
+    });
+  }
+
+  onOk() {
+    this.value.set(this.preview());
+    this.onChange?.(this.value())
+    this.isVisible.set(false);
+  }
+}

package/axis-components/input-icon/ng-package.json

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

package/axis-components/input-json/design/config.ts

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

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

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

package/axis-components/input-json/design/setting/setting.html

@@ -0,0 +1,7 @@
+<form [formGroup]="fg" nz-form>
+    <nz-collapse [nzBordered]="false">
+        <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/input-json/design/setting/setting.ts

@@ -0,0 +1,26 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { FormsModule, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzGridModule } from 'ng-zorro-antd/grid';
+import { BaseDesignSetting, baseFbConfig, baseFunField, FunFieldOptions, FunFieldValueBase, InputTrigger, ValueDesignSetting, valueFbConfig, valueFunField } from 'ngx-axis-appforge/core';
+import { NzCollapseModule } from 'ng-zorro-antd/collapse';
+
+@Component({
+  selector: 'axis-design-input-json-setting',
+  imports: [NzFormModule, FormsModule, ReactiveFormsModule, NzGridModule, NzCollapseModule, ValueDesignSetting, BaseDesignSetting, InputTrigger],
+  templateUrl: './setting.html',
+  styleUrl: './setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Setting extends FunFieldValueBase {
+  override fg: UntypedFormGroup = this.fb.group(({
+    ...baseFbConfig,
+    ...valueFbConfig,
+  }));
+
+  protected override funFields: FunFieldOptions = {
+    ...baseFunField,
+    ...valueFunField,
+  };
+
+}

package/axis-components/input-json/input-json.css

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