@acorex/components 19.11.0-next.2 → 19.11.0-next.4

package/grid-layout-builder/lib/grid-layout-container.component.d.ts

@@ -1,221 +1,67 @@
-import { OnDestroy } from '@angular/core';
-import { AXGridLayout, AXGridLayoutDroppedEvent, AXGridLayoutElementEvent, AXGridLayoutEventEvent, AXGridLayoutNode, AXGridLayoutNodesEvent, AXGridLayoutOptions, AXGridLayoutWidget, AXGridLayoutWidgetCompElement, AXGridLayoutWidgetElement, AXSaveCallback } from './types';
+import { NXComponent } from '@acorex/components/common';
+import { OnDestroy, QueryList } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { AXGridLayoutWidgetComponent } from './grid-layout-widget.component';
+import { AXGridLayout, AXGridLayoutChangedEvent, AXGridLayoutDroppedEvent, AXGridLayoutElementEvent, AXGridLayoutEventEvent, AXGridLayoutNode, AXGridLayoutNodesEvent, AXGridLayoutOptions, AXGridLayoutWidget, AXGridLayoutWidgetElement, AXSaveCallback } from './types';
 import * as i0 from "@angular/core";
-/**
- * The `AXGridLayoutContainerComponent` is an Angular component that acts as a wrapper for the GridStack library.
- * It provides a flexible grid layout system for arranging items within a container. It integrates with GridStack.js
- * and allows dynamic manipulation of grid items (widgets), including adding, removing, resizing, and dragging.
- *
- * This component uses Angular's reactive signals, outputs, and lifecycle hooks to manage grid state and interactions.
- */
-export declare class AXGridLayoutContainerComponent implements OnDestroy {
+export declare class AXGridLayoutContainerComponent extends NXComponent implements OnDestroy {
     #private;
     options: import("@angular/core").InputSignal<import("gridstack").GridStackOptions>;
-    /**
-     * Output event emitted when a widget is added to the grid.
-     */
     protected onAdded: import("@angular/core").OutputEmitterRef<AXGridLayoutNodesEvent>;
-    /**
-     * Output event emitted when a widget or layout is changed.
-     */
-    protected onChange: import("@angular/core").OutputEmitterRef<AXGridLayoutNodesEvent>;
-    /**
-     * Output event emitted when the grid is disabled.
-     */
-    protected onDisable: import("@angular/core").OutputEmitterRef<AXGridLayoutEventEvent>;
-    /**
-     * Output event emitted during a drag operation on a widget.
-     */
-    protected onDrag: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
-    /**
-     * Output event emitted when drag starts on a widget.
-     */
-    protected onDragStart: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
-    /**
-     * Output event emitted when drag stops on a widget.
-     */
-    protected onDragStop: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
-    /**
-     * Output event emitted when a widget is dropped on the grid.
-     */
-    protected onDropped: import("@angular/core").OutputEmitterRef<AXGridLayoutDroppedEvent>;
-    /**
-     * Output event emitted when the grid is enabled.
-     */
-    protected onEnable: import("@angular/core").OutputEmitterRef<AXGridLayoutEventEvent>;
-    /**
-     * Output event emitted when a widget is removed from the grid.
-     */
     protected onRemoved: import("@angular/core").OutputEmitterRef<AXGridLayoutNodesEvent>;
-    /**
-     * Output event emitted when a widget is resized.
-     */
-    protected onResize: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
-    /**
-     * Output event emitted when resizing starts on a widget.
-     */
-    protected onResizeStart: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
-    /**
-     * Output event emitted when resizing stops on a widget.
-     */
-    protected onResizeStop: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
-    /**
-     * Output event emitted when the grid is rendered.
-     */
-    protected isRendered: import("@angular/core").OutputEmitterRef<boolean>;
-    /**
-     * Model that tracks whether the grid container is empty.
-     */
+    protected onWidgetChange: import("@angular/core").OutputEmitterRef<AXGridLayoutNodesEvent>;
+    protected onChange: import("@angular/core").OutputEmitterRef<AXGridLayoutChangedEvent>;
+    protected _onEnable: import("@angular/core").OutputEmitterRef<AXGridLayoutEventEvent>;
+    protected _onDisable: import("@angular/core").OutputEmitterRef<AXGridLayoutEventEvent>;
+    protected _onWidgetDrag: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
+    protected _onWidgetDragStart: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
+    protected _onWidgetDragStop: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
+    protected _onWidgetDropped: import("@angular/core").OutputEmitterRef<AXGridLayoutDroppedEvent>;
+    protected _onWidgetResized: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
+    protected _onWidgetResizeStart: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
+    protected _onWidgetResizeStop: import("@angular/core").OutputEmitterRef<AXGridLayoutElementEvent>;
+    protected isLayoutRendered: import("@angular/core").OutputEmitterRef<boolean>;
     protected isEmpty: import("@angular/core").ModelSignal<boolean>;
-    private serializedData?;
-    private compItems;
-    private dirItems;
-    private calcOptions;
     private readonly elementRef;
-    private ngZone;
-    private grid;
+    private readonly ngZone;
+    private readonly domSanitizer;
+    private widgets;
+    gridstackItems?: QueryList<AXGridLayoutWidgetComponent>;
     private el;
-    private domSanitizer;
-    constructor();
+    private serializedData?;
+    private grid?;
+    protected _sub: Subscription | undefined;
     ngOnDestroy(): void;
-    private childChange;
-    /**
-     * Updates the grid layout with the current set of widgets, clearing previous options.
-     */
     private updateAll;
-    /**
-     * Checks whether the grid is empty and updates the `isEmpty` model accordingly.
-     */
     private checkEmpty;
-    /**
-     * Hooks event listeners to the grid for various grid events (e.g., add, remove, drag, resize).
-     */
     private hookEvents;
-    /**
-     * Removes all event listeners from the grid.
-     */
     private unhookEvents;
-    /**
-     * Creates a new widget and returns it.
-     * @param w - Widget position/size options.
-     * @returns The created widget's HTML element, or `undefined` if the grid is not initialized.
-     */
     addWidget(w: AXGridLayoutWidget, withAutoArrange?: boolean): AXGridLayoutWidgetElement | undefined;
-    /**
-     * Re-layout grid items to reclaim any empty space.
-     * @param layout - Compaction mode: 'list' or 'compact'. Default is 'compact'.
-     * @param doSort - Whether to sort items automatically. Default is `true`.
-     */
     compact(layout?: 'list' | 'compact', doSort?: boolean): void;
-    /**
-     * Updates the current cell height.
-     * @param val - The new cell height value.
-     * @param update - Whether to rebuild the internal CSS stylesheet. Default is `true`.
-     */
     setCellHeight(val: number, update?: boolean): void;
-    /**
-     * Sets the number of columns in the grid and updates existing widgets to conform to the new layout.
-     * @param column - Number of columns (must be > 0). Default is 12.
-     * @param layout - Re-layout behavior: 'list', 'compact', 'moveScale', 'move', 'scale', 'none'.
-     *                Default is 'moveScale'.
-     */
     setColumn(column: number, layout?: 'list' | 'compact' | 'moveScale' | 'move' | 'scale' | 'none'): void;
-    /**
-     * Destroys the grid instance.
-     * @param removeDOM - If `false`, nodes and grid will not be removed from the DOM. Default is `true`.
-     */
     destroy(removeDOM?: boolean): void;
-    /**
-     * Sets whether widgets in the grid can be moved (dragged).
-     *
-     * @param state If true, widgets are movable; otherwise, they are locked.
-     * @param recurse If true, the setting is applied to nested widgets as well.
-     */
     setMovable(state: boolean, recurse?: boolean): void;
-    /**
-     * Sets whether widgets in the grid can be resized.
-     *
-     * @param state If true, widgets are resizable; otherwise, they are fixed.
-     * @param recurse If true, the setting is applied to nested widgets as well.
-     */
     setResizable(state: boolean, recurse?: boolean): void;
-    /**
-     * Sets or gets the floating behavior of widgets.
-     * @param val - If provided, sets floating behavior (`true` or `false`). If not provided, returns the current value.
-     * @returns The current floating behavior if `val` is not provided.
-     */
     setFloat(val: boolean): void;
-    /**
-     * Sets the margin (gap) between grid items and their content.
-     * @param value - The margin value (number or string).
-     */
     setMargin(value: number | string): void;
-    /**
-     * Removes a widget from the grid.
-     * @param el - The widget to remove.
-     * @param removeDOM - If `false`, the widget won't be removed from the DOM. Default is `true`.
-     * @param triggerEvent - If `false`, no 'removed' callbacks will be called. Default is `true`.
-     */
     removeWidget(el: AXGridLayoutWidgetElement, removeDOM?: boolean, triggerEvent?: boolean): void;
-    /**
-     * Removes all widgets from the grid.
-     * @param removeDOM - If `false`, widgets won't be removed from the DOM. Default is `true`.
-     */
     removeAll(removeDOM?: boolean): void;
-    /**
-     * Rotates a widget by swapping its width and height.
-     * @param els - The widget or selector of widgets to rotate.
-     * @param relative - Optional pixel coordinates to rotate around (keeps that cell under the cursor).
-     */
-    setRotate(element: AXGridLayoutWidgetCompElement): void;
-    /**
-     * Toggles the grid animation state.
-     * @param doAnimate - If `true`, the grid will animate.
-     */
     setAnimation(doAnimate: boolean): void;
-    /**
-     * Saves the current grid layout configuration.
-     *
-     * @param saveContent Whether to save the content of the grid items.
-     * @param saveGridOpt Whether to save the grid options.
-     * @param saveCallback Optional callback for custom save logic.
-     * @returns The serialized grid layout options.
-     */
     save(saveContent?: boolean, saveGridOpt?: boolean, saveCallback?: AXSaveCallback): AXGridLayoutOptions;
-    /**
-     * Loads a serialized grid layout configuration into the grid.
-     *
-     * @param serializedData The serialized grid options to load.
-     * @param cleanBeforeLoad If true, the grid will be cleared before loading the new layout.
-     * @returns A promise that resolves to the loaded grid instance.
-     */
     load(serializedData?: AXGridLayoutOptions, cleanBeforeLoad?: boolean): Promise<AXGridLayout>;
-    /**
-     * Sets up draggable functionality for external elements to be added to the grid.
-     *
-     * @param dragIn A CSS selector or an array of elements that can be dragged into the grid.
-     * @param widgets An optional set of widgets that are draggable into the grid.
-     */
     setupDraggable(dragIn?: string | HTMLElement[], widgets?: AXGridLayoutWidget): Promise<void>;
-    /**
-     * Sets grid layout options.
-     * @param options The new grid layout options to apply.
-     *
-     * `Experimental`
-     */
     setOption(options: AXGridLayoutOptions): void;
-    /**
-     * Retrieves the current grid layout options.
-     *
-     * @returns The current grid options.
-     */
     getOptions(): AXGridLayoutOptions;
-    /**
-     * Retrieves all the child nodes (widgets) in the grid layout.
-     *
-     * @returns An array of grid layout nodes representing the widgets.
-     */
     getChildren(): AXGridLayoutNode[];
+    findEmptySpace(input: {
+        h: number;
+        w: number;
+    }): {
+        x?: number;
+        y?: number;
+    };
+    private _dispatchChangeEvent;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXGridLayoutContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXGridLayoutContainerComponent, "ax-grid-layout-container", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "isEmpty": { "alias": "isEmpty"; "required": false; "isSignal": true; }; }, { "onAdded": "onAdded"; "onChange": "onChange"; "onDisable": "onDisable"; "onDrag": "onDrag"; "onDragStart": "onDragStart"; "onDragStop": "onDragStop"; "onDropped": "onDropped"; "onEnable": "onEnable"; "onRemoved": "onRemoved"; "onResize": "onResize"; "onResizeStart": "onResizeStart"; "onResizeStop": "onResizeStop"; "isRendered": "isRendered"; "isEmpty": "isEmptyChange"; }, ["compItems", "dirItems"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXGridLayoutContainerComponent, "ax-grid-layout-container", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "isEmpty": { "alias": "isEmpty"; "required": false; "isSignal": true; }; }, { "onAdded": "onAdded"; "onRemoved": "onRemoved"; "onWidgetChange": "onWidgetChange"; "onChange": "onChange"; "_onEnable": "_onEnable"; "_onDisable": "_onDisable"; "_onWidgetDrag": "_onWidgetDrag"; "_onWidgetDragStart": "_onWidgetDragStart"; "_onWidgetDragStop": "_onWidgetDragStop"; "_onWidgetDropped": "_onWidgetDropped"; "_onWidgetResized": "_onWidgetResized"; "_onWidgetResizeStart": "_onWidgetResizeStart"; "_onWidgetResizeStop": "_onWidgetResizeStop"; "isLayoutRendered": "isLayoutRendered"; "isEmpty": "isEmptyChange"; }, ["widgets", "gridstackItems"], ["*"], true, never>;
 }

