@acorex/components 21.0.0-next.5 → 21.0.0-next.51

package/code-editor/index.d.ts

@@ -1,22 +1,269 @@
 import * as _angular_core from '@angular/core';
-import { ElementRef } from '@angular/core';
+import { InjectionToken, ElementRef } from '@angular/core';
 import * as _codemirror_autocomplete from '@codemirror/autocomplete';
 import * as _codemirror_state from '@codemirror/state';
+import { Extension } from '@codemirror/state';
 import { MXValueComponent } from '@acorex/cdk/common';
 import * as i1 from '@angular/common';
 
+/**
+ * Base interface for all code editor plugins
+ */
+interface AXCodeEditorPlugin {
+    /** Unique identifier for the plugin */
+    readonly id: string;
+    /** Human-readable name */
+    readonly name: string;
+    /** Plugin version */
+    readonly version?: string;
+}
+/**
+ * Language plugin provides syntax highlighting and language-specific features
+ */
+interface AXCodeEditorLanguagePlugin extends AXCodeEditorPlugin {
+    /** Language identifiers this plugin supports (e.g., 'javascript', 'js') */
+    readonly languages: ReadonlyArray<string>;
+    /** Load and return the CodeMirror extension for this language */
+    getExtension(): Promise<Extension>;
+}
+/**
+ * Theme plugin provides visual styling for the editor
+ */
+interface AXCodeEditorThemePlugin extends AXCodeEditorPlugin {
+    /** Whether this is a dark theme */
+    readonly dark: boolean;
+    /** Load and return the CodeMirror theme extension */
+    getExtension(): Promise<Extension>;
+}
+/**
+ * Formatter plugin provides code formatting capabilities
+ */
+interface AXCodeEditorFormatterPlugin extends AXCodeEditorPlugin {
+    /** Languages this formatter supports */
+    readonly languages: ReadonlyArray<string>;
+    /** Format the given text */
+    format(text: string, language: string): Promise<string | null>;
+}
+/**
+ * Extension plugin provides additional CodeMirror extensions
+ */
+interface AXCodeEditorExtensionPlugin extends AXCodeEditorPlugin {
+    /** Get the CodeMirror extension */
+    getExtension(): Promise<Extension>;
+}
+/**
+ * Plugin configuration for the code editor
+ */
+interface AXCodeEditorPluginConfig {
+    /** Language plugins */
+    languages?: ReadonlyArray<AXCodeEditorLanguagePlugin>;
+    /** Theme plugins */
+    themes?: ReadonlyArray<AXCodeEditorThemePlugin>;
+    /** Formatter plugins */
+    formatters?: ReadonlyArray<AXCodeEditorFormatterPlugin>;
+    /** Additional extension plugins */
+    extensions?: ReadonlyArray<AXCodeEditorExtensionPlugin>;
+}
+
+/**
+ * Injection token for providing code editor plugin configuration
+ */
+declare const AX_CODE_EDITOR_PLUGIN_CONFIG: InjectionToken<AXCodeEditorPluginConfig>;
+
+/**
+ * Registry service for managing code editor plugins
+ */
+declare class AXCodeEditorPluginRegistry {
+    private config;
+    private languagePlugins;
+    private themePlugins;
+    private formatterPlugins;
+    private extensionPlugins;
+    constructor();
+    private initializePlugins;
+    /**
+     * Get language extension for the specified language
+     */
+    getLanguageExtension(language: string): Promise<Extension>;
+    /**
+     * Get theme extension by theme ID
+     */
+    getThemeExtension(themeId: string): Promise<Extension>;
+    /**
+     * Format text using the appropriate formatter for the language
+     */
+    format(text: string, language: string): Promise<string | null>;
+    /**
+     * Get all registered extension plugins
+     */
+    getExtensionPlugins(): Promise<Extension[]>;
+    /**
+     * Check if a language is supported
+     */
+    hasLanguage(language: string): boolean;
+    /**
+     * Check if a theme is available
+     */
+    hasTheme(themeId: string): boolean;
+    /**
+     * Check if a formatter is available for a language
+     */
+    hasFormatter(language: string): boolean;
+    /**
+     * Get all available language identifiers
+     */
+    getAvailableLanguages(): string[];
+    /**
+     * Get all available theme identifiers
+     */
+    getAvailableThemes(): string[];
+    /**
+     * Register a language plugin at runtime
+     */
+    registerLanguagePlugin(plugin: AXCodeEditorLanguagePlugin): void;
+    /**
+     * Register a theme plugin at runtime
+     */
+    registerThemePlugin(plugin: AXCodeEditorThemePlugin): void;
+    /**
+     * Register a formatter plugin at runtime
+     */
+    registerFormatterPlugin(plugin: AXCodeEditorFormatterPlugin): void;
+    /**
+     * Register an extension plugin at runtime
+     */
+    registerExtensionPlugin(plugin: AXCodeEditorExtensionPlugin): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXCodeEditorPluginRegistry, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<AXCodeEditorPluginRegistry>;
+}
+
+declare class JavaScriptLanguagePlugin implements AXCodeEditorLanguagePlugin {
+    readonly id = "javascript";
+    readonly name = "JavaScript";
+    readonly version = "1.0.0";
+    readonly languages: readonly ["javascript", "js"];
+    getExtension(): Promise<Extension>;
+}
+
+declare class TypeScriptLanguagePlugin implements AXCodeEditorLanguagePlugin {
+    readonly id = "typescript";
+    readonly name = "TypeScript";
+    readonly version = "1.0.0";
+    readonly languages: readonly ["typescript", "ts"];
+    getExtension(): Promise<Extension>;
+}
+
+declare class JSONLanguagePlugin implements AXCodeEditorLanguagePlugin {
+    readonly id = "json";
+    readonly name = "JSON";
+    readonly version = "1.0.0";
+    readonly languages: readonly ["json"];
+    getExtension(): Promise<Extension>;
+}
+
+declare class HTMLLanguagePlugin implements AXCodeEditorLanguagePlugin {
+    readonly id = "html";
+    readonly name = "HTML";
+    readonly version = "1.0.0";
+    readonly languages: readonly ["html"];
+    getExtension(): Promise<Extension>;
+}
+
+declare class CSSLanguagePlugin implements AXCodeEditorLanguagePlugin {
+    readonly id = "css";
+    readonly name = "CSS";
+    readonly version = "1.0.0";
+    readonly languages: readonly ["css"];
+    getExtension(): Promise<Extension>;
+}
+
+declare class SassLanguagePlugin implements AXCodeEditorLanguagePlugin {
+    readonly id = "sass";
+    readonly name = "Sass/SCSS";
+    readonly version = "1.0.0";
+    readonly languages: readonly ["sass", "scss"];
+    getExtension(): Promise<Extension>;
+}
+
+declare class SQLLanguagePlugin implements AXCodeEditorLanguagePlugin {
+    readonly id = "sql";
+    readonly name = "SQL";
+    readonly version = "1.0.0";
+    readonly languages: readonly ["sql"];
+    getExtension(): Promise<Extension>;
+}
+
+declare class XMLLanguagePlugin implements AXCodeEditorLanguagePlugin {
+    readonly id = "xml";
+    readonly name = "XML";
+    readonly version = "1.0.0";
+    readonly languages: readonly ["xml"];
+    getExtension(): Promise<Extension>;
+}
+
+declare class MarkdownLanguagePlugin implements AXCodeEditorLanguagePlugin {
+    readonly id = "markdown";
+    readonly name = "Markdown";
+    readonly version = "1.0.0";
+    readonly languages: readonly ["markdown"];
+    getExtension(): Promise<Extension>;
+}
+
+type AXCodeEditorDefaultLanguage = 'javascript' | 'js' | 'typescript' | 'ts' | 'json' | 'html' | 'css' | 'scss' | 'sass' | 'sql' | 'xml' | 'markdown';
+
+declare class OneDarkThemePlugin implements AXCodeEditorThemePlugin {
+    readonly id = "one-dark";
+    readonly name = "One Dark";
+    readonly version = "1.0.0";
+    readonly dark = true;
+    getExtension(): Promise<Extension>;
+}
+
+declare class LightThemePlugin implements AXCodeEditorThemePlugin {
+    readonly id = "light";
+    readonly name = "Light";
+    readonly version = "1.0.0";
+    readonly dark = false;
+    getExtension(): Promise<Extension>;
+}
+
+declare class GitHubLightThemePlugin implements AXCodeEditorThemePlugin {
+    readonly id = "github-light";
+    readonly name = "GitHub Light";
+    readonly version = "1.0.0";
+    readonly dark = false;
+    getExtension(): Promise<Extension>;
+}
+
+declare class GitHubDarkThemePlugin implements AXCodeEditorThemePlugin {
+    readonly id = "github-dark";
+    readonly name = "GitHub Dark";
+    readonly version = "1.0.0";
+    readonly dark = true;
+    getExtension(): Promise<Extension>;
+}
+
+declare class PrettierFormatterPlugin implements AXCodeEditorFormatterPlugin {
+    readonly id = "prettier";
+    readonly name = "Prettier";
+    readonly version = "1.0.0";
+    readonly languages: readonly ["javascript", "js", "typescript", "ts", "json", "html", "css", "markdown"];
+    format(text: string, language: string): Promise<string | null>;
+}
+
+/**
+ * Default plugin configuration with all built-in plugins
+ */
+declare function provideDefaultCodeEditorPlugins(): AXCodeEditorPluginConfig;
+
 type AXCodeEditorExtensionLike = _codemirror_state.Extension;
 type AXCodeEditorCompletionLike = _codemirror_autocomplete.Completion;
 type AXCodeEditorCompletionSourceLike = _codemirror_autocomplete.CompletionSource;
