@cute-widgets/base 20.0.1

package/fesm2022/cute-widgets-base-core-nav.mjs

@@ -0,0 +1,863 @@
+import * as i0 from '@angular/core';
+import { inject, DOCUMENT, NgZone, booleanAttribute, Input, Directive, TemplateRef, InjectionToken, ViewContainerRef, ViewChild, ContentChild, ChangeDetectionStrategy, ViewEncapsulation, Component, DestroyRef, EventEmitter, numberAttribute, HostBinding, Output, ContentChildren, forwardRef, NgModule } from '@angular/core';
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { CuteFocusableControl, CuteLayoutControl } from '@cute-widgets/base/abstract';
+import { toThemeColor, getOverallTransitionDuration } from '@cute-widgets/base/core';
+import { fromEvent } from 'rxjs';
+import { TemplatePortal, CdkPortalOutlet, PortalModule } from '@angular/cdk/portal';
+import * as i1 from '@angular/cdk/overlay';
+import { CdkScrollable } from '@angular/cdk/overlay';
+import { CommonModule } from '@angular/common';
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ */
+let nextId$2 = -1;
+/**
+ * This class can be used to create a navigation menu, where it is applied to `<a>` elements.
+ */
+class CuteNavLink extends CuteFocusableControl {
+    constructor() {
+        super();
+        this._document = inject(DOCUMENT);
+        this._ngZone = inject(NgZone);
+        this.nav = inject(CUTE_NAV, { optional: true });
+        this.toThemeColor = toThemeColor;
+        /** Whether the link is active. */
+        this.active = false;
+        this._focusMonitor.monitor(this._elementRef)
+            .pipe(takeUntilDestroyed())
+            .subscribe(origin => {
+            this._ngZone.run(() => {
+                if (this.nav) {
+                    this.nav._focusChanged(this, origin);
+                }
+            });
+        });
+        // MouseDown event
+        fromEvent(this._nativeElement, "mousedown", { capture: true })
+            .pipe(takeUntilDestroyed())
+            .subscribe((event) => this.onMouseDown(event));
+    }
+    generateId() {
+        return `cute-nav-link-${++nextId$2}`;
+    }
+    /** Gets fallback element identifier(s) whose content or presence are controlled by the link. */
+    getAriaControls() {
+        if (!(this.nav && this.nav.isTab()))
+            return "";
+        const index = this.nav.getNavLinkIndex(this);
+        let ids = "";
+        if (index >= 0) {
+            ids = `${this.nav.id}-pane-${index}`;
+        }
+        return ids;
+    }
+    /**
+     * MouseDown event handler in `capture` state of the event propagation.
+     * @param event MouseEvent
+     * @protected
+     */
+    onMouseDown(event) {
+        if (this.nav) {
+            if (!this.nav.activateNavLink(this, 'mouse')) {
+                // we need to prevent default action so CSS-styles may be applied incorrectly
+                event.stopImmediatePropagation();
+                event.preventDefault();
+            }
+        }
+    }
+    onClick(event) {
+        const elem = event.target;
+        event.preventDefault();
+        if (elem instanceof HTMLAnchorElement && elem.hash && elem.hash.startsWith("#")) {
+            event.stopPropagation();
+            const target = this._document.getElementById(elem.hash.substring(1));
+            if (target) {
+                target.scrollIntoView({ behavior: "smooth", block: "nearest" });
+            }
+        }
+    }
+    onTouchStart(event) {
+        if (this.nav) {
+            this.nav.activateNavLink(this, 'touch');
+            event.preventDefault();
+        }
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        if (this.nav?.role == "tablist") {
+            this.role = "tab";
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteNavLink, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.15", type: CuteNavLink, isStandalone: true, selector: "a[cute-nav-link], a[cuteNavLink],\n             button[cute-nav-link], button[cuteNavLink]\n  ", inputs: { active: ["active", "active", booleanAttribute], ariaControls: ["aria-controls", "ariaControls"] }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.active": "active", "class.disabled": "disabled", "disabled": "disabled", "attr.aria-disabled": "disabled", "attr.aria-current": "active ? \"page\" : null", "attr.aria-selected": "active || null", "aria-controls": "ariaControls || getAriaControls()", "attr.id": "id || null", "attr.role": "role || null", "attr.tabindex": "active && !disabled ? 0 : -1", "style.--bs-btn-border-radius": "0", "style.--bs-navbar-active-color": "!nav.isTab() ? \"var(\"+(color ? \"--bs-\"+toThemeColor(color)+\"-text-emphasis\" : \"--bs-emphasis-color\")+\")\" : undefined" }, classAttribute: "cute-nav-link nav-link" }, exportAs: ["cuteNavLink"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteNavLink, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `a[cute-nav-link], a[cuteNavLink],
+             button[cute-nav-link], button[cuteNavLink]
+  `,
+                    exportAs: 'cuteNavLink',
+                    host: {
+                        'class': 'cute-nav-link nav-link',
+                        //'[class]': 'color ? "link-"+toThemeColor(color) : undefined',
+                        '[class.active]': 'active',
+                        '[class.disabled]': 'disabled',
+                        '[disabled]': 'disabled',
+                        '[attr.aria-disabled]': 'disabled',
+                        '[attr.aria-current]': 'active ? "page" : null',
+                        '[attr.aria-selected]': 'active || null',
+                        '[aria-controls]': 'ariaControls || getAriaControls()',
+                        '[attr.id]': 'id || null',
+                        '[attr.role]': 'role || null',
+                        '[attr.tabindex]': 'active && !disabled ? 0 : -1',
+                        '[style.--bs-btn-border-radius]': '0', // bootstrap's tab-link already stylized with radius of top angles
+                        '[style.--bs-navbar-active-color]': '!nav.isTab() ? "var("+(color ? "--bs-"+toThemeColor(color)+"-text-emphasis" : "--bs-emphasis-color")+")" : undefined',
+                        '(click)': 'onClick($event)',
+                        //'(touchstart)': 'onTouchStart($event)',
+                    },
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { active: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], ariaControls: [{
+                type: Input,
+                args: ["aria-controls"]
+            }] } });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ */
+/**
+ * Lazy loading content of the `cute-nav-item` element.
+ */
+class CuteNavContent /* extends ... */ {
+    constructor() {
+        this.template = inject(TemplateRef);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteNavContent /* extends ... */, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteNavContent /* extends ... */, isStandalone: true, selector: "ng-template[cuteNavContent], ng-template[cute-nav-content]", exportAs: ["cuteNavContent"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteNavContent /* extends ... */, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[cuteNavContent], ng-template[cute-nav-content]',
+                    exportAs: 'cuteNavContent',
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ */
+let nextId$1 = 0;
+/**
+* Token used to provide a `CuteNavItem` to `CuteNavLink`.
+* Used to avoid circular imports between `CuteNavItem` and `CuteNavLink`.
+*/
+const CUTE_NAV_ITEM = new InjectionToken('CUTE_NAV_ITEM');
+/**
+ * The purpose of this class is to ensure that the list items in the navigation have the correct spacing in **Bootstrap** framework.
+ */
+class CuteNavItem extends CuteLayoutControl {
+    /**
+     * By default, tabs remove their content from the DOM while it's off-screen. Setting this to _true_ will keep it in
+     * the DOM which will prevent elements like `iframes` and `videos` from reloading next time it comes back into the view.
+     */
+    get preserveTabContent() { return this._preserveTabContent || this.nav.preserveTabContent; }
+    set preserveTabContent(value) {
+        this._preserveTabContent = value;
+    }
+    /** Portal that will be the hosted content of the nav */
+    get content() { return this._contentPortal; }
+    /**
+     * Whether the tab/nav is currently active.
+     */
+    get isActive() {
+        return this.navLink?.active || false;
+    }
+    /** Override the `color` setting for Tab control  */
+    get color() { return undefined; /* super.color;*/ }
+    set color(value) {
+        if (this.nav.isTab()) {
+            this.defaultColor = value;
+        }
+        else {
+            super.color = value;
+        }
+    }
+    constructor() {
+        super();
+        // DI
+        this._viewContainerRef = inject(ViewContainerRef);
+        this.nav = inject(CUTE_NAV);
+        /** Nested <ng-template cuteNavContent> projected content */
+        this._navContent = null;
+        this._contentPortal = null;
+        this.role = this.nav.isTab() ? "presentation" : "listitem";
+    }
+    generateId() {
+        // Used as a track id in the @for() loop
+        return `cute-nav-item-${nextId$1++}`;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        const contentTemplate = (this._navContent && this._navContent.template) || this._staticContentTemplate;
+        if (contentTemplate) {
+            this._contentPortal = new TemplatePortal(contentTemplate, this._viewContainerRef);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteNavItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.15", type: CuteNavItem, isStandalone: true, selector: "cute-nav-item, [cute-nav-item], [cuteNavItem]", inputs: { preserveTabContent: ["preserveTabContent", "preserveTabContent", booleanAttribute] }, host: { properties: { "attr.role": "role || null" }, classAttribute: "cute-nav-item nav-item" }, providers: [{ provide: CUTE_NAV_ITEM, useExisting: CuteNavItem }], queries: [{ propertyName: "navLink", first: true, predicate: CuteNavLink, descendants: true }, { propertyName: "_navContent", first: true, predicate: CuteNavContent, descendants: true, static: true }], viewQueries: [{ propertyName: "_staticContentTemplate", first: true, predicate: ["staticContent"], descendants: true, read: TemplateRef, static: true }], exportAs: ["cuteNavItem"], usesInheritance: true, ngImport: i0, template: `
+    <ng-content select="[cute-nav-link], [cuteNavLink]"></ng-content>
+    <ng-content select="[cute-nav-content], [cuteNavContent]"></ng-content>
+    <ng-template #staticContent>
+      <ng-content></ng-content>
+    </ng-template>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteNavItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'cute-nav-item, [cute-nav-item], [cuteNavItem]',
+                    template: `
+    <ng-content select="[cute-nav-link], [cuteNavLink]"></ng-content>
+    <ng-content select="[cute-nav-content], [cuteNavContent]"></ng-content>
+    <ng-template #staticContent>
+      <ng-content></ng-content>
+    </ng-template>
+  `,
+                    exportAs: 'cuteNavItem',
+                    host: {
+                        'class': 'cute-nav-item nav-item',
+                        '[attr.role]': 'role || null',
+                    },
+                    standalone: true,
+                    providers: [{ provide: CUTE_NAV_ITEM, useExisting: CuteNavItem }],
+                    encapsulation: ViewEncapsulation.None,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: () => [], propDecorators: { navLink: [{
+                type: ContentChild,
+                args: [CuteNavLink, { descendants: true }]
+            }], _navContent: [{
+                type: ContentChild,
+                args: [CuteNavContent, { static: true }]
+            }], _staticContentTemplate: [{
+                type: ViewChild,
+                args: ['staticContent', { read: TemplateRef, static: true }]
+            }], preserveTabContent: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ */
+/**
+ * Token used to provide a `CuteNav` to `CuteNavItem` or `CuteNavLink`.
+ * Used to avoid circular imports between `CuteNav` and `CuteNavItem`.
+ */
+const CUTE_NAV = new InjectionToken('CUTE_NAV');
+/** Event emitted when the `nav-link` selection has changed. */
+class CuteNavChangeEvent extends Event {
+    constructor(
+    /** Index of the currently-selected link item. */
+    index, 
+    /** Reference to the currently-selected link item. */
+    link, 
+    /** Index of the previously-selected link item. */
+    fromIndex, 
+    /** Reference to the currently-selected link item. */
+    fromLink, 
+    /** How the link was focused. */
+    origin) {
+        super("navChange");
+        this.index = index;
+        this.link = link;
+        this.fromIndex = fromIndex;
+        this.fromLink = fromLink;
+        this.origin = origin;
+    }
+}
+/** Cancelable event emitted when the current `nav-link` selection is about to change. */
+class CuteNavChangingEvent extends Event {
+    constructor(
+    /** Index of the currently-selected link item. */
+    index, 
+    /** Reference to the currently-selected link item. */
+    link, 
+    /** Index of the previously-selected link item. */
+    fromIndex, 
+    /** Reference to the currently-selected link item. */
+    fromLink, 
+    /** How the link was focused. */
+    origin) {
+        super("navChanging", { cancelable: true });
+        this.index = index;
+        this.link = link;
+        this.fromIndex = fromIndex;
+        this.fromLink = fromLink;
+        this.origin = origin;
+    }
+}
+let nextId = -1;
+/**
+ * The navigation component that is built with `flexbox` and provide a strong foundation for building other types of navigation components.
+ * It includes some style overrides (for working with lists), some _link_ padding for larger hit areas, and basic _disabled_ styling.
+ * @example
+ * ```html
+ * <nav cute-nav alignment="center">
+ *   <a cute-nav-link active href="#">Active</a>
+ *   <a cute-nav-link href="#">Link</a>
+ *   <a cute-nav-link href="#">Link</a>
+ *   <a cute-nav-link disabled>Disabled</a>
+ * </nav>
+ * ```
+ */
+class CuteNav extends CuteLayoutControl {
+    /** Orientation of the navigation items */
+    get orientation() { return this._orientation; }
+    set orientation(value) {
+        if (value !== this._orientation) {
+            this._orientation = value;
+            if (this._keyManager) {
+                if (value == "horizontal") {
+                    this._keyManager.withHorizontalOrientation(this._dir.value);
+                }
+                else {
+                    this._keyManager.withVerticalOrientation(true).withPageUpDown();
+                }
+                this.markForCheck();
+            }
+        }
+    }
+    /** The index of the active link item. */
+    get selectedIndex() { return this._selectedIndex; }
+    set selectedIndex(value) {
+        if (value !== this._selectedIndex) {
+            this._selectedIndexToChange = value;
+            Promise.resolve().then(() => this.activateNavLink(value));
+        }
+    }
+    get classBinding() {
+        let classList = "justify-content-" + this.alignment;
+        switch (this.orientation) {
+            case "vertical":
+                if (this.breakpoint) {
+                    classList += " flex-" + this.breakpoint + "-column";
+                }
+                else {
+                    classList += " flex-column";
+                }
+                break;
+            case "horizontal":
+                if (this.breakpoint) {
+                    // Nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting
+                    // from the small breakpoint.
+                    classList += " flex-column flex-" + this.breakpoint + "-row";
+                }
+                break;
+        }
+        return classList;
+    }
+    constructor() {
+        super();
+        this._destroyRef = inject(DestroyRef);
+        this._dir = inject(Directionality);
+        this._oldFocusLink = null;
+        /** To synchronize selectedIndex and keyManager.activeIndex */
+        this._selectedIndexToChange = null;
+        /** The type of the navigation component */
+        this.navStyle = "base";
+        this._orientation = "horizontal";
+        /** The alignment of navigation items on the main flexbox' axis */
+        this.alignment = "start";
+        /**
+         * Determines how the `cute-nav`'s content is stretched, such as taking up the entire available width (**none**), proportionally (**fill**) or equally (**justified**).
+         * The width is determined by the longest `cute-nav-link`'s label. By default, stretching of items is not used (**none**).
+         */
+        this.stretchItems = "none";
+        /**
+         * By default, tabs remove their content from the DOM while it's off-screen. Setting this to _true_ will keep it in
+         * the DOM which will prevent elements like `iframes` and `videos` from reloading next time it comes back into the view.
+         */
+        this.preserveTabContent = false;
+        /** @deprecated */
+        this.animation = true;
+        /** Should the first not disabled link item be automatically selected if none were activated during initialization. */
+        this.autoSelect = false;
+        this._selectedIndex = null;
+        /** Output to enable support for two-way binding on `[(selectedIndex)]` */
+        this.selectedIndexChange = new EventEmitter();
+        /** Event emitted when the `nav` selection has changed. */
+        this.selectedLinkChange = new EventEmitter();
+        /** Event emitted when the `nav` selection gets changing. */
+        this.selectedLinkChanging = new EventEmitter();
+        /** Event emitted when focus has changed within a `nav`-element. */
+        this.focusChange = new EventEmitter();
+    }
+    generateId() {
+        return `cute-nav-${++nextId}`;
+    }
+    /** Whether the navigation component has a `tab` presentation style. */
+    isTab() {
+        return this.navStyle == "tabs";
+    }
+    /**
+     * Gets an index of the navigation link in the links array.
+     * @param link Navigation link reference
+     * @returns An index of the navigation link or **-1** if it was not found
+     */
+    getNavLinkIndex(link) {
+        return this.navLinks?.toArray().indexOf(link) ?? -1;
+    }
+    /**
+     * Request to activate cute-nav-link element
+     * @param linkToActivate `cute-nav-link` or its index in the links array to activate. Set _null_ for use the currently selected or first `cute-nav-link` in the list.
+     * @param origin (optional) Tells how the element was focused (via the mouse, keyboard, touch, or programmatically). The latter is the default value.
+     * @returns _true_ when succeeded, otherwise _false_.
+     */
+    activateNavLink(linkToActivate, origin = "program") {
+        if (linkToActivate == null) {
+            if (this.selectedIndex != null) {
+                linkToActivate = this.selectedIndex;
+            }
+            else if (this.navLinks) {
+                const firstEnabled = this.navLinks.find(link => !link.disabled);
+                if (firstEnabled) {
+                    linkToActivate = firstEnabled;
+                }
+                else {
+                    return false;
+                }
+            }
+            else {
+                return false;
+            }
+        }
+        if (!this.navLinks || this.navLinks.length == 0) {
+            return false;
+        }
+        if (typeof linkToActivate === "number") {
+            const linkIndex = linkToActivate;
+            linkToActivate = this.navLinks.get(linkIndex) ?? null;
+        }
+        if (!linkToActivate) {
+            return false;
+        }
+        const navLink = linkToActivate;
+        const newIndex = this.getNavLinkIndex(navLink);
+        if (this.selectedIndex == newIndex) {
+            // The link has already been activated
+            this._keyManager?.updateActiveItem(newIndex);
+            return true;
+        }
+        if (newIndex >= 0 && !navLink.disabled) {
+            const oldIndex = this._selectedIndex;
+            const oldLink = oldIndex != null ? this.navLinks.get(oldIndex) ?? null : null;
+            if (oldLink) {
+                // Check before index changing condition
+                const event = new CuteNavChangingEvent(newIndex, navLink, oldIndex, oldLink, origin);
+                this.selectedLinkChanging.emit(event);
+                if (event.defaultPrevented) {
+                    return false;
+                }
+            }
+            this._keyManager?.updateActiveItem(newIndex);
+            this.navLinks.forEach(link => {
+                link.active = false;
+            });
+            navLink.active = true;
+            this._selectedIndexToChange = null;
+            this._selectedIndex = newIndex;
+            this._focusChanged(newIndex, "program");
+            this.selectedIndexChange.emit(newIndex);
+            this.selectedLinkChange.emit(new CuteNavChangeEvent(newIndex, navLink, oldIndex, oldLink, origin));
+            this.markForCheck();
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Link focus changed handler
+     * @param link Source link
+     * @param origin Focus origin
+     */
+    _focusChanged(link, origin) {
+        let linkIndex;
+        if (typeof link === "number") {
+            if (this.isValidLinkIndex(link)) {
+                linkIndex = link;
+                link = this.navLinks.get(linkIndex);
+            }
+            else {
+                // Error
+                return;
+            }
+        }
+        else {
+            linkIndex = this.getNavLinkIndex(link);
+        }
+        if (origin && this._oldFocusLink !== link) {
+            const oldIndex = this._oldFocusLink ? this.getNavLinkIndex(this._oldFocusLink) : null;
+            this.focusChange.emit(new CuteNavChangeEvent(linkIndex, link, oldIndex, this._oldFocusLink, origin));
+            this._oldFocusLink = link;
+        }
+    }
+    /** Whether the specified link index is a valid nav index. */
+    isValidLinkIndex(index) {
+        return this.navLinks != null && (index >= 0 && index < this.navLinks.length);
+    }
+    onKeydown(event) {
+        if (event.code == "Space" || event.code == "Enter") {
+            if (this._keyManager
+                && this._keyManager.activeItemIndex != null
+                && this.selectedIndex != this._keyManager.activeItemIndex) {
+                this.activateNavLink(this._keyManager.activeItemIndex, "keyboard");
+            }
+            event.preventDefault();
+        }
+        else {
+            this._keyManager?.onKeydown(event);
+        }
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        const tagName = this._elementRef.nativeElement.tagName;
+        if (this.isTab() && !this.role && !(tagName.toLowerCase() === "nav")) {
+            this.role = "tablist";
+        }
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        if (this.navLinks) {
+            this._keyManager = new FocusKeyManager(this.navLinks)
+                .withWrap(true)
+                .withHomeAndEnd(true)
+                // Allow focus to land on disabled tabs, as per https://w3c.github.io/aria-practices/#kbd_disabled_controls
+                .skipPredicate(() => false);
+            if (this.orientation == "horizontal") {
+                this._keyManager.withHorizontalOrientation(this._dir.value);
+            }
+            else {
+                this._keyManager.withVerticalOrientation(true).withPageUpDown(true);
+            }
+            // Immediate activation on focus changing
+            this._keyManager.change
+                .pipe(takeUntilDestroyed(this._destroyRef))
+                .subscribe(newIndex => {
+                this._focusChanged(newIndex, "keyboard");
+            });
+            this._keyManager.tabOut
+                .pipe(takeUntilDestroyed(this._destroyRef))
+                .subscribe(() => {
+                if (this.selectedIndex != null) {
+                    this._keyManager?.updateActiveItem(this.selectedIndex);
+                }
+            });
+            if (this._selectedIndexToChange == null && this.autoSelect) {
+                Promise.resolve().then(() => this.activateNavLink(null));
+            }
+        }
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._keyManager?.destroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteNav, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.15", type: CuteNav, isStandalone: true, selector: "[cute-nav], [cuteNav]", inputs: { navStyle: ["cuteNav", "navStyle"], orientation: "orientation", alignment: "alignment", stretchItems: "stretchItems", preserveTabContent: ["preserveTabContent", "preserveTabContent", booleanAttribute], animation: ["animation", "animation", booleanAttribute], autoSelect: ["autoSelect", "autoSelect", booleanAttribute], selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute] }, outputs: { selectedIndexChange: "selectedIndexChange", selectedLinkChange: "selectedLinkChange", selectedLinkChanging: "selectedLinkChanging", focusChange: "focusChange" }, host: { listeners: { "keydown": "onKeydown($event)" }, properties: { "class.nav-tabs": "isTab()", "class.nav-pills": "navStyle==\"pills\"", "class.nav-underline": "navStyle==\"underline\"", "class.nav-fill": "stretchItems==\"fill\"", "class.nav-justified": "stretchItems==\"justified\"", "attr.aria-orientation": "orientation", "attr.role": "role || null", "class": "this.classBinding" }, classAttribute: "cute-nav nav" }, providers: [{ provide: CUTE_NAV, useExisting: CuteNav }], queries: [{ propertyName: "navItems", predicate: CuteNavItem, descendants: true }, { propertyName: "navLinks", predicate: CuteNavLink, descendants: true }], exportAs: ["cuteNav"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteNav, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cute-nav], [cuteNav]',
+                    exportAs: 'cuteNav',
+                    host: {
+                        'class': 'cute-nav nav',
+                        '[class.nav-tabs]': 'isTab()',
+                        '[class.nav-pills]': 'navStyle=="pills"',
+                        '[class.nav-underline]': 'navStyle=="underline"',
+                        '[class.nav-fill]': 'stretchItems=="fill"',
+                        '[class.nav-justified]': 'stretchItems=="justified"',
+                        '[attr.aria-orientation]': 'orientation',
+                        '[attr.role]': 'role || null',
+                        '(keydown)': 'onKeydown($event)',
+                    },
+                    providers: [{ provide: CUTE_NAV, useExisting: CuteNav }],
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { navItems: [{
+                type: ContentChildren,
+                args: [CuteNavItem, { descendants: true }]
+            }], navLinks: [{
+                type: ContentChildren,
+                args: [CuteNavLink, { descendants: true }]
+            }], navStyle: [{
+                type: Input,
+                args: ["cuteNav"]
+            }], orientation: [{
+                type: Input
+            }], alignment: [{
+                type: Input
+            }], stretchItems: [{
+                type: Input
+            }], preserveTabContent: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], animation: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], autoSelect: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], selectedIndex: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], selectedIndexChange: [{
+                type: Output
+            }], selectedLinkChange: [{
+                type: Output
+            }], selectedLinkChanging: [{
+                type: Output
+            }], focusChange: [{
+                type: Output
+            }], classBinding: [{
+                type: HostBinding,
+                args: ["class"]
+            }] } });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ */
+class CuteNavPaneOutlet extends CdkPortalOutlet {
+    constructor() {
+        super();
+        this._pane = inject(forwardRef(() => CuteNavPane));
+        this._pane.show
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => {
+            const panePortal = this._pane.item?.content;
+            if (panePortal && !panePortal.isAttached) {
+                panePortal.attach(this);
+            }
+        });
+        this._pane.hide
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => {
+            const item = this._pane.item;
+            const panePortal = item?.content;
+            if (panePortal && panePortal.isAttached) {
+                if (!item?.preserveTabContent) {
+                    panePortal.detach();
+                }
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteNavPaneOutlet, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteNavPaneOutlet, isStandalone: true, selector: "[cuteNavPaneOutlet]", inputs: { portal: ["cuteNavPaneOutlet", "portal"] }, exportAs: ["cuteNavPaneOutlet"], usesInheritance: true, hostDirectives: [{ directive: i1.CdkScrollable }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteNavPaneOutlet, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cuteNavPaneOutlet]',
+                    exportAs: 'cuteNavPaneOutlet',
+                    inputs: ['portal: cuteNavPaneOutlet'],
+                    hostDirectives: [CdkScrollable],
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [] });
+class CuteNavPane extends CuteLayoutControl {
+    constructor() {
+        super();
+        this._active = false;
+        this._show = false;
+        /** Pane index */
+        this.index = NaN;
+        this.hide = new EventEmitter();
+        this.show = new EventEmitter();
+    }
+    generateId() {
+        return "";
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.id = `${this.item?.nav.id}-pane-${this.index}`;
+        if (this.item) {
+            this._subs = this.item.nav.selectedLinkChange.subscribe(ev => {
+                this._active = (ev.index === this.index);
+                if (this._active) {
+                    this.show.emit();
+                    setTimeout(() => {
+                        this._show = true;
+                        this.markForCheck();
+                    }, getOverallTransitionDuration(this._nativeElement));
+                }
+                else {
+                    this.hide.emit();
+                    this._show = false;
+                }
+                this.markForCheck();
+            });
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        if (this._subs) {
+            this._subs.unsubscribe();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteNavPane, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.15", type: CuteNavPane, isStandalone: true, selector: "[cute-nav-pane], [cuteNavPane]", inputs: { index: ["index", "index", numberAttribute], item: "item" }, outputs: { hide: "hide", show: "show" }, host: { attributes: { "role": "tabpanel" }, properties: { "class.fade": "item.nav.animation", "class.active": "_active", "class.show": "_show", "attr.tabindex": "0", "attr.aria-labelledby": "ariaLabelledby || null" }, classAttribute: "cute-nav-pane tab-pane" }, exportAs: ["cuteNavPane"], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteNavPane, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cute-nav-pane], [cuteNavPane]',
+                    exportAs: 'cuteNavPane',
+                    host: {
+                        'class': 'cute-nav-pane tab-pane',
+                        '[class.fade]': 'item.nav.animation',
+                        '[class.active]': '_active',
+                        '[class.show]': '_show',
+                        '[attr.tabindex]': '0', //'_active ? 0 : -1',
+                        '[attr.aria-labelledby]': 'ariaLabelledby || null',
+                        'role': 'tabpanel',
+                    },
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { index: [{
+                type: Input,
+                args: [{ transform: numberAttribute }]
+            }], item: [{
+                type: Input
+            }], hide: [{
+                type: Output
+            }], show: [{
+                type: Output
+            }] } });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ */
+class CuteNavOutlet /*implements AfterViewChecked*/ {
+    get nav() { return this._nav; }
+    set nav(value) { this._nav = value; }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteNavOutlet /*implements AfterViewChecked*/, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CuteNavOutlet /*implements AfterViewChecked*/, isStandalone: true, selector: "cute-nav-outlet", inputs: { nav: ["for", "nav"] }, host: { classAttribute: "cute-nav-outlet tab-content" }, exportAs: ["cuteNavOutlet"], ngImport: i0, template: `
+      @for (item of nav?.navItems; track item.id; let i=$index) {
+        <div cute-nav-pane
+             [index]="i"
+             [item]="item"
+             [color]="item.defaultColor"
+             [aria-labelledby]="item.navLink?.id || null">
+          <ng-container [cuteNavPaneOutlet]="null"></ng-container>
+        </div>
+      }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: PortalModule }, { kind: "directive", type: CuteNavPane, selector: "[cute-nav-pane], [cuteNavPane]", inputs: ["index", "item"], outputs: ["hide", "show"], exportAs: ["cuteNavPane"] }, { kind: "directive", type: CuteNavPaneOutlet, selector: "[cuteNavPaneOutlet]", inputs: ["cuteNavPaneOutlet"], exportAs: ["cuteNavPaneOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteNavOutlet /*implements AfterViewChecked*/, decorators: [{
+            type: Component,
+            args: [{ selector: 'cute-nav-outlet', exportAs: 'cuteNavOutlet', template: `
+      @for (item of nav?.navItems; track item.id; let i=$index) {
+        <div cute-nav-pane
+             [index]="i"
+             [item]="item"
+             [color]="item.defaultColor"
+             [aria-labelledby]="item.navLink?.id || null">
+          <ng-container [cuteNavPaneOutlet]="null"></ng-container>
+        </div>
+      }
+    `, host: {
+                        'class': 'cute-nav-outlet tab-content'
+                    }, imports: [PortalModule, CuteNavPane, CuteNavPaneOutlet], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }]
+        }], propDecorators: { nav: [{
+                type: Input,
+                args: [{ alias: "for", required: true }]
+            }] } });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ */
+const TYPES = [
+    CuteNav,
+    CuteNavItem,
+    CuteNavLink,
+    CuteNavOutlet,
+    CuteNavContent,
+    CuteNavPane,
+];
+class CuteNavModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: CuteNavModule, imports: [CommonModule, CuteNav,
+            CuteNavItem,
+            CuteNavLink,
+            CuteNavOutlet,
+            CuteNavContent,
+            CuteNavPane], exports: [CuteNav,
+            CuteNavItem,
+            CuteNavLink,
+            CuteNavOutlet,
+            CuteNavContent,
+            CuteNavPane] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteNavModule, imports: [CommonModule, CuteNavOutlet] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteNavModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [CommonModule, ...TYPES],
+                    exports: [TYPES],
+                    providers: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CUTE_NAV, CUTE_NAV_ITEM, CuteNav, CuteNavChangeEvent, CuteNavChangingEvent, CuteNavContent, CuteNavItem, CuteNavLink, CuteNavModule, CuteNavOutlet, CuteNavPane, CuteNavPaneOutlet };
+//# sourceMappingURL=cute-widgets-base-core-nav.mjs.map