package/grid-layout-builder/lib/grid-layout-widget.component.d.ts

@@ -1,66 +1,14 @@
-import { AXGridLayoutNode, AXGridLayoutWidget, AXGridLayoutWidgetCompElement } from './types';
+import { AXGridLayoutNode, AXGridLayoutWidget } from './types';
 import * as i0 from "@angular/core";
-/**
- * A component that represents a widget within the grid layout. It serves as an individual
- * item within a `gridstack` layout, providing options for customization and interaction.
- *
- * This widget component is used within the `AXGridLayoutContainerComponent` to manage the
- * layout of widgets in a grid system. The component interacts with the GridStack library
- * to offer features like resizing, movement, and customization of the widget's properties.
- *
- * @example
- * <ax-grid-layout-widget [options]="widgetOptions">
- *   <div>Widget Content</div>
- * </ax-grid-layout-widget>
- */
 export declare class AXGridLayoutWidgetComponent {
-    /** Reference to the native element of this widget component. */
     private readonly elementRef;
-    /** The native element of the widget component. */
-    el: AXGridLayoutWidgetCompElement;
-    /** Internal storage for widget options. */
-    private _options?;
-    /**
-     * Input property that represents the widget's configuration options.
-     *
-     * @param {AXGridLayoutNode} val - The configuration object for the widget.
-     * @returns {AXGridLayoutWidgetCompElement} - The element associated with the widget.
-     */
-    options: import("@angular/core").InputSignalWithTransform<import("gridstack").GridStackNode, import("gridstack").GridStackNode>;
-    constructor();
-    /** Clears the widget's options. */
-    clearOptions(): void;
-    /** Removes this widget from the grid. */
-    removeWidget(): void;
-    /**
-     * Sets whether the widget can be locked (i.e., not resizable).
-     *
-     * @param {boolean} state - Whether the widget should be locked or not.
-     */
+    options: import("@angular/core").InputSignal<AXGridLayoutNode>;
+    eff: import("@angular/core").EffectRef;
     setLockable(state: boolean): void;
-    /**
-     * Sets whether the widget can be resized.
-     *
-     * @param {boolean} state - Whether the widget should be resizable or not.
-     */
     setResizable(state: boolean): void;
-    /**
-     * Updates the options of the widget.
-     *
-     * @param {AXGridLayoutWidget} options - The new options to apply to the widget.
-     */
     setOptions(options: AXGridLayoutWidget): void;
-    /**
-     * Retrieves the current options of the widget.
-     *
-     * @returns {AXGridLayoutNode} - The current configuration options of the widget.
-     */
     getOptions(): AXGridLayoutNode;
-    /**
-     * Helper method to update widget options.
-     *
-     * @param {Partial<AXGridLayoutWidget>} options - The options to update.
-     */
+    element(): import("gridstack").GridItemHTMLElement;
     private updateWidgetOptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXGridLayoutWidgetComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AXGridLayoutWidgetComponent, "ax-grid-layout-widget", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;

package/grid-layout-builder/lib/types.d.ts

@@ -1,12 +1,11 @@
+import { NXEvent } from '@acorex/components/common';
 import { AXGridLayoutContainerComponent } from './grid-layout-container.component';
-import { AXGridLayoutWidgetComponent } from './grid-layout-widget.component';
-import { AXGridLayoutWidgetDirective } from './grid-layout-widget.directive';
-export type AXGridLayoutNode = import('gridstack').GridStackNode;
+export type AXGridLayoutNode = import('gridstack').GridStackNode & {
+    data?: unknown;
+};
 export type AXGridLayout = import('gridstack').GridStack;
 export type AXGridLayoutOptions = import('gridstack').GridStackOptions;
-export type AXGridLayoutWidget = import('gridstack').GridStackWidget & {
-    data?: any;
-};
+export type AXGridLayoutWidget = import('gridstack').GridStackWidget;
 export type AXGridLayoutContainerElement = import('gridstack').GridHTMLElement;
 export type AXGridLayoutWidgetElement = import('gridstack').GridItemHTMLElement;
 export type AXGridLayoutEventEvent = {
@@ -20,15 +19,12 @@ export type AXGridLayoutNodesEvent = {
     event: Event;
     nodes: AXGridLayoutNode[];
 };
+export interface AXGridLayoutChangedEvent extends NXEvent<AXGridLayoutContainerComponent> {
+    nodes: AXGridLayoutNode[];
+}
 export type AXGridLayoutDroppedEvent = {
     event: Event;
     previousNode: AXGridLayoutNode;
     newNode: AXGridLayoutNode;
 };
-export interface AXGridLayoutContainerCompElement extends AXGridLayoutContainerElement {
-    _gridComp?: AXGridLayoutContainerComponent;
-}
-export interface AXGridLayoutWidgetCompElement extends AXGridLayoutWidgetElement {
-    _gridWidgetComp?: AXGridLayoutWidgetComponent | AXGridLayoutWidgetDirective;
-}
 export type AXSaveCallback = import('gridstack').SaveFcn;

package/image-editor/index.d.ts

@@ -1,6 +1,11 @@
 export * from './lib/image-editor-container/image-editor-container.component';
-export * from './lib/image-editor-tools/image-editor-color-picker/image-editor-color-picker.component';
 export * from './lib/image-editor-tools/image-editor-crop/image-editor-crop.component';
-export * from './lib/image-editor-tools/image-editor-pen-mode-changer/image-editor-pen-mode-changer.component';
+export * from './lib/image-editor-tools/image-editor-header/image-editor-header.component';
+export * from './lib/image-editor-tools/image-editor-highlight/image-editor-highlight.component';
+export * from './lib/image-editor-tools/image-editor-history/image-editor-history.component';
+export * from './lib/image-editor-tools/image-editor-pen/image-editor-pen.component';
+export * from './lib/image-editor-tools/image-editor-rotate/image-editor-rotate.component';
+export * from './lib/image-editor-tools/image-editor-tool-selector/image-editor-tool-selector.component';
 export * from './lib/image-editor-view/image-editor-view.component';
 export * from './lib/image-editor.module';
+export * from './lib/image-editor.service';

package/image-editor/lib/image-editor-container/image-editor-container.component.d.ts

@@ -1,6 +1,7 @@
 import { MXInputBaseValueComponent, MXLookComponent } from '@acorex/components/common';
 import { AXDialogService } from '@acorex/components/dialog';
 import { ElementRef } from '@angular/core';
+import { AXImageEditorViewComponent } from '../image-editor-view/image-editor-view.component';
 import { AXImageEditorService } from '../image-editor.service';
 import * as i0 from "@angular/core";
 declare const AXImageEditorContainerComponent_base: import("polytype").Polytype.ClusteredConstructor<[{
@@ -16,6 +17,7 @@ export declare class AXImageEditorContainerComponent extends AXImageEditorContai
     /** @ignore */
     protected service: AXImageEditorService;
     imageEditorContainer: import("@angular/core").Signal<ElementRef<any>>;
+    view: import("@angular/core").Signal<AXImageEditorViewComponent>;
     /** @ignore */
     protected dialogService: AXDialogService;
     /** @ignore */
@@ -28,7 +30,8 @@ export declare class AXImageEditorContainerComponent extends AXImageEditorContai
         draggable: boolean;
     }>;
     save(): void;
+    protected cropButtonHandler(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXImageEditorContainerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXImageEditorContainerComponent, "ax-image-editor-container", never, { "look": { "alias": "look"; "required": false; }; }, { "onValueChanged": "onValueChanged"; }, never, ["*", "ax-validation-rule"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXImageEditorContainerComponent, "ax-image-editor-container", never, { "look": { "alias": "look"; "required": false; }; }, { "onValueChanged": "onValueChanged"; }, ["view"], ["ax-image-editor-view", "ax-validation-rule"], true, never>;
 }
 export {};

package/image-editor/lib/image-editor-tools/image-editor-crop/image-editor-crop.component.d.ts

@@ -5,14 +5,9 @@ import * as i0 from "@angular/core";
  * @category Components
  */
 export declare class AXImageEditorCropComponent {
-    /** @ignore */
     protected service: AXImageEditorService;
-    /** @ignore */
-    protected rotateRightHandler(): void;
-    /** @ignore */
-    protected rotateLeftHandler(): void;
-    /** @ignore */
-    protected crop(): void;
+    cropPressed: import("@angular/core").OutputEmitterRef<void>;
+    protected cropButtonHandler(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXImageEditorCropComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXImageEditorCropComponent, "ax-image-editor-crop", never, {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXImageEditorCropComponent, "ax-image-editor-crop", never, {}, { "cropPressed": "cropPressed"; }, never, never, true, never>;
 }

package/image-editor/lib/image-editor-tools/image-editor-header/image-editor-header.component.d.ts

@@ -0,0 +1,12 @@
+import { AXImageEditorContainerComponent } from '../../image-editor-container/image-editor-container.component';
+import * as i0 from "@angular/core";
+/**
+ * paint mode.
+ * @category Components
+ */
+export declare class AXimageEditorHeaderComponent {
+    protected parent: AXImageEditorContainerComponent;
+    protected saveHandler(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXimageEditorHeaderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXimageEditorHeaderComponent, "ax-image-editor-header", never, {}, {}, never, never, true, never>;
+}

package/image-editor/lib/image-editor-tools/image-editor-highlight/image-editor-highlight.component.d.ts

@@ -0,0 +1,18 @@
+import { AXImageEditorService } from '../../image-editor.service';
+import * as i0 from "@angular/core";
+/**
+ * paint mode.
+ * @category Components
+ */
+export declare class AXImageEditorHighlightComponent {
+    protected service: AXImageEditorService;
+    /** @ignore */
+    protected selectedColor: import("@angular/core").WritableSignal<string | CanvasGradient | CanvasPattern>;
+    /** @ignore */
+    protected value: number;
+    protected changeColorHandler(e: string): void;
+    /** @ignore */
+    protected valueHandler(e: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXImageEditorHighlightComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXImageEditorHighlightComponent, "ax-image-editor-highlight", never, {}, {}, never, never, true, never>;
+}

package/image-editor/lib/image-editor-tools/image-editor-history/image-editor-history.component.d.ts

@@ -0,0 +1,13 @@
+import { AXImageEditorService } from '../../image-editor.service';
+import * as i0 from "@angular/core";
+/**
+ * paint mode.
+ * @category Components
+ */
+export declare class AXImageEditorHistoryComponent {
+    protected service: AXImageEditorService;
+    protected UndoHandler(): void;
+    protected RedoHandler(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXImageEditorHistoryComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXImageEditorHistoryComponent, "ax-image-editor-history", never, {}, {}, never, never, true, never>;
+}

package/image-editor/lib/image-editor-tools/image-editor-pen/image-editor-pen.component.d.ts

@@ -0,0 +1,18 @@
+import { AXImageEditorService } from '../../image-editor.service';
+import * as i0 from "@angular/core";
+/**
+ * paint mode.
+ * @category Components
+ */
+export declare class AXImageEditorPenComponent {
+    protected service: AXImageEditorService;
+    /** @ignore */
+    protected value: number;
+    /** @ignore */
+    protected selectedColor: import("@angular/core").WritableSignal<string | CanvasGradient | CanvasPattern>;
+    protected changeColorHandler(e: string): void;
+    /** @ignore */
+    protected valueHandler(e: number): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXImageEditorPenComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXImageEditorPenComponent, "ax-image-editor-pen", never, {}, {}, never, never, true, never>;
+}

package/image-editor/lib/image-editor-tools/image-editor-rotate/image-editor-rotate.component.d.ts

@@ -0,0 +1,16 @@
+import { AXImageEditorService } from '../../image-editor.service';
+import * as i0 from "@angular/core";
+/**
+ * paint mode.
+ * @category Components
+ */
+export declare class AXImageEditorRotateComponent {
+    /** @ignore */
+    protected service: AXImageEditorService;
+    /** @ignore */
+    protected rotateRightHandler(): void;
+    /** @ignore */
+    protected rotateLeftHandler(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXImageEditorRotateComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXImageEditorRotateComponent, "ax-image-editor-rotate", never, {}, {}, never, never, true, never>;
+}

package/image-editor/lib/image-editor-tools/image-editor-tool-selector/image-editor-tool-selector.component.d.ts

@@ -0,0 +1,12 @@
+import { AXImageEditorService } from '../../image-editor.service';
+import * as i0 from "@angular/core";
+/**
+ * paint mode.
+ * @category Components
+ */
+export declare class AXImageEditorToolSelectorComponent {
+    protected service: AXImageEditorService;
+    protected changeToolHandler(tool: 'pen' | 'highlight' | 'crop' | 'rotate'): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXImageEditorToolSelectorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXImageEditorToolSelectorComponent, "ax-image-editor-tool-selector", never, {}, {}, never, never, true, never>;
+}

package/image-editor/lib/image-editor-view/image-editor-view.component.d.ts

@@ -27,10 +27,14 @@ export declare class AXImageEditorViewComponent extends MXBaseComponent implemen
     /** @ignore */
     protected cropEndY: import("@angular/core").WritableSignal<number>;
     /** @ignore */
+    protected isDrawRectangleCreated: import("@angular/core").WritableSignal<boolean>;
+    /** @ignore */
     protected parent: AXImageEditorContainerComponent;
     protected renderer: Renderer2;
     /** @ignore */
     protected imageAspect: import("@angular/core").Signal<number>;
+    protected imageEditorHistory: import("@angular/core").WritableSignal<HTMLImageElement[]>;
+    protected imageEditorHistoryPointer: import("@angular/core").WritableSignal<number>;
     private ngZone;
     /** @ignore */
     resizeEventListener: any;
@@ -47,6 +51,8 @@ export declare class AXImageEditorViewComponent extends MXBaseComponent implemen
     /** @ignore */
     protected imageLoaded(): void;
     /** @ignore */
+    protected imageChanged(): void;
+    /** @ignore */
     protected penConfigHandler(penType: 'pen' | 'highlight'): void;
     /** @ignore */
     protected getBoundingCanvasHandler(): DOMRect;
@@ -67,7 +73,7 @@ export declare class AXImageEditorViewComponent extends MXBaseComponent implemen
     /** @ignore */
     protected cropImageFunction(): void;
     /** @ignore */
-    protected cropButtonHandler(): void;
+    cropButtonHandler(): void;
     /** @ignore */
     protected rotateImage(): void;
     /** @ignore */

package/image-editor/lib/image-editor.module.d.ts

@@ -9,13 +9,17 @@ import * as i7 from "@acorex/components/decorators";
 import * as i8 from "@acorex/components/loading";
 import * as i9 from "@acorex/components/dialog";
 import * as i10 from "@acorex/components/tooltip";
-import * as i11 from "./image-editor-tools/image-editor-color-picker/image-editor-color-picker.component";
-import * as i12 from "./image-editor-tools/image-editor-pen-mode-changer/image-editor-pen-mode-changer.component";
-import * as i13 from "./image-editor-view/image-editor-view.component";
-import * as i14 from "./image-editor-container/image-editor-container.component";
-import * as i15 from "./image-editor-tools/image-editor-crop/image-editor-crop.component";
+import * as i11 from "./image-editor-view/image-editor-view.component";
+import * as i12 from "./image-editor-container/image-editor-container.component";
+import * as i13 from "./image-editor-tools/image-editor-crop/image-editor-crop.component";
+import * as i14 from "./image-editor-tools/image-editor-history/image-editor-history.component";
+import * as i15 from "./image-editor-tools/image-editor-tool-selector/image-editor-tool-selector.component";
+import * as i16 from "./image-editor-tools/image-editor-pen/image-editor-pen.component";
+import * as i17 from "./image-editor-tools/image-editor-highlight/image-editor-highlight.component";
+import * as i18 from "./image-editor-tools/image-editor-rotate/image-editor-rotate.component";
+import * as i19 from "./image-editor-tools/image-editor-header/image-editor-header.component";
 export declare class AXImageEditorModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXImageEditorModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXImageEditorModule, never, [typeof i1.AXButtonModule, typeof i2.FormsModule, typeof i3.AXRangeSliderModule, typeof i4.AXSelectBoxModule, typeof i5.AXColorBoxModule, typeof i6.AXPopoverModule, typeof i7.AXDecoratorModule, typeof i8.AXLoadingModule, typeof i9.AXDialogModule, typeof i10.AXTooltipModule, typeof i11.AXImageEditorColorPickerComponent, typeof i12.AXImageEditorPenModeChangerComponent, typeof i13.AXImageEditorViewComponent, typeof i14.AXImageEditorContainerComponent, typeof i15.AXImageEditorCropComponent], [typeof i11.AXImageEditorColorPickerComponent, typeof i12.AXImageEditorPenModeChangerComponent, typeof i13.AXImageEditorViewComponent, typeof i14.AXImageEditorContainerComponent, typeof i15.AXImageEditorCropComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXImageEditorModule, never, [typeof i1.AXButtonModule, typeof i2.FormsModule, typeof i3.AXRangeSliderModule, typeof i4.AXSelectBoxModule, typeof i5.AXColorBoxModule, typeof i6.AXPopoverModule, typeof i7.AXDecoratorModule, typeof i8.AXLoadingModule, typeof i9.AXDialogModule, typeof i10.AXTooltipModule, typeof i11.AXImageEditorViewComponent, typeof i12.AXImageEditorContainerComponent, typeof i13.AXImageEditorCropComponent, typeof i14.AXImageEditorHistoryComponent, typeof i15.AXImageEditorToolSelectorComponent, typeof i16.AXImageEditorPenComponent, typeof i17.AXImageEditorHighlightComponent, typeof i18.AXImageEditorRotateComponent, typeof i19.AXimageEditorHeaderComponent], [typeof i11.AXImageEditorViewComponent, typeof i12.AXImageEditorContainerComponent, typeof i13.AXImageEditorCropComponent, typeof i14.AXImageEditorHistoryComponent, typeof i15.AXImageEditorToolSelectorComponent, typeof i16.AXImageEditorPenComponent, typeof i17.AXImageEditorHighlightComponent, typeof i18.AXImageEditorRotateComponent, typeof i19.AXimageEditorHeaderComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXImageEditorModule>;
 }

package/image-editor/lib/image-editor.service.d.ts

@@ -1,17 +1,11 @@
 import * as i0 from "@angular/core";
 export declare class AXImageEditorService {
+    activeToolState: import("@angular/core").WritableSignal<"pen" | "highlight" | "crop" | "rotate" | "history">;
     penColor: import("@angular/core").WritableSignal<string | CanvasGradient | CanvasPattern>;
-    lineCap: import("@angular/core").WritableSignal<CanvasLineCap>;
-    lineWidth: import("@angular/core").WritableSignal<number>;
+    highlightColor: import("@angular/core").WritableSignal<string | CanvasGradient | CanvasPattern>;
+    penWidth: import("@angular/core").WritableSignal<number>;
+    highlightWidth: import("@angular/core").WritableSignal<number>;
     penType: import("@angular/core").WritableSignal<"pen" | "highlight">;
-    toggleClear: import("@angular/core").WritableSignal<{
-        state: boolean;
-        userInteract: boolean;
-    }>;
-    cropState: import("@angular/core").WritableSignal<{
-        state: boolean;
-        userInteract: boolean;
-    }>;
     rotate: import("@angular/core").WritableSignal<{
         state: number;
         userInteract: boolean;
@@ -20,6 +14,8 @@ export declare class AXImageEditorService {
     newImage: import("@angular/core").WritableSignal<HTMLImageElement>;
     initialImage: import("@angular/core").WritableSignal<HTMLImageElement>;
     imageBlob: import("@angular/core").WritableSignal<Blob[]>;
+    undoPressed: import("@angular/core").WritableSignal<boolean>;
+    redoPressed: import("@angular/core").WritableSignal<boolean>;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXImageEditorService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<AXImageEditorService>;
 }