npm - @acorex/components - Versions diffs - 21.0.1-next.47 → 21.0.1-next.49 - Mend

@acorex/components 21.0.1-next.47 → 21.0.1-next.49

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (186) hide show

package/fesm2022/acorex-components-grid-layout-builder.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"acorex-components-grid-layout-builder.mjs","sources":["../../../../packages/components/grid-layout-builder/src/lib/utility.ts","../../../../packages/components/grid-layout-builder/src/lib/grid-layout-widget.component.ts","../../../../packages/components/grid-layout-builder/src/lib/grid-layout-container.component.ts","../../../../packages/components/grid-layout-builder/src/lib/grid-layout-builder.module.ts","../../../../packages/components/grid-layout-builder/src/acorex-components-grid-layout-builder.ts"],"sourcesContent":["import { AXGridLayoutNode, AXGridLayoutOptions, AXGridLayoutWidget } from './types';\n\n// Convert AXGridLayoutWidget to GridStackWidget\nexport function convertAXGridLayoutWidgetToGridStackWidget(\n widget: AXGridLayoutWidget,\n): import('gridstack').GridStackWidget {\n return {\n id: widget.id,\n x: widget.x,\n y: widget.y,\n w: widget.width,\n h: widget.height,\n maxW: widget.maxWidth,\n maxH: widget.maxHeight,\n minW: widget.minWidth,\n minH: widget.minHeight,\n noResize: widget.disableResize,\n noMove: widget.disableDrag,\n };\n}\n\n// Convert GridStackWidget to AXGridLayoutWidget\nexport function convertGridStackWidgetToAXGridLayoutWidget(\n widget: import('gridstack').GridStackWidget,\n): AXGridLayoutWidget {\n return {\n id: widget.id,\n x: widget.x,\n y: widget.y,\n width: widget.w,\n height: widget.h,\n maxWidth: widget.maxW,\n maxHeight: widget.maxH,\n minWidth: widget.minW,\n minHeight: widget.minH,\n disableResize: widget.noResize,\n disableDrag: widget.noMove,\n };\n}\n\n// Convert AXGridLayoutNode to GridStackNode\nexport function convertAXGridLayoutNodeToGridStackNode(node: AXGridLayoutNode): import('gridstack').GridStackNode {\n return {\n id: node.id,\n x: node.x,\n y: node.y,\n w: node.width,\n h: node.height,\n maxW: node.maxWidth,\n maxH: node.maxHeight,\n minW: node.minWidth,\n minH: node.minHeight,\n noResize: node.disableResize,\n noMove: node.disableDrag,\n el: node.element,\n };\n}\n\n// Convert GridStackNode to AXGridLayoutNode\nexport function convertGridStackNodeToAXGridLayoutNode(node: import('gridstack').GridStackNode): AXGridLayoutNode {\n return {\n id: node.id,\n x: node.x,\n y: node.y,\n width: node.w,\n height: node.h,\n maxWidth: node.maxW,\n maxHeight: node.maxH,\n minWidth: node.minW,\n minHeight: node.minH,\n disableResize: node.noResize,\n disableDrag: node.noMove,\n element: node.el,\n };\n}\n\n// Convert AXGridLayoutOptions to GridStackOptions\nexport function convertAXGridLayoutOptionsToGridStackOptions(\n options: AXGridLayoutOptions,\n): import('gridstack').GridStackOptions {\n return {\n column: options.column,\n disableDrag: options.disableDrag,\n disableResize: options.disableResize,\n margin: options.gap,\n cellHeight: options.cellHeight,\n rtl: options.rtl,\n maxRow: options.maxRow,\n minRow: options.minRow,\n row: options.row,\n removable: options.removableSelector \|\| options.removable,\n acceptWidgets: options.acceptWidgets,\n float: options.float,\n handle: options.dragHandlerSelector,\n columnOpts: { breakpoints: options?.responsiveLayout?.map((i) => ({ c: i.column, w: i.width })) },\n };\n}\n\n// Convert GridStackOptions to AXGridLayoutOptions\nexport function convertGridStackOptionsToAXGridLayoutOptions(\n options: import('gridstack').GridStackOptions,\n): AXGridLayoutOptions {\n return {\n column: options.column,\n disableDrag: options.disableDrag,\n disableResize: options.disableResize,\n gap: options.margin,\n cellHeight: options.cellHeight,\n rtl: options.rtl,\n maxRow: options.maxRow,\n minRow: options.minRow,\n row: options.row,\n removableSelector: typeof options.removable === 'string' ? options.removable : undefined,\n removable: typeof options.removable === 'boolean' ? options.removable : undefined,\n acceptWidgets: options.acceptWidgets as boolean,\n float: options.float,\n dragHandlerSelector: options.handle,\n responsiveLayout: options?.columnOpts?.breakpoints?.map((i) => ({ width: i.w, column: i.c })),\n };\n}\n\n/** remove keys which are undefined /\nexport function removeUndefinedKeys(obj) {\n const newObj = { ...obj };\n for (const key in newObj) {\n if (newObj[key] === undefined) {\n delete newObj[key];\n }\n }\n return newObj;\n}\n","import { AXComponent } from '@acorex/cdk/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n effect,\n ElementRef,\n inject,\n input,\n untracked,\n ViewEncapsulation,\n} from '@angular/core';\nimport { AXGridLayoutNode, AXGridLayoutWidget, AXGridLayoutWidgetElement } from './types';\nimport {\n convertAXGridLayoutWidgetToGridStackWidget,\n convertGridStackNodeToAXGridLayoutNode,\n removeUndefinedKeys,\n} from './utility';\n\n@Component({\n selector: 'ax-grid-layout-widget',\n template: `<div class=\"grid-stack-item-content\"><ng-content></ng-content></div>`,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n providers: [{ provide: AXComponent, useExisting: AXGridLayoutWidgetComponent }],\n})\nexport class AXGridLayoutWidgetComponent {\n private readonly elementRef: ElementRef<AXGridLayoutWidgetElement> = inject(ElementRef);\n\n public options = input<AXGridLayoutNode>();\n\n #eff = effect(() => {\n const options = this.options();\n\n untracked(() => {\n const gridstackNode = this.elementRef.nativeElement.gridstackNode as import('gridstack').GridStackNode;\n if (gridstackNode?.grid) {\n gridstackNode.grid.update(\n this.elementRef.nativeElement,\n removeUndefinedKeys(convertAXGridLayoutWidgetToGridStackWidget(options)),\n );\n }\n });\n });\n\n /\n Locks or unlocks the widget (prevents dragging and resizing).\n \n @param state - If true, the widget will be locked.\n * @returns void - No return value. The widget lock state is updated.\n /\n public setLockable(state: boolean): void {\n this.updateWidgetOptions({ disableResize: state, disableDrag: state });\n }\n\n /\n Enables or disables resizing of the widget.\n \n @param state - If true, resizing will be enabled.\n * @returns void - No return value. The widget resize state is updated.\n /\n public setResizable(state: boolean): void {\n this.updateWidgetOptions({ disableResize: !state });\n }\n\n /\n Updates the widget options.\n \n @param options - The new options for the widget.\n * @returns void - No return value. The widget options are updated.\n /\n public setOptions(options: AXGridLayoutWidget): void {\n this.updateWidgetOptions(options);\n }\n\n /\n Returns the current options of the widget.\n \n @returns AXGridLayoutNode - The current widget options.\n /\n public getOptions(): AXGridLayoutNode {\n const gridstackNode = this.elementRef.nativeElement.gridstackNode;\n return gridstackNode\n ? removeUndefinedKeys(convertGridStackNodeToAXGridLayoutNode(gridstackNode))\n : { ...this.options(), element: this.elementRef.nativeElement };\n }\n\n /\n Returns the native DOM element of the widget.\n \n @returns AXGridLayoutWidgetElement - The native element.\n /\n public get element(): AXGridLayoutWidgetElement {\n return this.elementRef.nativeElement;\n }\n\n /\n Updates the widget options and triggers a grid update.\n * @param options - The partial options to update.\n /\n private updateWidgetOptions(options: Partial<AXGridLayoutWidget>): void {\n const gridstackNode = this.elementRef.nativeElement.gridstackNode as import('gridstack').GridStackNode;\n if (gridstackNode?.grid) {\n gridstackNode.grid.update(\n this.elementRef.nativeElement,\n removeUndefinedKeys(convertAXGridLayoutWidgetToGridStackWidget(options)),\n );\n }\n }\n}\n","import { AXComponent, NXComponent } from '@acorex/cdk/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n ElementRef,\n NgZone,\n OnDestroy,\n QueryList,\n ViewEncapsulation,\n afterNextRender,\n effect,\n inject,\n input,\n model,\n output,\n untracked,\n} from '@angular/core';\nimport { Subscription } from 'rxjs';\nimport { AXGridLayoutWidgetComponent } from './grid-layout-widget.component';\nimport {\n AXGridLayout,\n AXGridLayoutContainerElement,\n AXGridLayoutEvent,\n AXGridLayoutNode,\n AXGridLayoutOptions,\n AXGridLayoutPosition,\n AXGridLayoutWidget,\n AXGridLayoutWidgetElement,\n} from './types';\nimport {\n convertAXGridLayoutNodeToGridStackNode,\n convertAXGridLayoutOptionsToGridStackOptions,\n convertAXGridLayoutWidgetToGridStackWidget,\n convertGridStackNodeToAXGridLayoutNode,\n convertGridStackOptionsToAXGridLayoutOptions,\n removeUndefinedKeys,\n} from './utility';\n\n@Component({\n selector: 'ax-grid-layout-container',\n template: `<ng-content></ng-content> `,\n styleUrl: './grid-layout-container.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n providers: [{ provide: AXComponent, useExisting: AXGridLayoutContainerComponent }],\n})\nexport class AXGridLayoutContainerComponent extends NXComponent implements OnDestroy {\n //#region Inputs and Outputs\n public options = input<AXGridLayoutOptions>();\n\n protected onAdded = output<AXGridLayoutEvent>();\n protected onRemoved = output<AXGridLayoutEvent>();\n protected onWidgetChange = output<AXGridLayoutEvent>();\n protected onChange = output<AXGridLayoutEvent>();\n protected onRender = output<void>();\n\n protected isEmpty = model(false);\n //#endregion\n\n //#region Private Properties\n private readonly elementRef: ElementRef<AXGridLayoutContainerElement> = inject(ElementRef);\n private readonly ngZone = inject(NgZone);\n\n @ContentChildren(AXGridLayoutWidgetComponent) public gridstackItems?: QueryList<AXGridLayoutWidgetComponent>;\n\n private el = this.elementRef.nativeElement;\n private grid?: AXGridLayout;\n protected _sub: Subscription \| undefined;\n private isInitialized = false;\n //#endregion\n\n //#region Initialization\n #init = afterNextRender(() => {\n this.ngZone.runOutsideAngular(async () => {\n const { GridStack } = await import('gridstack');\n const gridStackOptions = removeUndefinedKeys(convertAXGridLayoutOptionsToGridStackOptions(this.options() ?? {}));\n this.grid = GridStack.init(gridStackOptions, this.el);\n this.updateAll();\n this.hookEvents(this.grid);\n this.onRender.emit();\n this.isInitialized = true;\n });\n this._sub = this.gridstackItems?.changes.subscribe(() => {\n this.updateAll();\n });\n });\n\n // Watch for options changes\n #optionsEffect = effect(() => {\n const newOptions = this.options();\n if (this.isInitialized && this.grid && newOptions) {\n untracked(() => {\n this.ngZone.runOutsideAngular(() => {\n const gridStackOptions = removeUndefinedKeys(convertAXGridLayoutOptionsToGridStackOptions(newOptions));\n\n // Apply each option individually\n if (gridStackOptions.column !== undefined) {\n this.grid?.column(gridStackOptions.column);\n }\n\n if (gridStackOptions.cellHeight !== undefined) {\n this.grid?.cellHeight(gridStackOptions.cellHeight);\n }\n\n if (gridStackOptions.margin !== undefined) {\n this.grid?.margin(gridStackOptions.margin);\n }\n\n if (gridStackOptions.disableResize !== undefined) {\n this.grid?.enableResize(!gridStackOptions.disableResize);\n }\n\n if (gridStackOptions.disableDrag !== undefined) {\n this.grid?.enableMove(!gridStackOptions.disableDrag);\n }\n\n if (gridStackOptions.float !== undefined) {\n this.grid?.float(gridStackOptions.float);\n }\n\n if (gridStackOptions.animate !== undefined) {\n this.grid?.setAnimation(gridStackOptions.animate);\n }\n\n // Update the layout after options have been applied\n this.updateAll();\n });\n });\n }\n });\n\n public ngOnDestroy(): void {\n this.unhookEvents(this.grid);\n this._sub?.unsubscribe();\n this.destroy();\n }\n //#endregion\n\n //#region Internal Methods\n private updateAll() {\n if (!this.grid) return;\n\n const arrays = this.gridstackItems?.toArray() ?? [];\n\n // If there are no items, remove all widgets first\n if (arrays.length === 0) {\n this.grid.removeAll(true);\n this.checkEmpty();\n return;\n }\n\n const layout: AXGridLayoutNode[] = [];\n arrays.forEach((item) => {\n const widgetOptions = item.getOptions();\n if (widgetOptions) {\n layout.push(removeUndefinedKeys(convertAXGridLayoutNodeToGridStackNode(widgetOptions)));\n }\n });\n\n // Clear existing widgets before loading new ones\n //this.grid.removeAll(false);//TODO COMMENTED FOR PERFORMANCE\n this.grid.load(layout);\n this.checkEmpty();\n }\n\n private checkEmpty() {\n if (this.grid) {\n const isEmpty = !this.getChildren().length;\n if (isEmpty === this.isEmpty()) return;\n this.isEmpty.set(isEmpty);\n }\n }\n\n private hookEvents(grid?: AXGridLayout): void {\n if (grid) {\n grid\n .on('added', (event: Event, nodes: import('gridstack').GridStackNode[]) => {\n const mappedNodes = nodes.map((node) => removeUndefinedKeys(convertGridStackNodeToAXGridLayoutNode(node)));\n this.checkEmpty();\n this.onAdded.emit({ sender: this, nodes: mappedNodes });\n this._dispatchChangeEvent();\n })\n .on('removed', (event: Event, nodes: import('gridstack').GridStackNode[]) => {\n const mappedNodes = nodes.map((node) => removeUndefinedKeys(convertGridStackNodeToAXGridLayoutNode(node)));\n this.checkEmpty();\n this.onRemoved.emit({ sender: this, nodes: mappedNodes });\n this._dispatchChangeEvent();\n })\n .on('change', (event: Event, nodes: import('gridstack').GridStackNode[]) => {\n const mappedNodes = nodes.map((node) => removeUndefinedKeys(convertGridStackNodeToAXGridLayoutNode(node)));\n this.onWidgetChange.emit({ sender: this, nodes: mappedNodes });\n this._dispatchChangeEvent();\n });\n }\n }\n\n private unhookEvents(grid?: AXGridLayout) {\n if (grid) grid.offAll();\n }\n\n private _dispatchChangeEvent() {\n if (this.getChildren().length) {\n this.onChange.emit({\n sender: this,\n nodes: this.getChildren(),\n });\n }\n }\n //#endregion\n\n /\n Adds a widget to the grid layout.\n \n @param w - Widget configuration object.\n * @param withAutoArrange - Whether to compact the grid before adding the widget.\n * @returns AXGridLayoutWidgetElement \| undefined - The created widget element or undefined if failed.\n /\n public addWidget(w: AXGridLayoutWidget, withAutoArrange = false): AXGridLayoutWidgetElement \| undefined {\n if (withAutoArrange) this.compact();\n\n const gridStackWidget = removeUndefinedKeys(convertAXGridLayoutWidgetToGridStackWidget(w));\n const node = this.grid?.addWidget(gridStackWidget)?.gridstackNode;\n if (!node) return undefined;\n\n const widgetElement: AXGridLayoutWidgetElement = node.el as AXGridLayoutWidgetElement;\n widgetElement.gridstackNode = removeUndefinedKeys(convertGridStackNodeToAXGridLayoutNode(node));\n\n return widgetElement;\n }\n\n /\n Compacts the grid layout.\n \n @param layout - Layout type for compacting ('list' or 'compact').\n * @param doSort - Whether to sort items while compacting.\n * @returns void - No return value. The grid layout is compacted.\n /\n public compact(layout: 'list' \| 'compact' = 'compact', doSort = true): void {\n this.grid?.compact(layout, doSort);\n }\n\n /\n Sets the cell height of the grid.\n \n @param val - New cell height value.\n * @returns void - No return value. The cell height is updated.\n /\n public setCellHeight(val: number): void {\n this.grid?.cellHeight(val);\n }\n\n /\n Sets the number of columns in the grid.\n \n @param column - Number of columns.\n * @param layout - Layout type for the change ('list', 'compact', 'moveScale', 'move', 'scale', or 'none').\n * @returns void - No return value. The column count is updated.\n /\n public setColumn(\n column: number,\n layout: 'list' \| 'compact' \| 'moveScale' \| 'move' \| 'scale' \| 'none' = 'moveScale',\n ): void {\n this.grid?.column(column, layout);\n }\n\n /\n Destroys the grid instance.\n \n @param removeDOM - Whether to remove DOM elements.\n * @returns void - No return value. The grid instance is destroyed.\n /\n public destroy(removeDOM = true): void {\n this.grid?.destroy(removeDOM);\n }\n\n /\n Enables or disables moving of widgets.\n \n @param state - Whether to enable moving.\n * @param recurse - Whether to apply to all child widgets.\n * @returns void - No return value. The move state is updated.\n /\n public setMovable(state: boolean, recurse?: boolean) {\n this.grid?.enableMove(state, recurse);\n }\n\n /\n Enables or disables resizing of widgets.\n \n @param state - Whether to enable resizing.\n * @param recurse - Whether to apply to all child widgets.\n * @returns void - No return value. The resize state is updated.\n /\n public setResizable(state: boolean, recurse?: boolean) {\n this.grid?.enableResize(state, recurse);\n }\n\n /\n Sets the float property of the grid.\n \n @param val - Whether to enable floating widgets.\n * @returns void - No return value. The float state is updated.\n /\n public setFloat(val: boolean): void {\n this.grid?.float(val);\n }\n\n /\n Sets the margin between grid items.\n \n @param value - Margin value (number in pixels or string with units).\n * @returns void - No return value. The margin is updated.\n /\n public setMargin(value: number \| string): void {\n this.grid?.margin(value);\n }\n\n /\n Removes a specific widget from the grid.\n \n @param el - The widget element to remove.\n * @param removeDOM - Whether to remove the DOM element.\n * @param triggerEvent - Whether to trigger removal events.\n * @returns void - No return value. The widget is removed.\n /\n public removeWidget(el: AXGridLayoutWidgetElement, removeDOM = true, triggerEvent = true): void {\n this.grid?.removeWidget(el, removeDOM, triggerEvent);\n }\n\n /\n Removes all widgets from the grid.\n \n @param removeDOM - Whether to remove DOM elements.\n * @returns void - No return value. All widgets are removed.\n /\n public removeAll(removeDOM = true): void {\n this.grid?.removeAll(removeDOM);\n }\n\n /\n Sets the animation state for the grid.\n \n @param doAnimate - Whether to enable animations.\n * @returns void - No return value. The animation state is updated.\n /\n public setAnimation(doAnimate: boolean): void {\n this.grid?.setAnimation(doAnimate);\n }\n\n /\n Sets up draggable functionality for external elements.\n \n @param dragIn - CSS selector string or array of HTML elements to make draggable.\n * @param widgets - Optional widget configuration for dragged items.\n * @returns Promise<void> - Promise that resolves when drag setup is complete.\n /\n public async setupDraggable(dragIn?: string \| HTMLElement[], widgets?: AXGridLayoutWidget) {\n if (typeof dragIn === 'string') {\n document.querySelectorAll(dragIn).forEach((item) => {\n if (!item.classList.contains('grid-stack-item')) {\n item.classList.add('grid-stack-item');\n }\n });\n }\n const { GridStack } = await import('gridstack');\n const gridStackWidgets = widgets\n ? [removeUndefinedKeys(convertAXGridLayoutWidgetToGridStackWidget(widgets))]\n : undefined;\n GridStack.setupDragIn(dragIn, undefined, gridStackWidgets);\n }\n\n /\n Gets the current grid options.\n \n @returns AXGridLayoutOptions - Current grid configuration options.\n /\n public getOptions(): AXGridLayoutOptions {\n const opts = this.grid?.opts;\n if (!opts) return {};\n\n return removeUndefinedKeys(convertGridStackOptionsToAXGridLayoutOptions(opts));\n }\n\n /\n Gets all child widgets in the grid.\n \n @returns AXGridLayoutNode[] - Array of all child widget nodes.\n /\n public getChildren(): AXGridLayoutNode[] {\n const children = this.grid?.engine.nodes ?? [];\n return children.map((node) => removeUndefinedKeys(convertGridStackNodeToAXGridLayoutNode(node)));\n }\n\n /\n Finds an empty space in the grid for a widget.\n \n @param input - Dimensions of the widget with height and width.\n * @returns { x: number; y: number } - Object containing x and y coordinates of empty space.\n /\n public findEmptySpace(\n input: Required<Pick<AXGridLayoutPosition, 'height' \| 'width'>>,\n ): Pick<AXGridLayoutPosition, 'x' \| 'y'> {\n const value = { h: input.height, w: input.height } as any;\n this.grid?.engine.findEmptyPosition(value);\n return { x: value.x, y: value.y };\n }\n //#endregion\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { AXGridLayoutContainerComponent } from './grid-layout-container.component';\nimport { AXGridLayoutWidgetComponent } from './grid-layout-widget.component';\n\n@NgModule({\n imports: [CommonModule, AXGridLayoutContainerComponent, AXGridLayoutWidgetComponent],\n exports: [AXGridLayoutContainerComponent, AXGridLayoutWidgetComponent],\n})\nexport class AXGridLayoutBuilderModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"acorex-components-grid-layout-builder.mjs","sources":["../../../../packages/components/grid-layout-builder/src/lib/utility.ts","../../../../packages/components/grid-layout-builder/src/lib/grid-layout-widget.component.ts","../../../../packages/components/grid-layout-builder/src/lib/grid-layout-container.component.ts","../../../../packages/components/grid-layout-builder/src/lib/grid-layout-builder.module.ts","../../../../packages/components/grid-layout-builder/src/acorex-components-grid-layout-builder.ts"],"sourcesContent":["import { AXGridLayoutNode, AXGridLayoutOptions, AXGridLayoutWidget } from './types';\n\n// Convert AXGridLayoutWidget to GridStackWidget\nexport function convertAXGridLayoutWidgetToGridStackWidget(\n widget: AXGridLayoutWidget,\n): import('gridstack').GridStackWidget {\n return {\n id: widget.id,\n x: widget.x,\n y: widget.y,\n w: widget.width,\n h: widget.height,\n maxW: widget.maxWidth,\n maxH: widget.maxHeight,\n minW: widget.minWidth,\n minH: widget.minHeight,\n noResize: widget.disableResize,\n noMove: widget.disableDrag,\n };\n}\n\n// Convert GridStackWidget to AXGridLayoutWidget\nexport function convertGridStackWidgetToAXGridLayoutWidget(\n widget: import('gridstack').GridStackWidget,\n): AXGridLayoutWidget {\n return {\n id: widget.id,\n x: widget.x,\n y: widget.y,\n width: widget.w,\n height: widget.h,\n maxWidth: widget.maxW,\n maxHeight: widget.maxH,\n minWidth: widget.minW,\n minHeight: widget.minH,\n disableResize: widget.noResize,\n disableDrag: widget.noMove,\n };\n}\n\n// Convert AXGridLayoutNode to GridStackNode\nexport function convertAXGridLayoutNodeToGridStackNode(node: AXGridLayoutNode): import('gridstack').GridStackNode {\n return {\n id: node.id,\n x: node.x,\n y: node.y,\n w: node.width,\n h: node.height,\n maxW: node.maxWidth,\n maxH: node.maxHeight,\n minW: node.minWidth,\n minH: node.minHeight,\n noResize: node.disableResize,\n noMove: node.disableDrag,\n el: node.element,\n };\n}\n\n// Convert GridStackNode to AXGridLayoutNode\nexport function convertGridStackNodeToAXGridLayoutNode(node: import('gridstack').GridStackNode): AXGridLayoutNode {\n return {\n id: node.id,\n x: node.x,\n y: node.y,\n width: node.w,\n height: node.h,\n maxWidth: node.maxW,\n maxHeight: node.maxH,\n minWidth: node.minW,\n minHeight: node.minH,\n disableResize: node.noResize,\n disableDrag: node.noMove,\n element: node.el,\n };\n}\n\n// Convert AXGridLayoutOptions to GridStackOptions\nexport function convertAXGridLayoutOptionsToGridStackOptions(\n options: AXGridLayoutOptions,\n): import('gridstack').GridStackOptions {\n return {\n column: options.column,\n disableDrag: options.disableDrag,\n disableResize: options.disableResize,\n margin: options.gap,\n cellHeight: options.cellHeight,\n rtl: options.rtl,\n maxRow: options.maxRow,\n minRow: options.minRow,\n row: options.row,\n removable: options.removableSelector \|\| options.removable,\n acceptWidgets: options.acceptWidgets,\n float: options.float,\n handle: options.dragHandlerSelector,\n columnOpts: { breakpoints: options?.responsiveLayout?.map((i) => ({ c: i.column, w: i.width })) },\n };\n}\n\n// Convert GridStackOptions to AXGridLayoutOptions\nexport function convertGridStackOptionsToAXGridLayoutOptions(\n options: import('gridstack').GridStackOptions,\n): AXGridLayoutOptions {\n return {\n column: options.column,\n disableDrag: options.disableDrag,\n disableResize: options.disableResize,\n gap: options.margin,\n cellHeight: options.cellHeight,\n rtl: options.rtl,\n maxRow: options.maxRow,\n minRow: options.minRow,\n row: options.row,\n removableSelector: typeof options.removable === 'string' ? options.removable : undefined,\n removable: typeof options.removable === 'boolean' ? options.removable : undefined,\n acceptWidgets: options.acceptWidgets as boolean,\n float: options.float,\n dragHandlerSelector: options.handle,\n responsiveLayout: options?.columnOpts?.breakpoints?.map((i) => ({ width: i.w, column: i.c })),\n };\n}\n\n/** remove keys which are undefined /\nexport function removeUndefinedKeys(obj) {\n const newObj = { ...obj };\n for (const key in newObj) {\n if (newObj[key] === undefined) {\n delete newObj[key];\n }\n }\n return newObj;\n}\n","import { AXComponent } from '@acorex/cdk/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n effect,\n ElementRef,\n inject,\n input,\n untracked,\n ViewEncapsulation,\n} from '@angular/core';\nimport { AXGridLayoutNode, AXGridLayoutWidget, AXGridLayoutWidgetElement } from './types';\nimport {\n convertAXGridLayoutWidgetToGridStackWidget,\n convertGridStackNodeToAXGridLayoutNode,\n removeUndefinedKeys,\n} from './utility';\n\n@Component({\n selector: 'ax-grid-layout-widget',\n template: `<div class=\"grid-stack-item-content\"><ng-content></ng-content></div>`,\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n providers: [{ provide: AXComponent, useExisting: AXGridLayoutWidgetComponent }],\n})\nexport class AXGridLayoutWidgetComponent {\n private readonly elementRef: ElementRef<AXGridLayoutWidgetElement> = inject(ElementRef);\n\n public options = input<AXGridLayoutNode>();\n\n #eff = effect(() => {\n const options = this.options();\n\n untracked(() => {\n const gridstackNode = this.elementRef.nativeElement.gridstackNode as import('gridstack').GridStackNode;\n if (gridstackNode?.grid) {\n gridstackNode.grid.update(\n this.elementRef.nativeElement,\n removeUndefinedKeys(convertAXGridLayoutWidgetToGridStackWidget(options)),\n );\n }\n });\n });\n\n /\n Locks or unlocks the widget (prevents dragging and resizing).\n \n @param state - If true, the widget will be locked.\n * @returns void - No return value. The widget lock state is updated.\n /\n public setLockable(state: boolean): void {\n this.updateWidgetOptions({ disableResize: state, disableDrag: state });\n }\n\n /\n Enables or disables resizing of the widget.\n \n @param state - If true, resizing will be enabled.\n * @returns void - No return value. The widget resize state is updated.\n /\n public setResizable(state: boolean): void {\n this.updateWidgetOptions({ disableResize: !state });\n }\n\n /\n Updates the widget options.\n \n @param options - The new options for the widget.\n * @returns void - No return value. The widget options are updated.\n /\n public setOptions(options: AXGridLayoutWidget): void {\n this.updateWidgetOptions(options);\n }\n\n /\n Returns the current options of the widget.\n \n @returns AXGridLayoutNode - The current widget options.\n /\n public getOptions(): AXGridLayoutNode {\n const gridstackNode = this.elementRef.nativeElement.gridstackNode;\n return gridstackNode\n ? removeUndefinedKeys(convertGridStackNodeToAXGridLayoutNode(gridstackNode))\n : { ...this.options(), element: this.elementRef.nativeElement };\n }\n\n /\n Returns the widget options from the Angular input binding (stored/desired positions),\n * bypassing the live gridstackNode which may have been auto-reflowed.\n * Used by the container to load correct per-breakpoint layouts after column changes.\n \n @returns AXGridLayoutNode - The widget options from the input signal.\n /\n public getInputOptions(): AXGridLayoutNode {\n const opts = this.options();\n return opts\n ? { ...opts, element: this.elementRef.nativeElement }\n : { element: this.elementRef.nativeElement };\n }\n\n /\n Returns the native DOM element of the widget.\n \n @returns AXGridLayoutWidgetElement - The native element.\n /\n public get element(): AXGridLayoutWidgetElement {\n return this.elementRef.nativeElement;\n }\n\n /\n Updates the widget options and triggers a grid update.\n * @param options - The partial options to update.\n /\n private updateWidgetOptions(options: Partial<AXGridLayoutWidget>): void {\n const gridstackNode = this.elementRef.nativeElement.gridstackNode as import('gridstack').GridStackNode;\n if (gridstackNode?.grid) {\n gridstackNode.grid.update(\n this.elementRef.nativeElement,\n removeUndefinedKeys(convertAXGridLayoutWidgetToGridStackWidget(options)),\n );\n }\n }\n}\n","import { AXComponent, NXComponent } from '@acorex/cdk/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n ContentChildren,\n ElementRef,\n NgZone,\n OnDestroy,\n QueryList,\n ViewEncapsulation,\n afterNextRender,\n effect,\n inject,\n input,\n model,\n output,\n untracked,\n} from '@angular/core';\nimport { Subscription } from 'rxjs';\nimport { AXGridLayoutWidgetComponent } from './grid-layout-widget.component';\nimport {\n AXGridLayout,\n AXGridLayoutContainerElement,\n AXGridLayoutEvent,\n AXGridLayoutNode,\n AXGridLayoutOptions,\n AXGridLayoutPosition,\n AXGridLayoutWidget,\n AXGridLayoutWidgetElement,\n} from './types';\nimport {\n convertAXGridLayoutNodeToGridStackNode,\n convertAXGridLayoutOptionsToGridStackOptions,\n convertAXGridLayoutWidgetToGridStackWidget,\n convertGridStackNodeToAXGridLayoutNode,\n convertGridStackOptionsToAXGridLayoutOptions,\n removeUndefinedKeys,\n} from './utility';\n\n@Component({\n selector: 'ax-grid-layout-container',\n template: `<ng-content></ng-content> `,\n styleUrl: './grid-layout-container.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n encapsulation: ViewEncapsulation.None,\n providers: [{ provide: AXComponent, useExisting: AXGridLayoutContainerComponent }],\n})\nexport class AXGridLayoutContainerComponent extends NXComponent implements OnDestroy {\n //#region Inputs and Outputs\n public options = input<AXGridLayoutOptions>();\n\n protected onAdded = output<AXGridLayoutEvent>();\n protected onRemoved = output<AXGridLayoutEvent>();\n protected onWidgetChange = output<AXGridLayoutEvent>();\n protected onChange = output<AXGridLayoutEvent>();\n protected onRender = output<void>();\n\n protected isEmpty = model(false);\n //#endregion\n\n //#region Private Properties\n private readonly elementRef: ElementRef<AXGridLayoutContainerElement> = inject(ElementRef);\n private readonly ngZone = inject(NgZone);\n\n @ContentChildren(AXGridLayoutWidgetComponent) public gridstackItems?: QueryList<AXGridLayoutWidgetComponent>;\n\n private el = this.elementRef.nativeElement;\n private grid?: AXGridLayout;\n protected _sub: Subscription \| undefined;\n private isInitialized = false;\n //#endregion\n\n //#region Initialization\n #init = afterNextRender(() => {\n this.ngZone.runOutsideAngular(async () => {\n const { GridStack } = await import('gridstack');\n const gridStackOptions = removeUndefinedKeys(convertAXGridLayoutOptionsToGridStackOptions(this.options() ?? {}));\n this.grid = GridStack.init(gridStackOptions, this.el);\n this.updateAll();\n this.hookEvents(this.grid);\n this.onRender.emit();\n this.isInitialized = true;\n });\n this._sub = this.gridstackItems?.changes.subscribe(() => {\n this.updateAll();\n });\n });\n\n // Watch for options changes\n #optionsEffect = effect(() => {\n const newOptions = this.options();\n if (this.isInitialized && this.grid && newOptions) {\n untracked(() => {\n this.ngZone.runOutsideAngular(() => {\n const gridStackOptions = removeUndefinedKeys(convertAXGridLayoutOptionsToGridStackOptions(newOptions));\n\n // Detect whether the column count is changing — requires loading from stored input positions\n const isColumnChange =\n gridStackOptions.column !== undefined && gridStackOptions.column !== this.grid?.opts?.column;\n\n // Use 'none' layout mode to prevent GridStack from auto-reflowing widget positions.\n // The correct per-breakpoint positions will be loaded explicitly via updateAll(true).\n if (gridStackOptions.column !== undefined) {\n this.grid?.column(gridStackOptions.column, 'none');\n }\n\n if (gridStackOptions.cellHeight !== undefined) {\n this.grid?.cellHeight(gridStackOptions.cellHeight);\n }\n\n if (gridStackOptions.margin !== undefined) {\n this.grid?.margin(gridStackOptions.margin);\n }\n\n if (gridStackOptions.disableResize !== undefined) {\n this.grid?.enableResize(!gridStackOptions.disableResize);\n }\n\n if (gridStackOptions.disableDrag !== undefined) {\n this.grid?.enableMove(!gridStackOptions.disableDrag);\n }\n\n if (gridStackOptions.float !== undefined) {\n this.grid?.float(gridStackOptions.float);\n }\n\n if (gridStackOptions.animate !== undefined) {\n this.grid?.setAnimation(gridStackOptions.animate);\n }\n\n // When column count changes, read from Angular inputs (stored per-breakpoint positions)\n // to avoid using stale gridstackNode positions from the old column layout.\n // For non-column changes, read from gridstackNode to preserve live drag/resize state.\n this.updateAll(isColumnChange);\n });\n });\n }\n });\n\n public ngOnDestroy(): void {\n this.unhookEvents(this.grid);\n this._sub?.unsubscribe();\n this.destroy();\n }\n //#endregion\n\n //#region Internal Methods\n\n /\n Synchronizes the grid layout with the current widget list.\n \n @param useInputValues - When true, reads positions from Angular input bindings\n * (stored per-breakpoint positions). When false, reads from live gridstackNode\n * (preserving user drag/resize state). Use true after column/breakpoint changes.\n /\n private updateAll(useInputValues = false) {\n if (!this.grid) return;\n\n const arrays = this.gridstackItems?.toArray() ?? [];\n\n if (arrays.length === 0) {\n this.grid.removeAll(true);\n this.checkEmpty();\n return;\n }\n\n const layout: AXGridLayoutNode[] = [];\n arrays.forEach((item) => {\n const widgetOptions = useInputValues ? item.getInputOptions() : item.getOptions();\n if (widgetOptions) {\n layout.push(removeUndefinedKeys(convertAXGridLayoutNodeToGridStackNode(widgetOptions)));\n }\n });\n\n this.grid.load(layout);\n this.checkEmpty();\n }\n\n private checkEmpty() {\n if (this.grid) {\n const isEmpty = !this.getChildren().length;\n if (isEmpty === this.isEmpty()) return;\n this.isEmpty.set(isEmpty);\n }\n }\n\n private hookEvents(grid?: AXGridLayout): void {\n if (grid) {\n grid\n .on('added', (event: Event, nodes: import('gridstack').GridStackNode[]) => {\n const mappedNodes = nodes.map((node) => removeUndefinedKeys(convertGridStackNodeToAXGridLayoutNode(node)));\n this.checkEmpty();\n this.onAdded.emit({ sender: this, nodes: mappedNodes });\n this._dispatchChangeEvent();\n })\n .on('removed', (event: Event, nodes: import('gridstack').GridStackNode[]) => {\n const mappedNodes = nodes.map((node) => removeUndefinedKeys(convertGridStackNodeToAXGridLayoutNode(node)));\n this.checkEmpty();\n this.onRemoved.emit({ sender: this, nodes: mappedNodes });\n this._dispatchChangeEvent();\n })\n .on('change', (event: Event, nodes: import('gridstack').GridStackNode[]) => {\n const mappedNodes = nodes.map((node) => removeUndefinedKeys(convertGridStackNodeToAXGridLayoutNode(node)));\n this.onWidgetChange.emit({ sender: this, nodes: mappedNodes });\n this._dispatchChangeEvent();\n });\n }\n }\n\n private unhookEvents(grid?: AXGridLayout) {\n if (grid) grid.offAll();\n }\n\n private _dispatchChangeEvent() {\n if (this.getChildren().length) {\n this.onChange.emit({\n sender: this,\n nodes: this.getChildren(),\n });\n }\n }\n //#endregion\n\n /\n Adds a widget to the grid layout.\n \n @param w - Widget configuration object.\n * @param withAutoArrange - Whether to compact the grid before adding the widget.\n * @returns AXGridLayoutWidgetElement \| undefined - The created widget element or undefined if failed.\n /\n public addWidget(w: AXGridLayoutWidget, withAutoArrange = false): AXGridLayoutWidgetElement \| undefined {\n if (withAutoArrange) this.compact();\n\n const gridStackWidget = removeUndefinedKeys(convertAXGridLayoutWidgetToGridStackWidget(w));\n const node = this.grid?.addWidget(gridStackWidget)?.gridstackNode;\n if (!node) return undefined;\n\n const widgetElement: AXGridLayoutWidgetElement = node.el as AXGridLayoutWidgetElement;\n widgetElement.gridstackNode = removeUndefinedKeys(convertGridStackNodeToAXGridLayoutNode(node));\n\n return widgetElement;\n }\n\n /\n Compacts the grid layout.\n \n @param layout - Layout type for compacting ('list' or 'compact').\n * @param doSort - Whether to sort items while compacting.\n * @returns void - No return value. The grid layout is compacted.\n /\n public compact(layout: 'list' \| 'compact' = 'compact', doSort = true): void {\n this.grid?.compact(layout, doSort);\n }\n\n /\n Sets the cell height of the grid.\n \n @param val - New cell height value.\n * @returns void - No return value. The cell height is updated.\n /\n public setCellHeight(val: number): void {\n this.grid?.cellHeight(val);\n }\n\n /\n Sets the number of columns in the grid.\n \n @param column - Number of columns.\n * @param layout - Layout type for the change ('list', 'compact', 'moveScale', 'move', 'scale', or 'none').\n * @returns void - No return value. The column count is updated.\n /\n public setColumn(\n column: number,\n layout: 'list' \| 'compact' \| 'moveScale' \| 'move' \| 'scale' \| 'none' = 'moveScale',\n ): void {\n this.grid?.column(column, layout);\n }\n\n /\n Destroys the grid instance.\n \n @param removeDOM - Whether to remove DOM elements.\n * @returns void - No return value. The grid instance is destroyed.\n /\n public destroy(removeDOM = true): void {\n this.grid?.destroy(removeDOM);\n }\n\n /\n Enables or disables moving of widgets.\n \n @param state - Whether to enable moving.\n * @param recurse - Whether to apply to all child widgets.\n * @returns void - No return value. The move state is updated.\n /\n public setMovable(state: boolean, recurse?: boolean) {\n this.grid?.enableMove(state, recurse);\n }\n\n /\n Enables or disables resizing of widgets.\n \n @param state - Whether to enable resizing.\n * @param recurse - Whether to apply to all child widgets.\n * @returns void - No return value. The resize state is updated.\n /\n public setResizable(state: boolean, recurse?: boolean) {\n this.grid?.enableResize(state, recurse);\n }\n\n /\n Sets the float property of the grid.\n \n @param val - Whether to enable floating widgets.\n * @returns void - No return value. The float state is updated.\n /\n public setFloat(val: boolean): void {\n this.grid?.float(val);\n }\n\n /\n Sets the margin between grid items.\n \n @param value - Margin value (number in pixels or string with units).\n * @returns void - No return value. The margin is updated.\n /\n public setMargin(value: number \| string): void {\n this.grid?.margin(value);\n }\n\n /\n Removes a specific widget from the grid.\n \n @param el - The widget element to remove.\n * @param removeDOM - Whether to remove the DOM element.\n * @param triggerEvent - Whether to trigger removal events.\n * @returns void - No return value. The widget is removed.\n /\n public removeWidget(el: AXGridLayoutWidgetElement, removeDOM = true, triggerEvent = true): void {\n this.grid?.removeWidget(el, removeDOM, triggerEvent);\n }\n\n /\n Removes all widgets from the grid.\n \n @param removeDOM - Whether to remove DOM elements.\n * @returns void - No return value. All widgets are removed.\n /\n public removeAll(removeDOM = true): void {\n this.grid?.removeAll(removeDOM);\n }\n\n /\n Sets the animation state for the grid.\n \n @param doAnimate - Whether to enable animations.\n * @returns void - No return value. The animation state is updated.\n /\n public setAnimation(doAnimate: boolean): void {\n this.grid?.setAnimation(doAnimate);\n }\n\n /\n Sets up draggable functionality for external elements.\n \n @param dragIn - CSS selector string or array of HTML elements to make draggable.\n * @param widgets - Optional widget configuration for dragged items.\n * @returns Promise<void> - Promise that resolves when drag setup is complete.\n /\n public async setupDraggable(dragIn?: string \| HTMLElement[], widgets?: AXGridLayoutWidget) {\n if (typeof dragIn === 'string') {\n document.querySelectorAll(dragIn).forEach((item) => {\n if (!item.classList.contains('grid-stack-item')) {\n item.classList.add('grid-stack-item');\n }\n });\n }\n const { GridStack } = await import('gridstack');\n const gridStackWidgets = widgets\n ? [removeUndefinedKeys(convertAXGridLayoutWidgetToGridStackWidget(widgets))]\n : undefined;\n GridStack.setupDragIn(dragIn, undefined, gridStackWidgets);\n }\n\n /\n Gets the current grid options.\n \n @returns AXGridLayoutOptions - Current grid configuration options.\n /\n public getOptions(): AXGridLayoutOptions {\n const opts = this.grid?.opts;\n if (!opts) return {};\n\n return removeUndefinedKeys(convertGridStackOptionsToAXGridLayoutOptions(opts));\n }\n\n /\n Gets all child widgets in the grid.\n \n @returns AXGridLayoutNode[] - Array of all child widget nodes.\n /\n public getChildren(): AXGridLayoutNode[] {\n const children = this.grid?.engine.nodes ?? [];\n return children.map((node) => removeUndefinedKeys(convertGridStackNodeToAXGridLayoutNode(node)));\n }\n\n /\n Finds an empty space in the grid for a widget.\n \n @param input - Dimensions of the widget with height and width.\n * @returns { x: number; y: number } - Object containing x and y coordinates of empty space.\n /\n public findEmptySpace(\n input: Required<Pick<AXGridLayoutPosition, 'height' \| 'width'>>,\n ): Pick<AXGridLayoutPosition, 'x' \| 'y'> {\n const value = { h: input.height, w: input.height } as any;\n this.grid?.engine.findEmptyPosition(value);\n return { x: value.x, y: value.y };\n }\n //#endregion\n}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { AXGridLayoutContainerComponent } from './grid-layout-container.component';\nimport { AXGridLayoutWidgetComponent } from './grid-layout-widget.component';\n\n@NgModule({\n imports: [CommonModule, AXGridLayoutContainerComponent, AXGridLayoutWidgetComponent],\n exports: [AXGridLayoutContainerComponent, AXGridLayoutWidgetComponent],\n})\nexport class AXGridLayoutBuilderModule {}\n","/\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-image-editor.mjs CHANGED Viewed

@@ -66,11 +66,11 @@ class AXImageEditorCropComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXImageEditorCropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropPressed: "cropPressed" }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], ngImport: i0, template: "<ax-button\n  (click)=\"cropButtonHandler()\"\n  class=\"ax-crop-save ax-sm\"\n  [text]=\"'@acorex:image-editor.crop' | translate | async\"\n  color=\"primary\"\n></ax-button>\n\n<div class=\"flex gap-2\">\n  <ax-button\n    [selected]=\"this.service.cropperRatio() === '1:1' ? true : false\"\n    [color]=\"this.service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n    (click)=\"ratioHandler('1:1')\"\n    class=\"ax-crop-save ax-sm\"\n    text=\"1:1\"\n  ></ax-button>\n  <ax-button\n    [selected]=\"this.service.cropperRatio() === '16:9' ? true : false\"\n    [color]=\"this.service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n    (click)=\"ratioHandler('16:9')\"\n    class=\"ax-crop-save ax-sm\"\n    text=\"16:9\"\n  ></ax-button>\n\n  @if (aspectRatio().length) {\n    @for (item of aspectRatio(); track $index) {\n      <ax-button\n        [selected]=\"this.service.cropperRatio() === item ? true : false\"\n        [color]=\"this.service.cropperRatio() === item ? 'primary' : 'default'\"\n        (click)=\"ratioHandler(item)\"\n        class=\"ax-crop-save ax-sm\"\n        [text]=\"item\"\n      ></ax-button>\n    }\n  }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-crop{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));width:100%;padding:calc(var(--spacing,.25rem)*2);justify-content:space-around;display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropPressed: "cropPressed" }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], ngImport: i0, template: "<ax-button\n  (click)=\"cropButtonHandler()\"\n  class=\"ax-crop-save ax-sm\"\n  [text]=\"'@acorex:image-editor.crop' | translate | async\"\n  color=\"primary\"\n></ax-button>\n\n<div class=\"flex gap-2\">\n  <ax-button\n    [selected]=\"this.service.cropperRatio() === '1:1' ? true : false\"\n    [color]=\"this.service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n    (click)=\"ratioHandler('1:1')\"\n    class=\"ax-crop-save ax-sm\"\n    text=\"1:1\"\n  ></ax-button>\n  <ax-button\n    [selected]=\"this.service.cropperRatio() === '16:9' ? true : false\"\n    [color]=\"this.service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n    (click)=\"ratioHandler('16:9')\"\n    class=\"ax-crop-save ax-sm\"\n    text=\"16:9\"\n  ></ax-button>\n\n  @if (aspectRatio().length) {\n    @for (item of aspectRatio(); track $index) {\n      <ax-button\n        [selected]=\"this.service.cropperRatio() === item ? true : false\"\n        [color]=\"this.service.cropperRatio() === item ? 'primary' : 'default'\"\n        (click)=\"ratioHandler(item)\"\n        class=\"ax-crop-save ax-sm\"\n        [text]=\"item\"\n      ></ax-button>\n    }\n  }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-crop{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));width:100%;padding:calc(var(--spacing,.25rem) * 2);justify-content:space-around;display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXImageEditorCropComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-crop', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], template: "<ax-button\n  (click)=\"cropButtonHandler()\"\n  class=\"ax-crop-save ax-sm\"\n  [text]=\"'@acorex:image-editor.crop' | translate | async\"\n  color=\"primary\"\n></ax-button>\n\n<div class=\"flex gap-2\">\n  <ax-button\n    [selected]=\"this.service.cropperRatio() === '1:1' ? true : false\"\n    [color]=\"this.service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n    (click)=\"ratioHandler('1:1')\"\n    class=\"ax-crop-save ax-sm\"\n    text=\"1:1\"\n  ></ax-button>\n  <ax-button\n    [selected]=\"this.service.cropperRatio() === '16:9' ? true : false\"\n    [color]=\"this.service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n    (click)=\"ratioHandler('16:9')\"\n    class=\"ax-crop-save ax-sm\"\n    text=\"16:9\"\n  ></ax-button>\n\n  @if (aspectRatio().length) {\n    @for (item of aspectRatio(); track $index) {\n      <ax-button\n        [selected]=\"this.service.cropperRatio() === item ? true : false\"\n        [color]=\"this.service.cropperRatio() === item ? 'primary' : 'default'\"\n        (click)=\"ratioHandler(item)\"\n        class=\"ax-crop-save ax-sm\"\n        [text]=\"item\"\n      ></ax-button>\n    }\n  }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-crop{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));width:100%;padding:calc(var(--spacing,.25rem)*2);justify-content:space-around;display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-image-editor-crop', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AsyncPipe, AXTranslatorPipe], providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], template: "<ax-button\n  (click)=\"cropButtonHandler()\"\n  class=\"ax-crop-save ax-sm\"\n  [text]=\"'@acorex:image-editor.crop' | translate | async\"\n  color=\"primary\"\n></ax-button>\n\n<div class=\"flex gap-2\">\n  <ax-button\n    [selected]=\"this.service.cropperRatio() === '1:1' ? true : false\"\n    [color]=\"this.service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n    (click)=\"ratioHandler('1:1')\"\n    class=\"ax-crop-save ax-sm\"\n    text=\"1:1\"\n  ></ax-button>\n  <ax-button\n    [selected]=\"this.service.cropperRatio() === '16:9' ? true : false\"\n    [color]=\"this.service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n    (click)=\"ratioHandler('16:9')\"\n    class=\"ax-crop-save ax-sm\"\n    text=\"16:9\"\n  ></ax-button>\n\n  @if (aspectRatio().length) {\n    @for (item of aspectRatio(); track $index) {\n      <ax-button\n        [selected]=\"this.service.cropperRatio() === item ? true : false\"\n        [color]=\"this.service.cropperRatio() === item ? 'primary' : 'default'\"\n        (click)=\"ratioHandler(item)\"\n        class=\"ax-crop-save ax-sm\"\n        [text]=\"item\"\n      ></ax-button>\n    }\n  }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-crop{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));width:100%;padding:calc(var(--spacing,.25rem) * 2);justify-content:space-around;display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { cropPressed: [{ type: i0.Output, args: ["cropPressed"] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }] } });
 /**
@@ -94,11 +94,11 @@ class AXImageEditorHighlightComponent {
         this.service.highlightWidth.set(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXImageEditorHighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXImageEditorHighlightComponent, isStandalone: true, selector: "ax-image-editor-highlight", providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-highlight{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}ax-image-editor-highlight ax-color-box{flex:0}ax-image-editor-highlight ax-range-slider{width:calc(var(--spacing,.25rem)*40);padding-inline:calc(var(--spacing,.25rem)*3);padding-block:calc(var(--spacing,.25rem)*2)}ax-image-editor-highlight ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem)*4)!important;width:calc(var(--spacing,.25rem)*4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXImageEditorHighlightComponent, isStandalone: true, selector: "ax-image-editor-highlight", providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-highlight{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}ax-image-editor-highlight ax-color-box{flex:0}ax-image-editor-highlight ax-range-slider{width:calc(var(--spacing,.25rem) * 40);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2)}ax-image-editor-highlight ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem) * 4)!important;width:calc(var(--spacing,.25rem) * 4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXImageEditorHighlightComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-highlight', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent, AsyncPipe, AXTranslatorPipe, AXTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-highlight{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}ax-image-editor-highlight ax-color-box{flex:0}ax-image-editor-highlight ax-range-slider{width:calc(var(--spacing,.25rem)*40);padding-inline:calc(var(--spacing,.25rem)*3);padding-block:calc(var(--spacing,.25rem)*2)}ax-image-editor-highlight ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem)*4)!important;width:calc(var(--spacing,.25rem)*4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-image-editor-highlight', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent, AsyncPipe, AXTranslatorPipe, AXTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-highlight{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}ax-image-editor-highlight ax-color-box{flex:0}ax-image-editor-highlight ax-range-slider{width:calc(var(--spacing,.25rem) * 40);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2)}ax-image-editor-highlight ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem) * 4)!important;width:calc(var(--spacing,.25rem) * 4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 /**
@@ -122,11 +122,11 @@ class AXImageEditorPenComponent {
         this.service.penWidth.set(e);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXImageEditorPenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXImageEditorPenComponent, isStandalone: true, selector: "ax-image-editor-pen", providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-pen{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}ax-image-editor-pen ax-color-box{flex:0}ax-image-editor-pen ax-range-slider{width:calc(var(--spacing,.25rem)*40);padding-inline:calc(var(--spacing,.25rem)*3);padding-block:calc(var(--spacing,.25rem)*2)}ax-image-editor-pen ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem)*4)!important;width:calc(var(--spacing,.25rem)*4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXImageEditorPenComponent, isStandalone: true, selector: "ax-image-editor-pen", providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], ngImport: i0, template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-pen{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}ax-image-editor-pen ax-color-box{flex:0}ax-image-editor-pen ax-range-slider{width:calc(var(--spacing,.25rem) * 40);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2)}ax-image-editor-pen ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem) * 4)!important;width:calc(var(--spacing,.25rem) * 4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXRangeSliderComponent, selector: "ax-range-slider", inputs: ["disabled", "readonly", "orientation", "color", "values", "mode", "min", "max", "step", "snap", "tooltipMode", "snapMode", "hasStep", "hasSnap", "hasLable", "hasTooltip"], outputs: ["valuesChange"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXImageEditorPenComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-pen', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent, AsyncPipe, AXTranslatorPipe, AXTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-pen{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}ax-image-editor-pen ax-color-box{flex:0}ax-image-editor-pen ax-range-slider{width:calc(var(--spacing,.25rem)*40);padding-inline:calc(var(--spacing,.25rem)*3);padding-block:calc(var(--spacing,.25rem)*2)}ax-image-editor-pen ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem)*4)!important;width:calc(var(--spacing,.25rem)*4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-image-editor-pen', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, FormsModule, AXRangeSliderComponent, AsyncPipe, AXTranslatorPipe, AXTooltipModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], template: "<ax-color-box\n  [showValue]=\"false\"\n  [showIcon]=\"false\"\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  look=\"none\"\n  [ngModel]=\"selectedColor()\"\n  (ngModelChange)=\"changeColorHandler($event)\"\n>\n</ax-color-box>\n\n<ax-range-slider [min]=\"2\" [max]=\"20\" [(ngModel)]=\"value\" (ngModelChange)=\"valueHandler($event)\"></ax-range-slider>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-pen{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}ax-image-editor-pen ax-color-box{flex:0}ax-image-editor-pen ax-range-slider{width:calc(var(--spacing,.25rem) * 40);padding-inline:calc(var(--spacing,.25rem) * 3);padding-block:calc(var(--spacing,.25rem) * 2)}ax-image-editor-pen ax-range-slider .ax-range-slider .ax-range-slider-handler{height:calc(var(--spacing,.25rem) * 4)!important;width:calc(var(--spacing,.25rem) * 4)!important}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 /**
@@ -147,7 +147,7 @@ class AXImageEditorRotateComponent {
         this.service.rotate.set({ state: -90, userInteract: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXImageEditorRotateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXImageEditorRotateComponent, isStandalone: true, selector: "ax-image-editor-rotate", providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], ngImport: i0, template: "<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:image-editor.rotate-left' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateLeftHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-left\"></ax-icon>\n</ax-button>\n\n<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:image-editor.rotate-right' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateRightHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-right\"></ax-icon>\n</ax-button>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-rotate{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.3", type: AXImageEditorRotateComponent, isStandalone: true, selector: "ax-image-editor-rotate", providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], ngImport: i0, template: "<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:image-editor.rotate-left' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateLeftHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-left\"></ax-icon>\n</ax-button>\n\n<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:image-editor.rotate-right' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateRightHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-right\"></ax-icon>\n</ax-button>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-rotate{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXImageEditorRotateComponent, decorators: [{
             type: Component,
@@ -158,7 +158,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         AsyncPipe,
                         AXTranslatorPipe,
                         AXTooltipModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], template: "<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:image-editor.rotate-left' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateLeftHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-left\"></ax-icon>\n</ax-button>\n\n<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:image-editor.rotate-right' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateRightHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-right\"></ax-icon>\n</ax-button>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-rotate{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], template: "<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:image-editor.rotate-left' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateLeftHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-left\"></ax-icon>\n</ax-button>\n\n<ax-button\n  class=\"ax-sm\"\n  [axTooltip]=\"'@acorex:image-editor.rotate-right' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateRightHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-right\"></ax-icon>\n</ax-button>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid}}}@layer components{ax-image-editor-rotate{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:var(--color-border-surface,rgba(var(--ax-sys-color-border-surface)));justify-content:center;display:flex}}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"] }]
         }] });
 /**
@@ -453,11 +453,11 @@ class AXImageEditorCropperWindowComponent {
         this.selectedHandle.set(null);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXImageEditorCropperWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXImageEditorCropperWindowComponent, isStandalone: true, selector: "ax-image-editor-cropper-window", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropperWindowComponent }], viewQueries: [{ propertyName: "cropperWindow", first: true, predicate: ["r"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [style.border]=\"!showGrid() ? '1px dashed white' : null\" #r class=\"ax-image-cropper-window-container\">\n  @if (!service.cropperRatio()) {\n    <div (pointerdown)=\"handleSelector($event, 'right')\" class=\"ax-image-right-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'top')\" class=\"ax-image-top-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'left')\" class=\"ax-image-left-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'bottom')\" class=\"ax-image-bottom-handle ax-handle-shape\"></div>\n  }\n\n  <div (pointerdown)=\"handleSelector($event, 'right-top')\" class=\"ax-image-right-top-handle ax-handle-shape\"></div>\n  <div\n    (pointerdown)=\"handleSelector($event, 'bottom-right')\"\n    class=\"ax-image-bottom-right-handle ax-handle-shape\"\n  ></div>\n  <div (pointerdown)=\"handleSelector($event, 'bottom-left')\" class=\"ax-image-bottom-left-handle ax-handle-shape\"></div>\n  <div (pointerdown)=\"handleSelector($event, 'left-top')\" class=\"ax-image-left-top-handle ax-handle-shape\"></div>\n\n  @if (showGrid()) {\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n  }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style:solid;--tw-border-style:solid}}}@layer components{ax-image-editor-cropper-window{touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;top:45%;left:45%}ax-image-editor-cropper-window .ax-image-cropper-window-container{cursor:move;outline-style:var(--tw-outline-style);outline-width:100vmax;outline-color:#000000b3;grid-template-columns:repeat(3,minmax(0,1fr));height:100%;display:grid;position:relative}@supports (color:color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container{outline-color:color-mix(in oklab,var(--color-black,#000)70%,transparent)}}ax-image-editor-cropper-window .ax-image-cropper-window-container{--tw-outline-style:solid;outline-style:solid}ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-style:var(--tw-border-style);--tw-border-style:dashed;border:1px dashed #ffffff80}@supports (color:color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-color:color-mix(in oklab,var(--color-white,#fff)50%,transparent)}}ax-image-editor-cropper-window .ax-handle-shape{height:calc(var(--spacing,.25rem)*4);width:calc(var(--spacing,.25rem)*4);border-style:var(--tw-border-style);--tw-border-style:dashed;border-style:dashed;border-width:1px;border-color:var(--color-white,#fff);background-color:var(--color-gray-500,oklch(55.1% .027 264.364));-webkit-user-select:none;user-select:none;position:absolute}ax-image-editor-cropper-window .ax-image-right-top-handle{top:calc(var(--spacing,.25rem)*-2);right:calc(var(--spacing,.25rem)*-2);cursor:ne-resize}ax-image-editor-cropper-window .ax-image-bottom-right-handle{right:calc(var(--spacing,.25rem)*-2);bottom:calc(var(--spacing,.25rem)*-2);cursor:se-resize}ax-image-editor-cropper-window .ax-image-right-handle{top:calc(50% - .5rem);right:calc(var(--spacing,.25rem)*-2);cursor:e-resize}ax-image-editor-cropper-window .ax-image-bottom-left-handle{bottom:calc(var(--spacing,.25rem)*-2);left:calc(var(--spacing,.25rem)*-2);cursor:sw-resize}ax-image-editor-cropper-window .ax-image-left-top-handle{top:calc(var(--spacing,.25rem)*-2);left:calc(var(--spacing,.25rem)*-2);cursor:nw-resize}ax-image-editor-cropper-window .ax-image-bottom-handle{right:calc(50% - .5rem);bottom:calc(var(--spacing,.25rem)*-2);cursor:s-resize}ax-image-editor-cropper-window .ax-image-left-handle{top:calc(50% - .5rem);left:calc(var(--spacing,.25rem)*-2);cursor:w-resize}ax-image-editor-cropper-window .ax-image-top-handle{top:calc(var(--spacing,.25rem)*-2);cursor:n-resize;right:calc(50% - .5rem)}}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXImageEditorCropperWindowComponent, isStandalone: true, selector: "ax-image-editor-cropper-window", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropperWindowComponent }], viewQueries: [{ propertyName: "cropperWindow", first: true, predicate: ["r"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [style.border]=\"!showGrid() ? '1px dashed white' : null\" #r class=\"ax-image-cropper-window-container\">\n  @if (!service.cropperRatio()) {\n    <div (pointerdown)=\"handleSelector($event, 'right')\" class=\"ax-image-right-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'top')\" class=\"ax-image-top-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'left')\" class=\"ax-image-left-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'bottom')\" class=\"ax-image-bottom-handle ax-handle-shape\"></div>\n  }\n\n  <div (pointerdown)=\"handleSelector($event, 'right-top')\" class=\"ax-image-right-top-handle ax-handle-shape\"></div>\n  <div\n    (pointerdown)=\"handleSelector($event, 'bottom-right')\"\n    class=\"ax-image-bottom-right-handle ax-handle-shape\"\n  ></div>\n  <div (pointerdown)=\"handleSelector($event, 'bottom-left')\" class=\"ax-image-bottom-left-handle ax-handle-shape\"></div>\n  <div (pointerdown)=\"handleSelector($event, 'left-top')\" class=\"ax-image-left-top-handle ax-handle-shape\"></div>\n\n  @if (showGrid()) {\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n  }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style:solid;--tw-border-style:solid}}}@layer components{ax-image-editor-cropper-window{touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;top:45%;left:45%}ax-image-editor-cropper-window .ax-image-cropper-window-container{cursor:move;outline-style:var(--tw-outline-style);outline-width:100vmax;outline-color:#000000b3;grid-template-columns:repeat(3,minmax(0,1fr));height:100%;display:grid;position:relative}@supports (color:color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container{outline-color:color-mix(in oklab,var(--color-black,#000) 70%,transparent)}}ax-image-editor-cropper-window .ax-image-cropper-window-container{--tw-outline-style:solid;outline-style:solid}ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-style:var(--tw-border-style);--tw-border-style:dashed;border:1px dashed #ffffff80}@supports (color:color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-color:color-mix(in oklab,var(--color-white,#fff) 50%,transparent)}}ax-image-editor-cropper-window .ax-handle-shape{height:calc(var(--spacing,.25rem) * 4);width:calc(var(--spacing,.25rem) * 4);border-style:var(--tw-border-style);--tw-border-style:dashed;border-style:dashed;border-width:1px;border-color:var(--color-white,#fff);background-color:var(--color-gray-500,oklch(55.1% .027 264.364));-webkit-user-select:none;user-select:none;position:absolute}ax-image-editor-cropper-window .ax-image-right-top-handle{top:calc(var(--spacing,.25rem) * -2);right:calc(var(--spacing,.25rem) * -2);cursor:ne-resize}ax-image-editor-cropper-window .ax-image-bottom-right-handle{right:calc(var(--spacing,.25rem) * -2);bottom:calc(var(--spacing,.25rem) * -2);cursor:se-resize}ax-image-editor-cropper-window .ax-image-right-handle{top:calc(50% - .5rem);right:calc(var(--spacing,.25rem) * -2);cursor:e-resize}ax-image-editor-cropper-window .ax-image-bottom-left-handle{bottom:calc(var(--spacing,.25rem) * -2);left:calc(var(--spacing,.25rem) * -2);cursor:sw-resize}ax-image-editor-cropper-window .ax-image-left-top-handle{top:calc(var(--spacing,.25rem) * -2);left:calc(var(--spacing,.25rem) * -2);cursor:nw-resize}ax-image-editor-cropper-window .ax-image-bottom-handle{right:calc(50% - .5rem);bottom:calc(var(--spacing,.25rem) * -2);cursor:s-resize}ax-image-editor-cropper-window .ax-image-left-handle{top:calc(50% - .5rem);left:calc(var(--spacing,.25rem) * -2);cursor:w-resize}ax-image-editor-cropper-window .ax-image-top-handle{top:calc(var(--spacing,.25rem) * -2);cursor:n-resize;right:calc(50% - .5rem)}}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXImageEditorCropperWindowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-cropper-window', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropperWindowComponent }], template: "<div [style.border]=\"!showGrid() ? '1px dashed white' : null\" #r class=\"ax-image-cropper-window-container\">\n  @if (!service.cropperRatio()) {\n    <div (pointerdown)=\"handleSelector($event, 'right')\" class=\"ax-image-right-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'top')\" class=\"ax-image-top-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'left')\" class=\"ax-image-left-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'bottom')\" class=\"ax-image-bottom-handle ax-handle-shape\"></div>\n  }\n\n  <div (pointerdown)=\"handleSelector($event, 'right-top')\" class=\"ax-image-right-top-handle ax-handle-shape\"></div>\n  <div\n    (pointerdown)=\"handleSelector($event, 'bottom-right')\"\n    class=\"ax-image-bottom-right-handle ax-handle-shape\"\n  ></div>\n  <div (pointerdown)=\"handleSelector($event, 'bottom-left')\" class=\"ax-image-bottom-left-handle ax-handle-shape\"></div>\n  <div (pointerdown)=\"handleSelector($event, 'left-top')\" class=\"ax-image-left-top-handle ax-handle-shape\"></div>\n\n  @if (showGrid()) {\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n  }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style:solid;--tw-border-style:solid}}}@layer components{ax-image-editor-cropper-window{touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;top:45%;left:45%}ax-image-editor-cropper-window .ax-image-cropper-window-container{cursor:move;outline-style:var(--tw-outline-style);outline-width:100vmax;outline-color:#000000b3;grid-template-columns:repeat(3,minmax(0,1fr));height:100%;display:grid;position:relative}@supports (color:color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container{outline-color:color-mix(in oklab,var(--color-black,#000)70%,transparent)}}ax-image-editor-cropper-window .ax-image-cropper-window-container{--tw-outline-style:solid;outline-style:solid}ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-style:var(--tw-border-style);--tw-border-style:dashed;border:1px dashed #ffffff80}@supports (color:color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-color:color-mix(in oklab,var(--color-white,#fff)50%,transparent)}}ax-image-editor-cropper-window .ax-handle-shape{height:calc(var(--spacing,.25rem)*4);width:calc(var(--spacing,.25rem)*4);border-style:var(--tw-border-style);--tw-border-style:dashed;border-style:dashed;border-width:1px;border-color:var(--color-white,#fff);background-color:var(--color-gray-500,oklch(55.1% .027 264.364));-webkit-user-select:none;user-select:none;position:absolute}ax-image-editor-cropper-window .ax-image-right-top-handle{top:calc(var(--spacing,.25rem)*-2);right:calc(var(--spacing,.25rem)*-2);cursor:ne-resize}ax-image-editor-cropper-window .ax-image-bottom-right-handle{right:calc(var(--spacing,.25rem)*-2);bottom:calc(var(--spacing,.25rem)*-2);cursor:se-resize}ax-image-editor-cropper-window .ax-image-right-handle{top:calc(50% - .5rem);right:calc(var(--spacing,.25rem)*-2);cursor:e-resize}ax-image-editor-cropper-window .ax-image-bottom-left-handle{bottom:calc(var(--spacing,.25rem)*-2);left:calc(var(--spacing,.25rem)*-2);cursor:sw-resize}ax-image-editor-cropper-window .ax-image-left-top-handle{top:calc(var(--spacing,.25rem)*-2);left:calc(var(--spacing,.25rem)*-2);cursor:nw-resize}ax-image-editor-cropper-window .ax-image-bottom-handle{right:calc(50% - .5rem);bottom:calc(var(--spacing,.25rem)*-2);cursor:s-resize}ax-image-editor-cropper-window .ax-image-left-handle{top:calc(50% - .5rem);left:calc(var(--spacing,.25rem)*-2);cursor:w-resize}ax-image-editor-cropper-window .ax-image-top-handle{top:calc(var(--spacing,.25rem)*-2);cursor:n-resize;right:calc(50% - .5rem)}}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-image-editor-cropper-window', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropperWindowComponent }], template: "<div [style.border]=\"!showGrid() ? '1px dashed white' : null\" #r class=\"ax-image-cropper-window-container\">\n  @if (!service.cropperRatio()) {\n    <div (pointerdown)=\"handleSelector($event, 'right')\" class=\"ax-image-right-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'top')\" class=\"ax-image-top-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'left')\" class=\"ax-image-left-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'bottom')\" class=\"ax-image-bottom-handle ax-handle-shape\"></div>\n  }\n\n  <div (pointerdown)=\"handleSelector($event, 'right-top')\" class=\"ax-image-right-top-handle ax-handle-shape\"></div>\n  <div\n    (pointerdown)=\"handleSelector($event, 'bottom-right')\"\n    class=\"ax-image-bottom-right-handle ax-handle-shape\"\n  ></div>\n  <div (pointerdown)=\"handleSelector($event, 'bottom-left')\" class=\"ax-image-bottom-left-handle ax-handle-shape\"></div>\n  <div (pointerdown)=\"handleSelector($event, 'left-top')\" class=\"ax-image-left-top-handle ax-handle-shape\"></div>\n\n  @if (showGrid()) {\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n  }\n</div>\n", styles: ["@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-outline-style:solid;--tw-border-style:solid}}}@layer components{ax-image-editor-cropper-window{touch-action:none;-webkit-user-select:none;user-select:none;position:absolute;top:45%;left:45%}ax-image-editor-cropper-window .ax-image-cropper-window-container{cursor:move;outline-style:var(--tw-outline-style);outline-width:100vmax;outline-color:#000000b3;grid-template-columns:repeat(3,minmax(0,1fr));height:100%;display:grid;position:relative}@supports (color:color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container{outline-color:color-mix(in oklab,var(--color-black,#000) 70%,transparent)}}ax-image-editor-cropper-window .ax-image-cropper-window-container{--tw-outline-style:solid;outline-style:solid}ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-style:var(--tw-border-style);--tw-border-style:dashed;border:1px dashed #ffffff80}@supports (color:color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-color:color-mix(in oklab,var(--color-white,#fff) 50%,transparent)}}ax-image-editor-cropper-window .ax-handle-shape{height:calc(var(--spacing,.25rem) * 4);width:calc(var(--spacing,.25rem) * 4);border-style:var(--tw-border-style);--tw-border-style:dashed;border-style:dashed;border-width:1px;border-color:var(--color-white,#fff);background-color:var(--color-gray-500,oklch(55.1% .027 264.364));-webkit-user-select:none;user-select:none;position:absolute}ax-image-editor-cropper-window .ax-image-right-top-handle{top:calc(var(--spacing,.25rem) * -2);right:calc(var(--spacing,.25rem) * -2);cursor:ne-resize}ax-image-editor-cropper-window .ax-image-bottom-right-handle{right:calc(var(--spacing,.25rem) * -2);bottom:calc(var(--spacing,.25rem) * -2);cursor:se-resize}ax-image-editor-cropper-window .ax-image-right-handle{top:calc(50% - .5rem);right:calc(var(--spacing,.25rem) * -2);cursor:e-resize}ax-image-editor-cropper-window .ax-image-bottom-left-handle{bottom:calc(var(--spacing,.25rem) * -2);left:calc(var(--spacing,.25rem) * -2);cursor:sw-resize}ax-image-editor-cropper-window .ax-image-left-top-handle{top:calc(var(--spacing,.25rem) * -2);left:calc(var(--spacing,.25rem) * -2);cursor:nw-resize}ax-image-editor-cropper-window .ax-image-bottom-handle{right:calc(50% - .5rem);bottom:calc(var(--spacing,.25rem) * -2);cursor:s-resize}ax-image-editor-cropper-window .ax-image-left-handle{top:calc(50% - .5rem);left:calc(var(--spacing,.25rem) * -2);cursor:w-resize}ax-image-editor-cropper-window .ax-image-top-handle{top:calc(var(--spacing,.25rem) * -2);cursor:n-resize;right:calc(50% - .5rem)}}@property --tw-outline-style{syntax:\"*\";inherits:false;initial-value:solid}@property --tw-border-style{syntax:\"*\";inherits:false;initial-value:solid}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], cropperWindow: [{ type: i0.ViewChild, args: ['r', { isSignal: true }] }] } });
 class AXImageEditorViewComponent extends MXBaseComponent {
@@ -712,11 +712,11 @@ class AXImageEditorViewComponent extends MXBaseComponent {
         this.service.imageBlob.set(blobs);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXImageEditorViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXImageEditorViewComponent, isStandalone: true, selector: "ax-image-editor-view", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, isSignal: true }, { propertyName: "cropperWindow", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<canvas\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n  <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n}\n", styles: ["@layer components{ax-image-editor-view{touch-action:none;background-color:var(--color-white,#fff);justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}ax-image-editor-view .ax-canvas-element{cursor:crosshair;background-color:var(--color-black,#000)}ax-image-editor-view .ax-crop-save{top:calc(var(--spacing,.25rem)*0);right:calc(var(--spacing,.25rem)*0);margin:calc(var(--spacing,.25rem)*4);position:absolute}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXImageEditorCropperWindowComponent, selector: "ax-image-editor-cropper-window", inputs: ["showGrid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.3", type: AXImageEditorViewComponent, isStandalone: true, selector: "ax-image-editor-view", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, isSignal: true }, { propertyName: "cropperWindow", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<canvas\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n  <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n}\n", styles: ["@layer components{ax-image-editor-view{touch-action:none;background-color:var(--color-white,#fff);justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}ax-image-editor-view .ax-canvas-element{cursor:crosshair;background-color:var(--color-black,#000)}ax-image-editor-view .ax-crop-save{top:calc(var(--spacing,.25rem) * 0);right:calc(var(--spacing,.25rem) * 0);margin:calc(var(--spacing,.25rem) * 4);position:absolute}}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXImageEditorCropperWindowComponent, selector: "ax-image-editor-cropper-window", inputs: ["showGrid"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXImageEditorViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXImageEditorCropperWindowComponent], providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], template: "<canvas\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n  <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n}\n", styles: ["@layer components{ax-image-editor-view{touch-action:none;background-color:var(--color-white,#fff);justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}ax-image-editor-view .ax-canvas-element{cursor:crosshair;background-color:var(--color-black,#000)}ax-image-editor-view .ax-crop-save{top:calc(var(--spacing,.25rem)*0);right:calc(var(--spacing,.25rem)*0);margin:calc(var(--spacing,.25rem)*4);position:absolute}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-image-editor-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXImageEditorCropperWindowComponent], providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], template: "<canvas\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n  <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n}\n", styles: ["@layer components{ax-image-editor-view{touch-action:none;background-color:var(--color-white,#fff);justify-content:center;align-items:center;width:100%;display:flex;position:relative;overflow:hidden}ax-image-editor-view .ax-canvas-element{cursor:crosshair;background-color:var(--color-black,#000)}ax-image-editor-view .ax-crop-save{top:calc(var(--spacing,.25rem) * 0);right:calc(var(--spacing,.25rem) * 0);margin:calc(var(--spacing,.25rem) * 4);position:absolute}}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], canvasElem: [{ type: i0.ViewChild, args: ['canvasElem', { isSignal: true }] }], cropperWindow: [{ type: i0.ViewChild, args: ['f', { isSignal: true }] }] } });
 /**
@@ -764,7 +764,7 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
                 useExisting: forwardRef(() => AXImageEditorContainerComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "view", first: true, predicate: AXImageEditorViewComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "imageEditorContainer", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (service.isImageLoad()) {\n  <div #f class=\"ax-editor-container ax-default {{ look }}\">\n    <ng-content select=\"ax-header\"></ng-content>\n\n    <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n    @if (service.activeToolState()) {\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          <ax-image-editor-pen></ax-image-editor-pen>\n        }\n        @case ('crop') {\n          <ax-image-editor-crop\n            [aspectRatio]=\"aspectRatio()\"\n            (cropPressed)=\"cropButtonHandler()\"\n          ></ax-image-editor-crop>\n        }\n        @case ('highlight') {\n          <ax-image-editor-highlight></ax-image-editor-highlight>\n        }\n        @case ('rotate') {\n          <ax-image-editor-rotate></ax-image-editor-rotate>\n        }\n      }\n    }\n\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-image-editor-tool-selector></ax-image-editor-tool-selector>\n      </ax-content>\n    </ax-toolbar>\n  </div>\n  <div class=\"ax-error-container\"></div>\n} @else {\n  <div class=\"ax-loading-spinner-container\">\n    <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n  </div>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer components{ax-image-editor-container{width:fit-content;display:block;position:relative}ax-image-editor-container.ax-state-disabled{opacity:.5}ax-image-editor-container .ax-disable-overlay{top:calc(var(--spacing,.25rem)*0);left:calc(var(--spacing,.25rem)*0);cursor:not-allowed;width:100%;height:100%;position:absolute}ax-image-editor-container>.ax-editor-container{padding:calc(var(--spacing,.25rem)*0);display:block;height:auto!important}ax-image-editor-container .ax-loading-spinner-container{justify-content:center;align-items:center;display:flex}ax-image-editor-container .ax-main-toolbar{padding:calc(var(--spacing,.25rem)*1);justify-content:center}ax-image-editor-container ax-header{width:100%}ax-image-editor-container ax-header ax-toolbar{justify-content:space-between}ax-image-editor-container ax-header .ax-start-toolbar-divider{display:none}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["text", "color", "size", "stroke"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i2$1.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "component", type: AXImageEditorCropComponent, selector: "ax-image-editor-crop", inputs: ["aspectRatio"], outputs: ["cropPressed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: AXImageEditorToolSelectorComponent, selector: "ax-image-editor-tool-selector" }, { kind: "component", type: AXImageEditorPenComponent, selector: "ax-image-editor-pen" }, { kind: "component", type: AXImageEditorHighlightComponent, selector: "ax-image-editor-highlight" }, { kind: "component", type: AXImageEditorRotateComponent, selector: "ax-image-editor-rotate" }], encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "view", first: true, predicate: AXImageEditorViewComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "imageEditorContainer", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (service.isImageLoad()) {\n  <div #f class=\"ax-editor-container ax-default {{ look }}\">\n    <ng-content select=\"ax-header\"></ng-content>\n\n    <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n    @if (service.activeToolState()) {\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          <ax-image-editor-pen></ax-image-editor-pen>\n        }\n        @case ('crop') {\n          <ax-image-editor-crop\n            [aspectRatio]=\"aspectRatio()\"\n            (cropPressed)=\"cropButtonHandler()\"\n          ></ax-image-editor-crop>\n        }\n        @case ('highlight') {\n          <ax-image-editor-highlight></ax-image-editor-highlight>\n        }\n        @case ('rotate') {\n          <ax-image-editor-rotate></ax-image-editor-rotate>\n        }\n      }\n    }\n\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-image-editor-tool-selector></ax-image-editor-tool-selector>\n      </ax-content>\n    </ax-toolbar>\n  </div>\n  <div class=\"ax-error-container\"></div>\n} @else {\n  <div class=\"ax-loading-spinner-container\">\n    <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n  </div>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer components{ax-image-editor-container{width:fit-content;display:block;position:relative}ax-image-editor-container.ax-state-disabled{opacity:.5}ax-image-editor-container .ax-disable-overlay{top:calc(var(--spacing,.25rem) * 0);left:calc(var(--spacing,.25rem) * 0);cursor:not-allowed;width:100%;height:100%;position:absolute}ax-image-editor-container>.ax-editor-container{padding:calc(var(--spacing,.25rem) * 0);display:block;height:auto!important}ax-image-editor-container .ax-loading-spinner-container{justify-content:center;align-items:center;display:flex}ax-image-editor-container .ax-main-toolbar{padding:calc(var(--spacing,.25rem) * 1);justify-content:center}ax-image-editor-container ax-header{width:100%}ax-image-editor-container ax-header ax-toolbar{justify-content:space-between}ax-image-editor-container ax-header .ax-start-toolbar-divider{display:none}}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["text", "color", "size", "stroke"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i2$1.AXToolBarComponent, selector: "ax-toolbar" }, { kind: "component", type: AXImageEditorCropComponent, selector: "ax-image-editor-crop", inputs: ["aspectRatio"], outputs: ["cropPressed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: AXImageEditorToolSelectorComponent, selector: "ax-image-editor-tool-selector" }, { kind: "component", type: AXImageEditorPenComponent, selector: "ax-image-editor-pen" }, { kind: "component", type: AXImageEditorHighlightComponent, selector: "ax-image-editor-highlight" }, { kind: "component", type: AXImageEditorRotateComponent, selector: "ax-image-editor-rotate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImport: i0, type: AXImageEditorContainerComponent, decorators: [{
             type: Component,
@@ -788,7 +788,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.3", ngImpor
                         AXImageEditorPenComponent,
                         AXImageEditorHighlightComponent,
                         AXImageEditorRotateComponent,
-                    ], template: "@if (service.isImageLoad()) {\n  <div #f class=\"ax-editor-container ax-default {{ look }}\">\n    <ng-content select=\"ax-header\"></ng-content>\n\n    <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n    @if (service.activeToolState()) {\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          <ax-image-editor-pen></ax-image-editor-pen>\n        }\n        @case ('crop') {\n          <ax-image-editor-crop\n            [aspectRatio]=\"aspectRatio()\"\n            (cropPressed)=\"cropButtonHandler()\"\n          ></ax-image-editor-crop>\n        }\n        @case ('highlight') {\n          <ax-image-editor-highlight></ax-image-editor-highlight>\n        }\n        @case ('rotate') {\n          <ax-image-editor-rotate></ax-image-editor-rotate>\n        }\n      }\n    }\n\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-image-editor-tool-selector></ax-image-editor-tool-selector>\n      </ax-content>\n    </ax-toolbar>\n  </div>\n  <div class=\"ax-error-container\"></div>\n} @else {\n  <div class=\"ax-loading-spinner-container\">\n    <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n  </div>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer components{ax-image-editor-container{width:fit-content;display:block;position:relative}ax-image-editor-container.ax-state-disabled{opacity:.5}ax-image-editor-container .ax-disable-overlay{top:calc(var(--spacing,.25rem)*0);left:calc(var(--spacing,.25rem)*0);cursor:not-allowed;width:100%;height:100%;position:absolute}ax-image-editor-container>.ax-editor-container{padding:calc(var(--spacing,.25rem)*0);display:block;height:auto!important}ax-image-editor-container .ax-loading-spinner-container{justify-content:center;align-items:center;display:flex}ax-image-editor-container .ax-main-toolbar{padding:calc(var(--spacing,.25rem)*1);justify-content:center}ax-image-editor-container ax-header{width:100%}ax-image-editor-container ax-header ax-toolbar{justify-content:space-between}ax-image-editor-container ax-header .ax-start-toolbar-divider{display:none}}\n/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */\n"] }]
+                    ], template: "@if (service.isImageLoad()) {\n  <div #f class=\"ax-editor-container ax-default {{ look }}\">\n    <ng-content select=\"ax-header\"></ng-content>\n\n    <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n    @if (service.activeToolState()) {\n      @switch (service.activeToolState()) {\n        @case ('pen') {\n          <ax-image-editor-pen></ax-image-editor-pen>\n        }\n        @case ('crop') {\n          <ax-image-editor-crop\n            [aspectRatio]=\"aspectRatio()\"\n            (cropPressed)=\"cropButtonHandler()\"\n          ></ax-image-editor-crop>\n        }\n        @case ('highlight') {\n          <ax-image-editor-highlight></ax-image-editor-highlight>\n        }\n        @case ('rotate') {\n          <ax-image-editor-rotate></ax-image-editor-rotate>\n        }\n      }\n    }\n\n    <ax-toolbar class=\"ax-main-toolbar\">\n      <ax-content>\n        <ax-image-editor-tool-selector></ax-image-editor-tool-selector>\n      </ax-content>\n    </ax-toolbar>\n  </div>\n  <div class=\"ax-error-container\"></div>\n} @else {\n  <div class=\"ax-loading-spinner-container\">\n    <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n  </div>\n}\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer components{ax-image-editor-container{width:fit-content;display:block;position:relative}ax-image-editor-container.ax-state-disabled{opacity:.5}ax-image-editor-container .ax-disable-overlay{top:calc(var(--spacing,.25rem) * 0);left:calc(var(--spacing,.25rem) * 0);cursor:not-allowed;width:100%;height:100%;position:absolute}ax-image-editor-container>.ax-editor-container{padding:calc(var(--spacing,.25rem) * 0);display:block;height:auto!important}ax-image-editor-container .ax-loading-spinner-container{justify-content:center;align-items:center;display:flex}ax-image-editor-container .ax-main-toolbar{padding:calc(var(--spacing,.25rem) * 1);justify-content:center}ax-image-editor-container ax-header{width:100%}ax-image-editor-container ax-header ax-toolbar{justify-content:space-between}ax-image-editor-container ax-header .ax-start-toolbar-divider{display:none}}\n/*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { imageEditorContainer: [{ type: i0.ViewChild, args: ['f', { isSignal: true }] }], view: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXImageEditorViewComponent), { isSignal: true }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], __hostClass: [{
                 type: HostBinding,
                 args: ['class']