ngx-axis-appforge 0.0.0

package/.editorconfig

@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

package/README.md

@@ -0,0 +1,111 @@
+# Ngx-Axis-Appforge
+
+基于 Angular 20 和 Ant Design 开发的 JSON 驱动动态页面生成库，完整覆盖 Ant Design 组件，并提供低代码配置组件的设计工具（本身也是动态组件之一）。本库旨在帮助开发者快速构建复杂的管理界面，通过可视化配置即可实现组件布局和属性设置。
+
+## 特性
+
+- **基于最新技术**：采用 Angular 20 和 ng-zorro-antd（Ant Design 的 Angular 实现）
+- **全面的组件覆盖**：封装并优化了大部分 Ant Design 组件，提供统一的配置接口
+- **JSON 驱动开发**：通过 JSON 配置文件动态生成页面结构和组件
+- **低代码设计工具**：内置可视化设计器，支持拖拽式组件配置，该设计工具本身也是动态组件之一
+- **灵活的数据绑定**：支持双向数据绑定和事件处理，轻松集成业务逻辑
+- **可扩展性强**：提供清晰的接口和工具，方便开发者扩展自定义组件
+
+## 安装
+
+```bash
+npm install ngx-axis-appforge
+npm install ng-zorro-antd
+npm install ngx-clipboard
+npm install monaco-editor
+```
+
+## 配置
+
+在 `angular.json` 中进行以下配置：
+
+1. 在 assets 中添加：
+
+```json
+{
+  "glob": "**/*",
+  "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
+  "output": "/assets/"
+},
+{
+  "glob": "**/*",
+  "input": "./node_modules/monaco-editor/min/vs",
+  "output": "/assets/vs/"
+},
+{
+  "glob": "**/*",
+  "input": "./node_modules/ngx-axis-appforge/components-covers",
+  "output": "/assets/components-covers/"
+}
+```
+
+2. 在 styles 中添加：
+
+```json
+"node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
+```
+
+3. 在 app.config.ts 中添加：
+
+```ts
+provideHttpClient(),
+provideAxisComponents(),
+provideAnimationsAsync(),
+provideNzConfig({
+  codeEditor: {
+    assetsRoot: `http://localhost:4200/assets`
+  },
+}),
+```
+
+## 使用
+
+### HTML 模板
+
+```html
+<ng-container [axisDynamic]="options()" [ngModel]="designValue"></ng-container>
+```
+
+### TypeScript 示例
+
+```ts
+options = signal({
+  component: "design",
+  inuse: true
+});
+
+designValue = {
+  component: "text",
+  id: "text",
+  inuse: true,
+  data: "hello axis appforge"
+};
+```
+
+### 使用说明
+
+1. **axisDynamic 指令**：这是本库的核心功能之一，接受一个 JSON 格式的数据作为输入，自动根据 JSON 内容动态生成相应的组件。JSON 数据的格式描述了组件类型、属性、布局等信息。
+
+2. **双向数据绑定**：对于有值的组件（如 input 输入框），可以通过 ngModel 进行双向数据绑定。当组件内容发生变化时，绑定的数据会自动更新；反之，数据变化也会反映在组件上。
+
+3. **design 组件**：这个组件是本库提供的可视化设计工具，允许开发者通过拖拽等方式搭建复杂页面。它会输出一个 JSON 数据，这个数据可以直接作为 axisDynamic 指令的输入，实现页面的动态生成。这意味着开发者无需手动编写 JSON 数据，而是通过可视化操作来创建页面结构。
+
+## 功能概述
+
+本库主要提供两个核心功能：
+
+1. **JSON 驱动的动态页面生成功能**：通过解析 JSON 配置，动态创建包含各种 Ant Design 组件的复杂页面。开发者只需提供一个描述页面结构和组件属性的 JSON 对象，即可在指定位置渲染出完整的 UI 界面。
+
+2. **低代码配置组件的设计工具**：提供可视化的设计器，支持拖拽式组件布局和属性配置。这个设计工具本身也是通过本库的动态组件功能实现的，展示了库的强大灵活性和可扩展性。
+
+## 技术栈
+
+- **框架**: Angular v20.0.0
+- **UI 库**: ng-zorro-antd (Ant Design 的 Angular 实现)
+- **构建工具**: Angular CLI v20.0.0
+- **语言**: TypeScript (~5.8.2)

package/angular.json

@@ -0,0 +1,40 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ngx-axis-appforge": {
+      "projectType": "library",
+      "root": "./",
+      "sourceRoot": "./",
+      "prefix": "axis",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:ng-packagr",
+          "options": {
+            "project": "./ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "./tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "./tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular/build:karma",
+          "options": {
+            "tsConfig": "./tsconfig.spec.json",
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ]
+          }
+        }
+      }
+    }
+  }
+}

package/axis-components/badge/badge.css

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

package/axis-components/badge/badge.html

@@ -0,0 +1,20 @@
+@switch (options.type()) {
+@case ("badge") {
+<nz-badge [nzStandalone]="!options.child()" [nzCount]="options.dot()?0:options.count()"
+    [nzDot]="options.dot() && options.count()!=null && (options.showZero() || options.count()! > 0)"
+    [nzOverflowCount]="options.overflowCount()" [nzShowZero]="options.showZero()" [nzSize]="options.size()"
+    [nzOffset]="options.offset()" [nzStyle]="{backgroundColor:options.color()??''}" [nzTitle]="options.title()">
+    <ng-container [axisDynamic]="options.child()"></ng-container>
+</nz-badge>
+}
+@case ("status") {
+<nz-badge [nzColor]="options.status() == 'default'?options.color():undefined"
+    [nzStatus]="options.status()=='default'?undefined:options.status()" [nzText]="options.text()">
+</nz-badge>
+}
+@case ("ribbon") {
+<nz-ribbon [nzColor]="options.color()" [nzPlacement]="options.placement()" [nzText]="options.text()">
+    <ng-container [axisDynamic]="options.child()"></ng-container>
+</nz-ribbon>
+}
+}

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

@@ -0,0 +1,23 @@
+import { signal } from "@angular/core";
+import { DataOptions } from "ngx-axis-appforge/core";
+
+export class BadgeOptions extends DataOptions {
+
+    readonly type = signal<"badge" | "status" | "ribbon">("badge");
+
+    readonly showDot = signal(true);
+    readonly dot = signal(false);
+    readonly overflowCount = signal(Number.MAX_VALUE);
+    readonly showZero = signal(false);
+    readonly count = signal<number | undefined>(undefined);
+    readonly child = signal<any>(undefined);
+    readonly size = signal<"default" | "small">("default");
+    readonly offset = signal<[number, number] | undefined>(undefined);
+    readonly title = signal("");
+
+    readonly color = signal<string | undefined>(undefined);
+    readonly status = signal<'success' | 'processing' | 'default' | 'error' | 'warning'>("default");
+    readonly text = signal("");
+
+    readonly placement = signal<"start" | "end">("end");
+}

package/axis-components/badge/badge.ts

@@ -0,0 +1,17 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { BadgeOptions } from './badge.options';
+import { Base, DynamicDirective } from 'ngx-axis-appforge/core';
+import { NzBadgeModule } from 'ng-zorro-antd/badge';
+
+@Component({
+  selector: 'axis-badge',
+  imports: [NzBadgeModule, DynamicDirective],
+  templateUrl: './badge.html',
+  styleUrl: './badge.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Text extends Base<BadgeOptions> {
+
+  override options: BadgeOptions = new BadgeOptions();
+
+}

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

@@ -0,0 +1,52 @@
+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 {
+        let name;
+        switch (nextInfo.currentObject.type) {
+            case "status":
+                name = "状态";
+                break;
+            case "ribbon":
+                name = "缎带";
+                break;
+            default:
+                name = "徽标";
+        }
+        return {
+            treeNode: new OptionsNode({
+                parentId: nextInfo.parentId,
+                scopeId: nextInfo.scopeId,
+                name: name,
+                canSetting: true,
+                canDrag: true,
+                dragType: "component",
+                canDrop: true,
+                dropType: "component",
+                dropObj: nextInfo.currentObject,
+                defaultDropIndex: "child",
+                parentObj: nextInfo.parentObject,
+                indexOfParentObj: nextInfo.indexOfParent,
+                rootOptions: nextInfo.currentObject,
+                settingType: Setting,
+                contextMenu: SimpleMenu,
+                icon: "heart",
+                children: []
+            }),
+            next: [{
+                parentId: nextInfo.currentObject.id,
+                parentObject: nextInfo.currentObject,
+                indexOfParent: "child",
+                scopeId: nextInfo.scopeId
+            }]
+        };
+    },
+    bindElementsOptionsNode(element: HTMLElement, options: any): DesignBindElementsResult {
+        return {
+            [options.id]: { element }
+        }
+    },
+};

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

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

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

@@ -0,0 +1,181 @@
+<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="type">
+                        <nz-select ngModel [ngModelOptions]="{standalone:true}">
+                            <nz-option nzValue="badge" nzLabel="徽标"></nz-option>
+                            <nz-option nzValue="status" nzLabel="状态"></nz-option>
+                            <nz-option nzValue="ribbon" nzLabel="缎带"></nz-option>
+                        </nz-select>
+                    </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 [(ngModel)]="color" [ngModelOptions]="{standalone:true}"
+                        (ngModelChange)="setColorFormValue()">
+                        <nz-color-picker nzDefaultValue="#00000000" ngModel [ngModelOptions]="{standalone:true}"
+                            nzAllowClear></nz-color-picker>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+        </nz-collapse-panel>
+        @if (formValue()?.type.funMode || formValue()?.type.originValue === 'badge') {
+        <nz-collapse-panel nzHeader="徽标">
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    小红点
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="dot">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue()?.dot.funMode || !formValue()?.dot.originValue) {
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    大小
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="size">
+                        <nz-radio-group ngModel [ngModelOptions]="{standalone:true}">
+                            <label nz-radio-button nzValue="small">小</label>
+                            <label nz-radio-button nzValue="default">大</label>
+                        </nz-radio-group>
+                    </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="count">
+                        <nz-input-number style="width: 100%;" [nzMin]="0" ngModel
+                            [ngModelOptions]="{standalone:true}"></nz-input-number>
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+            @if (formValue()?.dot.funMode || !formValue()?.dot.originValue) {
+            <nz-form-item>
+                <nz-form-label nzSpan="8">
+                    最大数值
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="overflowCount">
+                        <nz-input-number style="width: 100%;" [nzMin]="0" ngModel
+                            [ngModelOptions]="{standalone:true}"></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="showZero">
+                        <nz-switch ngModel [ngModelOptions]="{standalone:true}"></nz-switch>
+                    </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">
+                    <nz-space-compact nzBlock>
+                        <nz-input-number [(ngModel)]="offsetX" [ngModelOptions]="{standalone:true}"
+                            (ngModelChange)="setOffsetFormValue()">
+                            <span nzInputPrefix>x:</span>
+                        </nz-input-number>
+                        <nz-input-number [(ngModel)]="offsetY" [ngModelOptions]="{standalone:true}"
+                            (ngModelChange)="setOffsetFormValue()">
+                            <span nzInputPrefix>y:</span>
+                        </nz-input-number>
+                        <button nz-button nzSize="small" nzType="link" nzDanger (click)="resetOffset()">
+                            <nz-icon nzType="delete"></nz-icon>
+                        </button>
+                    </nz-space-compact>
+                </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="title">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+        </nz-collapse-panel>
+        }@else if (formValue()?.type.funMode || formValue()?.type.originValue === "status") {
+        <nz-collapse-panel nzHeader="状态">
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    状态
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="status">
+                        <nz-select ngModel [ngModelOptions]="{standalone:true}">
+                            <nz-option nzValue="success" nzLabel="成功"></nz-option>
+                            <nz-option nzValue="processing" nzLabel="处理中"></nz-option>
+                            <nz-option nzValue="default" nzLabel="默认"></nz-option>
+                            <nz-option nzValue="error" nzLabel="错误"></nz-option>
+                            <nz-option nzValue="warning" nzLabel="警告"></nz-option>
+                        </nz-select>
+                    </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="text">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                    </axis-fun-field>
+                </nz-form-control>
+            </nz-form-item>
+        </nz-collapse-panel>
+        }@else if (formValue()?.type.funMode || formValue()?.type.originValue === "ribbon") {
+        <nz-collapse-panel nzHeader="缎带">
+            <nz-form-item>
+                <nz-form-label nzSpan="8" nzRequired>
+                    位置
+                </nz-form-label>
+                <nz-form-control nzSpan="16">
+                    <axis-fun-field formControlName="placement">
+                        <nz-radio-group ngModel [ngModelOptions]="{standalone:true}">
+                            <label nz-radio-button nzValue="start">头部</label>
+                            <label nz-radio-button nzValue="end">尾部</label>
+                        </nz-radio-group>
+                    </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="text">
+                        <input nz-input ngModel [ngModelOptions]="{standalone:true}" />
+                    </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/badge/design/setting/setting.ts

@@ -0,0 +1,126 @@
+import { ChangeDetectionStrategy, Component, model } from '@angular/core';
+import { FormsModule, ReactiveFormsModule, UntypedFormGroup } from '@angular/forms';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzCollapseModule } from 'ng-zorro-antd/collapse';
+import { NzColorPickerModule } from 'ng-zorro-antd/color-picker';
+import { NzFormModule } from 'ng-zorro-antd/form';
+import { NzIconModule } from 'ng-zorro-antd/icon';
+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 { NzSpaceModule } from 'ng-zorro-antd/space';
+import { NzSwitchModule } from 'ng-zorro-antd/switch';
+import { BaseDesignSetting, baseFbConfig, baseFunField, FormValidators, FunField, FunFieldOptions, FunFieldValueBase } from 'ngx-axis-appforge/core';
+
+@Component({
+  selector: 'axis-design-text-setting',
+  imports: [FormsModule, NzFormModule, ReactiveFormsModule, NzCollapseModule, BaseDesignSetting, FunField, NzSwitchModule, NzInputModule, NzInputNumberModule, NzColorPickerModule, NzRadioModule, NzSelectModule, NzSpaceModule, NzButtonModule, NzIconModule],
+  templateUrl: './setting.html',
+  styleUrl: './setting.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Setting extends FunFieldValueBase {
+
+  override fg: UntypedFormGroup = this.fb.group({
+    ...baseFbConfig,
+    type: [undefined, FormValidators.requiredFun],
+    color: [],
+    count: [],
+    showDot: [undefined, FormValidators.requiredFun],
+    dot: [undefined, FormValidators.requiredFun],
+    overflowCount: [],
+    showZero: [undefined, FormValidators.requiredFun],
+    size: [undefined, FormValidators.requiredFun],
+    status: [undefined, FormValidators.requiredFun],
+    text: [],
+    title: [],
+    offset: [],
+    placement: [undefined, FormValidators.requiredFun],
+  });
+
+  protected override funFields: FunFieldOptions = {
+    ...baseFunField,
+    type: {
+      defaultValue: "badge"
+    },
+    color: {
+      defaultValue: undefined
+    },
+    count: {
+      defaultValue: null
+    },
+    showDot: {
+      defaultValue: true
+    },
+    dot: {
+      defaultValue: false
+    },
+    overflowCount: {
+      defaultValue: undefined
+    },
+    showZero: {
+      defaultValue: false
+    },
+    size: {
+      defaultValue: "default"
+    },
+    status: {
+      defaultValue: "default"
+    },
+    text: {
+      defaultValue: ""
+    },
+    title: {
+      defaultValue: ""
+    },
+    placement: {
+      defaultValue: "end"
+    },
+  };
+
+  override reset(value?: any): void {
+    super.reset(value);
+    if (this.formValue()?.color) {
+      this.color.set(this.formValue().color);
+    }
+    if (this.formValue()?.offset) {
+      this.offsetX.set(this.formValue().offset[0]);
+      this.offsetY.set(this.formValue().offset[1]);
+    }
+  }
+
+  readonly offsetX = model<number | null>(null);
+  readonly offsetY = model<number | null>(null);
+  readonly color = model<any>({ funMode: false });
+
+  setColorFormValue() {
+    if (!this.color().funMode && this.color().originValue?.endsWith("00")) {
+      this.fg.patchValue({
+        color: { ...this.color(), originValue: null }
+      });
+    } else {
+      this.fg.patchValue({
+        color: this.color()
+      });
+    }
+  }
+
+  resetOffset() {
+    this.offsetX.set(null);
+    this.offsetY.set(null);
+    this.setOffsetFormValue();
+  }
+
+  setOffsetFormValue() {
+    if (this.offsetX() != null || this.offsetY() != null) {
+      this.fg.patchValue({
+        offset: [this.offsetX() ?? 0, this.offsetY() ?? 0]
+      });
+    } else {
+      this.fg.patchValue({
+        offset: null
+      });
+    }
+  }
+}

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

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

package/axis-components/button/button.css

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

package/axis-components/button/button.html

@@ -0,0 +1,13 @@
+<button [nzLoading]="loading()" nz-button [nzSize]="options.size()" [nzType]="options.styleType()" nz-popconfirm
+    [nzPopconfirmTitle]="options.confirmText()"
+    [nzCondition]="!(options.confirm() && options.confirmType() == 'pop' && !loading())" (nzOnConfirm)="popConfirm()"
+    (click)="buttonClick()" [disabled]="options.disabledBtn()" [nzGhost]="options.ghost()" [nzBlock]="options.block()"
+    [nzDanger]="options.danger()" [nzShape]="options.shape()">
+    @if (options.icon()) {
+    <ng-container [axisDynamic]="options.icon()"></ng-container>
+    @if (options.title()) {
+    <span style="margin-right: 10px;"></span>
+    }
+    }
+    {{options.title()}}
+</button>

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

@@ -0,0 +1,17 @@
+import { signal } from "@angular/core";
+import { BaseOptions } from "ngx-axis-appforge/core";
+
+export class ButtonOptions extends BaseOptions {
+    readonly title = signal<string>("");
+    readonly icon = signal<any>(undefined);
+    readonly confirm = signal<boolean>(false);
+    readonly confirmType = signal<"modal" | "pop">("modal");
+    readonly confirmText = signal<string>("是否确认？");
+    readonly disabledBtn = signal<boolean>(false);
+    readonly styleType = signal<"default" | "primary" | "dashed" | "link" | "text">("default");
+    readonly ghost = signal<boolean>(false);
+    readonly size = signal<"large" | "small" | "default">("default");
+    readonly block = signal<boolean>(false);
+    readonly danger = signal<boolean>(false);
+    readonly shape = signal<null | "circle" | "round">(null);
+}