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

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

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-grid-layout-builder.mjs","sources":["../../../../libs/components/grid-layout-builder/src/lib/grid-layout-widget.component.ts","../../../../libs/components/grid-layout-builder/src/lib/grid-layout-widget.directive.ts","../../../../libs/components/grid-layout-builder/src/lib/grid-layout-container.component.ts","../../../../libs/components/grid-layout-builder/src/lib/grid-layout-builder.module.ts","../../../../libs/components/grid-layout-builder/src/lib/types.ts","../../../../libs/components/grid-layout-builder/src/acorex-components-grid-layout-builder.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef, inject, input, ViewEncapsulation } from '@angular/core';\nimport { AXGridLayoutNode, AXGridLayoutWidget, AXGridLayoutWidgetCompElement } from './types';\n\n/**\n * A component that represents a widget within the grid layout. It serves as an individual\n * item within a `gridstack` layout, providing options for customization and interaction.\n *\n * This widget component is used within the `AXGridLayoutContainerComponent` to manage the\n * layout of widgets in a grid system. The component interacts with the GridStack library\n * to offer features like resizing, movement, and customization of the widget's properties.\n *\n * @example\n * <ax-grid-layout-widget [options]=\"widgetOptions\">\n *   <div>Widget Content</div>\n * </ax-grid-layout-widget>\n */\n@Component({\n  selector: 'ax-grid-layout-widget',\n  template: ` <div class=\"grid-stack-item-content\">\n    <ng-template #container></ng-template>\n    <ng-content></ng-content>\n    {{ options().content }}\n  </div>`,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXGridLayoutWidgetComponent {\n  /**\n   * A reference to the native element of this widget component. It is used for interaction\n   * with the underlying DOM element and for updating the widget properties via GridStack.\n   */\n  private readonly elementRef: ElementRef<AXGridLayoutWidgetCompElement> = inject(ElementRef);\n\n  /**\n   * The native element of the widget component.\n   */\n  public el: AXGridLayoutWidgetCompElement = this.elementRef.nativeElement;\n\n  /**\n   * The current options of the widget. These options are used to define the layout,\n   * content, and behavior of the widget within the grid.\n   *\n   * @internal\n   */\n  private _options?: AXGridLayoutNode;\n\n  /**\n   * Input property that represents the widget's configuration options.\n   *\n   * The options include properties such as position, size, content, and other\n   * configuration values. These options are updated dynamically.\n   *\n   * @param {AXGridLayoutNode} val The configuration object for the widget.\n   * @returns {AXGridLayoutWidgetCompElement} The element associated with the widget.\n   */\n  public options = input(null, {\n    transform: (val: AXGridLayoutNode) => {\n      const grid = this.el.gridstackNode?.grid;\n      if (grid) {\n        grid.update(this.el, val);\n      } else {\n        this._options = { ...val, el: this.el };\n      }\n      return this.el.gridstackNode || this._options || { el: this.el };\n    },\n  });\n\n  /**\n   * Clears the widget's options.\n   *\n   * This method removes any existing options set for the widget and resets it\n   * to its default state.\n   */\n  public clearOptions() {\n    this._options = null;\n  }\n\n  /**\n   * Constructor that initializes the widget component and sets the reference to\n   * the grid widget component in the element's properties.\n   */\n  constructor() {\n    this.el._gridWidgetComp = this;\n  }\n\n  /**\n   * Removes this widget from the grid.\n   *\n   * This method interacts with GridStack to remove the widget from the layout.\n   * Once removed, the widget will no longer be part of the grid.\n   */\n  public removeWidget() {\n    this.el.gridstackNode.grid.removeWidget(this.el);\n  }\n\n  /**\n   * Sets whether the widget can be locked (i.e., not resizable).\n   *\n   * @param {boolean} state Whether the widget should be locked or not.\n   * @remarks\n   * If the widget is locked, it cannot be resized.\n   */\n  public setlockable(state: boolean): void {\n    this.el.gridstackNode.grid.update(this.el, { noResize: state });\n  }\n\n  /**\n   * Sets whether the widget can be resized.\n   *\n   * @param {boolean} state Whether the widget should be resizable or not.\n   * @remarks\n   * If the widget is resizable, the user can change its size by dragging.\n   */\n  public setResizable(state: boolean): void {\n    this.el.gridstackNode.grid.update(this.el, { noMove: state });\n  }\n\n  /**\n   * Updates the options of the widget.\n   *\n   * @param {AXGridLayoutWidget} options The new options to apply to the widget.\n   */\n  setOptions(options: AXGridLayoutWidget) {\n    this.el.gridstackNode.grid.update(this.el, options);\n  }\n\n  /**\n   * Retrieves the current options of the widget.\n   *\n   * @returns {AXGridLayoutNode} The current configuration options of the widget.\n   * @remarks\n   * This method provides access to the widget's layout and configuration.\n   * If no specific options are set, it returns the default options.\n   */\n  getOptions(): AXGridLayoutNode {\n    const gridstackNode = this.el.gridstackNode;\n    if (gridstackNode) {\n      return {\n        ...gridstackNode,\n        el: this.el,\n      };\n    }\n    return this.options() || this._options || { el: this.el };\n  }\n}\n","import { Directive, ElementRef, inject, input, OnDestroy, OnInit, Renderer2 } from '@angular/core';\nimport { AXGridLayoutNode, AXGridLayoutWidget, AXGridLayoutWidgetCompElement } from './types';\n\n/**\n * A directive that turns any element into a GridStack widget.\n * It allows the element to be managed by the GridStack library,\n * enabling features like resizing, dragging, and layout customization.\n *\n * This directive creates an inner element inside the host element\n * and moves the widget content into it for better encapsulation and styling.\n *\n * @example\n * <div axGridLayoutWidget [options]=\"widgetOptions\">Widget Content</div>\n */\n@Directive({ selector: '[axGridLayoutWidget]' })\nexport class AXGridLayoutWidgetDirective implements OnInit, OnDestroy {\n  /**\n   * Reference to the native element of the directive.\n   */\n  private readonly elementRef: ElementRef<AXGridLayoutWidgetCompElement> = inject(ElementRef);\n\n  /**\n   * Renderer2 for safe DOM manipulation.\n   */\n  private readonly renderer = inject(Renderer2);\n\n  /**\n   * The native element of the directive.\n   */\n  public el: AXGridLayoutWidgetCompElement = this.elementRef.nativeElement;\n\n  /**\n   * The current options of the widget. These options are used to define the layout,\n   * content, and behavior of the widget within the grid.\n   */\n  private _options?: AXGridLayoutNode;\n\n  /**\n   * Reference to the newly created inner element.\n   */\n  private innerElement: HTMLElement;\n\n  /**\n   * Input property that represents the widget's configuration options.\n   *\n   * The options include properties such as position, size, content, and other\n   * configuration values. These options are updated dynamically.\n   *\n   * @param {AXGridLayoutNode} val The configuration object for the widget.\n   * @returns {AXGridLayoutWidgetCompElement} The element associated with the widget.\n   */\n  public options = input(null, {\n    transform: (val: AXGridLayoutNode) => {\n      const grid = this.el.gridstackNode?.grid;\n      if (grid) {\n        grid.update(this.el, val);\n      } else {\n        this._options = { ...val, el: this.el };\n      }\n      return this.el.gridstackNode || this._options || { el: this.el };\n    },\n  });\n\n  /**\n   * Initializes the directive and sets up the inner element.\n   * Create a new inner element\n   * Move the host element's content into the new inner element\n   * Append the inner element to the host element\n   * Set the reference to the grid widget directive\n   */\n  ngOnInit(): void {\n    this.innerElement = this.renderer.createElement('div');\n    this.renderer.addClass(this.innerElement, 'grid-stack-item-content');\n\n    while (this.el.firstChild) {\n      this.renderer.appendChild(this.innerElement, this.el.firstChild);\n    }\n\n    this.renderer.appendChild(this.el, this.innerElement);\n\n    this.el._gridWidgetComp = this;\n  }\n\n  /**\n   * Cleans up the directive when it is destroyed.\n   */\n  ngOnDestroy(): void {\n    this.removeWidget();\n  }\n\n  /**\n   * Clears the widget's options.\n   *\n   * This method removes any existing options set for the widget and resets it\n   * to its default state.\n   */\n  public clearOptions() {\n    this._options = null;\n  }\n\n  /**\n   * Removes this widget from the grid.\n   *\n   * This method interacts with GridStack to remove the widget from the layout.\n   * Once removed, the widget will no longer be part of the grid.\n   */\n  public removeWidget() {\n    if (this.el.gridstackNode?.grid) {\n      this.el.gridstackNode.grid.removeWidget(this.el);\n    }\n  }\n\n  /**\n   * Sets whether the widget can be locked (i.e., not resizable).\n   *\n   * @param {boolean} state Whether the widget should be locked or not.\n   * @remarks\n   * If the widget is locked, it cannot be resized.\n   */\n  public setLockable(state: boolean): void {\n    if (this.el.gridstackNode?.grid) {\n      this.el.gridstackNode.grid.update(this.el, { noResize: state });\n    }\n  }\n\n  /**\n   * Sets whether the widget can be resized.\n   *\n   * @param {boolean} state Whether the widget should be resizable or not.\n   * @remarks\n   * If the widget is resizable, the user can change its size by dragging.\n   */\n  public setResizable(state: boolean): void {\n    if (this.el.gridstackNode?.grid) {\n      this.el.gridstackNode.grid.update(this.el, { noMove: state });\n    }\n  }\n\n  /**\n   * Updates the options of the widget.\n   *\n   * @param {AXGridLayoutWidget} options The new options to apply to the widget.\n   */\n  public setOptions(options: AXGridLayoutWidget) {\n    if (this.el.gridstackNode?.grid) {\n      this.el.gridstackNode.grid.update(this.el, options);\n    }\n  }\n\n  /**\n   * Retrieves the current options of the widget.\n   *\n   * @returns {AXGridLayoutNode} The current configuration options of the widget.\n   * @remarks\n   * This method provides access to the widget's layout and configuration.\n   * If no specific options are set, it returns the default options.\n   */\n  public getOptions(): AXGridLayoutNode {\n    const gridstackNode = this.el.gridstackNode;\n    if (gridstackNode) {\n      return {\n        ...gridstackNode,\n        el: this.el,\n      };\n    }\n    return this._options || { el: this.el };\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  NgZone,\n  OnDestroy,\n  OnInit,\n  SecurityContext,\n  ViewEncapsulation,\n  WritableSignal,\n  computed,\n  contentChildren,\n  effect,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n} from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\nimport { merge } from 'lodash-es';\nimport { AXGridLayoutWidgetComponent } from './grid-layout-widget.component';\nimport { AXGridLayoutWidgetDirective } from './grid-layout-widget.directive';\nimport {\n  AXGridLayout,\n  AXGridLayoutContainerCompElement,\n  AXGridLayoutDroppedEvent,\n  AXGridLayoutElementEvent,\n  AXGridLayoutEventEvent,\n  AXGridLayoutNode,\n  AXGridLayoutNodesEvent,\n  AXGridLayoutOptions,\n  AXGridLayoutWidget,\n  AXGridLayoutWidgetCompElement,\n  AXGridLayoutWidgetElement,\n  AXSaveCallback,\n} from './types';\n\n/**\n * The `AXGridLayoutContainerComponent` is an Angular component that acts as a wrapper for the GridStack library.\n * It provides a flexible grid layout system for arranging items within a container. It integrates with GridStack.js\n * and allows dynamic manipulation of grid items (widgets), including adding, removing, resizing, and dragging.\n *\n * This component uses Angular's reactive signals, outputs, and lifecycle hooks to manage grid state and interactions.\n */\n@Component({\n  selector: 'ax-grid-layout-container',\n  template: ` <ng-template #container></ng-template>\n    <ng-content></ng-content>`,\n  styleUrl: './grid-layout-container.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXGridLayoutContainerComponent implements OnInit, OnDestroy {\n  private serializedData?: AXGridLayoutOptions;\n  /**\n   * Content children elements of type `AXGridLayoutWidgetComponent` that are dynamically managed within the grid.\n   */\n  private compItems = contentChildren(AXGridLayoutWidgetComponent);\n  private dirItems = contentChildren(AXGridLayoutWidgetDirective);\n\n  /**\n   * Input that holds options for configuring the GridStack grid layout.\n   */\n  public options = input<AXGridLayoutOptions>();\n\n  /**\n   * A computed signal that merges the provided `options` with the grid's existing configuration (if any).\n   */\n  private calcOptions = computed(() => this.grid()?.opts || this.options() || {});\n\n  /**\n   * A reference to the native element of the container component.\n   */\n  private readonly elementRef: ElementRef<AXGridLayoutContainerCompElement> = inject(ElementRef);\n\n  /**\n   * Angular's NgZone for running code outside Angular's change detection.\n   */\n  private ngZone = inject(NgZone);\n\n  /**\n   * A writable signal representing the current state of the grid.\n   */\n  private grid: WritableSignal<AXGridLayout | undefined> = signal(undefined);\n\n  /**\n   * Flag indicating whether the grid has been loaded with content.\n   */\n  private loaded?: boolean;\n\n  /**\n   * A reference to the native element representing the grid container.\n   */\n  private el: AXGridLayoutContainerCompElement = this.elementRef.nativeElement;\n\n  // Outputs\n\n  /**\n   * Output event emitted when a widget is added to the grid.\n   */\n  protected onAdded = output<AXGridLayoutNodesEvent>();\n\n  /**\n   * Output event emitted when a widget or layout is changed.\n   */\n  protected onChange = output<AXGridLayoutNodesEvent>();\n\n  /**\n   * Output event emitted when the grid is disabled.\n   */\n  protected onDisable = output<AXGridLayoutEventEvent>();\n\n  /**\n   * Output event emitted during a drag operation on a widget.\n   */\n  protected onDrag = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when drag starts on a widget.\n   */\n  protected onDragStart = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when drag stops on a widget.\n   */\n  protected onDragStop = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when a widget is dropped on the grid.\n   */\n  protected onDropped = output<AXGridLayoutDroppedEvent>();\n\n  /**\n   * Output event emitted when the grid is enabled.\n   */\n  protected onEnable = output<AXGridLayoutEventEvent>();\n\n  /**\n   * Output event emitted when a widget is removed from the grid.\n   */\n  protected onRemoved = output<AXGridLayoutNodesEvent>();\n\n  /**\n   * Output event emitted when a widget is resized.\n   */\n  protected onResize = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when resizing starts on a widget.\n   */\n  protected onResizeStart = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when resizing stops on a widget.\n   */\n  protected onResizeStop = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when the grid is rendered.\n   */\n  protected isRendered = output<boolean>();\n\n  // Model\n\n  /**\n   * Model that tracks whether the grid container is empty.\n   */\n  protected isEmpty = model(false);\n\n  // Lifecycle\n\n  /**\n   * Initializes the grid layout component and sets up the GridStack grid.\n   */\n  constructor() {\n    console.time('grid-layout-builder loaded in: ');\n    this.el._gridComp = this;\n  }\n\n  /**\n   * Angular lifecycle hook that initializes the grid once the component is created.\n   * It sets up GridStack and loads any initial layout configuration.\n   */\n  public async ngOnInit(): Promise<void> {\n    this.ngZone.runOutsideAngular(async () => {\n      this.loaded = !!this.calcOptions()?.children?.length;\n      const { GridStack } = await import('gridstack');\n      this.grid.set(GridStack.init(this.calcOptions(), this.el));\n      this.checkEmpty();\n    });\n  }\n\n  /**\n   * Angular lifecycle hook that cleans up resources when the component is destroyed.\n   * It removes event listeners and destroys the GridStack instance.\n   */\n  public ngOnDestroy(): void {\n    this.unhookEvents(this.grid());\n    this.grid()?.destroy();\n  }\n\n  // Effects\n\n  /**\n   * Effect that reacts to changes in the grid layout and updates the DOM accordingly.\n   */\n  private gridChange = effect(() => {\n    if (this.grid()) {\n      if (!this.loaded) this.updateAll();\n      this.hookEvents(this.grid());\n      this.isRendered.emit(true);\n      console.timeEnd('grid-layout-builder loaded in: ');\n    }\n  });\n\n  /**\n   * Effect that reacts to changes in child widgets and updates the grid layout.\n   */\n  private childChange = effect(() => {\n    if (this.compItems() || this.dirItems()) {\n      this.updateAll();\n    }\n  });\n\n  // Methods\n\n  /**\n   * Updates the grid layout with the current set of widgets, clearing previous options.\n   */\n  private updateAll() {\n    if (!this.grid()) return;\n    const layout: AXGridLayoutWidget[] = [];\n    const arrays = [...this.dirItems(), ...this.compItems()];\n    if (arrays.length) {\n      arrays.forEach((item) => {\n        layout.push(item.options());\n        item.clearOptions();\n      });\n      this.grid().load(layout);\n    }\n  }\n\n  /**\n   * Checks whether the grid is empty and updates the `isEmpty` model accordingly.\n   */\n  private checkEmpty() {\n    if (this.grid()) {\n      const isEmpty = !this.grid().engine.nodes.length;\n      if (isEmpty === this.isEmpty()) return;\n      this.isEmpty.set(isEmpty);\n    }\n  }\n\n  // Event Listeners\n\n  /**\n   * Hooks event listeners to the grid for various grid events (e.g., add, remove, drag, resize).\n   */\n  private hookEvents(grid?: AXGridLayout): void {\n    if (grid) {\n      grid\n        .on('added', (event: Event, nodes: AXGridLayoutNode[]) => {\n          this.checkEmpty();\n          this.onAdded.emit({ event, nodes });\n        })\n        .on('removed', (event: Event, nodes: AXGridLayoutNode[]) => {\n          this.checkEmpty();\n          this.onRemoved.emit({ event, nodes });\n        })\n        .on('change', (event: Event, nodes: AXGridLayoutNode[]) => this.onChange.emit({ event, nodes }))\n        .on('disable', (event: Event) => this.onDisable.emit({ event }))\n        .on('drag', (event: Event, el: AXGridLayoutWidgetElement) => this.onDrag.emit({ event, el }))\n        .on('dragstart', (event: Event, el: AXGridLayoutWidgetElement) => this.onDragStart.emit({ event, el }))\n        .on('dragstop', (event: Event, el: AXGridLayoutWidgetElement) => this.onDragStop.emit({ event, el }))\n        .on('dropped', (event: Event, previousNode: AXGridLayoutNode, newNode: AXGridLayoutNode) => this.onDropped.emit({ event, previousNode, newNode }))\n        .on('enable', (event: Event) => this.onEnable.emit({ event }))\n        .on('resize', (event: Event, el: AXGridLayoutWidgetElement) => this.onResize.emit({ event, el }))\n        .on('resizestart', (event: Event, el: AXGridLayoutWidgetElement) => this.onResizeStart.emit({ event, el }))\n        .on('resizestop', (event: Event, el: AXGridLayoutWidgetElement) => this.onResizeStop.emit({ event, el }));\n    }\n  }\n\n  /**\n   * Removes all event listeners from the grid.\n   */\n  private unhookEvents(grid?: AXGridLayout) {\n    if (grid) {\n      grid.offAll();\n    }\n  }\n\n  //PUBLIC SETTER METHODS\n\n  /**\n   * Creates a new widget and returns it.\n   * @param w - Widget position/size options.\n   * @returns The created widget's HTML element, or `undefined` if the grid is not initialized.\n   */\n  public addWidget(w: AXGridLayoutWidget, withAutoArrange = false): AXGridLayoutWidgetElement | undefined {\n    if (withAutoArrange) {\n      this.compact();\n    }\n    return this.grid()?.addWidget(w);\n  }\n\n  /**\n   * Re-layout grid items to reclaim any empty space.\n   * @param layout - Compaction mode: 'list' or 'compact'. Default is 'compact'.\n   * @param doSort - Whether to sort items automatically. Default is `true`.\n   */\n  public compact(layout: 'list' | 'compact' = 'compact', doSort = true): void {\n    this.grid()?.compact(layout, doSort);\n  }\n\n  /**\n   * Updates the current cell height.\n   * @param val - The new cell height value.\n   * @param update - Whether to rebuild the internal CSS stylesheet. Default is `true`.\n   */\n  public setCellHeight(val: number, update = true): void {\n    this.grid()?.cellHeight(val, update);\n  }\n\n  /**\n   * Sets the number of columns in the grid and updates existing widgets to conform to the new layout.\n   * @param column - Number of columns (must be > 0). Default is 12.\n   * @param layout - Re-layout behavior: 'list', 'compact', 'moveScale', 'move', 'scale', 'none'.\n   *                Default is 'moveScale'.\n   */\n  public setColumn(column: number, layout: 'list' | 'compact' | 'moveScale' | 'move' | 'scale' | 'none' = 'moveScale'): void {\n    this.grid()?.column(column, layout);\n  }\n\n  /**\n   * Destroys the grid instance.\n   * @param removeDOM - If `false`, nodes and grid will not be removed from the DOM. Default is `true`.\n   */\n  public destroy(removeDOM = true): void {\n    this.grid()?.destroy(removeDOM);\n  }\n\n  /**\n   * Sets whether widgets in the grid can be moved (dragged).\n   *\n   * @param state If true, widgets are movable; otherwise, they are locked.\n   * @param recurse If true, the setting is applied to nested widgets as well.\n   */\n  public setMovable(state: boolean, recurse?: boolean) {\n    this.grid().enableMove(state, recurse);\n  }\n\n  /**\n   * Sets whether widgets in the grid can be resized.\n   *\n   * @param state If true, widgets are resizable; otherwise, they are fixed.\n   * @param recurse If true, the setting is applied to nested widgets as well.\n   */\n  public setResizable(state: boolean, recurse?: boolean) {\n    this.grid().enableResize(state, recurse);\n  }\n\n  /**\n   * Sets or gets the floating behavior of widgets.\n   * @param val - If provided, sets floating behavior (`true` or `false`). If not provided, returns the current value.\n   * @returns The current floating behavior if `val` is not provided.\n   */\n  public setFloat(val: boolean): void {\n    this.grid()?.float(val);\n  }\n\n  /**\n   * Sets the margin (gap) between grid items and their content.\n   * @param value - The margin value (number or string).\n   */\n  public setMargin(value: number | string): void {\n    this.grid()?.margin(value);\n  }\n\n  /**\n   * Removes a widget from the grid.\n   * @param el - The widget to remove.\n   * @param removeDOM - If `false`, the widget won't be removed from the DOM. Default is `true`.\n   * @param triggerEvent - If `false`, no 'removed' callbacks will be called. Default is `true`.\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   * @param removeDOM - If `false`, widgets won't be removed from the DOM. Default is `true`.\n   */\n  public removeAll(removeDOM = true): void {\n    this.grid()?.removeAll(removeDOM);\n  }\n\n  /**\n   * Rotates a widget by swapping its width and height.\n   * @param els - The widget or selector of widgets to rotate.\n   * @param relative - Optional pixel coordinates to rotate around (keeps that cell under the cursor).\n   */\n  public setRotate(element: AXGridLayoutWidgetCompElement) {\n    this.grid().rotate(element);\n  }\n\n  /**\n   * Toggles the grid animation state.\n   * @param doAnimate - If `true`, the grid will animate.\n   */\n  public setAnimation(doAnimate: boolean): void {\n    this.grid()?.setAnimation(doAnimate);\n  }\n\n  domSanitizer = inject(DomSanitizer);\n\n  /**\n   * Saves the current grid layout configuration.\n   *\n   * @param saveContent Whether to save the content of the grid items.\n   * @param saveGridOpt Whether to save the grid options.\n   * @param saveCallback Optional callback for custom save logic.\n   * @returns The serialized grid layout options.\n   */\n  public save(saveContent = false, saveGridOpt = true, saveCallback?: AXSaveCallback): AXGridLayoutOptions {\n    this.serializedData = this.grid().save(saveContent, saveGridOpt, saveCallback) as AXGridLayoutOptions;\n    return this.serializedData;\n  }\n\n  /**\n   * Loads a serialized grid layout configuration into the grid.\n   *\n   * @param serializedData The serialized grid options to load.\n   * @param cleanBeforeLoad If true, the grid will be cleared before loading the new layout.\n   * @returns A promise that resolves to the loaded grid instance.\n   */\n  public async load(serializedData: AXGridLayoutOptions = this.serializedData, cleanBeforeLoad = true): Promise<AXGridLayout> {\n    if (cleanBeforeLoad) {\n      this.grid().removeAll();\n    }\n\n    // Sanitize the content of each child element\n    if (serializedData.children) {\n      serializedData.children = serializedData.children.map((child) => {\n        if (child.content) {\n          // Sanitize the HTML content using Angular's DomSanitizer\n          const sanitizedContent = this.domSanitizer.sanitize(SecurityContext.HTML, child.content);\n          if (!sanitizedContent) {\n            console.warn('Invalid or unsafe content removed:', child.content);\n            child.content = ''; // Fallback to empty string\n          } else {\n            child.content = sanitizedContent;\n          }\n        }\n        return child;\n      });\n    }\n\n    // Dynamically import GridStack and load the grid\n    const { GridStack } = await import('gridstack');\n    return GridStack.addGrid(this.el, serializedData);\n  }\n\n  /**\n   * Sets up draggable functionality for external elements to be added to the grid.\n   *\n   * @param dragIn A CSS selector or an array of elements that can be dragged into the grid.\n   * @param widgets An optional set of widgets that are draggable into the grid.\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    GridStack.setupDragIn(dragIn, undefined, [widgets]);\n  }\n\n  /**\n   * Sets grid layout options.\n   * @param options The new grid layout options to apply.\n   *\n   * `Experimental`\n   */\n  public setOption(options: AXGridLayoutOptions) {\n    this.grid().opts = merge({}, this.grid().opts, options);\n  }\n\n  // PUBLIC GETTER METHODS //\n\n  /**\n   * Retrieves the current grid layout options.\n   *\n   * @returns The current grid options.\n   */\n  public getOptions(): AXGridLayoutOptions {\n    return this.grid().opts;\n  }\n\n  /**\n   * Retrieves all the child nodes (widgets) in the grid layout.\n   *\n   * @returns An array of grid layout nodes representing the widgets.\n   */\n  public getChildren(): AXGridLayoutNode[] {\n    return this.grid().engine.nodes;\n  }\n}\n","/**\n * gridstack.component.ts 11.1.1-dev\n * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license\n */\n\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { AXGridLayoutContainerComponent } from './grid-layout-container.component';\nimport { AXGridLayoutWidgetComponent } from './grid-layout-widget.component';\nimport { AXGridLayoutWidgetDirective } from './grid-layout-widget.directive';\n\n@NgModule({\n  imports: [CommonModule, AXGridLayoutContainerComponent, AXGridLayoutWidgetComponent, AXGridLayoutWidgetDirective],\n  exports: [AXGridLayoutContainerComponent, AXGridLayoutWidgetComponent, AXGridLayoutWidgetDirective],\n})\nexport class AXGridLayoutBuilderModule {\n  // constructor() {\n  // set globally our method to create the right widget type\n  // GridStack.addRemoveCB = gsCreateNgComponents;\n  // GridStack.saveCB = gsSaveAdditionalNgInfo;\n  // }\n}\n","import { AXGridLayoutContainerComponent } from './grid-layout-container.component';\nimport { AXGridLayoutWidgetComponent } from './grid-layout-widget.component';\nimport { AXGridLayoutWidgetDirective } from './grid-layout-widget.directive';\n//TYPES\nexport type AXGridLayoutNode = import('gridstack').GridStackNode;\nexport type AXGridLayout = import('gridstack').GridStack;\nexport type AXGridLayoutOptions = import('gridstack').GridStackOptions;\nexport type AXGridLayoutWidget = import('gridstack').GridStackWidget & { data?: any };\nexport type AXGridLayoutContainerElement = import('gridstack').GridHTMLElement;\nexport type AXGridLayoutWidgetElement = import('gridstack').GridItemHTMLElement;\n//EVENTS\nexport type AXGridLayoutEventEvent = { event: Event };\nexport type AXGridLayoutElementEvent = { event: Event; el: AXGridLayoutWidgetElement };\nexport type AXGridLayoutNodesEvent = { event: Event; nodes: AXGridLayoutNode[] };\nexport type AXGridLayoutDroppedEvent = {\n  event: Event;\n  previousNode: AXGridLayoutNode;\n  newNode: AXGridLayoutNode;\n};\n//COMPONENTS\nexport interface AXGridLayoutContainerCompElement extends AXGridLayoutContainerElement {\n  _gridComp?: AXGridLayoutContainerComponent;\n}\nexport interface AXGridLayoutWidgetCompElement extends AXGridLayoutWidgetElement {\n  _gridWidgetComp?: AXGridLayoutWidgetComponent | AXGridLayoutWidgetDirective;\n}\n\n//Callback\nexport type AXSaveCallback = import('gridstack').SaveFcn;\n\n// //DYNAMIC\n// export type AXNgCompInputs = { [key: string]: any };\n// export type SelectorToType = { [key: string]: Type<object> }; // selector string to runtime Type mapping\n// export interface AXNgGridLayoutWidget extends AXGridLayoutWidget {\n//   selector?: string; //Angular tag selector for this component to create at runtime\n//   input?: AXNgCompInputs; // serialized data for the component input fields\n//   subGridOpts?: AXNgGridLayoutOptions; // nested grid options\n// }\n// export interface AXNgGridLayoutNode extends AXGridLayoutNode {\n//   selector?: string; // component type to create as content\n// }\n// export interface AXNgGridLayoutOptions extends AXGridLayoutOptions {\n//   children?: AXNgGridLayoutWidget[];\n//   subGridOpts?: AXNgGridLayoutOptions;\n// }\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"acorex-components-grid-layout-builder.mjs","sources":["../../../../libs/components/grid-layout-builder/src/lib/grid-layout-widget.component.ts","../../../../libs/components/grid-layout-builder/src/lib/grid-layout-widget.directive.ts","../../../../libs/components/grid-layout-builder/src/lib/grid-layout-container.component.ts","../../../../libs/components/grid-layout-builder/src/lib/grid-layout-builder.module.ts","../../../../libs/components/grid-layout-builder/src/lib/types.ts","../../../../libs/components/grid-layout-builder/src/acorex-components-grid-layout-builder.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef, inject, input, ViewEncapsulation } from '@angular/core';\nimport { AXGridLayoutNode, AXGridLayoutWidget, AXGridLayoutWidgetCompElement } from './types';\n\n/**\n * A component that represents a widget within the grid layout. It serves as an individual\n * item within a `gridstack` layout, providing options for customization and interaction.\n *\n * This widget component is used within the `AXGridLayoutContainerComponent` to manage the\n * layout of widgets in a grid system. The component interacts with the GridStack library\n * to offer features like resizing, movement, and customization of the widget's properties.\n *\n * @example\n * <ax-grid-layout-widget [options]=\"widgetOptions\">\n *   <div>Widget Content</div>\n * </ax-grid-layout-widget>\n */\n@Component({\n  selector: 'ax-grid-layout-widget',\n  template: `\n    <div class=\"grid-stack-item-content\">\n      <ng-template #container></ng-template>\n      <ng-content></ng-content>\n      {{ options()?.content }}\n    </div>\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXGridLayoutWidgetComponent {\n  /** Reference to the native element of this widget component. */\n  private readonly elementRef: ElementRef<AXGridLayoutWidgetCompElement> = inject(ElementRef);\n\n  /** The native element of the widget component. */\n  public el: AXGridLayoutWidgetCompElement = this.elementRef.nativeElement;\n\n  /** Internal storage for widget options. */\n  private _options?: AXGridLayoutNode;\n\n  /**\n   * Input property that represents the widget's configuration options.\n   *\n   * @param {AXGridLayoutNode} val - The configuration object for the widget.\n   * @returns {AXGridLayoutWidgetCompElement} - The element associated with the widget.\n   */\n  public options = input(null, {\n    transform: (val: AXGridLayoutNode) => {\n      const grid = this.el.gridstackNode?.grid;\n      if (grid) {\n        grid.update(this.el, val);\n      } else {\n        this._options = { ...val, el: this.el };\n      }\n      return this.el.gridstackNode || this._options || { el: this.el };\n    },\n  });\n\n  constructor() {\n    this.el._gridWidgetComp = this;\n  }\n\n  /** Clears the widget's options. */\n  public clearOptions(): void {\n    this._options = null;\n  }\n\n  /** Removes this widget from the grid. */\n  public removeWidget(): void {\n    this.el.gridstackNode?.grid?.removeWidget(this.el);\n  }\n\n  /**\n   * Sets whether the widget can be locked (i.e., not resizable).\n   *\n   * @param {boolean} state - Whether the widget should be locked or not.\n   */\n  public setLockable(state: boolean): void {\n    this.updateWidgetOptions({ noResize: state });\n  }\n\n  /**\n   * Sets whether the widget can be resized.\n   *\n   * @param {boolean} state - Whether the widget should be resizable or not.\n   */\n  public setResizable(state: boolean): void {\n    this.updateWidgetOptions({ noMove: state });\n  }\n\n  /**\n   * Updates the options of the widget.\n   *\n   * @param {AXGridLayoutWidget} options - The new options to apply to the widget.\n   */\n  public setOptions(options: AXGridLayoutWidget): void {\n    this.updateWidgetOptions(options);\n  }\n\n  /**\n   * Retrieves the current options of the widget.\n   *\n   * @returns {AXGridLayoutNode} - The current configuration options of the widget.\n   */\n  public getOptions(): AXGridLayoutNode {\n    const gridstackNode = this.el.gridstackNode;\n    return gridstackNode ? { ...gridstackNode, el: this.el } : this.options() || this._options || { el: this.el };\n  }\n\n  /**\n   * Helper method to update widget options.\n   *\n   * @param {Partial<AXGridLayoutWidget>} options - The options to update.\n   */\n  private updateWidgetOptions(options: Partial<AXGridLayoutWidget>): void {\n    this.el.gridstackNode?.grid?.update(this.el, options);\n  }\n}\n","import { Directive, ElementRef, inject, input, OnDestroy, OnInit, Renderer2 } from '@angular/core';\nimport { AXGridLayoutNode, AXGridLayoutWidget, AXGridLayoutWidgetCompElement } from './types';\n\n/**\n * A directive that turns any element into a GridStack widget.\n * It allows the element to be managed by the GridStack library,\n * enabling features like resizing, dragging, and layout customization.\n *\n * This directive creates an inner element inside the host element\n * and moves the widget content into it for better encapsulation and styling.\n *\n * @example\n * <div axGridLayoutWidget [options]=\"widgetOptions\">Widget Content</div>\n */\n@Directive({ selector: '[axGridLayoutWidget]' })\nexport class AXGridLayoutWidgetDirective implements OnInit, OnDestroy {\n  /**\n   * Reference to the native element of the directive.\n   */\n  private readonly elementRef: ElementRef<AXGridLayoutWidgetCompElement> = inject(ElementRef);\n\n  /**\n   * Renderer2 for safe DOM manipulation.\n   */\n  private readonly renderer = inject(Renderer2);\n\n  /**\n   * The native element of the directive.\n   */\n  public el: AXGridLayoutWidgetCompElement = this.elementRef.nativeElement;\n\n  /**\n   * The current options of the widget. These options are used to define the layout,\n   * content, and behavior of the widget within the grid.\n   */\n  private _options?: AXGridLayoutNode;\n\n  /**\n   * Reference to the newly created inner element.\n   */\n  private innerElement: HTMLElement;\n\n  /**\n   * Input property that represents the widget's configuration options.\n   *\n   * The options include properties such as position, size, content, and other\n   * configuration values. These options are updated dynamically.\n   *\n   * @param {AXGridLayoutNode} val The configuration object for the widget.\n   * @returns {AXGridLayoutWidgetCompElement} The element associated with the widget.\n   */\n  public options = input(null, {\n    transform: (val: AXGridLayoutNode) => {\n      const grid = this.el.gridstackNode?.grid;\n      if (grid) {\n        grid.update(this.el, val);\n      } else {\n        this._options = { ...val, el: this.el };\n      }\n      return this.el.gridstackNode || this._options || { el: this.el };\n    },\n  });\n\n  /**\n   * Initializes the directive and sets up the inner element.\n   * Create a new inner element\n   * Move the host element's content into the new inner element\n   * Append the inner element to the host element\n   * Set the reference to the grid widget directive\n   */\n  ngOnInit(): void {\n    this.innerElement = this.renderer.createElement('div');\n    this.renderer.addClass(this.innerElement, 'grid-stack-item-content');\n\n    while (this.el.firstChild) {\n      this.renderer.appendChild(this.innerElement, this.el.firstChild);\n    }\n\n    this.renderer.appendChild(this.el, this.innerElement);\n\n    this.el._gridWidgetComp = this;\n  }\n\n  /**\n   * Cleans up the directive when it is destroyed.\n   */\n  ngOnDestroy(): void {\n    this.removeWidget();\n  }\n\n  /**\n   * Clears the widget's options.\n   *\n   * This method removes any existing options set for the widget and resets it\n   * to its default state.\n   */\n  public clearOptions() {\n    this._options = null;\n  }\n\n  /**\n   * Removes this widget from the grid.\n   *\n   * This method interacts with GridStack to remove the widget from the layout.\n   * Once removed, the widget will no longer be part of the grid.\n   */\n  public removeWidget() {\n    if (this.el.gridstackNode?.grid) {\n      this.el.gridstackNode.grid.removeWidget(this.el);\n    }\n  }\n\n  /**\n   * Sets whether the widget can be locked (i.e., not resizable).\n   *\n   * @param {boolean} state Whether the widget should be locked or not.\n   * @remarks\n   * If the widget is locked, it cannot be resized.\n   */\n  public setLockable(state: boolean): void {\n    if (this.el.gridstackNode?.grid) {\n      this.el.gridstackNode.grid.update(this.el, { noResize: state });\n    }\n  }\n\n  /**\n   * Sets whether the widget can be resized.\n   *\n   * @param {boolean} state Whether the widget should be resizable or not.\n   * @remarks\n   * If the widget is resizable, the user can change its size by dragging.\n   */\n  public setResizable(state: boolean): void {\n    if (this.el.gridstackNode?.grid) {\n      this.el.gridstackNode.grid.update(this.el, { noMove: state });\n    }\n  }\n\n  /**\n   * Updates the options of the widget.\n   *\n   * @param {AXGridLayoutWidget} options The new options to apply to the widget.\n   */\n  public setOptions(options: AXGridLayoutWidget) {\n    if (this.el.gridstackNode?.grid) {\n      this.el.gridstackNode.grid.update(this.el, options);\n    }\n  }\n\n  /**\n   * Retrieves the current options of the widget.\n   *\n   * @returns {AXGridLayoutNode} The current configuration options of the widget.\n   * @remarks\n   * This method provides access to the widget's layout and configuration.\n   * If no specific options are set, it returns the default options.\n   */\n  public getOptions(): AXGridLayoutNode {\n    const gridstackNode = this.el.gridstackNode;\n    if (gridstackNode) {\n      return {\n        ...gridstackNode,\n        el: this.el,\n      };\n    }\n    return this._options || { el: this.el };\n  }\n}\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  ElementRef,\n  NgZone,\n  OnDestroy,\n  SecurityContext,\n  ViewEncapsulation,\n  WritableSignal,\n  afterNextRender,\n  computed,\n  contentChildren,\n  effect,\n  inject,\n  input,\n  model,\n  output,\n  signal,\n  untracked,\n} from '@angular/core';\nimport { DomSanitizer } from '@angular/platform-browser';\nimport { merge } from 'lodash-es';\nimport { AXGridLayoutWidgetComponent } from './grid-layout-widget.component';\nimport { AXGridLayoutWidgetDirective } from './grid-layout-widget.directive';\nimport {\n  AXGridLayout,\n  AXGridLayoutContainerCompElement,\n  AXGridLayoutDroppedEvent,\n  AXGridLayoutElementEvent,\n  AXGridLayoutEventEvent,\n  AXGridLayoutNode,\n  AXGridLayoutNodesEvent,\n  AXGridLayoutOptions,\n  AXGridLayoutWidget,\n  AXGridLayoutWidgetCompElement,\n  AXGridLayoutWidgetElement,\n  AXSaveCallback,\n} from './types';\n\n/**\n * The `AXGridLayoutContainerComponent` is an Angular component that acts as a wrapper for the GridStack library.\n * It provides a flexible grid layout system for arranging items within a container. It integrates with GridStack.js\n * and allows dynamic manipulation of grid items (widgets), including adding, removing, resizing, and dragging.\n *\n * This component uses Angular's reactive signals, outputs, and lifecycle hooks to manage grid state and interactions.\n */\n@Component({\n  selector: 'ax-grid-layout-container',\n  template: `\n    <ng-template #container></ng-template>\n    <ng-content></ng-content>\n  `,\n  styleUrl: './grid-layout-container.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n})\nexport class AXGridLayoutContainerComponent implements OnDestroy {\n  // Inputs\n  public options = input<AXGridLayoutOptions>();\n\n  // Outputs\n\n  /**\n   * Output event emitted when a widget is added to the grid.\n   */\n  protected onAdded = output<AXGridLayoutNodesEvent>();\n\n  /**\n   * Output event emitted when a widget or layout is changed.\n   */\n  protected onChange = output<AXGridLayoutNodesEvent>();\n\n  /**\n   * Output event emitted when the grid is disabled.\n   */\n  protected onDisable = output<AXGridLayoutEventEvent>();\n\n  /**\n   * Output event emitted during a drag operation on a widget.\n   */\n  protected onDrag = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when drag starts on a widget.\n   */\n  protected onDragStart = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when drag stops on a widget.\n   */\n  protected onDragStop = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when a widget is dropped on the grid.\n   */\n  protected onDropped = output<AXGridLayoutDroppedEvent>();\n\n  /**\n   * Output event emitted when the grid is enabled.\n   */\n  protected onEnable = output<AXGridLayoutEventEvent>();\n\n  /**\n   * Output event emitted when a widget is removed from the grid.\n   */\n  protected onRemoved = output<AXGridLayoutNodesEvent>();\n\n  /**\n   * Output event emitted when a widget is resized.\n   */\n  protected onResize = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when resizing starts on a widget.\n   */\n  protected onResizeStart = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when resizing stops on a widget.\n   */\n  protected onResizeStop = output<AXGridLayoutElementEvent>();\n\n  /**\n   * Output event emitted when the grid is rendered.\n   */\n  protected isRendered = output<boolean>();\n\n  // Model\n\n  /**\n   * Model that tracks whether the grid container is empty.\n   */\n  protected isEmpty = model(false);\n\n  // Private Properties\n  private serializedData?: AXGridLayoutOptions;\n  private compItems = contentChildren(AXGridLayoutWidgetComponent);\n  private dirItems = contentChildren(AXGridLayoutWidgetDirective);\n  private calcOptions = computed(() => this.grid()?.opts || this.options() || {});\n  private readonly elementRef: ElementRef<AXGridLayoutContainerCompElement> = inject(ElementRef);\n  private ngZone = inject(NgZone);\n  private grid: WritableSignal<AXGridLayout | undefined> = signal(undefined);\n  private el: AXGridLayoutContainerCompElement = this.elementRef.nativeElement;\n  private domSanitizer = inject(DomSanitizer);\n\n  // Lifecycle Hooks\n  constructor() {\n    this.el._gridComp = this;\n  }\n\n  #init = afterNextRender(() => {\n    this.ngZone.runOutsideAngular(async () => {\n      const { GridStack } = await import('gridstack');\n      this.grid.set(GridStack.init(this.calcOptions(), this.el));\n      this.hookEvents(this.grid());\n      this.checkEmpty();\n      this.updateAll();\n      this.isRendered.emit(true);\n    });\n  });\n\n  public ngOnDestroy(): void {\n    this.unhookEvents(this.grid());\n    this.destroy();\n    this.el._gridComp = null;\n  }\n\n  // Effects\n\n  private childChange = effect(() => {\n    if (this.compItems() || this.dirItems()) {\n      untracked(() => this.updateAll());\n    }\n  });\n\n  // Methods\n\n  /**\n   * Updates the grid layout with the current set of widgets, clearing previous options.\n   */\n  private updateAll() {\n    if (!this.grid()) return;\n    const layout: AXGridLayoutWidget[] = [];\n    const arrays = [...this.dirItems(), ...this.compItems()];\n    if (arrays.length) {\n      arrays.forEach((item) => {\n        layout.push(item.options() ?? {});\n        if (item.options()) {\n          item.clearOptions();\n        }\n      });\n      this.grid().load(layout);\n    }\n  }\n\n  /**\n   * Checks whether the grid is empty and updates the `isEmpty` model accordingly.\n   */\n  private checkEmpty() {\n    if (this.grid()) {\n      const isEmpty = !this.grid().engine.nodes.length;\n      if (isEmpty === this.isEmpty()) return;\n      this.isEmpty.set(isEmpty);\n    }\n  }\n\n  // Event Listeners\n\n  /**\n   * Hooks event listeners to the grid for various grid events (e.g., add, remove, drag, resize).\n   */\n  private hookEvents(grid?: AXGridLayout): void {\n    if (grid) {\n      grid\n        .on('added', (event: Event, nodes: AXGridLayoutNode[]) => {\n          this.checkEmpty();\n          this.onAdded.emit({ event, nodes });\n        })\n        .on('removed', (event: Event, nodes: AXGridLayoutNode[]) => {\n          this.checkEmpty();\n          this.onRemoved.emit({ event, nodes });\n        })\n        .on('change', (event: Event, nodes: AXGridLayoutNode[]) => this.onChange.emit({ event, nodes }))\n        .on('disable', (event: Event) => this.onDisable.emit({ event }))\n        .on('drag', (event: Event, el: AXGridLayoutWidgetElement) => this.onDrag.emit({ event, el }))\n        .on('dragstart', (event: Event, el: AXGridLayoutWidgetElement) => this.onDragStart.emit({ event, el }))\n        .on('dragstop', (event: Event, el: AXGridLayoutWidgetElement) => this.onDragStop.emit({ event, el }))\n        .on('dropped', (event: Event, previousNode: AXGridLayoutNode, newNode: AXGridLayoutNode) => this.onDropped.emit({ event, previousNode, newNode }))\n        .on('enable', (event: Event) => this.onEnable.emit({ event }))\n        .on('resize', (event: Event, el: AXGridLayoutWidgetElement) => this.onResize.emit({ event, el }))\n        .on('resizestart', (event: Event, el: AXGridLayoutWidgetElement) => this.onResizeStart.emit({ event, el }))\n        .on('resizestop', (event: Event, el: AXGridLayoutWidgetElement) => this.onResizeStop.emit({ event, el }));\n    }\n  }\n\n  /**\n   * Removes all event listeners from the grid.\n   */\n  private unhookEvents(grid?: AXGridLayout) {\n    if (grid) {\n      grid.offAll();\n    }\n  }\n\n  //PUBLIC SETTER METHODS\n\n  /**\n   * Creates a new widget and returns it.\n   * @param w - Widget position/size options.\n   * @returns The created widget's HTML element, or `undefined` if the grid is not initialized.\n   */\n  public addWidget(w: AXGridLayoutWidget, withAutoArrange = false): AXGridLayoutWidgetElement | undefined {\n    if (withAutoArrange) {\n      this.compact();\n    }\n    return this.grid()?.addWidget(w);\n  }\n\n  /**\n   * Re-layout grid items to reclaim any empty space.\n   * @param layout - Compaction mode: 'list' or 'compact'. Default is 'compact'.\n   * @param doSort - Whether to sort items automatically. Default is `true`.\n   */\n  public compact(layout: 'list' | 'compact' = 'compact', doSort = true): void {\n    this.grid()?.compact(layout, doSort);\n  }\n\n  /**\n   * Updates the current cell height.\n   * @param val - The new cell height value.\n   * @param update - Whether to rebuild the internal CSS stylesheet. Default is `true`.\n   */\n  public setCellHeight(val: number, update = true): void {\n    this.grid()?.cellHeight(val, update);\n  }\n\n  /**\n   * Sets the number of columns in the grid and updates existing widgets to conform to the new layout.\n   * @param column - Number of columns (must be > 0). Default is 12.\n   * @param layout - Re-layout behavior: 'list', 'compact', 'moveScale', 'move', 'scale', 'none'.\n   *                Default is 'moveScale'.\n   */\n  public setColumn(column: number, layout: 'list' | 'compact' | 'moveScale' | 'move' | 'scale' | 'none' = 'moveScale'): void {\n    this.grid()?.column(column, layout);\n  }\n\n  /**\n   * Destroys the grid instance.\n   * @param removeDOM - If `false`, nodes and grid will not be removed from the DOM. Default is `true`.\n   */\n  public destroy(removeDOM = true): void {\n    this.grid()?.destroy(removeDOM);\n  }\n\n  /**\n   * Sets whether widgets in the grid can be moved (dragged).\n   *\n   * @param state If true, widgets are movable; otherwise, they are locked.\n   * @param recurse If true, the setting is applied to nested widgets as well.\n   */\n  public setMovable(state: boolean, recurse?: boolean) {\n    this.grid().enableMove(state, recurse);\n  }\n\n  /**\n   * Sets whether widgets in the grid can be resized.\n   *\n   * @param state If true, widgets are resizable; otherwise, they are fixed.\n   * @param recurse If true, the setting is applied to nested widgets as well.\n   */\n  public setResizable(state: boolean, recurse?: boolean) {\n    this.grid().enableResize(state, recurse);\n  }\n\n  /**\n   * Sets or gets the floating behavior of widgets.\n   * @param val - If provided, sets floating behavior (`true` or `false`). If not provided, returns the current value.\n   * @returns The current floating behavior if `val` is not provided.\n   */\n  public setFloat(val: boolean): void {\n    this.grid()?.float(val);\n  }\n\n  /**\n   * Sets the margin (gap) between grid items and their content.\n   * @param value - The margin value (number or string).\n   */\n  public setMargin(value: number | string): void {\n    this.grid()?.margin(value);\n  }\n\n  /**\n   * Removes a widget from the grid.\n   * @param el - The widget to remove.\n   * @param removeDOM - If `false`, the widget won't be removed from the DOM. Default is `true`.\n   * @param triggerEvent - If `false`, no 'removed' callbacks will be called. Default is `true`.\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   * @param removeDOM - If `false`, widgets won't be removed from the DOM. Default is `true`.\n   */\n  public removeAll(removeDOM = true): void {\n    this.grid()?.removeAll(removeDOM);\n  }\n\n  /**\n   * Rotates a widget by swapping its width and height.\n   * @param els - The widget or selector of widgets to rotate.\n   * @param relative - Optional pixel coordinates to rotate around (keeps that cell under the cursor).\n   */\n  public setRotate(element: AXGridLayoutWidgetCompElement) {\n    this.grid().rotate(element);\n  }\n\n  /**\n   * Toggles the grid animation state.\n   * @param doAnimate - If `true`, the grid will animate.\n   */\n  public setAnimation(doAnimate: boolean): void {\n    this.grid()?.setAnimation(doAnimate);\n  }\n\n  /**\n   * Saves the current grid layout configuration.\n   *\n   * @param saveContent Whether to save the content of the grid items.\n   * @param saveGridOpt Whether to save the grid options.\n   * @param saveCallback Optional callback for custom save logic.\n   * @returns The serialized grid layout options.\n   */\n  public save(saveContent = false, saveGridOpt = true, saveCallback?: AXSaveCallback): AXGridLayoutOptions {\n    this.serializedData = this.grid()?.save(saveContent, saveGridOpt, saveCallback) as AXGridLayoutOptions;\n    return this.serializedData;\n  }\n\n  /**\n   * Loads a serialized grid layout configuration into the grid.\n   *\n   * @param serializedData The serialized grid options to load.\n   * @param cleanBeforeLoad If true, the grid will be cleared before loading the new layout.\n   * @returns A promise that resolves to the loaded grid instance.\n   */\n  public async load(serializedData: AXGridLayoutOptions = this.serializedData, cleanBeforeLoad = true): Promise<AXGridLayout> {\n    if (cleanBeforeLoad) {\n      this.grid()?.removeAll();\n    }\n\n    if (serializedData.children) {\n      serializedData.children = serializedData.children.map((child) => {\n        if (child.content) {\n          const sanitizedContent = this.domSanitizer.sanitize(SecurityContext.HTML, child.content);\n          if (!sanitizedContent) {\n            console.warn('Invalid or unsafe content removed:', child.content);\n            child.content = '';\n          } else {\n            child.content = sanitizedContent;\n          }\n        }\n        return child;\n      });\n    }\n\n    const { GridStack } = await import('gridstack');\n    return GridStack.addGrid(this.el, serializedData);\n  }\n\n  /**\n   * Sets up draggable functionality for external elements to be added to the grid.\n   *\n   * @param dragIn A CSS selector or an array of elements that can be dragged into the grid.\n   * @param widgets An optional set of widgets that are draggable into the grid.\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    GridStack.setupDragIn(dragIn, undefined, [widgets]);\n  }\n\n  /**\n   * Sets grid layout options.\n   * @param options The new grid layout options to apply.\n   *\n   * `Experimental`\n   */\n  public setOption(options: AXGridLayoutOptions) {\n    this.grid().opts = merge({}, this.grid().opts, options);\n  }\n\n  /**\n   * Retrieves the current grid layout options.\n   *\n   * @returns The current grid options.\n   */\n  public getOptions(): AXGridLayoutOptions {\n    return this.grid()?.opts || {};\n  }\n\n  /**\n   * Retrieves all the child nodes (widgets) in the grid layout.\n   *\n   * @returns An array of grid layout nodes representing the widgets.\n   */\n  public getChildren(): AXGridLayoutNode[] {\n    return this.grid()?.engine.nodes || [];\n  }\n}\n","/**\n * gridstack.component.ts 11.1.1-dev\n * Copyright (c) 2022-2024 Alain Dumesny - see GridStack root license\n */\n\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\n\nimport { AXGridLayoutContainerComponent } from './grid-layout-container.component';\nimport { AXGridLayoutWidgetComponent } from './grid-layout-widget.component';\nimport { AXGridLayoutWidgetDirective } from './grid-layout-widget.directive';\n\n@NgModule({\n  imports: [CommonModule, AXGridLayoutContainerComponent, AXGridLayoutWidgetComponent, AXGridLayoutWidgetDirective],\n  exports: [AXGridLayoutContainerComponent, AXGridLayoutWidgetComponent, AXGridLayoutWidgetDirective],\n})\nexport class AXGridLayoutBuilderModule {\n  // constructor() {\n  // set globally our method to create the right widget type\n  // GridStack.addRemoveCB = gsCreateNgComponents;\n  // GridStack.saveCB = gsSaveAdditionalNgInfo;\n  // }\n}\n","import { AXGridLayoutContainerComponent } from './grid-layout-container.component';\nimport { AXGridLayoutWidgetComponent } from './grid-layout-widget.component';\nimport { AXGridLayoutWidgetDirective } from './grid-layout-widget.directive';\n//TYPES\nexport type AXGridLayoutNode = import('gridstack').GridStackNode;\nexport type AXGridLayout = import('gridstack').GridStack;\nexport type AXGridLayoutOptions = import('gridstack').GridStackOptions;\nexport type AXGridLayoutWidget = import('gridstack').GridStackWidget & { data?: any };\nexport type AXGridLayoutContainerElement = import('gridstack').GridHTMLElement;\nexport type AXGridLayoutWidgetElement = import('gridstack').GridItemHTMLElement;\n//EVENTS\nexport type AXGridLayoutEventEvent = { event: Event };\nexport type AXGridLayoutElementEvent = { event: Event; el: AXGridLayoutWidgetElement };\nexport type AXGridLayoutNodesEvent = { event: Event; nodes: AXGridLayoutNode[] };\nexport type AXGridLayoutDroppedEvent = {\n  event: Event;\n  previousNode: AXGridLayoutNode;\n  newNode: AXGridLayoutNode;\n};\n//COMPONENTS\nexport interface AXGridLayoutContainerCompElement extends AXGridLayoutContainerElement {\n  _gridComp?: AXGridLayoutContainerComponent;\n}\nexport interface AXGridLayoutWidgetCompElement extends AXGridLayoutWidgetElement {\n  _gridWidgetComp?: AXGridLayoutWidgetComponent | AXGridLayoutWidgetDirective;\n}\n\n//Callback\nexport type AXSaveCallback = import('gridstack').SaveFcn;\n\n// //DYNAMIC\n// export type AXNgCompInputs = { [key: string]: any };\n// export type SelectorToType = { [key: string]: Type<object> }; // selector string to runtime Type mapping\n// export interface AXNgGridLayoutWidget extends AXGridLayoutWidget {\n//   selector?: string; //Angular tag selector for this component to create at runtime\n//   input?: AXNgCompInputs; // serialized data for the component input fields\n//   subGridOpts?: AXNgGridLayoutOptions; // nested grid options\n// }\n// export interface AXNgGridLayoutNode extends AXGridLayoutNode {\n//   selector?: string; // component type to create as content\n// }\n// export interface AXNgGridLayoutOptions extends AXGridLayoutOptions {\n//   children?: AXNgGridLayoutWidget[];\n//   subGridOpts?: AXNgGridLayoutOptions;\n// }\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

@@ -2,7 +2,7 @@ import { MXInputBaseValueComponent, MXLookComponent, AXComponent, AXFocusableCom
 import { AXDialogService, AXDialogModule } from '@acorex/components/dialog';
 import { AXLoadingSpinnerComponent, AXLoadingModule } from '@acorex/components/loading';
 import * as i0 from '@angular/core';
-import { signal, Injectable, inject, viewChild, forwardRef, Component, ViewEncapsulation, HostBinding, input, Renderer2, computed, NgZone, afterNextRender, effect, ChangeDetectionStrategy, NgModule } from '@angular/core';
+import { signal, Injectable, inject, viewChild, forwardRef, ViewEncapsulation, Component, HostBinding, input, Renderer2, computed, NgZone, afterNextRender, effect, ChangeDetectionStrategy, NgModule } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { classes } from 'polytype';
@@ -28,10 +28,10 @@ class AXImageEditorService {
         this.initialImage = signal(null);
         this.imageBlob = signal([]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorService, decorators: [{
             type: Injectable
         }] });
 
@@ -73,8 +73,8 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
             this.commitValue(null);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: AXImageEditorContainerComponent, isStandalone: true, selector: "ax-image-editor-container", inputs: { look: "look" }, outputs: { onValueChanged: "onValueChanged" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXImageEditorContainerComponent, isStandalone: true, selector: "ax-image-editor-container", inputs: { look: "look" }, outputs: { onValueChanged: "onValueChanged" }, providers: [
             AXImageEditorService,
             { provide: AXComponent, useExisting: AXImageEditorContainerComponent },
             { provide: AXFocusableComponent, useExisting: AXImageEditorContainerComponent },
@@ -87,7 +87,7 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
             },
         ], 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-{{ look }}\">\n    <ng-content> </ng-content>\n    <ng-content select=\"ax-validation-rule\"> </ng-content>\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", styles: ["ax-image-editor-container{width:fit-content;display:block}ax-image-editor-container>.ax-editor-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:auto!important;--ax-comp-editor-space-start-size: 0;--ax-comp-editor-space-end-size: 0}ax-image-editor-container .ax-loading-spinner-container{display:flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["text", "color", "size", "stroke"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-image-editor-container', encapsulation: ViewEncapsulation.None, outputs: ['onValueChanged'], inputs: ['look'], providers: [
                         AXImageEditorService,
@@ -122,10 +122,10 @@ class AXImageEditorColorPickerComponent {
     get __hostClass() {
         return `.5rem`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: AXImageEditorColorPickerComponent, isStandalone: true, selector: "ax-image-editor-color-picker", host: { properties: { "style.marginInline": "this.__hostClass" } }, ngImport: i0, template: "<ax-color-box axTooltip=\"Color Picker\" axTooltipPlacement=\"top\" look=\"none\" [ngModel]=\"selectedColor()\" (ngModelChange)=\"changeColorHandler($event)\">\n</ax-color-box>\n", styles: ["ax-image-editor-color-picker{margin-inline:0!important}ax-image-editor-color-picker .ax-submit-color{border:1px solid rgba(var(--ax-sys-body-text-color));width:.6rem;height:.6rem;border-radius:1000vmax}ax-image-editor-color-picker .ax-color-flex-container{display:flex;align-items:center;cursor:pointer}\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorColorPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: AXImageEditorColorPickerComponent, isStandalone: true, selector: "ax-image-editor-color-picker", host: { properties: { "style.marginInline": "this.__hostClass" } }, ngImport: i0, template: "<ax-color-box axTooltip=\"Color Picker\" axTooltipPlacement=\"top\" look=\"none\" [ngModel]=\"selectedColor()\" (ngModelChange)=\"changeColorHandler($event)\">\n</ax-color-box>\n", styles: ["ax-image-editor-color-picker{margin-inline:0!important}ax-image-editor-color-picker .ax-submit-color{border:1px solid rgba(var(--ax-sys-body-text-color));width:.6rem;height:.6rem;border-radius:1000vmax}ax-image-editor-color-picker .ax-color-flex-container{display:flex;align-items:center;cursor:pointer}\n"], dependencies: [{ kind: "component", type: AXColorBoxComponent, selector: "ax-color-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "showBadge", "showValue", "showClearButton", "showIcon"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorColorPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorColorPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-image-editor-color-picker', encapsulation: ViewEncapsulation.None, imports: [AXColorBoxComponent, AXTooltipDirective, FormsModule], template: "<ax-color-box axTooltip=\"Color Picker\" axTooltipPlacement=\"top\" look=\"none\" [ngModel]=\"selectedColor()\" (ngModelChange)=\"changeColorHandler($event)\">\n</ax-color-box>\n", styles: ["ax-image-editor-color-picker{margin-inline:0!important}ax-image-editor-color-picker .ax-submit-color{border:1px solid rgba(var(--ax-sys-body-text-color));width:.6rem;height:.6rem;border-radius:1000vmax}ax-image-editor-color-picker .ax-color-flex-container{display:flex;align-items:center;cursor:pointer}\n"] }]
         }], propDecorators: { __hostClass: [{
@@ -156,10 +156,10 @@ class AXImageEditorCropComponent {
             return { userInteract: true, state: !prev.state };
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorCropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.7", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", ngImport: i0, template: "<ax-button\n  axTooltip=\"Crop Image\"\n  axTooltipPlacement=\"top\"\n  [selected]=\"service.cropState().state && true\"\n  (click)=\"crop()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n\n<ax-button axTooltip=\"Rotate Left\" axTooltipPlacement=\"top\" (click)=\"rotateLeftHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button axTooltip=\"Rotate Right\" axTooltipPlacement=\"top\" (click)=\"rotateRightHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorCropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", ngImport: i0, template: "<ax-button\n  axTooltip=\"Crop Image\"\n  axTooltipPlacement=\"top\"\n  [selected]=\"service.cropState().state && true\"\n  (click)=\"crop()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n\n<ax-button axTooltip=\"Rotate Left\" axTooltipPlacement=\"top\" (click)=\"rotateLeftHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button axTooltip=\"Rotate Right\" axTooltipPlacement=\"top\" (click)=\"rotateRightHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorCropComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorCropComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-image-editor-crop', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXTooltipDirective, AXDecoratorIconComponent], template: "<ax-button\n  axTooltip=\"Crop Image\"\n  axTooltipPlacement=\"top\"\n  [selected]=\"service.cropState().state && true\"\n  (click)=\"crop()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n\n<ax-button axTooltip=\"Rotate Left\" axTooltipPlacement=\"top\" (click)=\"rotateLeftHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n</ax-button>\n\n<ax-button axTooltip=\"Rotate Right\" axTooltipPlacement=\"top\" (click)=\"rotateRightHandler()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n</ax-button>\n" }]
         }] });
@@ -201,10 +201,10 @@ class AXImageEditorPenModeChangerComponent {
     valueHandler(e) {
         this.service.lineWidth.set(e);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorPenModeChangerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: AXImageEditorPenModeChangerComponent, isStandalone: true, selector: "ax-image-editor-pen-mode-changer", host: { properties: { "style.marginInline": "this.__hostClass" } }, ngImport: i0, template: "<ax-button axTooltip=\"Draw Utilities\" axTooltipPlacement=\"top\" look=\"blank\" #alignPop>\n  @switch (service.penType()) {\n    @case ('pen') {\n      <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n    }\n    @case ('highlight') {\n      <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n    }\n  }\n</ax-button>\n\n<ax-button axTooltip=\"Reset Changes\" axTooltipPlacement=\"top\" (click)=\"clear()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-refresh\"></ax-icon>\n</ax-button>\n\n<ax-popover\n  [openOn]=\"popoverOption.openOn\"\n  [closeOn]=\"popoverOption.closeOn\"\n  [target]=\"alignPop\"\n  [placement]=\"popoverOption.placement\"\n>\n  <div class=\"ax-overlay-pane\">\n    <ax-button\n      (click)=\"penTypeHandler('pen')\"\n      look=\"blank\"\n      [selected]=\"this.service.penType() === 'pen' ? true : false\"\n    >\n      <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n    </ax-button>\n\n    <ax-button\n      (click)=\"penTypeHandler('highlight')\"\n      look=\"blank\"\n      [selected]=\"this.service.penType() === 'highlight' ? true : false\"\n    >\n      <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n    </ax-button>\n\n    <div class=\"ax-paint-width-slider\">\n      <ax-range-slider\n        [min]=\"2\"\n        [max]=\"20\"\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"valueHandler($event)\"\n      ></ax-range-slider>\n    </div>\n  </div>\n</ax-popover>\n", styles: ["ax-image-editor-pen-mode-changer{margin-inline:0!important}ax-image-editor-pen-mode-changer ax-range-slider{padding:.5rem .75rem}ax-image-editor-pen-mode-changer ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}ax-image-editor-pen-mode-changer .ax-paint-pen-mode-changer-container{display:flex;align-items:center}ax-image-editor-pen-mode-changer .ax-paint-pen-mode-changer-container .ax-pen-type-container{margin-inline-end:.5rem}ax-image-editor-pen-mode-changer .ax-overlay-pane{padding:.5rem!important}\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { 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: 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorPenModeChangerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXImageEditorPenModeChangerComponent, isStandalone: true, selector: "ax-image-editor-pen-mode-changer", host: { properties: { "style.marginInline": "this.__hostClass" } }, ngImport: i0, template: "<ax-button axTooltip=\"Draw Utilities\" axTooltipPlacement=\"top\" look=\"blank\" #alignPop>\n  @switch (service.penType()) {\n    @case ('pen') {\n      <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n    }\n    @case ('highlight') {\n      <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n    }\n  }\n</ax-button>\n\n<ax-button axTooltip=\"Reset Changes\" axTooltipPlacement=\"top\" (click)=\"clear()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-refresh\"></ax-icon>\n</ax-button>\n\n<ax-popover\n  [openOn]=\"popoverOption.openOn\"\n  [closeOn]=\"popoverOption.closeOn\"\n  [target]=\"alignPop\"\n  [placement]=\"popoverOption.placement\"\n>\n  <div class=\"ax-overlay-pane\">\n    <ax-button\n      (click)=\"penTypeHandler('pen')\"\n      look=\"blank\"\n      [selected]=\"this.service.penType() === 'pen' ? true : false\"\n    >\n      <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n    </ax-button>\n\n    <ax-button\n      (click)=\"penTypeHandler('highlight')\"\n      look=\"blank\"\n      [selected]=\"this.service.penType() === 'highlight' ? true : false\"\n    >\n      <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n    </ax-button>\n\n    <div class=\"ax-paint-width-slider\">\n      <ax-range-slider\n        [min]=\"2\"\n        [max]=\"20\"\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"valueHandler($event)\"\n      ></ax-range-slider>\n    </div>\n  </div>\n</ax-popover>\n", styles: ["ax-image-editor-pen-mode-changer{margin-inline:0!important}ax-image-editor-pen-mode-changer ax-range-slider{padding:.5rem .75rem}ax-image-editor-pen-mode-changer ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}ax-image-editor-pen-mode-changer .ax-paint-pen-mode-changer-container{display:flex;align-items:center}ax-image-editor-pen-mode-changer .ax-paint-pen-mode-changer-container .ax-pen-type-container{margin-inline-end:.5rem}ax-image-editor-pen-mode-changer .ax-overlay-pane{padding:.5rem!important}\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltip", "axTooltipPlacement", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXPopoverComponent, selector: "ax-popover", inputs: ["offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { 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: 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"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorPenModeChangerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorPenModeChangerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-image-editor-pen-mode-changer', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXTooltipDirective, AXDecoratorIconComponent, AXPopoverComponent, AXRangeSliderComponent, FormsModule], template: "<ax-button axTooltip=\"Draw Utilities\" axTooltipPlacement=\"top\" look=\"blank\" #alignPop>\n  @switch (service.penType()) {\n    @case ('pen') {\n      <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n    }\n    @case ('highlight') {\n      <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n    }\n  }\n</ax-button>\n\n<ax-button axTooltip=\"Reset Changes\" axTooltipPlacement=\"top\" (click)=\"clear()\" look=\"blank\">\n  <ax-icon class=\"ax-icon ax-icon-refresh\"></ax-icon>\n</ax-button>\n\n<ax-popover\n  [openOn]=\"popoverOption.openOn\"\n  [closeOn]=\"popoverOption.closeOn\"\n  [target]=\"alignPop\"\n  [placement]=\"popoverOption.placement\"\n>\n  <div class=\"ax-overlay-pane\">\n    <ax-button\n      (click)=\"penTypeHandler('pen')\"\n      look=\"blank\"\n      [selected]=\"this.service.penType() === 'pen' ? true : false\"\n    >\n      <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n    </ax-button>\n\n    <ax-button\n      (click)=\"penTypeHandler('highlight')\"\n      look=\"blank\"\n      [selected]=\"this.service.penType() === 'highlight' ? true : false\"\n    >\n      <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n    </ax-button>\n\n    <div class=\"ax-paint-width-slider\">\n      <ax-range-slider\n        [min]=\"2\"\n        [max]=\"20\"\n        [(ngModel)]=\"value\"\n        (ngModelChange)=\"valueHandler($event)\"\n      ></ax-range-slider>\n    </div>\n  </div>\n</ax-popover>\n", styles: ["ax-image-editor-pen-mode-changer{margin-inline:0!important}ax-image-editor-pen-mode-changer ax-range-slider{padding:.5rem .75rem}ax-image-editor-pen-mode-changer ax-range-slider .ax-range-slider .ax-range-slider-handler{width:1rem!important;height:1rem!important}ax-image-editor-pen-mode-changer .ax-paint-pen-mode-changer-container{display:flex;align-items:center}ax-image-editor-pen-mode-changer .ax-paint-pen-mode-changer-container .ax-pen-type-container{margin-inline-end:.5rem}ax-image-editor-pen-mode-changer .ax-overlay-pane{padding:.5rem!important}\n"] }]
         }], propDecorators: { __hostClass: [{
@@ -560,10 +560,10 @@ class AXImageEditorViewComponent extends MXBaseComponent {
     get __hostStyle() {
         return `width: ${this.service.initialImage()?.width}px; height: ${this.service.initialImage()?.height}px`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.7", type: AXImageEditorViewComponent, isStandalone: true, selector: "ax-image-editor-view", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "this.__hostStyle" } }, viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<canvas\n  tabindex=\"1\"\n  (mousedown)=\"mouseDownHandler($event)\"\n  (mouseup)=\"mouseUpHandler()\"\n  (mousemove)=\"mouseMoveHandler($event)\"\n  (touchstart)=\"touchStartHandler($event)\"\n  (touchend)=\"touchEndHandler()\"\n  (touchmove)=\"touchMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n<ax-button\n  (click)=\"cropButtonHandler()\"\n  [style]=\"{ display: service.cropState().state ? 'block' : 'none' }\"\n  class=\"ax-crop-save ax-sm\"\n  text=\"Crop\"\n></ax-button>\n", styles: ["ax-image-editor-view{position:relative;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%}ax-image-editor-view .ax-canvas-element{cursor:crosshair}ax-image-editor-view .ax-crop-save{position:absolute;top:0;right:0;margin:1rem}\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.1.8", type: AXImageEditorViewComponent, isStandalone: true, selector: "ax-image-editor-view", inputs: { src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "this.__hostStyle" } }, viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<canvas\n  tabindex=\"1\"\n  (mousedown)=\"mouseDownHandler($event)\"\n  (mouseup)=\"mouseUpHandler()\"\n  (mousemove)=\"mouseMoveHandler($event)\"\n  (touchstart)=\"touchStartHandler($event)\"\n  (touchend)=\"touchEndHandler()\"\n  (touchmove)=\"touchMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n<ax-button\n  (click)=\"cropButtonHandler()\"\n  [style]=\"{ display: service.cropState().state ? 'block' : 'none' }\"\n  class=\"ax-crop-save ax-sm\"\n  text=\"Crop\"\n></ax-button>\n", styles: ["ax-image-editor-view{position:relative;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%}ax-image-editor-view .ax-canvas-element{cursor:crosshair}ax-image-editor-view .ax-crop-save{position:absolute;top:0;right:0;margin:1rem}\n"], dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-image-editor-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent], template: "<canvas\n  tabindex=\"1\"\n  (mousedown)=\"mouseDownHandler($event)\"\n  (mouseup)=\"mouseUpHandler()\"\n  (mousemove)=\"mouseMoveHandler($event)\"\n  (touchstart)=\"touchStartHandler($event)\"\n  (touchend)=\"touchEndHandler()\"\n  (touchmove)=\"touchMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n<ax-button\n  (click)=\"cropButtonHandler()\"\n  [style]=\"{ display: service.cropState().state ? 'block' : 'none' }\"\n  class=\"ax-crop-save ax-sm\"\n  text=\"Crop\"\n></ax-button>\n", styles: ["ax-image-editor-view{position:relative;display:flex;justify-content:center;align-items:center;background-color:#fff;width:100%}ax-image-editor-view .ax-canvas-element{cursor:crosshair}ax-image-editor-view .ax-crop-save{position:absolute;top:0;right:0;margin:1rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { __hostStyle: [{
@@ -591,8 +591,8 @@ const MODULES = [
     AXTooltipModule,
 ];
 class AXImageEditorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorModule, imports: [AXButtonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorModule, imports: [AXButtonModule,
             FormsModule,
             AXRangeSliderModule,
             AXSelectBoxModule,
@@ -610,9 +610,9 @@ class AXImageEditorModule {
             AXImageEditorViewComponent,
             AXImageEditorContainerComponent,
             AXImageEditorCropComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorModule, imports: [MODULES, COMPONENT] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorModule, imports: [MODULES, COMPONENT] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageEditorModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageEditorModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],

package/fesm2022/acorex-components-image.mjs

@@ -1,6 +1,6 @@
 import { MXBaseComponent } from '@acorex/components/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Input, Output, HostBinding, NgModule } from '@angular/core';
+import { EventEmitter, HostBinding, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 /**
@@ -89,10 +89,10 @@ class AXImageComponent extends MXBaseComponent {
     get __hostClass() {
         return [`ax-overlay-${this.overlayMode}`, `${this._hasError || !this.src ? 'ax-state-empty' : ''}`, `${this._isLoading ? 'ax-state-loading' : ''}`];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: AXImageComponent, isStandalone: true, selector: "ax-image", inputs: { overlayMode: "overlayMode", src: "src", alt: "alt", priority: "priority", lazy: "lazy" }, outputs: { onLoad: "onLoad", onError: "onError" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: 'ax-image', useValue: AXImageComponent }], usesInheritance: true, ngImport: i0, template: "@if(src){\n<img class=\"ax-state-hidden\" [class.ax-state-loaded]=\"_isLoaded\" [src]=\"src\" [alt]=\"alt\" [attr.fetchpriority]=\"priority\"\n  [attr.loading]=\"lazy ? 'lazy' : 'eager'\" (load)=\"_handleLoadImage($event)\" (error)=\"_handleErrorImage($event)\" />\n}\n<ng-content select=\"ax-overlay\"></ng-content>\n@if(!src || _hasError){\n<ng-content select=\"ax-placeholder, ng-content\"></ng-content>\n}\n@if(_isLoading){\n<ng-content select=\"ax-loading, ax-loading-spinner\"></ng-content>\n}", styles: ["ax-image{--ax-comp-image-overlay-color: rgb(0 0 0 / .75)}ax-image{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-image img{display:block;height:100%;width:100%}ax-image img.ax-state-hidden{display:none}ax-image img.ax-state-loaded{display:block!important}ax-image.ax-overlay-hover ax-overlay{display:none}ax-image.ax-overlay-hover:hover ax-overlay{display:flex}ax-image.ax-overlay-always ax-overlay{display:flex}ax-image ax-overlay{position:absolute;top:0;display:flex;height:100%;width:100%;align-items:center;justify-content:center;background-color:var(--ax-comp-image-overlay-color)}ax-image ax-loading{display:flex;height:100%;width:100%;align-items:center;justify-content:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXImageComponent, isStandalone: true, selector: "ax-image", inputs: { overlayMode: "overlayMode", src: "src", alt: "alt", priority: "priority", lazy: "lazy" }, outputs: { onLoad: "onLoad", onError: "onError" }, host: { properties: { "class": "this.__hostClass" } }, providers: [{ provide: 'ax-image', useValue: AXImageComponent }], usesInheritance: true, ngImport: i0, template: "@if(src){\n<img class=\"ax-state-hidden\" [class.ax-state-loaded]=\"_isLoaded\" [src]=\"src\" [alt]=\"alt\" [attr.fetchpriority]=\"priority\"\n  [attr.loading]=\"lazy ? 'lazy' : 'eager'\" (load)=\"_handleLoadImage($event)\" (error)=\"_handleErrorImage($event)\" />\n}\n<ng-content select=\"ax-overlay\"></ng-content>\n@if(!src || _hasError){\n<ng-content select=\"ax-placeholder, ng-content\"></ng-content>\n}\n@if(_isLoading){\n<ng-content select=\"ax-loading, ax-loading-spinner\"></ng-content>\n}", styles: ["ax-image{--ax-comp-image-overlay-color: rgb(0 0 0 / .75)}ax-image{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-image img{display:block;height:100%;width:100%}ax-image img.ax-state-hidden{display:none}ax-image img.ax-state-loaded{display:block!important}ax-image.ax-overlay-hover ax-overlay{display:none}ax-image.ax-overlay-hover:hover ax-overlay{display:flex}ax-image.ax-overlay-always ax-overlay{display:flex}ax-image ax-overlay{position:absolute;top:0;display:flex;height:100%;width:100%;align-items:center;justify-content:center;background-color:var(--ax-comp-image-overlay-color)}ax-image ax-loading{display:flex;height:100%;width:100%;align-items:center;justify-content:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-image', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: 'ax-image', useValue: AXImageComponent }], template: "@if(src){\n<img class=\"ax-state-hidden\" [class.ax-state-loaded]=\"_isLoaded\" [src]=\"src\" [alt]=\"alt\" [attr.fetchpriority]=\"priority\"\n  [attr.loading]=\"lazy ? 'lazy' : 'eager'\" (load)=\"_handleLoadImage($event)\" (error)=\"_handleErrorImage($event)\" />\n}\n<ng-content select=\"ax-overlay\"></ng-content>\n@if(!src || _hasError){\n<ng-content select=\"ax-placeholder, ng-content\"></ng-content>\n}\n@if(_isLoading){\n<ng-content select=\"ax-loading, ax-loading-spinner\"></ng-content>\n}", styles: ["ax-image{--ax-comp-image-overlay-color: rgb(0 0 0 / .75)}ax-image{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;transition-property:all;transition-duration:var(--ax-sys-transition-duration);transition-timing-function:var(--ax-sys-transition-timing-function)}ax-image img{display:block;height:100%;width:100%}ax-image img.ax-state-hidden{display:none}ax-image img.ax-state-loaded{display:block!important}ax-image.ax-overlay-hover ax-overlay{display:none}ax-image.ax-overlay-hover:hover ax-overlay{display:flex}ax-image.ax-overlay-always ax-overlay{display:flex}ax-image ax-overlay{position:absolute;top:0;display:flex;height:100%;width:100%;align-items:center;justify-content:center;background-color:var(--ax-comp-image-overlay-color)}ax-image ax-loading{display:flex;height:100%;width:100%;align-items:center;justify-content:center}\n"] }]
         }], propDecorators: { overlayMode: [{
@@ -115,11 +115,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
             }] } });
 
 class AXImageModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXImageModule, imports: [CommonModule, AXImageComponent], exports: [AXImageComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXImageModule, imports: [CommonModule, AXImageComponent], exports: [AXImageComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXImageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXImageModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AXImageComponent],

package/fesm2022/acorex-components-json-viewer.mjs

@@ -1,7 +1,7 @@
 import { AXTextBoxModule } from '@acorex/components/text-box';
 import { NgTemplateOutlet, CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, signal, effect, Component, ViewEncapsulation, NgModule } from '@angular/core';
+import { input, signal, effect, ViewEncapsulation, Component, NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 class JsonViewerComponent {
@@ -32,10 +32,10 @@ class JsonViewerComponent {
     isBoolean(value) {
         return typeof value === 'boolean';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: JsonViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: JsonViewerComponent, isStandalone: true, selector: "ax-json-viewer", inputs: { json: { classPropertyName: "json", publicName: "json", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"Recursion; context: { list: convertedData() }\"></ng-container>\n\n<ng-template #Recursion let-list=\"list\">\n  @for (item of list; track $index) {\n    @if (isArray(item.value)) {\n      <details>\n        <summary>\"{{ item.key }}\"</summary>\n        <div class=\"ax-indent-details\">\n          <ng-container *ngTemplateOutlet=\"Recursion; context: { list: item.value }\"></ng-container>\n        </div>\n      </details>\n    } @else {\n      <div class=\"ax-flex-container\">\n        <p class=\"ax-nowrap ax-margin\">\"{{ item.key }}\"<span>:</span></p>\n\n        <p\n          class=\"ax-nowrap ax-indent {{\n            isNumber(item.value) || isBoolean(item.value) ? 'ax-number-color' : 'ax-string-color'\n          }}\"\n        >\n          @if (isNumber(item.value) || isBoolean(item.value)) {\n            {{ item.value }}\n          } @else {\n            ''{{ item.value }}''\n          }\n        </p>\n      </div>\n    }\n  }\n</ng-template>\n", styles: ["ax-json-viewer{--ax-comp-json-viewer-string-color-light: rgb(217, 57, 62);--ax-comp-json-viewer-string-color-dark: rgba(92, 213, 251, 255);--ax-comp-json-viewer-number-color-dark: rgba(var(--ax-sys-color-on-lightest-surface));--ax-comp-json-viewer-number-color-light: rgba(var(--ax-sys-color-on-lightest-surface));--ax-comp-json-viewer-key-color-dark: rgba(124, 172, 248, 255);--ax-comp-json-viewer-key-color-light: rgba(var(--ax-sys-color-on-lightest-surface))}ax-json-viewer{padding:1.5rem;overflow-x:auto;display:block}ax-json-viewer .ax-number-color{color:var(--ax-comp-json-viewer-number-color-light)}ax-json-viewer .ax-number-color input::-webkit-outer-spin-button,ax-json-viewer .ax-number-color input::-webkit-inner-spin-button{-webkit-appearance:none}ax-json-viewer .ax-string-color{color:var(--ax-comp-json-viewer-string-color-light)}ax-json-viewer .ax-indent{margin:0;padding:0;height:fit-content}ax-json-viewer .ax-margin{margin-inline-end:.3rem}ax-json-viewer .ax-indent-details{margin:0 2rem;height:fit-content}ax-json-viewer .ax-flex-container{display:flex;justify-content:flex-start;align-items:center;gap:.25rem}ax-json-viewer summary,ax-json-viewer p{color:var(--ax-comp-json-viewer-key-color-light)}ax-json-viewer summary::marker,ax-json-viewer span{color:rgb(var(--ax-sys-body-text-color))}ax-json-viewer details{margin-inline-start:-1rem}ax-json-viewer .ax-nowrap{white-space:nowrap}.ax-dark ax-json-viewer summary,.ax-dark ax-json-viewer p{color:var(--ax-comp-json-viewer-key-color-dark)}.ax-dark ax-json-viewer .ax-string-color{color:var(--ax-comp-json-viewer-string-color-dark)}.ax-dark ax-json-viewer .ax-number-color{color:var(--ax-comp-json-viewer-number-color-dark)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: JsonViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: JsonViewerComponent, isStandalone: true, selector: "ax-json-viewer", inputs: { json: { classPropertyName: "json", publicName: "json", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"Recursion; context: { list: convertedData() }\"></ng-container>\n\n<ng-template #Recursion let-list=\"list\">\n  @for (item of list; track $index) {\n    @if (isArray(item.value)) {\n      <details>\n        <summary>\"{{ item.key }}\"</summary>\n        <div class=\"ax-indent-details\">\n          <ng-container *ngTemplateOutlet=\"Recursion; context: { list: item.value }\"></ng-container>\n        </div>\n      </details>\n    } @else {\n      <div class=\"ax-flex-container\">\n        <p class=\"ax-nowrap ax-margin\">\"{{ item.key }}\"<span>:</span></p>\n\n        <p\n          class=\"ax-nowrap ax-indent {{\n            isNumber(item.value) || isBoolean(item.value) ? 'ax-number-color' : 'ax-string-color'\n          }}\"\n        >\n          @if (isNumber(item.value) || isBoolean(item.value)) {\n            {{ item.value }}\n          } @else {\n            ''{{ item.value }}''\n          }\n        </p>\n      </div>\n    }\n  }\n</ng-template>\n", styles: ["ax-json-viewer{--ax-comp-json-viewer-string-color-light: rgb(217, 57, 62);--ax-comp-json-viewer-string-color-dark: rgba(92, 213, 251, 255);--ax-comp-json-viewer-number-color-dark: rgba(var(--ax-sys-color-on-lightest-surface));--ax-comp-json-viewer-number-color-light: rgba(var(--ax-sys-color-on-lightest-surface));--ax-comp-json-viewer-key-color-dark: rgba(124, 172, 248, 255);--ax-comp-json-viewer-key-color-light: rgba(var(--ax-sys-color-on-lightest-surface))}ax-json-viewer{padding:1.5rem;overflow-x:auto;display:block}ax-json-viewer .ax-number-color{color:var(--ax-comp-json-viewer-number-color-light)}ax-json-viewer .ax-number-color input::-webkit-outer-spin-button,ax-json-viewer .ax-number-color input::-webkit-inner-spin-button{-webkit-appearance:none}ax-json-viewer .ax-string-color{color:var(--ax-comp-json-viewer-string-color-light)}ax-json-viewer .ax-indent{margin:0;padding:0;height:fit-content}ax-json-viewer .ax-margin{margin-inline-end:.3rem}ax-json-viewer .ax-indent-details{margin:0 2rem;height:fit-content}ax-json-viewer .ax-flex-container{display:flex;justify-content:flex-start;align-items:center;gap:.25rem}ax-json-viewer summary,ax-json-viewer p{color:var(--ax-comp-json-viewer-key-color-light)}ax-json-viewer summary::marker,ax-json-viewer span{color:rgb(var(--ax-sys-body-text-color))}ax-json-viewer details{margin-inline-start:-1rem}ax-json-viewer .ax-nowrap{white-space:nowrap}.ax-dark ax-json-viewer summary,.ax-dark ax-json-viewer p{color:var(--ax-comp-json-viewer-key-color-dark)}.ax-dark ax-json-viewer .ax-string-color{color:var(--ax-comp-json-viewer-string-color-dark)}.ax-dark ax-json-viewer .ax-number-color{color:var(--ax-comp-json-viewer-number-color-dark)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: JsonViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: JsonViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-json-viewer', encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet], template: "<ng-container *ngTemplateOutlet=\"Recursion; context: { list: convertedData() }\"></ng-container>\n\n<ng-template #Recursion let-list=\"list\">\n  @for (item of list; track $index) {\n    @if (isArray(item.value)) {\n      <details>\n        <summary>\"{{ item.key }}\"</summary>\n        <div class=\"ax-indent-details\">\n          <ng-container *ngTemplateOutlet=\"Recursion; context: { list: item.value }\"></ng-container>\n        </div>\n      </details>\n    } @else {\n      <div class=\"ax-flex-container\">\n        <p class=\"ax-nowrap ax-margin\">\"{{ item.key }}\"<span>:</span></p>\n\n        <p\n          class=\"ax-nowrap ax-indent {{\n            isNumber(item.value) || isBoolean(item.value) ? 'ax-number-color' : 'ax-string-color'\n          }}\"\n        >\n          @if (isNumber(item.value) || isBoolean(item.value)) {\n            {{ item.value }}\n          } @else {\n            ''{{ item.value }}''\n          }\n        </p>\n      </div>\n    }\n  }\n</ng-template>\n", styles: ["ax-json-viewer{--ax-comp-json-viewer-string-color-light: rgb(217, 57, 62);--ax-comp-json-viewer-string-color-dark: rgba(92, 213, 251, 255);--ax-comp-json-viewer-number-color-dark: rgba(var(--ax-sys-color-on-lightest-surface));--ax-comp-json-viewer-number-color-light: rgba(var(--ax-sys-color-on-lightest-surface));--ax-comp-json-viewer-key-color-dark: rgba(124, 172, 248, 255);--ax-comp-json-viewer-key-color-light: rgba(var(--ax-sys-color-on-lightest-surface))}ax-json-viewer{padding:1.5rem;overflow-x:auto;display:block}ax-json-viewer .ax-number-color{color:var(--ax-comp-json-viewer-number-color-light)}ax-json-viewer .ax-number-color input::-webkit-outer-spin-button,ax-json-viewer .ax-number-color input::-webkit-inner-spin-button{-webkit-appearance:none}ax-json-viewer .ax-string-color{color:var(--ax-comp-json-viewer-string-color-light)}ax-json-viewer .ax-indent{margin:0;padding:0;height:fit-content}ax-json-viewer .ax-margin{margin-inline-end:.3rem}ax-json-viewer .ax-indent-details{margin:0 2rem;height:fit-content}ax-json-viewer .ax-flex-container{display:flex;justify-content:flex-start;align-items:center;gap:.25rem}ax-json-viewer summary,ax-json-viewer p{color:var(--ax-comp-json-viewer-key-color-light)}ax-json-viewer summary::marker,ax-json-viewer span{color:rgb(var(--ax-sys-body-text-color))}ax-json-viewer details{margin-inline-start:-1rem}ax-json-viewer .ax-nowrap{white-space:nowrap}.ax-dark ax-json-viewer summary,.ax-dark ax-json-viewer p{color:var(--ax-comp-json-viewer-key-color-dark)}.ax-dark ax-json-viewer .ax-string-color{color:var(--ax-comp-json-viewer-string-color-dark)}.ax-dark ax-json-viewer .ax-number-color{color:var(--ax-comp-json-viewer-number-color-dark)}\n"] }]
         }] });
@@ -43,11 +43,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
 const COMPONENT = [JsonViewerComponent];
 const MODULES = [AXTextBoxModule, FormsModule, CommonModule];
 class AXJsonViewerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXJsonViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXJsonViewerModule, imports: [AXTextBoxModule, FormsModule, CommonModule, JsonViewerComponent], exports: [JsonViewerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXJsonViewerModule, imports: [MODULES] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXJsonViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXJsonViewerModule, imports: [AXTextBoxModule, FormsModule, CommonModule, JsonViewerComponent], exports: [JsonViewerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXJsonViewerModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXJsonViewerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXJsonViewerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],

package/fesm2022/acorex-components-kbd.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, signal, Component, ViewEncapsulation, ChangeDetectionStrategy, HostBinding, NgModule } from '@angular/core';
+import { input, signal, ChangeDetectionStrategy, ViewEncapsulation, Component, HostBinding, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 class AXKBDItemComponent {
@@ -10,10 +10,10 @@ class AXKBDItemComponent {
     capitalizeFirstLetter(text) {
         return text.charAt(0).toUpperCase() + text.slice(1);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXKBDItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.7", type: AXKBDItemComponent, isStandalone: true, selector: "ax-kbd-item", inputs: { keys: { classPropertyName: "keys", publicName: "keys", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (typeof keys() === 'string') {\n  <kbd>{{ keys() }}</kbd>\n} @else {\n  @for (key of keys(); track $index; let last = $last) {\n    @if (!last && modifierKeys().includes(key.toLocaleLowerCase())) {\n      <kbd>{{ capitalizeFirstLetter(key) }}</kbd>\n      <span>+</span>\n    }\n  }\n  @for (key of keys(); track $index; let last = $last) {\n    @if (last || !modifierKeys().includes(key.toLocaleLowerCase())) {\n      <kbd>{{ key.toLocaleUpperCase() }}</kbd>\n    }\n  }\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXKBDItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: AXKBDItemComponent, isStandalone: true, selector: "ax-kbd-item", inputs: { keys: { classPropertyName: "keys", publicName: "keys", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (typeof keys() === 'string') {\n  <kbd>{{ keys() }}</kbd>\n} @else {\n  @for (key of keys(); track $index; let last = $last) {\n    @if (!last && modifierKeys().includes(key.toLocaleLowerCase())) {\n      <kbd>{{ capitalizeFirstLetter(key) }}</kbd>\n      <span>+</span>\n    }\n  }\n  @for (key of keys(); track $index; let last = $last) {\n    @if (last || !modifierKeys().includes(key.toLocaleLowerCase())) {\n      <kbd>{{ key.toLocaleUpperCase() }}</kbd>\n    }\n  }\n}\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXKBDItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXKBDItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-kbd-item', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (typeof keys() === 'string') {\n  <kbd>{{ keys() }}</kbd>\n} @else {\n  @for (key of keys(); track $index; let last = $last) {\n    @if (!last && modifierKeys().includes(key.toLocaleLowerCase())) {\n      <kbd>{{ capitalizeFirstLetter(key) }}</kbd>\n      <span>+</span>\n    }\n  }\n  @for (key of keys(); track $index; let last = $last) {\n    @if (last || !modifierKeys().includes(key.toLocaleLowerCase())) {\n      <kbd>{{ key.toLocaleUpperCase() }}</kbd>\n    }\n  }\n}\n" }]
         }] });
@@ -25,10 +25,10 @@ class AXKBDComponent {
     get __hostClass() {
         return `ax-${this.look()}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXKBDComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.7", type: AXKBDComponent, isStandalone: true, selector: "ax-kbd", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, ngImport: i0, template: "<ng-content select=\"ax-kbd-item\"></ng-content>\n", styles: ["ax-kbd{display:flex;-webkit-user-select:none;user-select:none;line-height:normal;gap:var(--ax-comp-kbd-gap, 1rem)}ax-kbd ax-kbd-item{display:flex;align-items:center;gap:var(--ax-comp-kbd-item-gap, .25rem)}ax-kbd ax-kbd-item kbd{padding-inline:.5rem;border-radius:var(--ax-comp-kbd-item-border-radius, var(--ax-sys-border-radius));background-color:rgba(var(--ax-comp-kbd-item-bg-color, var(--ax-sys-color-light-surface)));border-left:1px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)));border-bottom:4px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)))}ax-kbd ax-kbd-item kbd:active{border-bottom-width:1px}ax-kbd ax-kbd-item span{line-height:1;padding-bottom:4px}.ax-dark ax-kbd{--ax-comp-kbd-item-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-kbd-item-border-color: var(--ax-sys-color-light-surface)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXKBDComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.1.8", type: AXKBDComponent, isStandalone: true, selector: "ax-kbd", inputs: { look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.__hostClass" } }, ngImport: i0, template: "<ng-content select=\"ax-kbd-item\"></ng-content>\n", styles: ["ax-kbd{display:flex;-webkit-user-select:none;user-select:none;line-height:normal;gap:var(--ax-comp-kbd-gap, 1rem)}ax-kbd ax-kbd-item{display:flex;align-items:center;gap:var(--ax-comp-kbd-item-gap, .25rem)}ax-kbd ax-kbd-item kbd{padding-inline:.5rem;border-radius:var(--ax-comp-kbd-item-border-radius, var(--ax-sys-border-radius));background-color:rgba(var(--ax-comp-kbd-item-bg-color, var(--ax-sys-color-light-surface)));border-left:1px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)));border-bottom:4px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)))}ax-kbd ax-kbd-item kbd:active{border-bottom-width:1px}ax-kbd ax-kbd-item span{line-height:1;padding-bottom:4px}.ax-dark ax-kbd{--ax-comp-kbd-item-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-kbd-item-border-color: var(--ax-sys-color-light-surface)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXKBDComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXKBDComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-kbd', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"ax-kbd-item\"></ng-content>\n", styles: ["ax-kbd{display:flex;-webkit-user-select:none;user-select:none;line-height:normal;gap:var(--ax-comp-kbd-gap, 1rem)}ax-kbd ax-kbd-item{display:flex;align-items:center;gap:var(--ax-comp-kbd-item-gap, .25rem)}ax-kbd ax-kbd-item kbd{padding-inline:.5rem;border-radius:var(--ax-comp-kbd-item-border-radius, var(--ax-sys-border-radius));background-color:rgba(var(--ax-comp-kbd-item-bg-color, var(--ax-sys-color-light-surface)));border-left:1px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)));border-bottom:4px solid rgba(var(--ax-comp-kbd-item-border-color, var(--ax-sys-color-dark-surface)))}ax-kbd ax-kbd-item kbd:active{border-bottom-width:1px}ax-kbd ax-kbd-item span{line-height:1;padding-bottom:4px}.ax-dark ax-kbd{--ax-comp-kbd-item-bg-color: var(--ax-sys-color-dark-surface);--ax-comp-kbd-item-border-color: var(--ax-sys-color-light-surface)}\n"] }]
         }], propDecorators: { __hostClass: [{
@@ -37,11 +37,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImpor
             }] } });
 
 class AXKBDModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXKBDModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.7", ngImport: i0, type: AXKBDModule, imports: [CommonModule, AXKBDComponent, AXKBDItemComponent], exports: [AXKBDComponent, AXKBDItemComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXKBDModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXKBDModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: AXKBDModule, imports: [CommonModule, AXKBDComponent, AXKBDItemComponent], exports: [AXKBDComponent, AXKBDItemComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXKBDModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.7", ngImport: i0, type: AXKBDModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AXKBDModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AXKBDComponent, AXKBDItemComponent],