@acorex/components 20.2.0-next.8 → 20.2.0

package/calendar/index.d.ts

@@ -1,15 +1,10 @@
 import * as polytype from 'polytype';
 import * as i0 from '@angular/core';
 import { TemplateRef, EventEmitter, AfterViewInit } from '@angular/core';
-import * as i5 from '@acorex/cdk/common';
 import { MXBaseComponent, AXItemClickEvent, AXRangeChangedEvent, MXValueComponent, AXRange, MXInteractiveComponent, AXClickEvent, MXComponentOptionChanged } from '@acorex/cdk/common';
-import * as i2 from '@acorex/core/date-time';
 import { AXCalendarService, AXDateTime, AXDateTimeRange } from '@acorex/core/date-time';
 import { AXLocaleService } from '@acorex/core/locale';
-import * as i3 from '@acorex/core/translation';
 import { AXTranslationService } from '@acorex/core/translation';
-import * as i1 from '@angular/common';
-import * as i4 from '@acorex/components/tooltip';
 
 type AXCalendarViewType = 'year' | 'month' | 'day';
 type AXCalendarViewDepth = AXCalendarViewType;
@@ -176,7 +171,7 @@ declare class AXCalendarRangeComponent extends AXCalendarRangeComponent_base imp
      */
     private _syncNav2;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXCalendarRangeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXCalendarRangeComponent, "ax-calendar-range", never, { "rtl": { "alias": "rtl"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "depth": { "alias": "depth"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "holidayDates": { "alias": "holidayDates"; "required": false; }; "type": { "alias": "type"; "required": false; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; }; "cellClass": { "alias": "cellClass"; "required": false; }; "showNavigation": { "alias": "showNavigation"; "required": false; }; }, { "onOptionChanged": "onOptionChanged"; "valueChange": "valueChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "depthChange": "depthChange"; "typeChange": "typeChange"; "activeViewChange": "activeViewChange"; "disabledDatesChange": "disabledDatesChange"; "holidayDatesChange": "holidayDatesChange"; "onNavigate": "onNavigate"; "onSlotClick": "onSlotClick"; }, never, ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXCalendarRangeComponent, "ax-calendar-range", never, { "rtl": { "alias": "rtl"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "depth": { "alias": "depth"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "holidayDates": { "alias": "holidayDates"; "required": false; }; "type": { "alias": "type"; "required": false; }; "dayCellTemplate": { "alias": "dayCellTemplate"; "required": false; }; "monthCellTemplate": { "alias": "monthCellTemplate"; "required": false; }; "yearCellTemplate": { "alias": "yearCellTemplate"; "required": false; }; "cellClass": { "alias": "cellClass"; "required": false; }; "showNavigation": { "alias": "showNavigation"; "required": false; }; }, { "onOptionChanged": "onOptionChanged"; "valueChange": "valueChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "depthChange": "depthChange"; "typeChange": "typeChange"; "activeViewChange": "activeViewChange"; "disabledDatesChange": "disabledDatesChange"; "holidayDatesChange": "holidayDatesChange"; "onNavigate": "onNavigate"; "onSlotClick": "onSlotClick"; }, never, ["*"], true, never>;
 }
 
 declare const AXCalendarComponent_base: polytype.Polytype.ClusteredConstructor<[{
@@ -191,8 +186,10 @@ declare const AXCalendarComponent_base: polytype.Polytype.ClusteredConstructor<[
  */
 declare class AXCalendarComponent extends AXCalendarComponent_base implements AfterViewInit {
     private formatService;
+    weekend: i0.InputSignal<number[]>;
+    weekdays: i0.InputSignal<number[]>;
     protected calendar: i0.WritableSignal<string>;
-    get displayRange(): AXDateTimeRange;
+    get displayRange(): AXDateTimeRange | null;
     /**
      *  @ignore
      */
@@ -277,6 +274,9 @@ declare class AXCalendarComponent extends AXCalendarComponent_base implements Af
      *  @ignore
      */
     protected _handleNavClick(e: AXClickEvent | any, view: AXCalendarViewType): void;
+    /**
+     * Toggles between different calendar views (day → month → year).
+     */
     toggleView(): void;
     /**
      *  @ignore
@@ -295,18 +295,31 @@ declare class AXCalendarComponent extends AXCalendarComponent_base implements Af
      */
     protected _handleGoToday(): void;
     /**
-     * Navigates to the next item.
-     * @ignore
+     * Navigates forward in the calendar based on the current active view and the configured count.
+     *
+     * Behavior by view:
+     * - day view: advances by count months
+     * - month view: advances by count years
+     * - year view: advances by 10 × count years
+     *
+     * @returns void
      */
     next(): void;
     /**
-     * Navigates to the previous item.
-     * @ignore
+     * Navigates backward in the calendar based on the current active view and the configured count.
+     *
+     * Behavior by view:
+     * - day view: goes back by count months
+     * - month view: goes back by count years
+     * - year view: goes back by 10 × count years
+     *
+     * @returns void
      */
     prev(): void;
     /**
      * Sets focus to the currently selected calendar slot or the first available slot.
-     * @ignore
+     *
+     * @returns void
      */
     focus(): void;
     /**
@@ -314,15 +327,16 @@ declare class AXCalendarComponent extends AXCalendarComponent_base implements Af
      */
     private _navNextPrev;
     /**
-     * Navigates to the current date.
-     * @ignore
+     * Navigates to the current date and emits the navigation event.
+     *
+     * @returns void
      */
     goToday(): void;
     /**
      * Navigates to a specified date and updates the view.
      *
-     * @param date - The date to navigate to, which can be a `Date` object or an `AXDateTime` instance.
-     * @ignore
+     * @param date The date to navigate to, which can be a Date object or an AXDateTime instance.
+     * @returns void
      */
     navTo(date: Date | AXDateTime): void;
     /**
@@ -354,12 +368,12 @@ declare class AXCalendarComponent extends AXCalendarComponent_base implements Af
      */
     protected getMonthName(date: AXDateTime, style: 'short' | 'long'): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXCalendarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXCalendarComponent, "ax-calendar", never, { "rtl": { "alias": "rtl"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "depth": { "alias": "depth"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "holidayDates": { "alias": "holidayDates"; "required": false; }; "type": { "alias": "type"; "required": false; }; "cellTemplate": { "alias": "cellTemplate"; "required": false; }; "cellClass": { "alias": "cellClass"; "required": false; }; "showNavigation": { "alias": "showNavigation"; "required": false; }; "count": { "alias": "count"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "onOptionChanged": "onOptionChanged"; "valueChange": "valueChange"; "onValueChanged": "onValueChanged"; "minValueChange": "minValueChange"; "maxValueChange": "maxValueChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "depthChange": "depthChange"; "typeChange": "typeChange"; "activeViewChange": "activeViewChange"; "disabledDatesChange": "disabledDatesChange"; "holidayDatesChange": "holidayDatesChange"; "onNavigate": "onNavigate"; "onSlotClick": "onSlotClick"; "countChange": "countChange"; }, never, ["ax-header", "ax-footer"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXCalendarComponent, "ax-calendar", never, { "rtl": { "alias": "rtl"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "depth": { "alias": "depth"; "required": false; }; "activeView": { "alias": "activeView"; "required": false; }; "minValue": { "alias": "minValue"; "required": false; }; "maxValue": { "alias": "maxValue"; "required": false; }; "disabledDates": { "alias": "disabledDates"; "required": false; }; "holidayDates": { "alias": "holidayDates"; "required": false; }; "type": { "alias": "type"; "required": false; }; "dayCellTemplate": { "alias": "dayCellTemplate"; "required": false; }; "monthCellTemplate": { "alias": "monthCellTemplate"; "required": false; }; "yearCellTemplate": { "alias": "yearCellTemplate"; "required": false; }; "cellClass": { "alias": "cellClass"; "required": false; }; "showNavigation": { "alias": "showNavigation"; "required": false; }; "count": { "alias": "count"; "required": false; }; "id": { "alias": "id"; "required": false; }; "weekend": { "alias": "weekend"; "required": false; "isSignal": true; }; "weekdays": { "alias": "weekdays"; "required": false; "isSignal": true; }; }, { "onOptionChanged": "onOptionChanged"; "valueChange": "valueChange"; "onValueChanged": "onValueChanged"; "minValueChange": "minValueChange"; "maxValueChange": "maxValueChange"; "onBlur": "onBlur"; "onFocus": "onFocus"; "depthChange": "depthChange"; "typeChange": "typeChange"; "activeViewChange": "activeViewChange"; "disabledDatesChange": "disabledDatesChange"; "holidayDatesChange": "holidayDatesChange"; "onNavigate": "onNavigate"; "onSlotClick": "onSlotClick"; "countChange": "countChange"; }, never, ["ax-header", "ax-footer"], true, never>;
 }
 
 declare class AXCalendarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXCalendarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXCalendarModule, never, [typeof i1.CommonModule, typeof i2.AXDateTimeModule, typeof i3.AXTranslationModule, typeof i4.AXTooltipModule, typeof i5.AXRippleDirective, typeof AXCalendarComponent, typeof AXCalendarRangeComponent], [typeof AXCalendarComponent, typeof AXCalendarRangeComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXCalendarModule, never, [typeof AXCalendarComponent, typeof AXCalendarRangeComponent], [typeof AXCalendarComponent, typeof AXCalendarRangeComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXCalendarModule>;
 }
 

package/check-box/index.d.ts

@@ -1,9 +1,6 @@
 import * as polytype from 'polytype';
 import * as i0 from '@angular/core';
 import { MXValueComponent, MXColorComponent } from '@acorex/cdk/common';
-import * as i1 from '@angular/common';
-import * as i2 from '@angular/forms';
-import * as i3 from '@acorex/components/decorators';
 
 declare const AXCheckBoxComponent_base: polytype.Polytype.ClusteredConstructor<[{
     new (): MXValueComponent<boolean>;
@@ -63,12 +60,12 @@ declare class AXCheckBoxComponent extends AXCheckBoxComponent_base {
     private get __hostClass();
     protected changeValue(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXCheckBoxComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXCheckBoxComponent, "ax-check-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "color": { "alias": "color"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "onValueChanged": "onValueChanged"; }, ["_labels"], ["ax-label", "ax-form-hint", "ax-validation-rule"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXCheckBoxComponent, "ax-check-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "color": { "alias": "color"; "required": false; }; "value": { "alias": "value"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "isLoading": { "alias": "isLoading"; "required": false; "isSignal": true; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "onValueChanged": "onValueChanged"; }, ["_labels"], ["ax-label", "ax-form-hint", "ax-validation-rule"], true, never>;
 }
 
 declare class AXCheckBoxModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXCheckBoxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXCheckBoxModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i3.AXDecoratorModule, typeof AXCheckBoxComponent], [typeof AXCheckBoxComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXCheckBoxModule, never, [typeof AXCheckBoxComponent], [typeof AXCheckBoxComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXCheckBoxModule>;
 }
 

package/chips/index.d.ts

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
 import * as i1 from '@acorex/cdk/common';
 import { AXStyleLookType, AXStyleSizeType, MXColorComponent } from '@acorex/cdk/common';
-import * as i1$1 from '@angular/common';
 
 type AXChipsLookType = Extract<AXStyleLookType, 'solid' | 'outline' | 'twotone'>;
 type AXChipsSizeType = Exclude<AXStyleSizeType, 'ax-xs' | 'ax-xl'>;
@@ -29,7 +28,7 @@ declare class AXChipsComponent extends MXColorComponent {
 
 declare class AXChipsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXChipsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXChipsModule, never, [typeof i1$1.CommonModule, typeof AXChipsComponent], [typeof AXChipsComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXChipsModule, never, [typeof AXChipsComponent], [typeof AXChipsComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXChipsModule>;
 }
 

package/circular-progress/index.d.ts

@@ -4,7 +4,8 @@ import { MXColorComponent } from '@acorex/cdk/common';
 
 type AXCircularProgressMode = 'determinate' | 'indeterminate';
 /**
- * The Button is a component which detects user interaction and triggers a corresponding event
+ * Displays the progress of an operation in a circular form. Supports determinate and indeterminate modes,
+ * configurable size and stroke, and color theming.
  *
  * @category Components
  */
@@ -14,29 +15,20 @@ declare class AXCircularProgressComponent extends MXColorComponent {
      */
     circle: _angular_core.Signal<ElementRef<HTMLDivElement>>;
     /**
-     * Defines the current progress of the circular progress component.
-     *
-     * Change progress mode
-     *
+     * Defines the progress calculation mode.
+     * Use 'determinate' to show a specific percentage or 'indeterminate' for ongoing/spinner state.
      */
     mode: _angular_core.InputSignal<AXCircularProgressMode>;
     /**
-     * Defines the current progress of the circular progress component.
-     *
-     * The percentage value to set for the progress.
-     *
+     * The percentage value to set for the progress (0–100).
      */
     progress: _angular_core.ModelSignal<number>;
     /**
-     * Defines the stroke width of the circular progress component.
-     *
-     * The stroke width to be set for the circular progress component.
+     * Stroke width of the circular track, in pixels.
      */
     stroke: _angular_core.ModelSignal<number>;
     /**
-     * Defines the stroke width of the circular progress component.
-     *
-     * Circle size
+     * Overall diameter of the circular progress, in pixels.
      */
     size: _angular_core.ModelSignal<number>;
     /**
@@ -48,15 +40,28 @@ declare class AXCircularProgressComponent extends MXColorComponent {
      */
     private get __hostClass();
     /**
-     * @ignore
+     * Sets the CSS custom properties to reflect the current `size` and `stroke` values.
+     *
+     * Updates `--ax-comp-circular-progress-circle-size` and `--ax-comp-circular-progress-stroke-size` on the circle.
+     *
+     * @returns void - Styles are applied to the circle element when available.
      */
     setCircularSize(): void;
     /**
-     * @ignore
+     * Recalculates and applies the progress arc background based on the current `progress` value.
+     *
+     * Uses a conic-gradient with `--ax-comp-progress-circular-color` and `--ax-comp-progress-circular-line-color`.
+     * The expected range for `progress` is 0–100.
+     *
+     * @returns void - Styles are applied to the circle element when available.
      */
     updateProgress(): void;
     /**
-     * @ignore
+     * Applies a default visual state for the indeterminate mode when no explicit `progress` is set.
+     *
+     * If `mode` is 'indeterminate' and `progress` is not set, it sets `progress` to 65 to render a visible arc.
+     *
+     * @returns void
      */
     setIndeterminateMode(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXCircularProgressComponent, never>;

package/code-editor/README.md

@@ -0,0 +1,3 @@
+# @acorex/components/code-editor
+
+Secondary entry point of `@acorex/components`. It can be used by importing from `@acorex/components/code-editor`.

package/code-editor/index.d.ts

@@ -0,0 +1,103 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+import * as _codemirror_autocomplete from '@codemirror/autocomplete';
+import * as _codemirror_state from '@codemirror/state';
+import { MXValueComponent } from '@acorex/cdk/common';
+import * as i1 from '@angular/common';
+
+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>;
+    /** When true, the editor becomes readonly (non-editable). */
+    readOnly: _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. */
+    lineNumbers: _angular_core.InputSignal<boolean>;
+    /** Soft-wrap long lines when true. */
+    lineWrapping: _angular_core.InputSignal<boolean>;
+    /** Tab size (spaces per indent level). */
+    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>;
+    /** Additional CodeMirror extensions to apply. Reconfigures at runtime. */
+    extensions: _angular_core.InputSignal<readonly _codemirror_state.Extension[]>;
+    /** ARIA label for accessibility. */
+    ariaLabel: _angular_core.InputSignal<string>;
+    /** Focus the editor after first render. */
+    focusOnReady: _angular_core.InputSignal<boolean>;
+    /** If true, format the document via Prettier before emitting save. */
+    formatOnSave: _angular_core.InputSignal<boolean>;
+    /**
+     * Custom autocompletion options: either a static array of Completion items
+     * or a CodeMirror CompletionSource function.
+     */
+    customCompletions: _angular_core.InputSignal<_codemirror_autocomplete.CompletionSource | readonly _codemirror_autocomplete.Completion[]>;
+    /** Emits when the editor is fully initialized and ready. */
+    ready: _angular_core.OutputEmitterRef<void>;
+    /** Emits when the user triggers save (Ctrl/Cmd+S). Payload is the current text. */
+    save: _angular_core.OutputEmitterRef<string>;
+    host: _angular_core.Signal<ElementRef<HTMLDivElement>>;
+    private platformId;
+    private destroyRef;
+    private platformService;
+    private editorViewSig;
+    private languageCompartment;
+    private readOnlyCompartment;
+    private themeCompartment;
+    private placeholderCompartment;
+    private wrappingCompartment;
+    private keymapExtrasCompartment;
+    private tabSizeCompartment;
+    private lineNumbersCompartment;
+    private cm;
+    private isBrowser;
+    constructor();
+    private initializeEditor;
+    private reconfigure;
+    /**
+     * Handles Ctrl/Cmd+S on the host. If formatOnSave is enabled, attempts
+     * to format the document first, then emits the saved text.
+     */
+    onSaveShortcut(event: KeyboardEvent): Promise<void>;
+    private loadCodeMirrorModules;
+    private createCompartments;
+    private buildKeymaps;
+    private tryFormatWithPrettier;
+    private resolveLanguageExtension;
+    private resolveThemeExtension;
+    private buildCustomCompletionSources;
+    /** Programmatically focus the editor. */
+    focus(): void;
+    /** Select all text in the current document. */
+    selectAll(): void;
+    format(affect?: boolean): Promise<string | null>;
+    /** Returns the total number of characters in the current document. */
+    getTotalCharacters(): number;
+    /** 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>;
+}
+
+declare class AXCodeEditorModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXCodeEditorModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXCodeEditorModule, never, [typeof i1.CommonModule, typeof AXCodeEditorComponent], [typeof AXCodeEditorComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXCodeEditorModule>;
+}
+
+export { AXCodeEditorComponent, AXCodeEditorModule };
+export type { AXCodeEditorCompletionLike, AXCodeEditorCompletionSourceLike, AXCodeEditorExtensionLike, AXCodeEditorSupportedLanguage };

package/collapse/index.d.ts

@@ -2,8 +2,6 @@ import * as polytype from 'polytype';
 import { MXBaseComponent, MXLookComponent, AXClickEvent, MXInteractiveComponent } from '@acorex/cdk/common';
 import * as i0 from '@angular/core';
 import { AfterViewInit, OnDestroy, EventEmitter, TemplateRef } from '@angular/core';
-import * as i1 from '@angular/common';
-import * as i2 from '@acorex/components/loading';
 
 declare const AXCollapseGroupComponent_base: polytype.Polytype.ClusteredConstructor<[typeof MXBaseComponent, typeof MXLookComponent]>;
 /**
@@ -143,17 +141,20 @@ declare class AXCollapseComponent extends AXCollapseComponent_base {
     handleHeaderClick(e: MouseEvent): void;
     /**
      * Expands the collapse component.
-     *  @ignore
+     *
+     * @returns void - No return value. Sets `isCollapsed` to false and expands the body.
      */
     open(): void;
     /**
      * Collapses the collapse component.
-     * @ignore
+     *
+     * @returns void - No return value. Sets `isCollapsed` to true and hides the body.
      */
     close(): void;
     /**
      * Toggles the collapse state between expanded and collapsed.
-     * @ignore
+     *
+     * @returns void - No return value. Flips the `isCollapsed` state.
      */
     toggle(): void;
     /**
@@ -166,7 +167,7 @@ declare class AXCollapseComponent extends AXCollapseComponent_base {
 
 declare class AXCollapseModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXCollapseModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXCollapseModule, never, [typeof i1.CommonModule, typeof i2.AXLoadingModule, typeof AXCollapseComponent, typeof AXCollapseGroupComponent], [typeof AXCollapseComponent, typeof AXCollapseGroupComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXCollapseModule, never, [typeof AXCollapseComponent, typeof AXCollapseGroupComponent], [typeof AXCollapseComponent, typeof AXCollapseGroupComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXCollapseModule>;
 }
 

package/color-box/index.d.ts

@@ -1,12 +1,8 @@
 import * as polytype from 'polytype';
 import * as _angular_core from '@angular/core';
 import { MXInputBaseValueComponent, MXColorLookComponent, AXEvent } from '@acorex/cdk/common';
-import * as i3 from '@acorex/components/color-palette';
-import { AXColorPalleteComponent, AXColorPalettePickerComponent } from '@acorex/components/color-palette';
-import * as i4 from '@acorex/components/dropdown';
+import { AXColorPaletteComponent, AXColorPalettePickerComponent } from '@acorex/components/color-palette';
 import { MXDropdownBoxBaseComponent, AXDropdownBoxComponent } from '@acorex/components/dropdown';
-import * as i1 from '@angular/common';
-import * as i2 from '@angular/forms';
 
 declare const AXColorBoxComponent_base: polytype.Polytype.ClusteredConstructor<[typeof MXDropdownBoxBaseComponent, {
     new (): MXInputBaseValueComponent<string>;
@@ -26,7 +22,7 @@ declare class AXColorBoxComponent extends AXColorBoxComponent_base {
     /**
      *  @ignore
      */
-    protected picker: AXColorPalleteComponent;
+    protected picker: AXColorPaletteComponent;
     protected palettePicker: _angular_core.Signal<AXColorPalettePickerComponent>;
     /**
      *  @ignore
@@ -59,14 +55,16 @@ declare class AXColorBoxComponent extends AXColorBoxComponent_base {
      * @ignore
      */
     internalValueChanged(value?: Date): void;
+    protected ngOnInit(): void;
     handleKeyboardEvent(event: KeyboardEvent): void;
+    private get __hostName();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXColorBoxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXColorBoxComponent, "ax-color-box", 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; }; "showBadge": { "alias": "showBadge"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXColorBoxComponent, "ax-color-box", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "look": { "alias": "look"; "required": false; }; "showBadge": { "alias": "showBadge"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "showClearButton": { "alias": "showClearButton"; "required": false; "isSignal": true; }; "showIcon": { "alias": "showIcon"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; "onOpened": "onOpened"; "onClosed": "onClosed"; }, never, ["ax-prefix", "ax-clear-button", "ax-suffix", "ax-validation-rule"], true, never>;
 }
 
 declare class AXColorBoxModule {
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXColorBoxModule, never>;
-    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXColorBoxModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i3.AXColorPaletteModule, typeof i4.AXDropdownModule, typeof AXColorBoxComponent], [typeof AXColorBoxComponent]>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXColorBoxModule, never, [typeof AXColorBoxComponent], [typeof AXColorBoxComponent]>;
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXColorBoxModule>;
 }
 

package/color-palette/index.d.ts

@@ -1,18 +1,7 @@
 import { AXValueChangedEvent, AXOptionChangedEvent, MXBaseComponent, MXValueComponent } from '@acorex/cdk/common';
-import * as i3 from '@acorex/components/text-box';
 import { AXMaskOptions } from '@acorex/components/text-box';
 import * as i0 from '@angular/core';
-import { EventEmitter, AfterViewInit, OnDestroy, Renderer2, NgZone, ElementRef, OnInit, QueryList } from '@angular/core';
-import * as i1 from '@angular/common';
-import * as i2 from '@angular/forms';
-import * as i4 from '@acorex/components/label';
-import * as i5 from '@acorex/components/button';
-import * as i6 from '@acorex/components/decorators';
-import * as i7 from '@acorex/components/number-box';
-import * as i8 from '@acorex/components/range-slider';
-import * as i9 from '@acorex/components/slider';
-import * as i10 from '@angular/cdk/drag-drop';
-import * as i11 from '@acorex/components/select-box';
+import { EventEmitter, AfterViewInit, OnDestroy, ElementRef, OnInit, QueryList } from '@angular/core';
 
 /**
  * A token that specifies the  display mode of datapager component.
@@ -46,7 +35,7 @@ declare const AXDefaultColorPalette: {
  * @category Components
  */
 declare class AXColorPaletteInputComponent extends MXBaseComponent implements AfterViewInit {
-    _parent: AXColorPaletteParentComponent;
+    protected _parent: AXColorPaletteParentComponent;
     private _unsubscriber;
     private colorService;
     isValid: boolean;
@@ -80,11 +69,11 @@ declare class AXColorPaletteInputComponent extends MXBaseComponent implements Af
     /**
      *  @ignore
      */
-    _handleChangeInputMode(): void;
+    protected _handleChangeInputMode(): void;
     /**
      *  @ignore
      */
-    _handleRGBAValueChanged(e: AXValueChangedEvent<number>): void;
+    protected _handleRGBAValueChanged(e: AXValueChangedEvent<number>): void;
     /**
      *  @ignore
      */
@@ -107,11 +96,11 @@ declare class AXColorPaletteInputComponent extends MXBaseComponent implements Af
  * @category Components
  */
 declare class AXColorPalettePickerComponent extends MXBaseComponent implements OnDestroy {
-    _parent: AXColorPaletteParentComponent;
+    protected _parent: AXColorPaletteParentComponent;
     private _unsubscriber;
     private colorService;
-    render: Renderer2;
-    zone: NgZone;
+    private render;
+    private zone;
     _rgba: {
         r: number;
         g: number;
@@ -163,7 +152,13 @@ declare class AXColorPalettePickerComponent extends MXBaseComponent implements O
      */
     private setHSV;
     /**
-     *  @ignore
+     * Synchronizes internal RGBA and UI state with the parent palette value.
+     *
+     * Called when the parent emits onValueChanged. Updates local RGBA from the parent
+     * value, recalculates gradient and pointer when the user is not actively changing
+     * the color, and requests change detection.
+     *
+     * @returns void
      */
     parentColorChanged(): void;
     /**
@@ -275,21 +270,21 @@ declare class AXColorPaletteSwatchesComponent extends MXBaseComponent implements
  *
  * @category Components
  */
-declare class AXColorPalleteComponent extends MXValueComponent<string> {
+declare class AXColorPaletteComponent extends MXValueComponent<string> {
     _children: QueryList<AXColorPaletteChildComponent>;
     /**
      *  @ignore
      */
     private get __hostDisabled();
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPalleteComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXColorPalleteComponent, "ax-color-palette", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; }, ["_children"], ["ax-header", "ax-color-palette-preview", "ax-color-palette-picker", "ax-color-palette-swatches", "ax-color-palette-favorite", "ax-color-palette-input", "ax-footer"], true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPaletteComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXColorPaletteComponent, "ax-color-palette", never, { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; }, { "onBlur": "onBlur"; "onFocus": "onFocus"; "valueChange": "valueChange"; "stateChange": "stateChange"; "onValueChanged": "onValueChanged"; "readonlyChange": "readonlyChange"; "disabledChange": "disabledChange"; }, ["_children"], ["ax-header", "ax-color-palette-preview", "ax-color-palette-picker", "ax-color-palette-swatches", "ax-color-palette-favorite", "ax-color-palette-input", "ax-footer"], true, never>;
 }
 
 declare class AXColorPaletteModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXColorPaletteModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXColorPaletteModule, never, [typeof i1.CommonModule, typeof i2.FormsModule, typeof i3.AXTextBoxModule, typeof i4.AXLabelModule, typeof i5.AXButtonModule, typeof i6.AXDecoratorModule, typeof i7.AXNumberBoxModule, typeof i8.AXRangeSliderModule, typeof i9.AXSliderModule, typeof i10.DragDropModule, typeof i11.AXSelectBoxModule, typeof AXColorPalleteComponent, typeof AXColorPalettePreviewComponent, typeof AXColorPaletteSwatchesComponent, typeof AXColorPaletteInputComponent, typeof AXColorPalettePickerComponent], [typeof AXColorPalleteComponent, typeof AXColorPalettePreviewComponent, typeof AXColorPaletteSwatchesComponent, typeof AXColorPaletteInputComponent, typeof AXColorPalettePickerComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXColorPaletteModule, never, [typeof AXColorPaletteComponent, typeof AXColorPalettePreviewComponent, typeof AXColorPaletteSwatchesComponent, typeof AXColorPaletteInputComponent, typeof AXColorPalettePickerComponent], [typeof AXColorPaletteComponent, typeof AXColorPalettePreviewComponent, typeof AXColorPaletteSwatchesComponent, typeof AXColorPaletteInputComponent, typeof AXColorPalettePickerComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXColorPaletteModule>;
 }
 
-export { AXColorPaletteChildComponent, AXColorPaletteInputComponent, AXColorPaletteModule, AXColorPaletteParentComponent, AXColorPalettePickerComponent, AXColorPalettePreviewComponent, AXColorPaletteSwatchesComponent, AXColorPalleteComponent, AXDefaultColorPalette };
+export { AXColorPaletteChildComponent, AXColorPaletteComponent, AXColorPaletteInputComponent, AXColorPaletteModule, AXColorPaletteParentComponent, AXColorPalettePickerComponent, AXColorPalettePreviewComponent, AXColorPaletteSwatchesComponent, AXDefaultColorPalette };
 export type { AXColorChangedEvent, AXColorPaletteView };

package/command/README.md

@@ -0,0 +1,3 @@
+# @acorex/components/command
+
+Secondary entry point of `@acorex/components`. It can be used by importing from `@acorex/components/command`.

package/command/index.d.ts

@@ -0,0 +1,60 @@
+import * as polytype from 'polytype';
+import * as _angular_core from '@angular/core';
+import { AXEvent, MXInputBaseValueComponent, MXLookComponent, AXHtmlEvent, AXFocusEvent } from '@acorex/cdk/common';
+import { AXListNavigationDirective, AXListNavigationItemDirective } from '@acorex/cdk/list-navigation';
+import { AXSearchBoxComponent } from '@acorex/components/search-box';
+
+type CommandItem = {
+    id: string | number;
+    text: string;
+    icon?: string;
+    href?: string;
+    children?: CommandItem[];
+    index?: number;
+    data?: any;
+};
+type CommandMenuItem = {
+    pinned?: {
+        title: string;
+        items: CommandItem[];
+    };
+    items: CommandItem[];
+};
+declare class AXCommandComponentEvent extends AXEvent {
+    data: CommandItem;
+}
+
+declare const AXCommandComponent_base: polytype.Polytype.ClusteredConstructor<[{
+    new (): MXInputBaseValueComponent<CommandMenuItem>;
+    ɵfac: _angular_core.ɵɵFactoryDeclaration<MXInputBaseValueComponent<any>, never>;
+    ɵprov: _angular_core.ɵɵInjectableDeclaration<MXInputBaseValueComponent<any>>;
+}, typeof MXLookComponent]>;
+declare class AXCommandComponent extends AXCommandComponent_base {
+    protected searchValue: _angular_core.WritableSignal<string>;
+    protected searchBox: _angular_core.Signal<AXSearchBoxComponent>;
+    readonly onSubmit: _angular_core.OutputEmitterRef<AXCommandComponentEvent>;
+    readonly onEscape: _angular_core.OutputEmitterRef<AXHtmlEvent<KeyboardEvent>>;
+    readonly onSearchBoxFocus: _angular_core.OutputEmitterRef<AXHtmlEvent<FocusEvent>>;
+    readonly onSearchBoxBlur: _angular_core.OutputEmitterRef<AXHtmlEvent<FocusEvent>>;
+    protected listNavigation: _angular_core.Signal<AXListNavigationDirective>;
+    protected displayItems: _angular_core.Signal<CommandItem[]>;
+    protected focusHandler(e: AXFocusEvent): void;
+    protected blurHandler(e: AXFocusEvent): void;
+    private filterRecursive;
+    protected onItemClick(item: CommandItem): void;
+    protected keyPress(e: AXHtmlEvent<KeyboardEvent>, item: CommandItem): void;
+    protected searchEscapeHandler(e: AXHtmlEvent<KeyboardEvent>): void;
+    protected closeHandler(e: AXHtmlEvent<KeyboardEvent>): void;
+    protected activeHandler(l: AXListNavigationDirective, i: AXListNavigationItemDirective): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXCommandComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXCommandComponent, "ax-command", never, { "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "value": { "alias": "value"; "required": false; }; "state": { "alias": "state"; "required": false; }; "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; }, { "onSubmit": "onSubmit"; "onEscape": "onEscape"; "onSearchBoxFocus": "onSearchBoxFocus"; "onSearchBoxBlur": "onSearchBoxBlur"; }, never, never, true, never>;
+}
+
+declare class AXCommandModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXCommandModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXCommandModule, never, [typeof AXCommandComponent], [typeof AXCommandComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXCommandModule>;
+}
+
+export { AXCommandComponent, AXCommandComponentEvent, AXCommandModule };
+export type { CommandItem, CommandMenuItem };