@acorex/components 21.0.0-next.3 → 21.0.0-next.31

package/accordion/index.d.ts

@@ -10,7 +10,6 @@ declare class AXAccordionGroupComponent {
     activeIndex: _angular_core.ModelSignal<number | number[]>;
     look: _angular_core.InputSignal<string>;
     collapsedOnItemClick: _angular_core.InputSignal<boolean>;
-    private get __hostClass();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXAccordionGroupComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXAccordionGroupComponent, "ax-accordion-group", never, { "accordion": { "alias": "accordion"; "required": false; "isSignal": true; }; "activeIndex": { "alias": "activeIndex"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "collapsedOnItemClick": { "alias": "collapsedOnItemClick"; "required": false; "isSignal": true; }; }, { "activeIndex": "activeIndexChange"; }, ["content"], ["ax-accordion-item"], true, never>;
 }

package/autocomplete/index.d.ts

@@ -1,4 +1,4 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { AfterViewInit, OnDestroy, TemplateRef } from '@angular/core';
 import * as polytype from 'polytype';
 import { MXSelectionValueComponent, MXLookComponent, AXDataSource, MXSelectionBridgeService, AXAutocompleteParentComponent, MXInputBaseValueComponent, AXEvent, AXValueChangedEvent, AXItemClickEvent, AXItemSelectedEvent } from '@acorex/cdk/common';
@@ -11,9 +11,13 @@ declare const AXAutocompleteComponent_base: polytype.Polytype.ClusteredConstruct
  * @category
  */
 declare class AXAutocompleteComponent extends AXAutocompleteComponent_base implements AfterViewInit, OnDestroy {
-    delayTime: i0.InputSignal<number>;
-    protected inputValue: i0.WritableSignal<string>;
-    protected isLoading: i0.WritableSignal<boolean>;
+    delayTime: _angular_core.InputSignal<number>;
+    /** Height of each list item in pixels, or 'auto' to let list measure. */
+    itemHeight: _angular_core.InputSignal<number | "auto">;
+    /** Maximum number of visible items before scrolling. */
+    maxVisibleItems: _angular_core.InputSignal<number>;
+    protected inputValue: _angular_core.WritableSignal<string>;
+    protected isLoading: _angular_core.WritableSignal<boolean>;
     /** @ignore */
     protected renderList: boolean;
     /** @ignore */
@@ -67,6 +71,16 @@ declare class AXAutocompleteComponent extends AXAutocompleteComponent_base imple
      * @param {TemplateRef<any>} loadingTemplate
      */
     loadingTemplate: TemplateRef<any>;
+    /**
+     * The template used to display the header of the list.
+     * @param {TemplateRef<unknown>} listHeaderTemplate
+     */
+    listHeaderTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
+    /**
+     * The template used to display the footer of the list.
+     * @param {TemplateRef<unknown>} listFooterTemplate
+     */
+    listFooterTemplate: _angular_core.InputSignal<TemplateRef<unknown>>;
     /**
      * The width of the dropdown in pixels.
      * @defaultValue 260
@@ -115,14 +129,14 @@ declare class AXAutocompleteComponent extends AXAutocompleteComponent_base imple
      */
     refresh(): void;
     private get __hostName();
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXAutocompleteComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXAutocompleteComponent, "ax-autocomplete", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "look": { "alias": "look"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "textTemplate": { "alias": "textTemplate"; "required": false; }; "selectedItems": { "alias": "selectedItems"; "required": false; }; "delayTime": { "alias": "delayTime"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "selectedTemplate": { "alias": "selectedTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onOpened": "onOpened"; "onClosed": "onClosed"; "onItemClick": "onItemClick"; "onItemSelected": "onItemSelected"; }, never, ["ax-footer"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXAutocompleteComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXAutocompleteComponent, "ax-autocomplete", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "type": { "alias": "type"; "required": false; }; "look": { "alias": "look"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "textTemplate": { "alias": "textTemplate"; "required": false; }; "selectedItems": { "alias": "selectedItems"; "required": false; }; "delayTime": { "alias": "delayTime"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "maxVisibleItems": { "alias": "maxVisibleItems"; "required": false; "isSignal": true; }; "dataSource": { "alias": "dataSource"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; }; "selectedTemplate": { "alias": "selectedTemplate"; "required": false; }; "emptyTemplate": { "alias": "emptyTemplate"; "required": false; }; "loadingTemplate": { "alias": "loadingTemplate"; "required": false; }; "listHeaderTemplate": { "alias": "listHeaderTemplate"; "required": false; "isSignal": true; }; "listFooterTemplate": { "alias": "listFooterTemplate"; "required": false; "isSignal": true; }; "dropdownWidth": { "alias": "dropdownWidth"; "required": false; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onOpened": "onOpened"; "onClosed": "onClosed"; "onItemClick": "onItemClick"; "onItemSelected": "onItemSelected"; }, never, ["ax-footer"], true, never>;
 }
 
 declare class AXAutocompleteModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXAutocompleteModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXAutocompleteModule, never, [typeof AXAutocompleteComponent], [typeof AXAutocompleteComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<AXAutocompleteModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXAutocompleteModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXAutocompleteModule, never, [typeof AXAutocompleteComponent], [typeof AXAutocompleteComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXAutocompleteModule>;
 }
 
 export { AXAutocompleteComponent, AXAutocompleteModule };

package/button/index.d.ts

@@ -1,4 +1,4 @@
-import * as i0 from '@angular/core';
+import * as _angular_core from '@angular/core';
 import { EventEmitter, QueryList, AfterViewInit } from '@angular/core';
 import { MXInteractiveComponent, MXColorComponent, AXClickEvent, AXStyleColorType, AXItemClickEvent, AXStyleLookType, AXHotKeyAction, MXButtonBaseComponent } from '@acorex/cdk/common';
 import * as polytype from 'polytype';
@@ -11,7 +11,9 @@ interface AXButtonItemListItem {
     divided?: boolean;
     disabled?: boolean;
     selected?: boolean;
+    iconOnly?: boolean;
     color?: AXStyleColorType;
+    loading?: boolean;
 }
 declare const AXButtonItemComponent_base: polytype.Polytype.ClusteredConstructor<[typeof MXInteractiveComponent, typeof MXColorComponent]>;
 /**
@@ -93,8 +95,8 @@ declare class AXButtonItemComponent extends AXButtonItemComponent_base {
      * @ignore
      */
     tabindex: string;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXButtonItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXButtonItemComponent, "ax-button-item", never, { "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "text": { "alias": "text"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "divided": { "alias": "divided"; "required": false; }; "data": { "alias": "data"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, { "onClick": "onClick"; "onFocus": "onFocus"; "onBlur": "onBlur"; "disabledChange": "disabledChange"; }, never, ["ax-prefix", "ax-loading", "ax-icon", "ax-suffix", "ax-dropdown-panel"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXButtonItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXButtonItemComponent, "ax-button-item", never, { "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "text": { "alias": "text"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "divided": { "alias": "divided"; "required": false; }; "data": { "alias": "data"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, { "onClick": "onClick"; "onFocus": "onFocus"; "onBlur": "onBlur"; "disabledChange": "disabledChange"; }, never, ["ax-prefix", "ax-loading", "ax-icon", "ax-suffix", "ax-dropdown-panel"], true, never>;
 }
 
 /**
@@ -110,7 +112,20 @@ declare class AXButtonItemListComponent extends MXInteractiveComponent {
      *
      * @defaultValue []
      */
-    items: i0.InputSignal<AXButtonItemListItem[]>;
+    items: _angular_core.InputSignal<AXButtonItemListItem[]>;
+    /**
+     * Determines if the parent closable component should be closed automatically when
+     * an item is clicked.
+     *
+     * @defaultValue true
+     */
+    closeParentOnClick: _angular_core.InputSignal<boolean>;
+    /**
+     * Locks interaction for all items when any item is loading.
+     *
+     * @defaultValue false
+     */
+    lockOnLoading: _angular_core.InputSignal<boolean>;
     /**
      * Emits an event when an item is clicked.
      * The event contains details about the clicked item.
@@ -125,6 +140,8 @@ declare class AXButtonItemListComponent extends MXInteractiveComponent {
      * @ignore
      */
     constructor();
+    protected isDisabled(item: AXButtonItemListItem): boolean;
+    protected hasAnyLoadingItem(): boolean;
     /**
      * Initializes the content of the button item list.
      * Binds events and properties to content button items and marks for change detection.
@@ -162,6 +179,10 @@ declare class AXButtonItemListComponent extends MXInteractiveComponent {
      * @ignore
      */
     _emitOnItemClickEvent(e: AXClickEvent, item: AXButtonItemComponent): void;
+    /**
+     * Closes the parent closable component if available.
+     */
+    closeParent(): void;
     /**
      * Generates the CSS classes for the button item list host element.
      * Includes classes for action list and vertical layout.
@@ -170,8 +191,8 @@ declare class AXButtonItemListComponent extends MXInteractiveComponent {
      * @ignore
      */
     private get __hostClass();
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXButtonItemListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXButtonItemListComponent, "ax-button-item-list", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; }, { "onItemClick": "onItemClick"; }, ["_contentButtons"], ["*"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXButtonItemListComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXButtonItemListComponent, "ax-button-item-list", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "closeParentOnClick": { "alias": "closeParentOnClick"; "required": false; "isSignal": true; }; "lockOnLoading": { "alias": "lockOnLoading"; "required": false; "isSignal": true; }; }, { "onItemClick": "onItemClick"; }, ["_contentButtons"], ["*"], true, never>;
 }
 
 type AXButtonType = 'submit' | 'button' | 'cancel' | 'reset';
@@ -204,10 +225,10 @@ interface AXButtonItem {
  * @category Components
  */
 declare class AXButtonComponent extends MXButtonBaseComponent implements AfterViewInit {
-    iconOnly: i0.InputSignal<boolean>;
-    protected showIcon: i0.Signal<boolean>;
-    protected loadingIcon: i0.Signal<AXLoadingComponent>;
-    protected hasLoadingIcon: i0.Signal<boolean>;
+    iconOnly: _angular_core.InputSignal<boolean>;
+    protected showIcon: _angular_core.Signal<boolean>;
+    protected loadingIcon: _angular_core.Signal<AXLoadingComponent>;
+    protected hasLoadingIcon: _angular_core.Signal<boolean>;
     /**
      *  Fires each time the user clicks the button.
      *  @event
@@ -218,13 +239,13 @@ declare class AXButtonComponent extends MXButtonBaseComponent implements AfterVi
      *
      * @defaultValue 'button'
      */
-    type: i0.InputSignal<AXButtonType>;
+    type: _angular_core.InputSignal<AXButtonType>;
     /**
      * Defines the text displayed while the action sheet is loading.
      *
      * @defaultValue null
      */
-    loadingText: i0.ModelSignal<string>;
+    loadingText: _angular_core.ModelSignal<string>;
     /**
      *  @ignore
      */
@@ -255,14 +276,14 @@ declare class AXButtonComponent extends MXButtonBaseComponent implements AfterVi
      * when the button loses focus.
      */
     blur(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXButtonComponent, "ax-button", never, { "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "selectedChange": "selectedChange"; "toggleableChange": "toggleableChange"; "lookChange": "lookChange"; "colorChange": "colorChange"; "disabledChange": "disabledChange"; "loadingText": "loadingTextChange"; }, ["loadingIcon"], ["ax-loading, ax-loading-spinner", "ax-prefix, ax-icon", "ax-content", "ax-suffix", "ax-dropdown-panel", ".tab-content", "*"], true, never>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXButtonComponent, "ax-button", never, { "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; }; "toggleable": { "alias": "toggleable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "iconOnly": { "alias": "iconOnly"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "loadingText": { "alias": "loadingText"; "required": false; "isSignal": true; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "onClick": "onClick"; "selectedChange": "selectedChange"; "toggleableChange": "toggleableChange"; "lookChange": "lookChange"; "colorChange": "colorChange"; "disabledChange": "disabledChange"; "loadingText": "loadingTextChange"; }, ["loadingIcon"], ["ax-loading, ax-loading-spinner", "ax-prefix, ax-icon", "ax-content", "ax-suffix", "ax-dropdown-panel", ".tab-content", "*"], true, never>;
 }
 
 declare class AXButtonModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXButtonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXButtonModule, never, [typeof AXButtonComponent, typeof AXButtonItemComponent, typeof AXButtonItemListComponent], [typeof AXButtonComponent, typeof AXButtonItemComponent, typeof AXButtonItemListComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<AXButtonModule>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXButtonModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXButtonModule, never, [typeof AXButtonComponent, typeof AXButtonItemComponent, typeof AXButtonItemListComponent], [typeof AXButtonComponent, typeof AXButtonItemComponent, typeof AXButtonItemListComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXButtonModule>;
 }
 
 export { AXButtonComponent, AXButtonItemComponent, AXButtonItemListComponent, AXButtonModule };

package/chips/index.d.ts

@@ -1,29 +1,25 @@
 import * as i0 from '@angular/core';
 import * as i1 from '@acorex/cdk/common';
-import { AXStyleLookType, AXStyleSizeType, MXColorComponent } from '@acorex/cdk/common';
+import { MXColorLookComponent } from '@acorex/cdk/common';
 
-type AXChipsLookType = Extract<AXStyleLookType, 'solid' | 'outline' | 'twotone'>;
-type AXChipsSizeType = Exclude<AXStyleSizeType, 'ax-xs' | 'ax-xl'>;
 /**
  * A component for displaying and managing a set of chips.
  *
  * @category Components
  */
-declare class AXChipsComponent extends MXColorComponent {
+declare class AXChipsComponent extends MXColorLookComponent {
     /**
      * The text displayed on the chips.
      *
      * @defaultValue ''
      */
     text: i0.ModelSignal<string>;
-    look: i0.ModelSignal<AXChipsLookType>;
-    size: i0.ModelSignal<AXChipsSizeType>;
     /**
      *  @ignore
      */
     private get __hostClass();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXChipsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXChipsComponent, "ax-chips", never, { "tabIndex": { "alias": "tabIndex"; "required": false; }; "color": { "alias": "color"; "required": false; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "look": { "alias": "look"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "text": "textChange"; "look": "lookChange"; "size": "sizeChange"; }, never, ["ax-prefix", "ax-suffix"], true, [{ directive: typeof i1.AXRippleDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXChipsComponent, "ax-chips", never, { "tabIndex": { "alias": "tabIndex"; "required": false; }; "color": { "alias": "color"; "required": false; }; "look": { "alias": "look"; "required": false; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; }, { "text": "textChange"; }, never, ["ax-prefix", "ax-suffix"], true, [{ directive: typeof i1.AXRippleDirective; inputs: {}; outputs: {}; }]>;
 }
 
 declare class AXChipsModule {
@@ -33,4 +29,3 @@ declare class AXChipsModule {
 }
 
 export { AXChipsComponent, AXChipsModule };
-export type { AXChipsLookType, AXChipsSizeType };

package/code-editor/README.md

@@ -1,3 +1,293 @@
 # @acorex/components/code-editor
 
-Secondary entry point of `@acorex/components`. It can be used by importing from `@acorex/components/code-editor`.
+A modular, plugin-based code editor component built on CodeMirror 6.
+
+## Features
+
+- 🔌 **Plugin Architecture** - Fully modular with external plugin support
+- 🎨 **Themeable** - Custom theme plugins or platform-aware themes
+- 🌍 **Multi-Language** - Support for any language via plugins
+- ✨ **Formatting** - Pluggable formatters (Prettier included)
+- 📝 **Rich API** - Comprehensive component API with signals
+- ♿ **Accessible** - ARIA support and keyboard navigation
+
+## Installation
+
+```bash
+npm install @acorex/components
+```
+
+## Basic Usage
+
+### With Default Plugins
+
+```typescript
+import { Component } from '@angular/core';
+import { AXCodeEditorComponent, provideDefaultCodeEditorConfig } from '@acorex/components/code-editor';
+import { bootstrapApplication } from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-root',
+  imports: [AXCodeEditorComponent],
+  template: `
+    <ax-code-editor
+      [(value)]="code"
+      language="typescript"
+      [lineNumbers]="true"
+      [formatOnSave]="true"
+    />
+  `
+})
+export class AppComponent {
+  code = 'const hello = "world";';
+}
+
+// Provide default plugins in your app config
+bootstrapApplication(AppComponent, {
+  providers: [provideDefaultCodeEditorConfig()]
+});
+```
+
+### Without Default Plugins (Custom Configuration)
+
+```typescript
+import {
+  provideCodeEditorPlugins,
+  JavaScriptLanguagePlugin,
+  TypeScriptLanguagePlugin,
+  OneDarkThemePlugin,
+  LightThemePlugin,
+  PrettierFormatterPlugin
+} from '@acorex/components/code-editor';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideCodeEditorPlugins({
+      languages: [
+        new JavaScriptLanguagePlugin(),
+        new TypeScriptLanguagePlugin(),
+      ],
+      themes: [
+        new OneDarkThemePlugin(),
+        new LightThemePlugin(),
+      ],
+      formatters: [
+        new PrettierFormatterPlugin(),
+      ],
+      extensions: []
+    })
+  ]
+});
+```
+
+## Plugin System
+
+### Built-in Language Plugins
+
+- `JavaScriptLanguagePlugin` - JavaScript (js, javascript)
+- `TypeScriptLanguagePlugin` - TypeScript (ts, typescript)
+- `JSONLanguagePlugin` - JSON
+- `HTMLLanguagePlugin` - HTML
+- `CSSLanguagePlugin` - CSS
+- `SassLanguagePlugin` - Sass/SCSS
+- `SQLLanguagePlugin` - SQL
+- `XMLLanguagePlugin` - XML
+- `MarkdownLanguagePlugin` - Markdown
+
+### Built-in Theme Plugins
+
+- `OneDarkThemePlugin` - Dark theme
+- `LightThemePlugin` - Light theme
+
+### Built-in Formatter Plugins
+
+- `PrettierFormatterPlugin` - Prettier formatter (JS, TS, JSON, HTML, CSS, Markdown)
+
+### Creating Custom Plugins
+
+#### Custom Language Plugin
+
+```typescript
+import { AXCodeEditorLanguagePlugin } from '@acorex/components/code-editor';
+import type { Extension } from '@codemirror/state';
+
+export class PythonLanguagePlugin implements AXCodeEditorLanguagePlugin {
+  readonly id = 'python';
+  readonly name = 'Python';
+  readonly version = '1.0.0';
+  readonly languages = ['python', 'py'];
+
+  async getExtension(): Promise<Extension> {
+    const { python } = await import('@codemirror/lang-python');
+    return python();
+  }
+}
+```
+
+#### Custom Theme Plugin
+
+```typescript
+import { AXCodeEditorThemePlugin } from '@acorex/components/code-editor';
+import type { Extension } from '@codemirror/state';
+
+export class CustomThemePlugin implements AXCodeEditorThemePlugin {
+  readonly id = 'custom-theme';
+  readonly name = 'Custom Theme';
+  readonly version = '1.0.0';
+  readonly dark = false;
+
+  async getExtension(): Promise<Extension> {
+    const { EditorView } = await import('@codemirror/view');
+    return EditorView.theme({
+      '&': {
+        backgroundColor: '#f5f5f5',
+        color: '#333'
+      },
+      '.cm-gutters': {
+        backgroundColor: '#e0e0e0'
+      }
+    }, { dark: false });
+  }
+}
+```
+
+#### Custom Formatter Plugin
+
+```typescript
+import { AXCodeEditorFormatterPlugin } from '@acorex/components/code-editor';
+
+export class CustomFormatterPlugin implements AXCodeEditorFormatterPlugin {
+  readonly id = 'custom-formatter';
+  readonly name = 'Custom Formatter';
+  readonly version = '1.0.0';
+  readonly languages = ['custom'];
+
+  async format(text: string, language: string): Promise<string | null> {
+    // Your formatting logic
+    return text.trim();
+  }
+}
+```
+
+### Runtime Plugin Registration
+
+```typescript
+import { inject } from '@angular/core';
+import { AXCodeEditorPluginRegistry } from '@acorex/components/code-editor';
+
+export class MyComponent {
+  private registry = inject(AXCodeEditorPluginRegistry);
+
+  ngOnInit() {
+    // Register plugins at runtime
+    this.registry.registerLanguagePlugin(new PythonLanguagePlugin());
+    this.registry.registerThemePlugin(new CustomThemePlugin());
+    this.registry.registerFormatterPlugin(new CustomFormatterPlugin());
+  }
+}
+```
+
+## Component API
+
+### Inputs
+
+| Input               | Type                               | Default        | Description                      |
+| ------------------- | ---------------------------------- | -------------- | -------------------------------- |
+| `value`             | `string`                           | `''`           | Editor content (two-way binding) |
+| `language`          | `string`                           | `'javascript'` | Language identifier              |
+| `theme`             | `string \| null`                   | `null`         | Theme ID (null = platform theme) |
+| `readOnly`          | `boolean`                          | `false`        | Read-only mode                   |
+| `placeholder`       | `string`                           | `''`           | Placeholder text                 |
+| `lineNumbers`       | `boolean`                          | `true`         | Show line numbers                |
+| `lineWrapping`      | `boolean`                          | `false`        | Wrap long lines                  |
+| `tabSize`           | `number`                           | `2`            | Tab size in spaces               |
+| `indentWithTab`     | `boolean`                          | `true`         | Use Tab key for indentation      |
+| `height`            | `string \| null`                   | `null`         | Fixed height                     |
+| `minHeight`         | `string \| null`                   | `null`         | Minimum height                   |
+| `maxHeight`         | `string \| null`                   | `null`         | Maximum height                   |
+| `extensions`        | `Extension[]`                      | `[]`           | Additional CodeMirror extensions |
+| `customCompletions` | `Completion[] \| CompletionSource` | `null`         | Custom autocomplete              |
+| `ariaLabel`         | `string \| null`                   | `null`         | ARIA label                       |
+| `focusOnReady`      | `boolean`                          | `false`        | Auto-focus on mount              |
+| `formatOnSave`      | `boolean`                          | `false`        | Format on Ctrl+S                 |
+
+### Outputs
+
+| Output        | Type     | Description                      |
+| ------------- | -------- | -------------------------------- |
+| `valueChange` | `string` | Emits when content changes       |
+| `ready`       | `void`   | Emits when editor is initialized |
+| `save`        | `string` | Emits on Ctrl+S                  |
+
+### Methods
+
+| Method                 | Returns                   | Description         |
+| ---------------------- | ------------------------- | ------------------- |
+| `focus()`              | `void`                    | Focus the editor    |
+| `selectAll()`          | `void`                    | Select all text     |
+| `format(affect?)`      | `Promise<string \| null>` | Format document     |
+| `getTotalCharacters()` | `number`                  | Get character count |
+| `getTotalLines()`      | `number`                  | Get line count      |
+
+## Examples
+
+### With Custom Theme
+
+```typescript
+<ax-code-editor
+  [(value)]="code"
+  language="typescript"
+  theme="one-dark"
+/>
+```
+
+### With Formatting
+
+```typescript
+<ax-code-editor
+  [(value)]="code"
+  language="json"
+  [formatOnSave]="true"
+  (save)="onSave($event)"
+/>
+```
+
+### Programmatic Formatting
+
+```typescript
+@Component({
+  template: `
+    <ax-code-editor #editor [(value)]="code" />
+    <button (click)="formatCode()">Format</button>
+  `
+})
+export class MyComponent {
+  editor = viewChild<AXCodeEditorComponent>('editor');
+
+  async formatCode() {
+    await this.editor().format();
+  }
+}
+```
+
+## Migration from v1
+
+The component now uses a plugin architecture. Update your app configuration:
+
+**Before:**
+
+```typescript
+// Languages were hardcoded
+```
+
+**After:**
+
+```typescript
+import { provideDefaultCodeEditorConfig } from '@acorex/components/code-editor';
+
+bootstrapApplication(AppComponent, {
+  providers: [provideDefaultCodeEditorConfig()]
+});
+```
+
+The `AXCodeEditorSupportedLanguage` type is deprecated but still available for backward compatibility. Use `string` type directly for language inputs.