@acorex/components 22.2.9 → 22.2.11

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

@@ -1,5 +1,5 @@
 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 '@acorex/cdk/drag-drop';
 import * as i2 from '@acorex/cdk/horizontal-scroll';
@@ -7,15 +7,6 @@ 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.
@@ -33,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.
      */
@@ -82,7 +79,7 @@ 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, [{ directive: typeof i1.AXDragDirective; inputs: { "dragStartDelay": "dragStartDelay"; "dragClonedTemplate": "dragClonedTemplate"; }; outputs: {}; }]>;
+    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 {
@@ -97,6 +94,62 @@ declare class AXTabsReorderedEvent extends AXEvent {
 }
 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
@@ -136,6 +189,22 @@ declare class AXTabsComponent extends MXBaseComponent implements AfterViewInit,
      * @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.
@@ -149,7 +218,9 @@ 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;
@@ -167,6 +238,7 @@ declare class AXTabsComponent extends MXBaseComponent implements AfterViewInit,
     private changes;
     private activeTab;
     private viewReady;
+    private lastRenderMode;
     /**
      * @event
      */
@@ -202,17 +274,19 @@ declare class AXTabsComponent extends MXBaseComponent implements AfterViewInit,
      */
     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; }; "reorderable": { "alias": "reorderable"; "required": false; "isSignal": true; }; "reorderDelay": { "alias": "reorderDelay"; "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: {}; }]>;
+    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$1.CommonModule, typeof i2$1.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, AXTabsReorderedEvent };
-export type { AXTabLocation, AXTabLook };
+export { AXTabContentDirective, AXTabItemComponent, AXTabPanelDirective, AXTabStripChangedEvent, AXTabsComponent, AXTabsModule, AXTabsReorderedEvent };
+export type { AXTabLocation, AXTabLook, AXTabsRenderMode };