feat: add color widget

package.json

@@ -93,7 +93,8 @@
     "@nguniversal/express-engine": "^16.2.0",
     "express": "^4.18.2",
     "isutf8": "^4.0.0",
-    "@github/hotkey": "^2.0.1"
+    "@github/hotkey": "^2.0.1",
+    "ng-antd-color-picker": "^0.0.2"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^16.2.0",

packages/form/widgets/color/demo/simple.md

@@ -0,0 +1,106 @@
+---
+title:
+  zh-CN: 基础样例
+  en-US: Basic Usage
+order: 0
+---
+
+## zh-CN
+
+最简单的用法。
+
+## en-US
+
+Simplest of usage.
+
+```ts
+import { Component } from '@angular/core';
+
+import { SFSchema } from '@delon/form';
+import type { SFColorWidgetSchema } from '@delon/form/widgets/color';
+import { NzMessageService } from 'ng-zorro-antd/message';
+
+@Component({
+  selector: 'app-demo',
+  template: `<sf [schema]="schema" (formSubmit)="submit($event)" />`
+})
+export class DemoComponent {
+  schema: SFSchema = {
+    properties: {
+      base: {
+        type: 'string',
+        title: 'Base',
+        ui: {
+          widget: 'color',
+          title: 'Pls choose a color',
+          change: console.log
+        } as SFColorWidgetSchema
+      },
+      showText: {
+        type: 'string',
+        title: 'Show Text',
+        ui: {
+          widget: 'color',
+          showText: true,
+          trigger: 'hover',
+          change: console.log
+        } as SFColorWidgetSchema
+      },
+      defaultValue: {
+        type: 'string',
+        title: 'Default Value',
+        ui: {
+          widget: 'color',
+          showText: true,
+          defaultValue: '#0a0',
+          change: console.log
+        } as SFColorWidgetSchema
+      },
+      clearColor: {
+        type: 'string',
+        title: 'Clear Color',
+        ui: {
+          widget: 'color',
+          allowClear: true,
+          change: console.log
+        } as SFColorWidgetSchema
+      },
+      disabled: {
+        type: 'string',
+        title: 'Disabled',
+        ui: {
+          widget: 'color',
+          showText: true
+        } as SFColorWidgetSchema,
+        readOnly: true
+      },
+      rgb: {
+        type: 'string',
+        title: 'RGB',
+        ui: {
+          widget: 'color',
+          format: 'rgb',
+          showText: true,
+          change: console.log,
+          formatChange: console.log
+        } as SFColorWidgetSchema
+      },
+      block: {
+        type: 'string',
+        title: 'Block Color',
+        ui: {
+          widget: 'color',
+          block: true
+        } as SFColorWidgetSchema,
+        default: '#f50'
+      }
+    }
+  };
+
+  constructor(private msg: NzMessageService) {}
+
+  submit(value: {}): void {
+    this.msg.success(JSON.stringify(value));
+  }
+}
+```

packages/form/widgets/color/index.en-US.md

@@ -0,0 +1,33 @@
+---
+title: color
+subtitle: Color
+type: Non-built-in widgets
+---
+
+Used when the user needs to customize the color selection.
+
+## How to Use
+
+**Installation dependencies**  
+
+`yarn add ng-antd-color-picker`
+
+**Import Module**
+
+Non-built-in modules, Should be import `ColorWidgetModule` in [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11).
+
+## API
+
+### ui
+
+| Property | Description | Type | Default |
+|----------|-------------|------|---------|
+| `[format]`       | Format of color       | `rgb`｜`hex`｜`hsb`                 | `hex`     |
+| `[defaultValue]` | Default value of color     | `string`｜`NzColor`                  | `false`   |
+| `[allowClear]`   | Allow clearing color selected  | `boolean`                         | `false`   |
+| `[trigger]`      | ColorPicker trigger mode | `hover`｜`click`                   | `click`   |
+| `[showText]`      | Show color text     | `boolean`                         | `false`   |
+| `[title]`      | Setting the title of the color picker | `TemplateRef<void>`｜`string`      | -         |
+| `(change)`     | Callback when value is changed    | `EventEmitter<{ color: NzColor; format: string }>`            | -         |
+| `(formatChange)`      | Callback when `format` is changed      | `EventEmitter<'rgb'｜'hex'｜'hsb'>` | -         |
+| `[block]`   | Color Block  | `boolean`                         | `false`  |

packages/form/widgets/color/index.ts

