@acorex/components 22.0.0 → 22.0.1-next.0

package/types/acorex-components-menu.d.ts

@@ -72,6 +72,7 @@ type AXContextMenuItemsClickEvent = AXMenuItemClickBaseEvent<AXContextMenuCompon
  * @category Components
  */
 declare class AXContextMenuComponent extends NXComponent {
+    protected readonly supportsHeader = true;
     readonly orientation: _angular_core.InputSignal<AXOrientation>;
     readonly openOn: _angular_core.InputSignal<AXMenuOpenTrigger>;
     readonly closeOn: _angular_core.InputSignal<AXMenuCloseTrigger>;
@@ -115,6 +116,10 @@ declare class AXContextMenuComponent extends NXComponent {
     private backdropElement;
     private originalNextSibling;
     private originalParent;
+    private readonly headerSlot;
+    private floatingHeader;
+    private headerOriginalParent;
+    private headerOriginalNextSibling;
     protected items: _angular_core.WritableSignal<AXMenuItem[]>;
     /** @ignore */
     private setupCloseOnRouteChange;
@@ -130,13 +135,19 @@ declare class AXContextMenuComponent extends NXComponent {
     private internalShowAt;
     /**
      * Positions the menu at `point`, flipping when it would overflow the viewport.
-     * Uses a temporary visible layout pass so parents that hide the host (e.g. side-menu `display: none`) do not yield a zero-sized rect.
+     * When a floating header is present, positions header and panel as one clamped block.
      */
     private positionAtPoint;
     /** Measures menu size even when an ancestor hides the host with `display: none`. */
     private measureMenuRect;
+    /** Measures the floating header bar using the same hidden-layout pass as the menu panel. */
+    private measureFloatingRect;
     /** @ignore */
     private createBackdrop;
+    /** Moves the projected header slot into the backdrop as a floating sibling of the panel. */
+    private floatHeaderToBackdrop;
+    /** Restores the header slot to its original parent before the backdrop is removed. */
+    private restoreFloatingHeader;
     /** @ignore */
     private resolveContextMenuTarget;
     /** @ignore */
@@ -147,7 +158,7 @@ declare class AXContextMenuComponent extends NXComponent {
     /** @ignore */
     get __hostClass(): any;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXContextMenuComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXContextMenuComponent, "ax-context-menu", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "openOn": { "alias": "openOn"; "required": false; "isSignal": true; }; "closeOn": { "alias": "closeOn"; "required": false; "isSignal": true; }; "closeOnRouteChange": { "alias": "closeOnRouteChange"; "required": false; "isSignal": true; }; "originalItems": { "alias": "items"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; }, { "onItemClick": "onItemClick"; "onOpening": "onOpening"; "onClose": "onClose"; }, never, ["ax-menu-item,ax-divider,ax-title,ng-container"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXContextMenuComponent, "ax-context-menu", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "openOn": { "alias": "openOn"; "required": false; "isSignal": true; }; "closeOn": { "alias": "closeOn"; "required": false; "isSignal": true; }; "closeOnRouteChange": { "alias": "closeOnRouteChange"; "required": false; "isSignal": true; }; "originalItems": { "alias": "items"; "required": false; "isSignal": true; }; "target": { "alias": "target"; "required": false; "isSignal": true; }; }, { "onItemClick": "onItemClick"; "onOpening": "onOpening"; "onClose": "onClose"; }, never, ["ax-header", "ax-menu-item,ax-divider,ax-title,ng-container"], true, never>;
 }
 
 type AXMenuItemClickEvent = AXMenuItemClickBaseEvent<AXMenuItemComponent>;
@@ -301,6 +312,7 @@ type AXMenuItemsClickEvent = AXMenuItemClickBaseEvent<AXMenuComponent>;
  * @category Components
  */
 declare class AXMenuComponent extends NXComponent {
+    protected readonly supportsHeader = false;
     constructor();
     orientation: _angular_core.InputSignal<AXOrientation>;
     openOn: _angular_core.InputSignal<AXMenuOpenTrigger>;
@@ -318,7 +330,7 @@ declare class AXMenuComponent extends NXComponent {
      */
     close(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXMenuComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXMenuComponent, "ax-menu", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "openOn": { "alias": "openOn"; "required": false; "isSignal": true; }; "closeOn": { "alias": "closeOn"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "hasArrow": { "alias": "hasArrow"; "required": false; "isSignal": true; }; }, { "onItemClick": "onItemClick"; }, never, ["ax-menu-item,ax-divider,ax-title,ng-container"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXMenuComponent, "ax-menu", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "openOn": { "alias": "openOn"; "required": false; "isSignal": true; }; "closeOn": { "alias": "closeOn"; "required": false; "isSignal": true; }; "items": { "alias": "items"; "required": false; "isSignal": true; }; "hasArrow": { "alias": "hasArrow"; "required": false; "isSignal": true; }; }, { "onItemClick": "onItemClick"; }, never, ["ax-header", "ax-menu-item,ax-divider,ax-title,ng-container"], true, never>;
 }
 
 declare class AXMenuModule {

package/types/acorex-components-message-status.d.ts

@@ -0,0 +1,23 @@
+import * as i0 from '@angular/core';
+import { SafeHtml } from '@angular/platform-browser';
+import * as i1 from '@angular/common';
+
+type MessageStatus = 'pending' | 'send' | 'delivered' | 'failed';
+
+declare class AXMessageStatusComponent {
+    #private;
+    status: i0.InputSignal<MessageStatus>;
+    private sanetizer;
+    protected htmlContent: i0.WritableSignal<SafeHtml>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXMessageStatusComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXMessageStatusComponent, "ax-message-status", never, { "status": { "alias": "status"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class AXMessageStatusModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXMessageStatusModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXMessageStatusModule, never, [typeof i1.CommonModule], never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AXMessageStatusModule>;
+}
+
+export { AXMessageStatusComponent, AXMessageStatusModule };
+export type { MessageStatus };

package/types/acorex-components-message-time.d.ts

@@ -0,0 +1,19 @@
+import * as i0 from '@angular/core';
+import { OnInit } from '@angular/core';
+import * as i1 from '@angular/common';
+
+declare class AXMessageTimeComponent implements OnInit {
+    constructor();
+    time: i0.InputSignal<string>;
+    ngOnInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXMessageTimeComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXMessageTimeComponent, "ax-message-time", never, { "time": { "alias": "time"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class AXMessageTimeModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXMessageTimeModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXMessageTimeModule, never, [typeof i1.CommonModule], never>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<AXMessageTimeModule>;
+}
+
+export { AXMessageTimeComponent, AXMessageTimeModule };

package/types/acorex-components-message.d.ts

@@ -0,0 +1,59 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+import { AXMenuItem, AXContextMenuOpeningEvent, AXContextMenuItemsClickEvent } from '@acorex/components/menu';
+import { AXEmoji } from '@acorex/core/constants';
+import { MessageStatus } from '@acorex/components/message-status';
+
+type AXMessageLayout = 'ping-pong' | 'stack';
+type AXBubbleTail = 'none' | 'start' | 'end';
+/** @deprecated Use AXMessageLayout. Kept for backward compatibility in data models. */
+type AXMessageAlign = 'start' | 'end';
+interface AXMessageTemplateContext<T> {
+    $implicit: T;
+}
+
+declare class AXMessageComponent<T = unknown> {
+    templateData: _angular_core.InputSignal<T>;
+    itemTemplate: _angular_core.InputSignal<TemplateRef<AXMessageTemplateContext<T>>>;
+    layout: _angular_core.InputSignal<AXMessageLayout>;
+    /** Own message: aligned end in ping-pong and styled via inner ax-bubble. */
+    isown: _angular_core.InputSignal<boolean>;
+    text: _angular_core.InputSignal<string>;
+    avatarSrc: _angular_core.InputSignal<string>;
+    avatarSize: _angular_core.InputSignal<number>;
+    showAvatar: _angular_core.InputSignal<boolean>;
+    status: _angular_core.InputSignal<MessageStatus>;
+    time: _angular_core.InputSignal<string>;
+    /** Quick reactions shown in the context menu header. */
+    quickReactions: _angular_core.InputSignal<readonly AXEmoji[]>;
+    /** Context menu action items. Parent can also append via `contextMenuOpening`. */
+    contextMenuItems: _angular_core.InputSignal<readonly AXMenuItem[]>;
+    /** Whether right-click context menu is enabled on the bubble. */
+    contextMenuEnabled: _angular_core.InputSignal<boolean>;
+    /** Emoji size in pixels inside the context menu reaction bar. */
+    reactionSize: _angular_core.InputSignal<number>;
+    /** Emits when a quick reaction or picker emoji is selected from the context menu. */
+    reactionSelected: _angular_core.OutputEmitterRef<AXEmoji>;
+    /** Emits while the context menu opens so the parent can customize `event.items`. */
+    contextMenuOpening: _angular_core.OutputEmitterRef<AXContextMenuOpeningEvent>;
+    /** Emits when a context menu action item is clicked. */
+    menuItemClick: _angular_core.OutputEmitterRef<AXContextMenuItemsClickEvent>;
+    private readonly contextMenu;
+    protected readonly hasTemplate: _angular_core.Signal<boolean>;
+    protected readonly showReactionBar: _angular_core.Signal<boolean>;
+    protected readonly hostClass: _angular_core.Signal<string>;
+    protected onContextMenuOpening(event: AXContextMenuOpeningEvent): void;
+    protected onReactionSelected(emoji: AXEmoji): void;
+    protected onMenuItemClick(event: AXContextMenuItemsClickEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXMessageComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXMessageComponent<any>, "ax-message", never, { "templateData": { "alias": "templateData"; "required": false; "isSignal": true; }; "itemTemplate": { "alias": "itemTemplate"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "isown": { "alias": "isown"; "required": false; "isSignal": true; }; "text": { "alias": "text"; "required": false; "isSignal": true; }; "avatarSrc": { "alias": "avatarSrc"; "required": false; "isSignal": true; }; "avatarSize": { "alias": "avatarSize"; "required": false; "isSignal": true; }; "showAvatar": { "alias": "showAvatar"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "time": { "alias": "time"; "required": false; "isSignal": true; }; "quickReactions": { "alias": "quickReactions"; "required": false; "isSignal": true; }; "contextMenuItems": { "alias": "contextMenuItems"; "required": false; "isSignal": true; }; "contextMenuEnabled": { "alias": "contextMenuEnabled"; "required": false; "isSignal": true; }; "reactionSize": { "alias": "reactionSize"; "required": false; "isSignal": true; }; }, { "reactionSelected": "reactionSelected"; "contextMenuOpening": "contextMenuOpening"; "menuItemClick": "menuItemClick"; }, never, ["*"], true, never>;
+}
+
+declare class AXMessageModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXMessageModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXMessageModule, never, [typeof AXMessageComponent], [typeof AXMessageComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXMessageModule>;
+}
+
+export { AXMessageComponent, AXMessageModule };
+export type { AXBubbleTail, AXMessageAlign, AXMessageLayout, AXMessageTemplateContext };

package/types/acorex-components-popover.d.ts

@@ -187,11 +187,13 @@ declare class AXPopoverComponent extends MXBaseComponent implements OnDestroy {
     /** @ignore */
     private removeScrollListener;
     /**
-     * True when scroll is a side-effect of focusing an editable control inside the overlay
-     * (soft keyboard / visual viewport adjustment), mainly on iOS Safari.
+     * True when document-level scroll is a side-effect of focusing an editable control
+     * inside the overlay (soft keyboard / visual viewport adjustment), mainly on iOS Safari.
      * @ignore
      */
-    private isKeyboardInducedScroll;
+    private isKeyboardInducedDocumentScroll;
+    /** @ignore */
+    private isDocumentScrollTarget;
     /**
      * Checks whether the given element lives inside a child overlay
      * (an overlay stacked on top of this popover, e.g. a selectbox dropdown).

package/types/acorex-components-reaction.d.ts

@@ -0,0 +1,85 @@
+import * as _angular_core from '@angular/core';
+import { AXEmoji } from '@acorex/core/constants';
+
+/**
+ * A single aggregated reaction shown by {@link AXReactionComponent}.
+ */
+interface AXReactionItem {
+    /** Emoji metadata rendered with {@link AXEmojiComponent}. */
+    emoji: AXEmoji;
+    /** Number of users who reacted with this emoji. */
+    count: number;
+    /** Whether the current user has selected this reaction. */
+    selected?: boolean;
+}
+
+/**
+ * Telegram-style reaction chips for chat messages.
+ * Renders emojis with {@link AXEmojiComponent} and opens {@link AXEmojiPickerComponent}
+ * inside {@link AXPopoverComponent} when editable.
+ *
+ * @category Components
+ */
+declare class AXReactionComponent {
+    /**
+     * Aggregated reactions to display.
+     *
+     * @defaultValue []
+     */
+    readonly items: _angular_core.InputSignal<readonly AXReactionItem[]>;
+    /**
+     * Rendered emoji size in pixels.
+     *
+     * @defaultValue 18
+     */
+    readonly size: _angular_core.InputSignal<number>;
+    /**
+     * When true, reactions are interactive and an add button opens the emoji picker popover.
+     *
+     * @defaultValue false
+     */
+    readonly editable: _angular_core.InputSignal<boolean>;
+    /**
+     * When true, the emoji picker popover is opened.
+     *
+     * @defaultValue false
+     */
+    readonly showPicker: _angular_core.InputSignal<boolean>;
+    /**
+     * Emits when the user selects a new reaction or an unselected existing one.
+     */
+    readonly add: _angular_core.OutputEmitterRef<AXEmoji>;
+    /**
+     * Emits when the user removes their own reaction.
+     */
+    readonly remove: _angular_core.OutputEmitterRef<AXEmoji>;
+    private readonly pickerPopover;
+    /** Whether the emoji picker popover is currently open. */
+    protected readonly pickerOpen: _angular_core.WritableSignal<boolean>;
+    /** Whether the add button should appear pressed while the picker is open. */
+    protected readonly isPickerVisible: _angular_core.Signal<boolean>;
+    constructor();
+    /** Toggles a reaction without mutating counts; parent owns state. */
+    protected onItemClick(item: AXReactionItem): void;
+    /** Opens or closes the emoji picker popover. */
+    protected togglePicker(event?: Event): void;
+    /** Forwards a picker selection as `add` and closes the popover. */
+    protected onPickerSelected(emoji: AXEmoji): void;
+    /** Syncs the add-button pressed state when the popover opens. */
+    protected onPickerOpened(): void;
+    /** Syncs the add-button pressed state when the popover closes. */
+    protected onPickerClosed(): void;
+    /** Accessible name for an existing reaction chip. */
+    protected itemAriaLabel(item: AXReactionItem): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXReactionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXReactionComponent, "ax-reaction", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "editable": { "alias": "editable"; "required": false; "isSignal": true; }; "showPicker": { "alias": "showPicker"; "required": false; "isSignal": true; }; }, { "add": "add"; "remove": "remove"; }, never, never, true, never>;
+}
+
+declare class AXReactionModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXReactionModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<AXReactionModule, never, [typeof AXReactionComponent], [typeof AXReactionComponent]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXReactionModule>;
+}
+
+export { AXReactionComponent, AXReactionModule };
+export type { AXReactionItem };

package/types/acorex-components-selection-list.d.ts

@@ -80,7 +80,7 @@ declare class AXSelectionListComponent extends MXSelectionValueComponent {
     /** @ignore */
     private get __hostClass();
     static ɵfac: i0.ɵɵFactoryDeclaration<AXSelectionListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXSelectionListComponent, "ax-selection-list", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "size": { "alias": "size"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "readonlyField": { "alias": "readonlyField"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "customTemplate": { "alias": "customTemplate"; "required": false; "isSignal": true; }; "showControl": { "alias": "showControl"; "required": false; }; "items": { "alias": "items"; "required": false; }; "look": { "alias": "look"; "required": false; }; }, { "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; }, never, ["ax-validation-rule"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXSelectionListComponent, "ax-selection-list", never, { "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "value": { "alias": "value"; "required": false; }; "valueField": { "alias": "valueField"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "disabledField": { "alias": "disabledField"; "required": false; }; "readonlyField": { "alias": "readonlyField"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "customTemplate": { "alias": "customTemplate"; "required": false; "isSignal": true; }; "showControl": { "alias": "showControl"; "required": false; }; "items": { "alias": "items"; "required": false; }; "look": { "alias": "look"; "required": false; }; }, { "onValueChanged": "onValueChanged"; "onBlur": "onBlur"; "onFocus": "onFocus"; }, never, ["ax-validation-rule"], true, never>;
 }
 
 declare class AXSelectionListModule {

package/types/acorex-components-tabs.d.ts

@@ -1,24 +1,21 @@
 import * as i0 from '@angular/core';
-import { TemplateRef, EventEmitter, AfterViewInit, AfterContentInit, OnDestroy } from '@angular/core';
+import { TemplateRef, EventEmitter, OnDestroy, AfterViewInit, AfterContentInit } from '@angular/core';
 import { MXInteractiveComponent, AXClickEvent, MXComponentOptionChanged, AXEvent, MXBaseComponent } from '@acorex/cdk/common';
-import * as i1 from '@angular/common';
-import * as i2 from '@angular/cdk/portal';
+import * as i1 from '@acorex/cdk/drag-drop';
+import * as i2 from '@acorex/cdk/horizontal-scroll';
+import * as i1$1 from '@angular/common';
+import * as i2$1 from '@angular/cdk/portal';
 import * as i3 from '@acorex/components/decorators';
 
-declare class AXTabContentDirective {
-    private _viewContainerRef;
-    private _portal;
-    get portal(): TemplateRef<any> | undefined;
-    set portal(v: TemplateRef<any> | undefined);
-    static ɵfac: i0.ɵɵFactoryDeclaration<AXTabContentDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<AXTabContentDirective, "[axTabContent]", ["axTabContent"], { "portal": { "alias": "axTabContent"; "required": false; }; }, {}, never, never, true, never>;
-}
-
 /**
  * @category
  *  Represents an individual tab item in a tab component.
  */
 declare class AXTabItemComponent extends MXInteractiveComponent {
+    private readonly _drag;
+    private _reorderEnabled;
+    private _panTouchAction;
+    constructor();
     /**
      * Defines the text content to be displayed within the component.
      */
@@ -27,7 +24,13 @@ declare class AXTabItemComponent extends MXInteractiveComponent {
      * Defines a unique identifier for the component instance.
      */
     key: string;
-    template: TemplateRef<unknown>;
+    private _panel?;
+    private _contentTemplate;
+    /**
+     * Template rendered for this tab's content area.
+     * Prefer `ng-template[axTabPanel]` so `renderMode="default"` can recreate panel state.
+     */
+    get template(): TemplateRef<unknown>;
     /**
      * Defines a custom template for the component's header.
      */
@@ -50,6 +53,12 @@ declare class AXTabItemComponent extends MXInteractiveComponent {
      */
     get active(): boolean;
     set active(value: boolean);
+    /** @ignore */
+    setReorderEnabled(enabled: boolean, delay?: number, touchAction?: 'none' | 'pan-x' | 'pan-y'): void;
+    /** @ignore */
+    private updateDragState;
+    /** @ignore */
+    private applyScrollTouchAction;
     /**
      * @ignore
      */
@@ -70,15 +79,77 @@ declare class AXTabItemComponent extends MXInteractiveComponent {
         top: number;
     };
     static ɵfac: i0.ɵɵFactoryDeclaration<AXTabItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXTabItemComponent, "ax-tab-item", never, { "disabled": { "alias": "disabled"; "required": false; }; "text": { "alias": "text"; "required": false; }; "key": { "alias": "key"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "active": { "alias": "active"; "required": false; }; }, { "disabledChange": "disabledChange"; "onClick": "onClick"; "onBlur": "onBlur"; "onFocus": "onFocus"; "activeChange": "activeChange"; }, never, ["ax-prefix", "ax-suffix", "ax-content"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXTabItemComponent, "ax-tab-item", never, { "disabled": { "alias": "disabled"; "required": false; }; "text": { "alias": "text"; "required": false; }; "key": { "alias": "key"; "required": false; }; "headerTemplate": { "alias": "headerTemplate"; "required": false; }; "active": { "alias": "active"; "required": false; }; }, { "disabledChange": "disabledChange"; "onClick": "onClick"; "onBlur": "onBlur"; "onFocus": "onFocus"; "activeChange": "activeChange"; }, ["_panel"], ["ax-prefix", "ax-suffix", "ax-content"], true, [{ directive: typeof i1.AXDragDirective; inputs: { "dragStartDelay": "dragStartDelay"; "dragClonedTemplate": "dragClonedTemplate"; }; outputs: {}; }]>;
 }
 
 declare class AXTabStripChangedEvent extends AXEvent {
     tab: AXTabItemComponent;
     index: number;
 }
+/** Event emitted when tab items are reordered via drag and drop. */
+declare class AXTabsReorderedEvent extends AXEvent {
+    tab: AXTabItemComponent;
+    previousIndex: number;
+    currentIndex: number;
+}
 type AXTabLook = 'default' | 'pills' | 'pills-color' | 'with-line' | 'with-line-color' | 'classic' | 'custom';
 type AXTabLocation = 'top' | 'bottom' | 'start' | 'end';
+type AXTabsRenderMode = 'default' | 'all-tabs' | 'on-demand';
+
+declare class AXTabContentDirective implements OnDestroy {
+    private readonly viewContainerRef;
+    private readonly renderer;
+    private readonly panes;
+    private _portal;
+    private defaultView;
+    get portal(): TemplateRef<unknown> | undefined;
+    set portal(v: TemplateRef<unknown> | undefined);
+    /**
+     * Shows the given tab template using the specified render mode.
+     */
+    activate(template: TemplateRef<unknown> | undefined, mode: AXTabsRenderMode): void;
+    /**
+     * Ensures embedded views exist for every tab template (all-tabs mode).
+     */
+    preload(templates: TemplateRef<unknown>[]): void;
+    /**
+     * Removes panes whose tab templates are no longer present.
+     */
+    sync(templates: TemplateRef<unknown>[]): void;
+    /**
+     * Destroys all cached panes and clears the view container.
+     */
+    reset(): void;
+    ngOnDestroy(): void;
+    private destroyDefaultView;
+    private resetKeepAlivePanes;
+    private ensurePane;
+    private showPane;
+    private destroyPane;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXTabContentDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AXTabContentDirective, "[axTabContent]", ["axTabContent"], { "portal": { "alias": "axTabContent"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Marks an `ng-template` as tab panel content. Use this instead of projecting
+ * components directly into `ax-content` when you need `renderMode="default"`
+ * to destroy and recreate panel state on each tab switch.
+ *
+ * @example
+ * ```html
+ * <ax-tab-item text="Account">
+ *   <ng-template axTabPanel>
+ *     <my-panel />
+ *   </ng-template>
+ * </ax-tab-item>
+ * ```
+ */
+declare class AXTabPanelDirective {
+    readonly template: TemplateRef<unknown>;
+    constructor(template: TemplateRef<unknown>);
+    static ɵfac: i0.ɵɵFactoryDeclaration<AXTabPanelDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AXTabPanelDirective, "ng-template[axTabPanel]", never, {}, {}, never, never, true, never>;
+}
 
 /**
  * @category
@@ -87,6 +158,9 @@ type AXTabLocation = 'top' | 'bottom' | 'start' | 'end';
 declare class AXTabsComponent extends MXBaseComponent implements AfterViewInit, AfterContentInit, OnDestroy {
     #private;
     private readonly renderer;
+    private readonly destroyRef;
+    private readonly _dropList;
+    private readonly _scroll;
     /**
      * @ignore
      */
@@ -101,6 +175,36 @@ declare class AXTabsComponent extends MXBaseComponent implements AfterViewInit,
      * @defaultValue 'bottom'
      */
     location: i0.InputSignal<AXTabLocation>;
+    /**
+     * Enables drag-and-drop reordering of tab items. Reordering starts only after the user
+     * presses and holds a tab for {@link reorderDelay} milliseconds; a quick swipe without
+     * holding scrolls the strip instead.
+     * @defaultValue false
+     */
+    reorderable: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Press-and-hold duration in milliseconds before a tab can be dragged to reorder.
+     * After this delay the cursor changes to indicate reorder mode. Moving before the
+     * delay ends cancels reorder and allows swipe or pan scrolling instead.
+     * @defaultValue 250
+     */
+    reorderDelay: i0.InputSignal<number>;
+    /**
+     * Controls how tab content is rendered in the DOM.
+     *
+     * - `default` — Only the active tab's content is in the DOM. Switching tabs replaces content and does not preserve state.
+     * - `all-tabs` — All tab contents are rendered and kept in the DOM. State is preserved; higher memory use.
+     * - `on-demand` — Only the active tab is rendered initially. Other tabs are rendered on first visit and then kept; state is preserved.
+     *
+     * @defaultValue 'default'
+     */
+    renderMode: i0.InputSignal<AXTabsRenderMode>;
+    /**
+     * When true, stacks prefix, title, and suffix vertically inside each tab header
+     * instead of arranging them in a horizontal row.
+     * @defaultValue false
+     */
+    stacked: i0.InputSignalWithTransform<boolean, unknown>;
     /**
      * @defaultValue 'false'
      * Specifies whether the component should resize to fit its parent container.
@@ -114,12 +218,16 @@ declare class AXTabsComponent extends MXBaseComponent implements AfterViewInit,
     /**
      * The `AXTabContentDirective` associated with the tab.
      */
-    content: AXTabContentDirective;
+    set content(value: AXTabContentDirective);
+    get content(): AXTabContentDirective;
+    private _content;
     private indicator;
     private zone;
     private platformId;
     /** @ignore */
     private _isUserInteraction;
+    /** @ignore */
+    private _clickSubscriptions;
     get items(): AXTabItemComponent[];
     /** @ignore */
     private _selectedItem;
@@ -129,12 +237,21 @@ declare class AXTabsComponent extends MXBaseComponent implements AfterViewInit,
     get selectedItem(): AXTabItemComponent;
     private changes;
     private activeTab;
+    private viewReady;
+    private lastRenderMode;
     /**
      * @event
      */
     onActiveTabChanged: EventEmitter<AXTabStripChangedEvent>;
+    /**
+     * Emitted when tab items are reordered via drag and drop after the press-and-hold
+     * delay has elapsed and the user drags a tab to a new position.
+     * @event
+     */
+    onTabsReordered: EventEmitter<AXTabsReorderedEvent>;
     /** @ignore */
     private get __hostClass();
+    constructor();
     /** @ignore */
     ngAfterContentInit(): void;
     /** @ignore */
@@ -142,22 +259,34 @@ declare class AXTabsComponent extends MXBaseComponent implements AfterViewInit,
     ngOnDestroy(): void;
     /** @ignore */
     private _bindOnClickEvent;
+    /** @ignore */
+    private _syncDragState;
+    /** @ignore */
+    private _applyReorder;
+    /** @ignore */
+    private _observeActiveTabForResize;
+    /** @ignore */
+    private scheduleIndicatorUpdate;
     /**
      * Activates the specified tab and updates the content.
      *
      * @param tab - The tab to select, either by index (number) or by component instance
      */
     select(tab: number | AXTabItemComponent): void;
+    /** @ignore */
+    private _renderContent;
+    /** @ignore */
+    private getTabIndicatorStats;
     private setIndicatorPosition;
     static ɵfac: i0.ɵɵFactoryDeclaration<AXTabsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AXTabsComponent, "ax-tabs", never, { "look": { "alias": "look"; "required": false; "isSignal": true; }; "location": { "alias": "location"; "required": false; "isSignal": true; }; "fitParent": { "alias": "fitParent"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "content": { "alias": "content"; "required": false; }; }, { "onActiveTabChanged": "onActiveTabChanged"; }, ["_contentTabs"], ["ax-tab-item"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AXTabsComponent, "ax-tabs", never, { "look": { "alias": "look"; "required": false; "isSignal": true; }; "location": { "alias": "location"; "required": false; "isSignal": true; }; "reorderable": { "alias": "reorderable"; "required": false; "isSignal": true; }; "reorderDelay": { "alias": "reorderDelay"; "required": false; "isSignal": true; }; "renderMode": { "alias": "renderMode"; "required": false; "isSignal": true; }; "stacked": { "alias": "stacked"; "required": false; "isSignal": true; }; "fitParent": { "alias": "fitParent"; "required": false; }; "minWidth": { "alias": "minWidth"; "required": false; }; "content": { "alias": "content"; "required": false; }; }, { "onActiveTabChanged": "onActiveTabChanged"; "onTabsReordered": "onTabsReordered"; }, ["_contentTabs"], ["ax-tab-item"], true, [{ directive: typeof i1.AXDropListDirective; inputs: {}; outputs: {}; }, { directive: typeof i2.AXHorizontalScrollDirective; inputs: {}; outputs: {}; }]>;
 }
 
 declare class AXTabsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AXTabsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AXTabsModule, never, [typeof i1.CommonModule, typeof i2.PortalModule, typeof i3.AXDecoratorModule, typeof AXTabsComponent, typeof AXTabItemComponent, typeof AXTabContentDirective], [typeof AXTabsComponent, typeof AXTabItemComponent, typeof AXTabContentDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AXTabsModule, never, [typeof i1$1.CommonModule, typeof i2$1.PortalModule, typeof i3.AXDecoratorModule, typeof AXTabsComponent, typeof AXTabItemComponent, typeof AXTabContentDirective, typeof AXTabPanelDirective], [typeof AXTabsComponent, typeof AXTabItemComponent, typeof AXTabContentDirective, typeof AXTabPanelDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AXTabsModule>;
 }
 
-export { AXTabContentDirective, AXTabItemComponent, AXTabStripChangedEvent, AXTabsComponent, AXTabsModule };
-export type { AXTabLocation, AXTabLook };
+export { AXTabContentDirective, AXTabItemComponent, AXTabPanelDirective, AXTabStripChangedEvent, AXTabsComponent, AXTabsModule, AXTabsReorderedEvent };
+export type { AXTabLocation, AXTabLook, AXTabsRenderMode };