-/**
- * Supported syntax highlighting modes for the editor.
- */
-type AXCodeEditorSupportedLanguage = 'javascript' | 'js' | 'typescript' | 'ts' | 'json' | 'html' | 'css' | 'scss' | 'sass' | 'sql' | 'xml' | 'markdown' | 'text';
 declare class AXCodeEditorComponent extends MXValueComponent<string> {
-    /** Active language mode. Default: 'javascript'. */
-    language: _angular_core.InputSignal<AXCodeEditorSupportedLanguage>;
+    /** Active language identifier from default plugins. Default: 'javascript'. */
+    language: _angular_core.InputSignal<AXCodeEditorDefaultLanguage>;
     /** When true, the editor becomes readonly (non-editable). */
-    readOnly: _angular_core.InputSignal<boolean>;
+    editorReadonly: _angular_core.InputSignal<boolean>;
     /** Placeholder text shown when the document is empty. */
     placeholder: _angular_core.InputSignal<string>;
     /** Toggle rendering of line numbers in the gutter. */
@@ -27,12 +274,8 @@ declare class AXCodeEditorComponent extends MXValueComponent<string> {
     tabSize: _angular_core.InputSignal<number>;
     /** When true, the Tab key indents instead of moving focus. */
     indentWithTab: _angular_core.InputSignal<boolean>;
-    /** Fixed height for the editor (e.g., '320px'). */
-    height: _angular_core.InputSignal<string>;
-    /** Minimum height for the editor. */
-    minHeight: _angular_core.InputSignal<string>;
-    /** Maximum height for the editor. */
-    maxHeight: _angular_core.InputSignal<string>;
+    /** Theme identifier. If null, uses platform theme mode (dark/light). */
+    theme: _angular_core.InputSignal<string>;
     /** Additional CodeMirror extensions to apply. Reconfigures at runtime. */
     extensions: _angular_core.InputSignal<readonly _codemirror_state.Extension[]>;
     /** ARIA label for accessibility. */
@@ -54,9 +297,10 @@ declare class AXCodeEditorComponent extends MXValueComponent<string> {
     private platformId;
     private destroyRef;
     private platformService;
+    private pluginRegistry;
     private editorViewSig;
     private languageCompartment;
-    private readOnlyCompartment;
+    private readonlyCompartment;
     private themeCompartment;
     private placeholderCompartment;
     private wrappingCompartment;
@@ -76,8 +320,6 @@ declare class AXCodeEditorComponent extends MXValueComponent<string> {
     private loadCodeMirrorModules;
     private createCompartments;
     private buildKeymaps;
-    private tryFormatWithPrettier;
-    private resolveLanguageExtension;
     private resolveThemeExtension;
     private buildCustomCompletionSources;
     /** Programmatically focus the editor. */
@@ -90,7 +332,7 @@ declare class AXCodeEditorComponent extends MXValueComponent<string> {
     /** Returns the total number of lines in the current document. */
     getTotalLines(): number;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXCodeEditorComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXCodeEditorComponent, "ax-code-editor", never, { "language": { "alias": "language"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "lineNumbers": { "alias": "lineNumbers"; "required": false; "isSignal": true; }; "lineWrapping": { "alias": "lineWrapping"; "required": false; "isSignal": true; }; "tabSize": { "alias": "tabSize"; "required": false; "isSignal": true; }; "indentWithTab": { "alias": "indentWithTab"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "extensions": { "alias": "extensions"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "focusOnReady": { "alias": "focusOnReady"; "required": false; "isSignal": true; }; "formatOnSave": { "alias": "formatOnSave"; "required": false; "isSignal": true; }; "customCompletions": { "alias": "customCompletions"; "required": false; "isSignal": true; }; }, { "ready": "ready"; "save": "save"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXCodeEditorComponent, "ax-code-editor", never, { "disabled": { "alias": "disabled"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "language": { "alias": "language"; "required": false; "isSignal": true; }; "editorReadonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "lineNumbers": { "alias": "lineNumbers"; "required": false; "isSignal": true; }; "lineWrapping": { "alias": "lineWrapping"; "required": false; "isSignal": true; }; "tabSize": { "alias": "tabSize"; "required": false; "isSignal": true; }; "indentWithTab": { "alias": "indentWithTab"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "extensions": { "alias": "extensions"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "focusOnReady": { "alias": "focusOnReady"; "required": false; "isSignal": true; }; "formatOnSave": { "alias": "formatOnSave"; "required": false; "isSignal": true; }; "customCompletions": { "alias": "customCompletions"; "required": false; "isSignal": true; }; }, { "onValueChanged": "onValueChanged"; "valueChange": "valueChange"; "stateChange": "stateChange"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "ready": "ready"; "save": "save"; }, never, ["ax-validation-rule"], true, never>;
 }
 
 declare class AXCodeEditorModule {
@@ -99,5 +341,5 @@ declare class AXCodeEditorModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXCodeEditorModule>;
 }
 
-export { AXCodeEditorComponent, AXCodeEditorModule };
-export type { AXCodeEditorCompletionLike, AXCodeEditorCompletionSourceLike, AXCodeEditorExtensionLike, AXCodeEditorSupportedLanguage };
+export { AXCodeEditorComponent, AXCodeEditorModule, AXCodeEditorPluginRegistry, AX_CODE_EDITOR_PLUGIN_CONFIG, CSSLanguagePlugin, GitHubDarkThemePlugin, GitHubLightThemePlugin, HTMLLanguagePlugin, JSONLanguagePlugin, JavaScriptLanguagePlugin, LightThemePlugin, MarkdownLanguagePlugin, OneDarkThemePlugin, PrettierFormatterPlugin, SQLLanguagePlugin, SassLanguagePlugin, TypeScriptLanguagePlugin, XMLLanguagePlugin, provideDefaultCodeEditorPlugins };
+export type { AXCodeEditorCompletionLike, AXCodeEditorCompletionSourceLike, AXCodeEditorDefaultLanguage, AXCodeEditorExtensionLike, AXCodeEditorExtensionPlugin, AXCodeEditorFormatterPlugin, AXCodeEditorLanguagePlugin, AXCodeEditorPlugin, AXCodeEditorPluginConfig, AXCodeEditorThemePlugin };

package/collapse/index.d.ts

@@ -5,9 +5,8 @@ import { AfterViewInit, OnDestroy, EventEmitter, TemplateRef } from '@angular/co
 
 declare const AXCollapseGroupComponent_base: polytype.Polytype.ClusteredConstructor<[typeof MXBaseComponent, typeof MXLookComponent]>;
 /**
- * Container for collapsible items with configurable styling.
- *
- * @category Components
+ * @deprecated Use `accordion` instead.
+ * This component deprecated and no longer support.
  */
 declare class AXCollapseGroupComponent extends AXCollapseGroupComponent_base implements AfterViewInit, OnDestroy {
     /**
@@ -73,9 +72,8 @@ declare class AXCollapseClickEvent extends AXClickEvent {
 }
 declare const AXCollapseComponent_base: polytype.Polytype.ClusteredConstructor<[typeof MXInteractiveComponent, typeof MXLookComponent]>;
 /**
- * A component that provides a collapsible section with animated transitions.
- *
- * @category Components
+ * @deprecated Use `accordion` instead.
+ * This component deprecated and no longer support.
  */
 declare class AXCollapseComponent extends AXCollapseComponent_base {
     private parent;

package/command/index.d.ts

@@ -37,6 +37,7 @@ declare class AXCommandComponent extends AXCommandComponent_base {
     readonly onSearchBoxFocus: _angular_core.OutputEmitterRef<AXHtmlEvent<FocusEvent>>;
     readonly onSearchBoxBlur: _angular_core.OutputEmitterRef<AXHtmlEvent<FocusEvent>>;
     protected listNavigation: _angular_core.Signal<AXListNavigationDirective>;
+    private listNav;
     protected displayItems: _angular_core.Signal<CommandItem[]>;
     protected focusHandler(e: AXFocusEvent): void;
     protected blurHandler(e: AXFocusEvent): void;