@@ -0,0 +1,21 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+import { DelonFormModule, WidgetRegistry } from '@delon/form';
+import { NzColorPickerModule } from 'ng-zorro-antd/color-picker';
+
+import { ColorWidget } from './widget';
+
+export * from './widget';
+export * from './schema';
+
+@NgModule({
+  imports: [FormsModule, CommonModule, DelonFormModule, NzColorPickerModule],
+  declarations: [ColorWidget]
+})
+export class ColorWidgetModule {
+  constructor(widgetRegistry: WidgetRegistry) {
+    widgetRegistry.register(ColorWidget.KEY, ColorWidget);
+  }
+}

packages/form/widgets/color/index.zh-CN.md

@@ -0,0 +1,33 @@
+---
+title: color
+subtitle: 颜色
+type: Non-built-in widgets
+---
+
+当用户需要自定义颜色选择的时候使用。
+
+## 如何使用
+
+**安装依赖**  
+
+`yarn add ng-antd-color-picker`
+
+**导入模块**
+
+非内置模块，需要额外在 [json-schema.module.ts](https://github.com/ng-alain/ng-alain/blob/master/src/app/shared/json-schema/json-schema.module.ts#L11) 导入 `ColorWidgetModule`。
+
+## API
+
+### ui 属性
+
+| 成员 | 说明 | 类型 | 默认值 |
+|----|----|----|-----|
+| `[format]`       | 颜色格式       | `rgb`｜`hex`｜`hsb`                 | `hex`    |
+| `[defaultValue]` | 颜色默认的值     | `string`｜`NzColor`                  | -        |
+| `[allowClear]`   | 允许清除选择的颜色  | `boolean`                         | `false`  |
+| `[trigger]`      | 颜色选择器的触发模式 | `hover`｜`click`                   | `click`  |
+| `[showText]`      | 显示颜色文本     | `boolean`                         | `false`  |
+| `[title]`      | 设置颜色选择器的标题 | `TemplateRef<void>`｜`string`      | -        |
+| `(change)`     | 颜色变化的回调    | `EventEmitter<{ color: NzColor; format: string }>` | -        |
+| `(formatChange)`      | 颜色格式变化的回调  | `EventEmitter<'rgb'｜'hex'｜'hsb'>` | -        |
+| `[block]`   | 是否颜色块  | `boolean`                         | `false`  |

packages/form/widgets/color/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "lib": {
+    "flatModuleFile": "widgets-color",
+    "entryFile": "index.ts"
+  }
+}

packages/form/widgets/color/schema.ts

@@ -0,0 +1,47 @@
+import type { TemplateRef } from '@angular/core';
+
+import type { SFUISchemaItem } from '@delon/form';
+import type { NzColor, NzColorPickerFormatType, NzColorPickerTriggerType } from 'ng-zorro-antd/color-picker';
+
+export interface SFColorWidgetSchema extends SFUISchemaItem {
+  /**
+   * Format of color
+   */
+  format?: NzColorPickerFormatType | null;
+  /**
+   * Default value of color
+   */
+  defaultValue?: string | NzColor | null;
+  /**
+   * ColorPicker trigger mode
+   */
+  trigger?: NzColorPickerTriggerType | null;
+  /**
+   * Setting the title of the color picker
+   */
+  title?: TemplateRef<void> | string;
+  /**
+   * Triggers for customizing color panels.
+   */
+  flipFlop?: TemplateRef<void> | string | null;
+  /**
+   * Show color text
+   */
+  showText?: boolean;
+  /**
+   * Allow clearing color selected
+   */
+  allowClear?: boolean;
+  /**
+   * Callback when value is changed
+   */
+  change?: (ev: { color: NzColor; format: string }) => void;
+  /**
+   * Callback when `format` is changed
+   */
+  formatChange?: (color: NzColorPickerFormatType) => void;
+  /**
+   * Color Block
+   */
+  block?: boolean;
+}

packages/form/widgets/color/widget.spec.ts

