@acorex/components 22.1.8 → 22.2.0-next.0

package/fesm2022/acorex-components-image.mjs

@@ -100,13 +100,13 @@ class AXImageComponent extends MXBaseComponent {
     get __hostStyle() {
         return `width: ${this.width()}px; height: ${this.height()}px`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXImageComponent, isStandalone: true, selector: "ax-image", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, overlayMode: { classPropertyName: "overlayMode", publicName: "overlayMode", isSignal: false, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: false, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: false, isRequired: false, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: false, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onLoad: "onLoad", onError: "onError" }, host: { properties: { "class": "this.__hostClass", "style": "this.__hostStyle" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXImageComponent, isStandalone: true, selector: "ax-image", inputs: { width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, overlayMode: { classPropertyName: "overlayMode", publicName: "overlayMode", isSignal: false, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: false, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: false, isRequired: false, transformFunction: null }, priority: { classPropertyName: "priority", publicName: "priority", isSignal: false, isRequired: false, transformFunction: null }, lazy: { classPropertyName: "lazy", publicName: "lazy", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { onLoad: "onLoad", onError: "onError" }, host: { properties: { "class": "this.__hostClass", "style": "this.__hostStyle" } }, providers: [
             { provide: 'ax-image', useValue: AXImageComponent },
             { provide: AXComponent, useExisting: AXImageComponent },
         ], usesInheritance: true, ngImport: i0, template: "@if (src) {\n  <img\n    class=\"ax-state-hidden\"\n    [class.ax-state-loaded]=\"_isLoaded\"\n    [src]=\"src\"\n    [alt]=\"alt\"\n    [attr.fetchpriority]=\"priority\"\n    [attr.loading]=\"lazy ? 'lazy' : 'eager'\"\n    (load)=\"_handleLoadImage($event)\"\n    (error)=\"_handleErrorImage($event)\"\n  />\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}\n", styles: ["@layer components{ax-image{--ax-comp-image-overlay-color: rgb(0 0 0 / .75);position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}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:calc(var(--spacing, .25rem) * 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/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-image', encapsulation: ViewEncapsulation.None, providers: [
                         { provide: 'ax-image', useValue: AXImageComponent },
@@ -135,11 +135,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             }] } });
 
 class AXImageModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXImageModule, imports: [CommonModule, AXImageComponent], exports: [AXImageComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageModule, imports: [CommonModule] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: AXImageModule, imports: [CommonModule, AXImageComponent], exports: [AXImageComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageModule, imports: [CommonModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXImageModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, AXImageComponent],

package/fesm2022/acorex-components-image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-image.mjs","sources":["../../../../packages/components/image/src/lib/image.component.ts","../../../../packages/components/image/src/lib/image.component.html","../../../../packages/components/image/src/lib/image.module.ts","../../../../packages/components/image/src/acorex-components-image.ts"],"sourcesContent":["import { AXComponent, AXHtmlEvent, MXBaseComponent } from '@acorex/cdk/common';\n\nimport { Component, EventEmitter, HostBinding, input, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';\n\n/**\n * Displays an image with customizable settings.\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-image',\n  templateUrl: './image.component.html',\n  styleUrls: ['./image.component.css'],\n  encapsulation: ViewEncapsulation.None,\n\n  providers: [\n    { provide: 'ax-image', useValue: AXImageComponent },\n    { provide: AXComponent, useExisting: AXImageComponent },\n  ],\n  imports: [],\n})\nexport class AXImageComponent extends MXBaseComponent implements OnInit {\n  readonly width = input<number>(null);\n  readonly height = input<number>(null);\n\n  /**\n   * Specifies when the image overlay should be shown.\n   *\n   * @defaultValue 'hover'\n   */\n  @Input()\n  overlayMode: 'always' | 'hover' = 'hover';\n\n  /**\n   * The URL of the image to be displayed.\n   *\n   * @defaultValue null\n   */\n  @Input()\n  src?: string | null;\n\n  /**\n   * The alternative text for the image, for accessibility purposes.\n   *\n   * @defaultValue null\n   */\n  @Input()\n  alt?: string | null;\n\n  /**\n   * Priority for image loading.\n   *\n   * @defaultValue 'auto'\n   */\n  @Input()\n  priority: 'low' | 'auto' | 'high' = 'auto';\n\n  /**\n   * Indicates if the image should be loaded lazily.\n   *\n   * @defaultValue false\n   */\n  @Input()\n  lazy: boolean;\n\n  /**\n   * Emits an event when the image has successfully loaded.\n   *\n   * @event\n   */\n  @Output()\n  onLoad: EventEmitter<AXHtmlEvent> = new EventEmitter<AXHtmlEvent>();\n\n  /**\n   * Emits an event when there is an error loading the image.\n   *\n   * @event\n   */\n  @Output()\n  onError: EventEmitter<AXHtmlEvent<ErrorEvent>> = new EventEmitter<AXHtmlEvent<ErrorEvent>>();\n\n  /**\n   *  @ignore\n   */\n  protected _hasError = false;\n\n  /**\n   *  @ignore\n   */\n  protected _isLoaded = false;\n\n  /**\n   *  @ignore\n   */\n  protected _isLoading = false;\n\n  /**\n   *  @ignore\n   */\n  override ngOnInit(): void {\n    super.ngOnInit();\n    this._isLoading = this.src != null;\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handleLoadImage(e: Event) {\n    this._isLoaded = true;\n    this._hasError = false;\n    this._isLoading = false;\n    this.onLoad.emit({\n      component: this,\n      htmlElement: this.getHostElement(),\n      isUserInteraction: false,\n      nativeEvent: e,\n    });\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handleErrorImage(e: ErrorEvent) {\n    this._hasError = true;\n    this._isLoaded = false;\n    this._isLoading = false;\n    this.onError.emit({\n      component: this,\n      htmlElement: this.getHostElement(),\n      isUserInteraction: false,\n      nativeEvent: e,\n    });\n  }\n\n  /**\n   *  @ignore\n   */\n  @HostBinding('class')\n  get __hostClass(): string[] {\n    return [\n      `ax-overlay-${this.overlayMode}`,\n      `${this._hasError || !this.src ? 'ax-state-empty' : ''}`,\n      `${this._isLoading ? 'ax-state-loading' : ''}`,\n    ];\n  }\n\n  @HostBinding('style')\n  private get __hostStyle(): string {\n    return `width: ${this.width()}px; height: ${this.height()}px`;\n  }\n}\n","@if (src) {\n  <img\n    class=\"ax-state-hidden\"\n    [class.ax-state-loaded]=\"_isLoaded\"\n    [src]=\"src\"\n    [alt]=\"alt\"\n    [attr.fetchpriority]=\"priority\"\n    [attr.loading]=\"lazy ? 'lazy' : 'eager'\"\n    (load)=\"_handleLoadImage($event)\"\n    (error)=\"_handleErrorImage($event)\"\n  />\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}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXImageComponent } from './image.component';\n\n@NgModule({\n  imports: [CommonModule, AXImageComponent],\n  exports: [AXImageComponent],\n  providers: [],\n})\nexport class AXImageModule {}\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-image.mjs","sources":["../../../../packages/components/image/src/lib/image.component.ts","../../../../packages/components/image/src/lib/image.component.html","../../../../packages/components/image/src/lib/image.module.ts","../../../../packages/components/image/src/acorex-components-image.ts"],"sourcesContent":["import { AXComponent, AXHtmlEvent, MXBaseComponent } from '@acorex/cdk/common';\n\nimport { Component, EventEmitter, HostBinding, input, Input, OnInit, Output, ViewEncapsulation } from '@angular/core';\n\n/**\n * Displays an image with customizable settings.\n *\n * @category Components\n */\n@Component({\n  selector: 'ax-image',\n  templateUrl: './image.component.html',\n  styleUrls: ['./image.component.css'],\n  encapsulation: ViewEncapsulation.None,\n\n  providers: [\n    { provide: 'ax-image', useValue: AXImageComponent },\n    { provide: AXComponent, useExisting: AXImageComponent },\n  ],\n  imports: [],\n})\nexport class AXImageComponent extends MXBaseComponent implements OnInit {\n  readonly width = input<number>(null);\n  readonly height = input<number>(null);\n\n  /**\n   * Specifies when the image overlay should be shown.\n   *\n   * @defaultValue 'hover'\n   */\n  @Input()\n  overlayMode: 'always' | 'hover' = 'hover';\n\n  /**\n   * The URL of the image to be displayed.\n   *\n   * @defaultValue null\n   */\n  @Input()\n  src?: string | null;\n\n  /**\n   * The alternative text for the image, for accessibility purposes.\n   *\n   * @defaultValue null\n   */\n  @Input()\n  alt?: string | null;\n\n  /**\n   * Priority for image loading.\n   *\n   * @defaultValue 'auto'\n   */\n  @Input()\n  priority: 'low' | 'auto' | 'high' = 'auto';\n\n  /**\n   * Indicates if the image should be loaded lazily.\n   *\n   * @defaultValue false\n   */\n  @Input()\n  lazy: boolean;\n\n  /**\n   * Emits an event when the image has successfully loaded.\n   *\n   * @event\n   */\n  @Output()\n  onLoad: EventEmitter<AXHtmlEvent> = new EventEmitter<AXHtmlEvent>();\n\n  /**\n   * Emits an event when there is an error loading the image.\n   *\n   * @event\n   */\n  @Output()\n  onError: EventEmitter<AXHtmlEvent<ErrorEvent>> = new EventEmitter<AXHtmlEvent<ErrorEvent>>();\n\n  /**\n   *  @ignore\n   */\n  protected _hasError = false;\n\n  /**\n   *  @ignore\n   */\n  protected _isLoaded = false;\n\n  /**\n   *  @ignore\n   */\n  protected _isLoading = false;\n\n  /**\n   *  @ignore\n   */\n  override ngOnInit(): void {\n    super.ngOnInit();\n    this._isLoading = this.src != null;\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handleLoadImage(e: Event) {\n    this._isLoaded = true;\n    this._hasError = false;\n    this._isLoading = false;\n    this.onLoad.emit({\n      component: this,\n      htmlElement: this.getHostElement(),\n      isUserInteraction: false,\n      nativeEvent: e,\n    });\n  }\n\n  /**\n   *  @ignore\n   */\n  protected _handleErrorImage(e: ErrorEvent) {\n    this._hasError = true;\n    this._isLoaded = false;\n    this._isLoading = false;\n    this.onError.emit({\n      component: this,\n      htmlElement: this.getHostElement(),\n      isUserInteraction: false,\n      nativeEvent: e,\n    });\n  }\n\n  /**\n   *  @ignore\n   */\n  @HostBinding('class')\n  get __hostClass(): string[] {\n    return [\n      `ax-overlay-${this.overlayMode}`,\n      `${this._hasError || !this.src ? 'ax-state-empty' : ''}`,\n      `${this._isLoading ? 'ax-state-loading' : ''}`,\n    ];\n  }\n\n  @HostBinding('style')\n  private get __hostStyle(): string {\n    return `width: ${this.width()}px; height: ${this.height()}px`;\n  }\n}\n","@if (src) {\n  <img\n    class=\"ax-state-hidden\"\n    [class.ax-state-loaded]=\"_isLoaded\"\n    [src]=\"src\"\n    [alt]=\"alt\"\n    [attr.fetchpriority]=\"priority\"\n    [attr.loading]=\"lazy ? 'lazy' : 'eager'\"\n    (load)=\"_handleLoadImage($event)\"\n    (error)=\"_handleErrorImage($event)\"\n  />\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}\n","import { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { AXImageComponent } from './image.component';\n\n@NgModule({\n  imports: [CommonModule, AXImageComponent],\n  exports: [AXImageComponent],\n  providers: [],\n})\nexport class AXImageModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-inline-reaction.mjs

@@ -0,0 +1,111 @@
+import { AXComponent } from '@acorex/cdk/common';
+import { isPlatformBrowser } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, ElementRef, DOCUMENT, PLATFORM_ID, input, signal, output, computed, effect, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { AXEmojiComponent } from '@acorex/components/emoji';
+
+class AXInlineReactionComponent {
+    constructor() {
+        this.elementRef = inject((ElementRef));
+        this.document = inject(DOCUMENT);
+        this.platformId = inject(PLATFORM_ID);
+        this.emojis = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emojis" }] : /* istanbul ignore next */ []));
+        this.size = input(24, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Whether the reaction bar is expanded to show all emojis. */
+        this.expanded = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+        /**
+         * Maximum number of emojis to display in the bar.
+         *
+         * @defaultValue 8
+         */
+        this.maxVisible = input(8, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxVisible" }] : /* istanbul ignore next */ []));
+        /**
+         * When true, hides the expand button and always shows the collapsed bar only.
+         *
+         * @defaultValue false
+         */
+        this.showExpanded = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showExpanded" }] : /* istanbul ignore next */ []));
+        /**
+         * When true, collapses the bar when the user clicks outside the component.
+         *
+         * @defaultValue true
+         */
+        this.closeOnClickOutside = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "closeOnClickOutside" }] : /* istanbul ignore next */ []));
+        /**
+         * Emits when the user clicks a quick reaction.
+         */
+        this.selected = output();
+        /**
+         * Emits when the expanded state changes (expand button or click outside).
+         */
+        this.expandedChange = output();
+        this.visibleEmojis = computed(() => {
+            if (this.expanded()) {
+                return this.emojis();
+            }
+            return this.emojis().slice(0, this.maxVisible());
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visibleEmojis" }] : /* istanbul ignore next */ []));
+        effect((onCleanup) => {
+            if (!isPlatformBrowser(this.platformId) || !this.closeOnClickOutside() || !this.expanded()) {
+                return;
+            }
+            const onDocumentClick = (event) => {
+                if (this.elementRef.nativeElement.contains(event.target)) {
+                    return;
+                }
+                this.setExpanded(false);
+            };
+            const timeoutId = globalThis.setTimeout(() => {
+                this.document.addEventListener('click', onDocumentClick, true);
+            }, 0);
+            onCleanup(() => {
+                globalThis.clearTimeout(timeoutId);
+                this.document.removeEventListener('click', onDocumentClick, true);
+            });
+        });
+    }
+    toggleExpanded(event) {
+        event.stopPropagation();
+        this.setExpanded(!this.expanded());
+    }
+    setExpanded(value) {
+        if (this.expanded() === value) {
+            return;
+        }
+        this.expanded.set(value);
+        this.expandedChange.emit(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXInlineReactionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXInlineReactionComponent, isStandalone: true, selector: "ax-inline-reaction", inputs: { emojis: { classPropertyName: "emojis", publicName: "emojis", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, maxVisible: { classPropertyName: "maxVisible", publicName: "maxVisible", isSignal: true, isRequired: false, transformFunction: null }, showExpanded: { classPropertyName: "showExpanded", publicName: "showExpanded", isSignal: true, isRequired: false, transformFunction: null }, closeOnClickOutside: { classPropertyName: "closeOnClickOutside", publicName: "closeOnClickOutside", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selected: "selected", expandedChange: "expandedChange" }, providers: [{ provide: AXComponent, useExisting: AXInlineReactionComponent }], ngImport: i0, template: "<div\n  class=\"ax-inline-reaction\"\n  [class.ax-inline-reaction-expanded]=\"expanded()\"\n  [style.--ax-comp-inline-reaction-item-size.px]=\"size()\"\n  [style.--ax-comp-inline-reaction-max-visible]=\"maxVisible()\"\n>\n  <div class=\"ax-inline-reaction-items\">\n    @for (emoji of visibleEmojis(); track emoji.code) {\n      <button type=\"button\" class=\"ax-inline-reaction-item\" [attr.aria-label]=\"emoji.name\" [title]=\"emoji.name\">\n        <ax-emoji [emoji]=\"emoji\" [size]=\"size()\" />\n      </button>\n    }\n  </div>\n\n  @if (!showExpanded()) {\n    <button\n      type=\"button\"\n      class=\"ax-inline-reaction-expand\"\n      [class.ax-inline-reaction-expand-open]=\"expanded()\"\n      (click)=\"toggleExpanded($event)\"\n    >\n      <i class=\"fa-solid\" [class.fa-chevron-down]=\"!expanded()\" [class.fa-chevron-up]=\"expanded()\"></i>\n    </button>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-inline-reaction{--ax-comp-inline-reaction-gap: .375rem;--ax-comp-inline-reaction-padding-x: .5rem;--ax-comp-inline-reaction-padding-y: .375rem;--ax-comp-inline-reaction-radius: 9999px;--ax-comp-inline-reaction-bg: var(--color-lightest);--ax-comp-inline-reaction-border: var(--color-border-surface);--ax-comp-inline-reaction-item-size: 1.5rem;--ax-comp-inline-reaction-collapsed-height: 2.5rem;--ax-comp-inline-reaction-max-height: 10rem;--ax-comp-inline-reaction-item-hover-bg: var(--color-lightest);--ax-comp-inline-reaction-expand-size: 1.5rem;--ax-comp-inline-reaction-expand-bg: var(--color-surface);--ax-comp-inline-reaction-expand-color: var(--color-on-lightest);--ax-comp-inline-reaction-expand-hover-bg: var(--color-light);--ax-comp-inline-reaction-expand-open-bg: color-mix(in srgb, rgba(var(--ax-sys-color-primary-surface)) 18%, rgba(var(--ax-sys-color-surface)));--ax-comp-inline-reaction-expand-open-color: var(--color-primary);display:inline-flex}@supports (color: color-mix(in lab,red,red)){ax-inline-reaction{--ax-comp-inline-reaction-expand-open-bg: color-mix(in oklab, var(--color-primary) 18%, var(--color-surface))}}ax-inline-reaction .ax-inline-reaction{display:flex;flex-direction:row;align-items:center;gap:var(--ax-comp-inline-reaction-gap);padding:var(--ax-comp-inline-reaction-padding-y) var(--ax-comp-inline-reaction-padding-x);border:1px solid var(--ax-comp-inline-reaction-border);border-radius:var(--ax-comp-inline-reaction-radius);background-color:var(--ax-comp-inline-reaction-bg);overflow:hidden;max-height:var(--ax-comp-inline-reaction-collapsed-height);transition:max-height .3s cubic-bezier(.4,0,.2,1),border-radius .3s cubic-bezier(.4,0,.2,1)}ax-inline-reaction .ax-inline-reaction-items{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:var(--ax-comp-inline-reaction-gap);transition:grid-template-columns .3s ease,transform .2s ease}ax-inline-reaction .ax-inline-reaction-expanded{max-height:var(--ax-comp-inline-reaction-max-height);border-radius:1rem}ax-inline-reaction .ax-inline-reaction-expanded .ax-inline-reaction-items{display:grid;grid-template-columns:repeat(var(--ax-comp-inline-reaction-max-visible, 8),var(--ax-comp-inline-reaction-item-size));gap:var(--ax-comp-inline-reaction-gap);align-content:start;justify-content:start}ax-inline-reaction .ax-inline-reaction-item{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);width:var(--ax-comp-inline-reaction-item-size);height:var(--ax-comp-inline-reaction-item-size);line-height:0;animation:ax-inline-reaction-item-enter .2s ease}ax-inline-reaction .ax-inline-reaction-item ax-emoji{pointer-events:none}ax-inline-reaction .ax-inline-reaction-item:hover{background-color:var(--ax-comp-inline-reaction-item-hover-bg)}ax-inline-reaction .ax-inline-reaction-item:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}ax-inline-reaction .ax-inline-reaction-expand{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;width:var(--ax-comp-inline-reaction-expand-size);height:var(--ax-comp-inline-reaction-expand-size);margin-inline-start:.125rem;background-color:var(--ax-comp-inline-reaction-expand-bg);color:var(--ax-comp-inline-reaction-expand-color)}ax-inline-reaction .ax-inline-reaction-expand i{font-size:.625rem;line-height:1}ax-inline-reaction .ax-inline-reaction-expand:hover{background-color:var(--ax-comp-inline-reaction-expand-hover-bg)}ax-inline-reaction .ax-inline-reaction-expand:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}ax-inline-reaction .ax-inline-reaction-expand-open{background-color:var(--ax-comp-inline-reaction-expand-open-bg);color:var(--ax-comp-inline-reaction-expand-open-color)}@keyframes ax-inline-reaction-item-enter{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXEmojiComponent, selector: "ax-emoji", inputs: ["emoji", "appearance", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXInlineReactionComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ax-inline-reaction', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXEmojiComponent], providers: [{ provide: AXComponent, useExisting: AXInlineReactionComponent }], template: "<div\n  class=\"ax-inline-reaction\"\n  [class.ax-inline-reaction-expanded]=\"expanded()\"\n  [style.--ax-comp-inline-reaction-item-size.px]=\"size()\"\n  [style.--ax-comp-inline-reaction-max-visible]=\"maxVisible()\"\n>\n  <div class=\"ax-inline-reaction-items\">\n    @for (emoji of visibleEmojis(); track emoji.code) {\n      <button type=\"button\" class=\"ax-inline-reaction-item\" [attr.aria-label]=\"emoji.name\" [title]=\"emoji.name\">\n        <ax-emoji [emoji]=\"emoji\" [size]=\"size()\" />\n      </button>\n    }\n  </div>\n\n  @if (!showExpanded()) {\n    <button\n      type=\"button\"\n      class=\"ax-inline-reaction-expand\"\n      [class.ax-inline-reaction-expand-open]=\"expanded()\"\n      (click)=\"toggleExpanded($event)\"\n    >\n      <i class=\"fa-solid\" [class.fa-chevron-down]=\"!expanded()\" [class.fa-chevron-up]=\"expanded()\"></i>\n    </button>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-inline-reaction{--ax-comp-inline-reaction-gap: .375rem;--ax-comp-inline-reaction-padding-x: .5rem;--ax-comp-inline-reaction-padding-y: .375rem;--ax-comp-inline-reaction-radius: 9999px;--ax-comp-inline-reaction-bg: var(--color-lightest);--ax-comp-inline-reaction-border: var(--color-border-surface);--ax-comp-inline-reaction-item-size: 1.5rem;--ax-comp-inline-reaction-collapsed-height: 2.5rem;--ax-comp-inline-reaction-max-height: 10rem;--ax-comp-inline-reaction-item-hover-bg: var(--color-lightest);--ax-comp-inline-reaction-expand-size: 1.5rem;--ax-comp-inline-reaction-expand-bg: var(--color-surface);--ax-comp-inline-reaction-expand-color: var(--color-on-lightest);--ax-comp-inline-reaction-expand-hover-bg: var(--color-light);--ax-comp-inline-reaction-expand-open-bg: color-mix(in srgb, rgba(var(--ax-sys-color-primary-surface)) 18%, rgba(var(--ax-sys-color-surface)));--ax-comp-inline-reaction-expand-open-color: var(--color-primary);display:inline-flex}@supports (color: color-mix(in lab,red,red)){ax-inline-reaction{--ax-comp-inline-reaction-expand-open-bg: color-mix(in oklab, var(--color-primary) 18%, var(--color-surface))}}ax-inline-reaction .ax-inline-reaction{display:flex;flex-direction:row;align-items:center;gap:var(--ax-comp-inline-reaction-gap);padding:var(--ax-comp-inline-reaction-padding-y) var(--ax-comp-inline-reaction-padding-x);border:1px solid var(--ax-comp-inline-reaction-border);border-radius:var(--ax-comp-inline-reaction-radius);background-color:var(--ax-comp-inline-reaction-bg);overflow:hidden;max-height:var(--ax-comp-inline-reaction-collapsed-height);transition:max-height .3s cubic-bezier(.4,0,.2,1),border-radius .3s cubic-bezier(.4,0,.2,1)}ax-inline-reaction .ax-inline-reaction-items{display:flex;flex-direction:row;align-items:center;flex-wrap:nowrap;gap:var(--ax-comp-inline-reaction-gap);transition:grid-template-columns .3s ease,transform .2s ease}ax-inline-reaction .ax-inline-reaction-expanded{max-height:var(--ax-comp-inline-reaction-max-height);border-radius:1rem}ax-inline-reaction .ax-inline-reaction-expanded .ax-inline-reaction-items{display:grid;grid-template-columns:repeat(var(--ax-comp-inline-reaction-max-visible, 8),var(--ax-comp-inline-reaction-item-size));gap:var(--ax-comp-inline-reaction-gap);align-content:start;justify-content:start}ax-inline-reaction .ax-inline-reaction-item{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:calc(var(--spacing, .25rem) * 0);width:var(--ax-comp-inline-reaction-item-size);height:var(--ax-comp-inline-reaction-item-size);line-height:0;animation:ax-inline-reaction-item-enter .2s ease}ax-inline-reaction .ax-inline-reaction-item ax-emoji{pointer-events:none}ax-inline-reaction .ax-inline-reaction-item:hover{background-color:var(--ax-comp-inline-reaction-item-hover-bg)}ax-inline-reaction .ax-inline-reaction-item:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}ax-inline-reaction .ax-inline-reaction-expand{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:0px;width:var(--ax-comp-inline-reaction-expand-size);height:var(--ax-comp-inline-reaction-expand-size);margin-inline-start:.125rem;background-color:var(--ax-comp-inline-reaction-expand-bg);color:var(--ax-comp-inline-reaction-expand-color)}ax-inline-reaction .ax-inline-reaction-expand i{font-size:.625rem;line-height:1}ax-inline-reaction .ax-inline-reaction-expand:hover{background-color:var(--ax-comp-inline-reaction-expand-hover-bg)}ax-inline-reaction .ax-inline-reaction-expand:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}ax-inline-reaction .ax-inline-reaction-expand-open{background-color:var(--ax-comp-inline-reaction-expand-open-bg);color:var(--ax-comp-inline-reaction-expand-open-color)}@keyframes ax-inline-reaction-item-enter{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { emojis: [{ type: i0.Input, args: [{ isSignal: true, alias: "emojis", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], maxVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisible", required: false }] }], showExpanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "showExpanded", required: false }] }], closeOnClickOutside: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnClickOutside", required: false }] }], selected: [{ type: i0.Output, args: ["selected"] }], expandedChange: [{ type: i0.Output, args: ["expandedChange"] }] } });
+
+class AXInlineReactionModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXInlineReactionModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: AXInlineReactionModule, imports: [AXInlineReactionComponent], exports: [AXInlineReactionComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXInlineReactionModule, imports: [AXInlineReactionComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXInlineReactionModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [AXInlineReactionComponent],
+                    exports: [AXInlineReactionComponent],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXInlineReactionComponent, AXInlineReactionModule };
+//# sourceMappingURL=acorex-components-inline-reaction.mjs.map

package/fesm2022/acorex-components-inline-reaction.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-components-inline-reaction.mjs","sources":["../../../../packages/components/inline-reaction/src/lib/inline-reaction.component.ts","../../../../packages/components/inline-reaction/src/lib/inline-reaction.component.html","../../../../packages/components/inline-reaction/src/lib/inline-reaction.module.ts","../../../../packages/components/inline-reaction/src/acorex-components-inline-reaction.ts"],"sourcesContent":["import { AXComponent } from '@acorex/cdk/common';\nimport { AXEmoji } from '@acorex/core/constants';\nimport { isPlatformBrowser } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  DOCUMENT,\n  effect,\n  ElementRef,\n  inject,\n  input,\n  output,\n  PLATFORM_ID,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { AXEmojiComponent } from '@acorex/components/emoji';\n\n@Component({\n  selector: 'ax-inline-reaction',\n  templateUrl: './inline-reaction.component.html',\n  styleUrls: ['./inline-reaction.component.css'],\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [AXEmojiComponent],\n  providers: [{ provide: AXComponent, useExisting: AXInlineReactionComponent }],\n})\nexport class AXInlineReactionComponent {\n  private readonly elementRef = inject(ElementRef<HTMLElement>);\n  private readonly document = inject(DOCUMENT);\n  private readonly platformId = inject(PLATFORM_ID);\n\n  readonly emojis = input<readonly AXEmoji[]>([]);\n\n  readonly size = input(24);\n\n  /** Whether the reaction bar is expanded to show all emojis. */\n  readonly expanded = signal(false);\n\n  /**\n   * Maximum number of emojis to display in the bar.\n   *\n   * @defaultValue 8\n   */\n  readonly maxVisible = input(8);\n\n  /**\n   * When true, hides the expand button and always shows the collapsed bar only.\n   *\n   * @defaultValue false\n   */\n  readonly showExpanded = input(false);\n\n  /**\n   * When true, collapses the bar when the user clicks outside the component.\n   *\n   * @defaultValue true\n   */\n  readonly closeOnClickOutside = input(true);\n\n  /**\n   * Emits when the user clicks a quick reaction.\n   */\n  readonly selected = output<AXEmoji>();\n\n  /**\n   * Emits when the expanded state changes (expand button or click outside).\n   */\n  readonly expandedChange = output<boolean>();\n\n  protected readonly visibleEmojis = computed(() => {\n    if (this.expanded()) {\n      return this.emojis();\n    }\n\n    return this.emojis().slice(0, this.maxVisible());\n  });\n\n  constructor() {\n    effect((onCleanup) => {\n      if (!isPlatformBrowser(this.platformId) || !this.closeOnClickOutside() || !this.expanded()) {\n        return;\n      }\n\n      const onDocumentClick = (event: MouseEvent): void => {\n        if (this.elementRef.nativeElement.contains(event.target as Node)) {\n          return;\n        }\n\n        this.setExpanded(false);\n      };\n\n      const timeoutId = globalThis.setTimeout(() => {\n        this.document.addEventListener('click', onDocumentClick, true);\n      }, 0);\n\n      onCleanup(() => {\n        globalThis.clearTimeout(timeoutId);\n        this.document.removeEventListener('click', onDocumentClick, true);\n      });\n    });\n  }\n\n  protected toggleExpanded(event: Event): void {\n    event.stopPropagation();\n    this.setExpanded(!this.expanded());\n  }\n\n  private setExpanded(value: boolean): void {\n    if (this.expanded() === value) {\n      return;\n    }\n\n    this.expanded.set(value);\n    this.expandedChange.emit(value);\n  }\n}\n","<div\n  class=\"ax-inline-reaction\"\n  [class.ax-inline-reaction-expanded]=\"expanded()\"\n  [style.--ax-comp-inline-reaction-item-size.px]=\"size()\"\n  [style.--ax-comp-inline-reaction-max-visible]=\"maxVisible()\"\n>\n  <div class=\"ax-inline-reaction-items\">\n    @for (emoji of visibleEmojis(); track emoji.code) {\n      <button type=\"button\" class=\"ax-inline-reaction-item\" [attr.aria-label]=\"emoji.name\" [title]=\"emoji.name\">\n        <ax-emoji [emoji]=\"emoji\" [size]=\"size()\" />\n      </button>\n    }\n  </div>\n\n  @if (!showExpanded()) {\n    <button\n      type=\"button\"\n      class=\"ax-inline-reaction-expand\"\n      [class.ax-inline-reaction-expand-open]=\"expanded()\"\n      (click)=\"toggleExpanded($event)\"\n    >\n      <i class=\"fa-solid\" [class.fa-chevron-down]=\"!expanded()\" [class.fa-chevron-up]=\"expanded()\"></i>\n    </button>\n  }\n</div>\n","import { NgModule } from '@angular/core';\nimport { AXInlineReactionComponent } from './inline-reaction.component';\n\n@NgModule({\n  imports: [AXInlineReactionComponent],\n  exports: [AXInlineReactionComponent],\n})\nexport class AXInlineReactionModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

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

@@ -47,10 +47,10 @@ class JsonViewerComponent {
     isBoolean(value) {
         return typeof value === 'boolean';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: JsonViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: JsonViewerComponent, isStandalone: true, selector: "ax-json-viewer", inputs: { json: { classPropertyName: "json", publicName: "json", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: JsonViewerComponent }], ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ list: convertedObject() }\"></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\" [ngTemplateOutletContext]=\"{ 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\n@if (primitiveData()) {\n  <p\n    class=\"ax-nowrap ax-indent {{\n      isNumber(primitiveData()) || isBoolean(primitiveData()) ? 'ax-number-color' : 'ax-string-color'\n    }}\"\n  >\n    @if (isNumber(primitiveData()) || isBoolean(primitiveData())) {\n      {{ primitiveData() }}\n    } @else {\n      ''{{ primitiveData() }}''\n    }\n  </p>\n}\n", styles: ["@layer components{ax-json-viewer{display:block;overflow-x:auto;padding:calc(var(--spacing, .25rem) * 6)}ax-json-viewer .ax-number-color{color:var(--color-blue-900, oklch(37.9% .146 265.522))!important}ax-json-viewer .ax-number-color:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:var(--color-indigo-400, oklch(67.3% .182 276.935))!important}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(--color-red-600, oklch(57.7% .245 27.325))!important}ax-json-viewer .ax-string-color:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:var(--color-cyan-400, oklch(78.9% .154 211.53))!important}ax-json-viewer .ax-indent{margin:calc(var(--spacing, .25rem) * 0);height:fit-content;padding:calc(var(--spacing, .25rem) * 0)}ax-json-viewer .ax-margin{margin-inline-end:calc(var(--spacing, .25rem) * 1)}ax-json-viewer .ax-indent-details{margin-inline:calc(var(--spacing, .25rem) * 8);margin-block:calc(var(--spacing, .25rem) * 0);height:fit-content}ax-json-viewer .ax-flex-container{display:flex;align-items:center;justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 1)}ax-json-viewer summary,ax-json-viewer p{color:var(--color-red-900, oklch(39.6% .141 25.723))!important}:is(ax-json-viewer summary,ax-json-viewer p):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:var(--color-blue-400, oklch(70.7% .165 254.624))!important}ax-json-viewer summary::marker,ax-json-viewer span{color:rgba(var(--ax-sys-color-on-surface))!important}ax-json-viewer details{margin-inline-start:calc(var(--spacing, .25rem) * -4)}ax-json-viewer .ax-nowrap{white-space:nowrap}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\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: "22.1.6", ngImport: i0, type: JsonViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: JsonViewerComponent, isStandalone: true, selector: "ax-json-viewer", inputs: { json: { classPropertyName: "json", publicName: "json", isSignal: true, isRequired: true, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: JsonViewerComponent }], ngImport: i0, template: "<ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ list: convertedObject() }\"></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\" [ngTemplateOutletContext]=\"{ 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\n@if (primitiveData()) {\n  <p\n    class=\"ax-nowrap ax-indent {{\n      isNumber(primitiveData()) || isBoolean(primitiveData()) ? 'ax-number-color' : 'ax-string-color'\n    }}\"\n  >\n    @if (isNumber(primitiveData()) || isBoolean(primitiveData())) {\n      {{ primitiveData() }}\n    } @else {\n      ''{{ primitiveData() }}''\n    }\n  </p>\n}\n", styles: ["@layer components{ax-json-viewer{display:block;overflow-x:auto;padding:calc(var(--spacing, .25rem) * 6)}ax-json-viewer .ax-number-color{color:var(--color-blue-900, oklch(37.9% .146 265.522))!important}ax-json-viewer .ax-number-color:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:var(--color-indigo-400, oklch(67.3% .182 276.935))!important}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(--color-red-600, oklch(57.7% .245 27.325))!important}ax-json-viewer .ax-string-color:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:var(--color-cyan-400, oklch(78.9% .154 211.53))!important}ax-json-viewer .ax-indent{margin:calc(var(--spacing, .25rem) * 0);height:fit-content;padding:calc(var(--spacing, .25rem) * 0)}ax-json-viewer .ax-margin{margin-inline-end:calc(var(--spacing, .25rem) * 1)}ax-json-viewer .ax-indent-details{margin-inline:calc(var(--spacing, .25rem) * 8);margin-block:calc(var(--spacing, .25rem) * 0);height:fit-content}ax-json-viewer .ax-flex-container{display:flex;align-items:center;justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 1)}ax-json-viewer summary,ax-json-viewer p{color:var(--color-red-900, oklch(39.6% .141 25.723))!important}:is(ax-json-viewer summary,ax-json-viewer p):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:var(--color-blue-400, oklch(70.7% .165 254.624))!important}ax-json-viewer summary::marker,ax-json-viewer span{color:rgba(var(--ax-sys-color-on-surface))!important}ax-json-viewer details{margin-inline-start:calc(var(--spacing, .25rem) * -4)}ax-json-viewer .ax-nowrap{white-space:nowrap}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: JsonViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: JsonViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-json-viewer', encapsulation: ViewEncapsulation.None, imports: [NgTemplateOutlet], providers: [{ provide: AXComponent, useExisting: JsonViewerComponent }], template: "<ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ list: convertedObject() }\"></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\" [ngTemplateOutletContext]=\"{ 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\n@if (primitiveData()) {\n  <p\n    class=\"ax-nowrap ax-indent {{\n      isNumber(primitiveData()) || isBoolean(primitiveData()) ? 'ax-number-color' : 'ax-string-color'\n    }}\"\n  >\n    @if (isNumber(primitiveData()) || isBoolean(primitiveData())) {\n      {{ primitiveData() }}\n    } @else {\n      ''{{ primitiveData() }}''\n    }\n  </p>\n}\n", styles: ["@layer components{ax-json-viewer{display:block;overflow-x:auto;padding:calc(var(--spacing, .25rem) * 6)}ax-json-viewer .ax-number-color{color:var(--color-blue-900, oklch(37.9% .146 265.522))!important}ax-json-viewer .ax-number-color:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:var(--color-indigo-400, oklch(67.3% .182 276.935))!important}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(--color-red-600, oklch(57.7% .245 27.325))!important}ax-json-viewer .ax-string-color:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:var(--color-cyan-400, oklch(78.9% .154 211.53))!important}ax-json-viewer .ax-indent{margin:calc(var(--spacing, .25rem) * 0);height:fit-content;padding:calc(var(--spacing, .25rem) * 0)}ax-json-viewer .ax-margin{margin-inline-end:calc(var(--spacing, .25rem) * 1)}ax-json-viewer .ax-indent-details{margin-inline:calc(var(--spacing, .25rem) * 8);margin-block:calc(var(--spacing, .25rem) * 0);height:fit-content}ax-json-viewer .ax-flex-container{display:flex;align-items:center;justify-content:flex-start;gap:calc(var(--spacing, .25rem) * 1)}ax-json-viewer summary,ax-json-viewer p{color:var(--color-red-900, oklch(39.6% .141 25.723))!important}:is(ax-json-viewer summary,ax-json-viewer p):where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:var(--color-blue-400, oklch(70.7% .165 254.624))!important}ax-json-viewer summary::marker,ax-json-viewer span{color:rgba(var(--ax-sys-color-on-surface))!important}ax-json-viewer details{margin-inline-start:calc(var(--spacing, .25rem) * -4)}ax-json-viewer .ax-nowrap{white-space:nowrap}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { json: [{ type: i0.Input, args: [{ isSignal: true, alias: "json", required: true }] }] } });
@@ -58,11 +58,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 const COMPONENT = [JsonViewerComponent];
 const MODULES = [AXTextBoxModule, FormsModule, CommonModule];
 class AXJsonViewerModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXJsonViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXJsonViewerModule, imports: [AXTextBoxModule, FormsModule, CommonModule, JsonViewerComponent], exports: [JsonViewerComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXJsonViewerModule, imports: [MODULES] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXJsonViewerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.1.6", ngImport: i0, type: AXJsonViewerModule, imports: [AXTextBoxModule, FormsModule, CommonModule, JsonViewerComponent], exports: [JsonViewerComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXJsonViewerModule, imports: [MODULES] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXJsonViewerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXJsonViewerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [...MODULES, ...COMPONENT],

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

@@ -1 +1 @@
-{"version":3,"file":"acorex-components-json-viewer.mjs","sources":["../../../../packages/components/json-viewer/src/lib/json-viewer/json-viewer.component.ts","../../../../packages/components/json-viewer/src/lib/json-viewer/json-viewer.component.html","../../../../packages/components/json-viewer/src/lib/json-viewer.module.ts","../../../../packages/components/json-viewer/src/acorex-components-json-viewer.ts"],"sourcesContent":["import { AXComponent } from '@acorex/cdk/common';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { Component, effect, input, signal, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'ax-json-viewer',\n  templateUrl: './json-viewer.component.html',\n  styleUrl: './json-viewer.component.css',\n  encapsulation: ViewEncapsulation.None,\n  imports: [NgTemplateOutlet],\n\n  providers: [{ provide: AXComponent, useExisting: JsonViewerComponent }],\n})\nexport class JsonViewerComponent {\n  readonly json = input.required<object | boolean | number | string>();\n  protected convertedObject = signal<[]>(null);\n  protected primitiveData = signal(null);\n\n  #effect = effect(() => {\n    if (typeof this.json() === 'object') {\n      const deeplyNestedArray = this.convertNestedToArray(this.json());\n      this.convertedObject.set(deeplyNestedArray);\n    } else {\n      this.primitiveData.set(this.json());\n    }\n  });\n\n  protected convertNestedToArray(obj) {\n    return Object.keys(obj).map((key) => ({\n      key: key,\n      value: this.isDate(obj[key])\n        ? obj[key].toISOString()\n        : typeof obj[key] === 'object'\n          ? this.convertNestedToArray(obj[key])\n          : obj[key],\n    }));\n  }\n\n  protected isArray(arry: any) {\n    return Array.isArray(arry);\n  }\n\n  protected isNumber(i: any) {\n    return typeof i === 'number';\n  }\n\n  protected isDate(value: any) {\n    return value instanceof Date;\n  }\n\n  protected isBoolean(value: any) {\n    return typeof value === 'boolean';\n  }\n}\n","<ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ list: convertedObject() }\"></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\" [ngTemplateOutletContext]=\"{ 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\n@if (primitiveData()) {\n  <p\n    class=\"ax-nowrap ax-indent {{\n      isNumber(primitiveData()) || isBoolean(primitiveData()) ? 'ax-number-color' : 'ax-string-color'\n    }}\"\n  >\n    @if (isNumber(primitiveData()) || isBoolean(primitiveData())) {\n      {{ primitiveData() }}\n    } @else {\n      ''{{ primitiveData() }}''\n    }\n  </p>\n}\n","import { AXTextBoxModule } from '@acorex/components/text-box';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { JsonViewerComponent } from './json-viewer/json-viewer.component';\n\nconst COMPONENT = [JsonViewerComponent];\n\nconst MODULES = [AXTextBoxModule, FormsModule, CommonModule];\n\n@NgModule({\n  imports: [...MODULES, ...COMPONENT],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXJsonViewerModule {}\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-json-viewer.mjs","sources":["../../../../packages/components/json-viewer/src/lib/json-viewer/json-viewer.component.ts","../../../../packages/components/json-viewer/src/lib/json-viewer/json-viewer.component.html","../../../../packages/components/json-viewer/src/lib/json-viewer.module.ts","../../../../packages/components/json-viewer/src/acorex-components-json-viewer.ts"],"sourcesContent":["import { AXComponent } from '@acorex/cdk/common';\nimport { NgTemplateOutlet } from '@angular/common';\nimport { Component, effect, input, signal, ViewEncapsulation } from '@angular/core';\n\n@Component({\n  selector: 'ax-json-viewer',\n  templateUrl: './json-viewer.component.html',\n  styleUrl: './json-viewer.component.css',\n  encapsulation: ViewEncapsulation.None,\n  imports: [NgTemplateOutlet],\n\n  providers: [{ provide: AXComponent, useExisting: JsonViewerComponent }],\n})\nexport class JsonViewerComponent {\n  readonly json = input.required<object | boolean | number | string>();\n  protected convertedObject = signal<[]>(null);\n  protected primitiveData = signal(null);\n\n  #effect = effect(() => {\n    if (typeof this.json() === 'object') {\n      const deeplyNestedArray = this.convertNestedToArray(this.json());\n      this.convertedObject.set(deeplyNestedArray);\n    } else {\n      this.primitiveData.set(this.json());\n    }\n  });\n\n  protected convertNestedToArray(obj) {\n    return Object.keys(obj).map((key) => ({\n      key: key,\n      value: this.isDate(obj[key])\n        ? obj[key].toISOString()\n        : typeof obj[key] === 'object'\n          ? this.convertNestedToArray(obj[key])\n          : obj[key],\n    }));\n  }\n\n  protected isArray(arry: any) {\n    return Array.isArray(arry);\n  }\n\n  protected isNumber(i: any) {\n    return typeof i === 'number';\n  }\n\n  protected isDate(value: any) {\n    return value instanceof Date;\n  }\n\n  protected isBoolean(value: any) {\n    return typeof value === 'boolean';\n  }\n}\n","<ng-container [ngTemplateOutlet]=\"Recursion\" [ngTemplateOutletContext]=\"{ list: convertedObject() }\"></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\" [ngTemplateOutletContext]=\"{ 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\n@if (primitiveData()) {\n  <p\n    class=\"ax-nowrap ax-indent {{\n      isNumber(primitiveData()) || isBoolean(primitiveData()) ? 'ax-number-color' : 'ax-string-color'\n    }}\"\n  >\n    @if (isNumber(primitiveData()) || isBoolean(primitiveData())) {\n      {{ primitiveData() }}\n    } @else {\n      ''{{ primitiveData() }}''\n    }\n  </p>\n}\n","import { AXTextBoxModule } from '@acorex/components/text-box';\nimport { CommonModule } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { JsonViewerComponent } from './json-viewer/json-viewer.component';\n\nconst COMPONENT = [JsonViewerComponent];\n\nconst MODULES = [AXTextBoxModule, FormsModule, CommonModule];\n\n@NgModule({\n  imports: [...MODULES, ...COMPONENT],\n  exports: [...COMPONENT],\n  providers: [],\n})\nexport class AXJsonViewerModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/acorex-components-kanban.mjs

@@ -325,12 +325,12 @@ class AXKanbanComponent extends NXComponent {
         const originalItemFromDataSource = this.dataSource().find((originalItem) => originalItem[this.keyField()] === item.id);
         this.onItemRightClick.emit({ item: originalItemFromDataSource, nativeEvent: event, sender: this });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXKanbanComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXKanbanComponent, isStandalone: true, selector: "ax-kanban", inputs: { hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, statuses: { classPropertyName: "statuses", publicName: "statuses", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, keyField: { classPropertyName: "keyField", publicName: "keyField", isSignal: true, isRequired: false, transformFunction: null }, indexField: { classPropertyName: "indexField", publicName: "indexField", isSignal: true, isRequired: false, transformFunction: null }, titleField: { classPropertyName: "titleField", publicName: "titleField", isSignal: true, isRequired: false, transformFunction: null }, cssClassField: { classPropertyName: "cssClassField", publicName: "cssClassField", isSignal: true, isRequired: false, transformFunction: null }, priorityField: { classPropertyName: "priorityField", publicName: "priorityField", isSignal: true, isRequired: false, transformFunction: null }, statusKeyField: { classPropertyName: "statusKeyField", publicName: "statusKeyField", isSignal: true, isRequired: false, transformFunction: null }, descriptionField: { classPropertyName: "descriptionField", publicName: "descriptionField", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, contentFooterTemplate: { classPropertyName: "contentFooterTemplate", publicName: "contentFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBeforeDrop: "onBeforeDrop", onSortChanged: "onSortChanged", onItemClick: "onItemClick", onActionClick: "onActionClick", onItemDblClick: "onItemDblClick", onItemRightClick: "onItemRightClick" }, usesInheritance: true, ngImport: i0, template: "@for (status of filteredStatuses(); track status.key) {\n  <div class=\"ax-kanban-status {{ status.cssClass }}\">\n    <ax-header>\n      @if (headerTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      } @else {\n        <ax-title>{{ status.title }}</ax-title>\n      }\n    </ax-header>\n    <ax-content axDropList dropListGroup=\"kanban\" [id]=\"stringify(status.key)\" (dropListDropped)=\"drop($event)\">\n      @if (emptyTemplate() && getOriginalItemsById(status.key).length === 0) {\n        <ng-container\n          [ngTemplateOutlet]=\"emptyTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      }\n      @if (itemTemplate()) {\n        @for (item of getOriginalItemsById(status.key); track item[keyField()]) {\n          <div\n            axDrag\n            [dragData]=\"item\"\n            class=\"{{ item.cssClass }}\"\n            [dragStartDelay]=\"dragStartDelay()\"\n            [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n            [axTooltip]=\"tooltipTemplate()\"\n            [axTooltipContext]=\"item\"\n            (click)=\"handleClick($event, item)\"\n            (dblclick)=\"handleDblClick($event, item)\"\n            (contextmenu)=\"handleRightClick($event, item)\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"itemTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-container>\n          </div>\n        }\n      } @else {\n        @for (item of getItemsById(status.key); track item.id) {\n          <div\n            axDrag\n            [dragData]=\"item\"\n            [dragCursor]=\"'grab'\"\n            [dragStartDelay]=\"dragStartDelay()\"\n            class=\"ax-kanban-item  {{ item.cssClass }}\"\n            [ngClass]=\"`ax-kanban-${item.priority ?? 'primary'}-periority`\"\n            [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n            [axTooltip]=\"tooltipTemplate()\"\n            [axTooltipContext]=\"item\"\n            (click)=\"handleClick($event, item)\"\n            (dblclick)=\"handleDblClick($event, item)\"\n            (contextmenu)=\"handleRightClick($event, item)\"\n          >\n            <ax-heading>\n              <ax-title>\n                <span class=\"ax-kanban-truncate\">{{ item.title }}</span>\n                @if (hasActions()) {\n                  <!-- <ax-icon\n                    class=\"ax-icon ax-icon-more-horizontal ax-kanban-action-icon\"\n                    (click)=\"handleActionClick($event, item)\"\n                  >\n                  </ax-icon> -->\n                }\n              </ax-title>\n              <ax-subtitle>{{ item.description }}</ax-subtitle>\n            </ax-heading>\n          </div>\n        }\n      }\n      @if (contentFooterTemplate()) {\n        <ax-footer>\n          <ng-container\n            [ngTemplateOutlet]=\"contentFooterTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: status }\"\n          ></ng-container>\n        </ax-footer>\n      }\n    </ax-content>\n    @if (footerTemplate()) {\n      <ax-footer>\n        <ng-container\n          [ngTemplateOutlet]=\"footerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      </ax-footer>\n    }\n  </div>\n}\n", styles: ["@layer properties;@layer base{:root{--ax-comp-kanban-status-min-width: 20rem;--ax-comp-kanban-status-min-height: 30rem;--ax-comp-kanban-item-indicator-size: .125rem}}@layer components{ax-kanban{display:grid;grid-auto-columns:var(--ax-comp-kanban-status-min-width);grid-auto-flow:column;gap:calc(var(--spacing, .25rem) * 2);overflow-x:auto}ax-kanban .ax-kanban-status{display:flex;height:var(--ax-comp-kanban-status-min-height);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);overflow-y:auto;border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-sys-color-lighter-surface));color:rgba(var(--ax-sys-color-on-lighter-surface));clip-path:inset(0 round var(--ax-sys-border-radius))}ax-kanban .ax-kanban-status>ax-header{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:2;background-color:inherit}ax-kanban .ax-kanban-status>ax-header>ax-title{display:block;width:100%;padding-top:calc(var(--spacing, .25rem) * 2);text-align:center;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-kanban .ax-kanban-status ax-content{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2)}ax-kanban .ax-kanban-status ax-content ax-popover{display:none}ax-kanban .ax-kanban-status ax-content .ax-kanban-item{position:relative;width:100%;border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1);color:rgba(var(--ax-sys-color-on-lightest-surface));--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:rgba(var(--ax-sys-color-on-darkest-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);position:absolute}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);inset-inline-start:calc(var(--spacing, .25rem) * .5)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);height:calc(100% - (var(--spacing,.25rem) * 2))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);width:var(--ax-comp-kanban-item-indicator-size)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);border-radius:calc(infinity * 1px)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{--tw-content: \"\";content:var(--tw-content)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-primary-periority:before{background-color:rgba(var(--ax-sys-color-primary-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-highest-periority:before{background-color:rgba(var(--ax-sys-color-danger-dark-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-high-periority:before{background-color:rgba(var(--ax-sys-color-danger-600))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-medium-periority:before{background-color:rgba(var(--ax-sys-color-warning-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-low-periority:before{background-color:rgba(var(--ax-sys-color-success-light-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-lowest-periority:before{background-color:rgba(var(--ax-sys-color-success-lightest-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item>ax-heading>ax-title{display:flex;align-items:center;justify-content:space-between;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item>ax-heading>ax-title .ax-kanban-action-icon{cursor:pointer}ax-kanban .ax-kanban-status>ax-footer{position:sticky;bottom:calc(var(--spacing, .25rem) * 0);z-index:2;background-color:inherit}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-content{syntax: \"*\"; initial-value: \"\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-content: \"\"}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorHeadingComponent, selector: "ax-heading", inputs: ["darkMode", "color", "weight"] }, { kind: "directive", type: 
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXKanbanComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.6", type: AXKanbanComponent, isStandalone: true, selector: "ax-kanban", inputs: { hasActions: { classPropertyName: "hasActions", publicName: "hasActions", isSignal: true, isRequired: false, transformFunction: null }, dragStartDelay: { classPropertyName: "dragStartDelay", publicName: "dragStartDelay", isSignal: true, isRequired: false, transformFunction: null }, statuses: { classPropertyName: "statuses", publicName: "statuses", isSignal: true, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: false, transformFunction: null }, keyField: { classPropertyName: "keyField", publicName: "keyField", isSignal: true, isRequired: false, transformFunction: null }, indexField: { classPropertyName: "indexField", publicName: "indexField", isSignal: true, isRequired: false, transformFunction: null }, titleField: { classPropertyName: "titleField", publicName: "titleField", isSignal: true, isRequired: false, transformFunction: null }, cssClassField: { classPropertyName: "cssClassField", publicName: "cssClassField", isSignal: true, isRequired: false, transformFunction: null }, priorityField: { classPropertyName: "priorityField", publicName: "priorityField", isSignal: true, isRequired: false, transformFunction: null }, statusKeyField: { classPropertyName: "statusKeyField", publicName: "statusKeyField", isSignal: true, isRequired: false, transformFunction: null }, descriptionField: { classPropertyName: "descriptionField", publicName: "descriptionField", isSignal: true, isRequired: false, transformFunction: null }, emptyTemplate: { classPropertyName: "emptyTemplate", publicName: "emptyTemplate", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, contentFooterTemplate: { classPropertyName: "contentFooterTemplate", publicName: "contentFooterTemplate", isSignal: true, isRequired: false, transformFunction: null }, tooltipTemplate: { classPropertyName: "tooltipTemplate", publicName: "tooltipTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onBeforeDrop: "onBeforeDrop", onSortChanged: "onSortChanged", onItemClick: "onItemClick", onActionClick: "onActionClick", onItemDblClick: "onItemDblClick", onItemRightClick: "onItemRightClick" }, usesInheritance: true, ngImport: i0, template: "@for (status of filteredStatuses(); track status.key) {\n  <div class=\"ax-kanban-status {{ status.cssClass }}\">\n    <ax-header>\n      @if (headerTemplate()) {\n        <ng-container\n          [ngTemplateOutlet]=\"headerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      } @else {\n        <ax-title>{{ status.title }}</ax-title>\n      }\n    </ax-header>\n    <ax-content axDropList dropListGroup=\"kanban\" [id]=\"stringify(status.key)\" (dropListDropped)=\"drop($event)\">\n      @if (emptyTemplate() && getOriginalItemsById(status.key).length === 0) {\n        <ng-container\n          [ngTemplateOutlet]=\"emptyTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      }\n      @if (itemTemplate()) {\n        @for (item of getOriginalItemsById(status.key); track item[keyField()]) {\n          <div\n            axDrag\n            [dragData]=\"item\"\n            class=\"{{ item.cssClass }}\"\n            [dragStartDelay]=\"dragStartDelay()\"\n            [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n            [axTooltip]=\"tooltipTemplate()\"\n            [axTooltipContext]=\"item\"\n            (click)=\"handleClick($event, item)\"\n            (dblclick)=\"handleDblClick($event, item)\"\n            (contextmenu)=\"handleRightClick($event, item)\"\n          >\n            <ng-container\n              [ngTemplateOutlet]=\"itemTemplate()\"\n              [ngTemplateOutletContext]=\"{ $implicit: item }\"\n            ></ng-container>\n          </div>\n        }\n      } @else {\n        @for (item of getItemsById(status.key); track item.id) {\n          <div\n            axDrag\n            [dragData]=\"item\"\n            [dragCursor]=\"'grab'\"\n            [dragStartDelay]=\"dragStartDelay()\"\n            class=\"ax-kanban-item  {{ item.cssClass }}\"\n            [ngClass]=\"`ax-kanban-${item.priority ?? 'primary'}-periority`\"\n            [axTooltipDisabled]=\"tooltipTemplate() ? false : true\"\n            [axTooltip]=\"tooltipTemplate()\"\n            [axTooltipContext]=\"item\"\n            (click)=\"handleClick($event, item)\"\n            (dblclick)=\"handleDblClick($event, item)\"\n            (contextmenu)=\"handleRightClick($event, item)\"\n          >\n            <ax-heading>\n              <ax-title>\n                <span class=\"ax-kanban-truncate\">{{ item.title }}</span>\n                @if (hasActions()) {\n                  <!-- <ax-icon\n                    class=\"ax-icon ax-icon-more-horizontal ax-kanban-action-icon\"\n                    (click)=\"handleActionClick($event, item)\"\n                  >\n                  </ax-icon> -->\n                }\n              </ax-title>\n              <ax-subtitle>{{ item.description }}</ax-subtitle>\n            </ax-heading>\n          </div>\n        }\n      }\n      @if (contentFooterTemplate()) {\n        <ax-footer>\n          <ng-container\n            [ngTemplateOutlet]=\"contentFooterTemplate()\"\n            [ngTemplateOutletContext]=\"{ $implicit: status }\"\n          ></ng-container>\n        </ax-footer>\n      }\n    </ax-content>\n    @if (footerTemplate()) {\n      <ax-footer>\n        <ng-container\n          [ngTemplateOutlet]=\"footerTemplate()\"\n          [ngTemplateOutletContext]=\"{ $implicit: status }\"\n        ></ng-container>\n      </ax-footer>\n    }\n  </div>\n}\n", styles: ["@layer properties;@layer base{:root{--ax-comp-kanban-status-min-width: 20rem;--ax-comp-kanban-status-min-height: 30rem;--ax-comp-kanban-item-indicator-size: .125rem}}@layer components{ax-kanban{display:grid;grid-auto-columns:var(--ax-comp-kanban-status-min-width);grid-auto-flow:column;gap:calc(var(--spacing, .25rem) * 2);overflow-x:auto}ax-kanban .ax-kanban-status{display:flex;height:var(--ax-comp-kanban-status-min-height);flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);overflow-y:auto;border-radius:var(--ax-sys-border-radius);background-color:rgba(var(--ax-sys-color-lighter-surface));color:rgba(var(--ax-sys-color-on-lighter-surface));clip-path:inset(0 round var(--ax-sys-border-radius))}ax-kanban .ax-kanban-status>ax-header{position:sticky;top:calc(var(--spacing, .25rem) * 0);z-index:2;background-color:inherit}ax-kanban .ax-kanban-status>ax-header>ax-title{display:block;width:100%;padding-top:calc(var(--spacing, .25rem) * 2);text-align:center;font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}ax-kanban .ax-kanban-status ax-content{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2)}ax-kanban .ax-kanban-status ax-content ax-popover{display:none}ax-kanban .ax-kanban-status ax-content .ax-kanban-item{position:relative;width:100%;border-radius:calc(var(--ax-sys-border-radius) / 2);background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1);color:rgba(var(--ax-sys-color-on-lightest-surface));--tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / .05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:rgba(var(--ax-sys-color-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){color:rgba(var(--ax-sys-color-on-darkest-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);position:absolute}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);inset-inline-start:calc(var(--spacing, .25rem) * .5)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);height:calc(100% - (var(--spacing,.25rem) * 2))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);width:var(--ax-comp-kanban-item-indicator-size)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{content:var(--tw-content);border-radius:calc(infinity * 1px)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item:before{--tw-content: \"\";content:var(--tw-content)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-primary-periority:before{background-color:rgba(var(--ax-sys-color-primary-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-highest-periority:before{background-color:rgba(var(--ax-sys-color-danger-dark-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-high-periority:before{background-color:rgba(var(--ax-sys-color-danger-600))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-medium-periority:before{background-color:rgba(var(--ax-sys-color-warning-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-low-periority:before{background-color:rgba(var(--ax-sys-color-success-light-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item.ax-kanban-lowest-periority:before{background-color:rgba(var(--ax-sys-color-success-lightest-surface))}ax-kanban .ax-kanban-status ax-content .ax-kanban-item>ax-heading>ax-title{display:flex;align-items:center;justify-content:space-between;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}ax-kanban .ax-kanban-status ax-content .ax-kanban-item>ax-heading>ax-title .ax-kanban-action-icon{cursor:pointer}ax-kanban .ax-kanban-status>ax-footer{position:sticky;bottom:calc(var(--spacing, .25rem) * 0);z-index:2;background-color:inherit}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-content{syntax: \"*\"; initial-value: \"\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-content: \"\"}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped", "sortPreviewChanged"], exportAs: ["axDropList"] }, { kind: "component", type: AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXDecoratorHeadingComponent, selector: "ax-heading", inputs: ["darkMode", "color", "weight"] }, { kind: "directive", type: 
                 // AXDecoratorIconComponent,
                 AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXKanbanComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: AXKanbanComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-kanban', encapsulation: ViewEncapsulation.None, imports: [
                         NgClass,