@@ -0,0 +1,49 @@
+import { DebugElement } from '@angular/core';
+import { ComponentFixture, fakeAsync } from '@angular/core/testing';
+
+import { SFSchema } from '@delon/form';
+import { createTestContext } from '@delon/testing';
+
+import { ColorWidgetModule, SFColorWidgetSchema } from './index';
+import { configureSFTestSuite, SFPage, TestFormComponent } from '../../spec/base.spec';
+
+describe('form: widget: color', () => {
+  let fixture: ComponentFixture<TestFormComponent>;
+  let dl: DebugElement;
+  let context: TestFormComponent;
+  let page: SFPage;
+
+  configureSFTestSuite({ imports: [ColorWidgetModule] });
+
+  beforeEach(() => {
+    ({ fixture, dl, context } = createTestContext(TestFormComponent));
+    page = new SFPage(context.comp);
+    page.cleanOverlay().prop(dl, context, fixture);
+  });
+
+  it('should be working', fakeAsync(() => {
+    const change = jasmine.createSpy();
+    const formatChange = jasmine.createSpy();
+    const s: SFSchema = {
+      properties: {
+        a: {
+          type: 'string',
+          ui: {
+            widget: 'color',
+            defaultValue: '#f50',
+            change,
+            formatChange
+          } as SFColorWidgetSchema
+        }
+      }
+    };
+    page
+      .newSchema(s)
+      .typeEvent('click', '.ant-color-picker-trigger')
+      .typeEvent('click', 'nz-select')
+      .typeEvent('click', 'nz-option-container nz-option-item:nth-child(2)');
+    expect(page.getValue('/a')).toBe('hsb(20, 100%, 100%)');
+    expect(change).toHaveBeenCalled();
+    expect(formatChange).toHaveBeenCalled();
+  }));
+});

packages/form/widgets/color/widget.ts

@@ -0,0 +1,49 @@
+import { Component, ViewEncapsulation } from '@angular/core';
+
+import { ControlUIWidget } from '@delon/form';
+import type { NzColor, NzColorPickerFormatType } from 'ng-zorro-antd/color-picker';
+
+import type { SFColorWidgetSchema } from './schema';
+
+@Component({
+  selector: 'sf-color',
+  template: `<sf-item-wrap
+    [id]="id"
+    [schema]="schema"
+    [ui]="ui"
+    [showError]="showError"
+    [error]="error"
+    [showTitle]="schema.title"
+  >
+    <nz-color-block *ngIf="ui.block" [nzColor]="value" [nzSize]="$any(ui.size)" />
+    <nz-color-picker
+      *ngIf="!ui.block"
+      [ngModel]="value"
+      (ngModelChange)="setValue($event)"
+      [nzDisabled]="disabled"
+      [nzSize]="$any(ui.size)"
+      [nzDefaultValue]="ui.defaultValue ?? ''"
+      [nzFormat]="ui.format ?? null"
+      [nzTrigger]="ui.trigger ?? 'click'"
+      [nzTitle]="ui.title ?? ''"
+      [nzFlipFlop]="$any(ui.flipFlop)"
+      [nzShowText]="ui.showText"
+      [nzAllowClear]="ui.allowClear"
+      (nzOnChange)="_change($event)"
+      (nzOnFormatChange)="_formatChange($event)"
+    />
+  </sf-item-wrap>`,
+  preserveWhitespaces: false,
+  encapsulation: ViewEncapsulation.None
+})
+export class ColorWidget extends ControlUIWidget<SFColorWidgetSchema> {
+  static readonly KEY = 'color';
+
+  _change(ev: { color: NzColor; format: string }): void {
+    if (this.ui.change) this.ui.change(ev);
+  }
+
+  _formatChange(ev: NzColorPickerFormatType): void {
+    if (this.ui.formatChange) this.ui.formatChange(ev);
+  }
+}

scripts/site/route-paths.txt

@@ -203,6 +203,8 @@
 /form/cascader/zh
 /form/checkbox/en
 /form/checkbox/zh
+/form/color/en
+/form/color/zh
 /form/conditional/en
 /form/conditional/zh
 /form/custom/en

src/app/shared/json-schema/json-schema.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 import { DelonFormModule } from '@delon/form';
 import { AutoCompleteWidgetModule } from '@delon/form/widgets/autocomplete';
 import { CascaderWidgetModule } from '@delon/form/widgets/cascader';
+import { ColorWidgetModule } from '@delon/form/widgets/color';
 import { MentionWidgetModule } from '@delon/form/widgets/mention';
 import { RateWidgetModule } from '@delon/form/widgets/rate';
 import { SliderWidgetModule } from '@delon/form/widgets/slider';
@@ -30,6 +31,7 @@ import { SharedModule } from '../shared.module';
     TagWidgetModule,
     TimeWidgetModule,
     UploadWidgetModule,
+    ColorWidgetModule,
     MonacoEditorWidgetModule,
     TinymceWidgetModule
   ]