ngx-tethys 19.0.16 → 19.1.0-next.1

package/fesm2022/ngx-tethys-nav.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, HostBinding, Component, inject, ChangeDetectorRef, ChangeDetectionStrategy, ElementRef, NgZone, input, DestroyRef, ContentChildren, forwardRef, Directive, ANIMATION_MODULE_TYPE, Pipe, signal, ViewChild, ContentChild, NgModule } from '@angular/core';
+import { input, Component, effect, HostBinding, ChangeDetectionStrategy, inject, ElementRef, NgZone, contentChildren, forwardRef, DestroyRef, Directive, ANIMATION_MODULE_TYPE, computed, Pipe, ChangeDetectorRef, signal, contentChild, viewChild, ContentChildren, NgModule } from '@angular/core';
 import { ThyIcon, ThyIconModule } from 'ngx-tethys/icon';
 import { coerceBooleanProperty, warnDeprecation } from 'ngx-tethys/util';
 import { useHostRenderer } from '@tethys/cdk/dom';
@@ -8,79 +8,56 @@ import { RouterLinkActive, RouterModule } from '@angular/router';
 import { ThyPopover, ThyPopoverModule } from 'ngx-tethys/popover';
 import { merge, of, Observable } from 'rxjs';
 import { take, startWith, tap } from 'rxjs/operators';
-import { DomSanitizer } from '@angular/platform-browser';
-import { ThyDropdownMenuComponent, ThyDropdownMenuItemDirective, ThyDropdownMenuItemActiveDirective, ThyDropdownModule } from 'ngx-tethys/dropdown';
 import { NgClass, NgTemplateOutlet, CommonModule } from '@angular/common';
+import { ThyDropdownMenuComponent, ThyDropdownMenuItemDirective, ThyDropdownMenuItemActiveDirective, ThyDropdownModule } from 'ngx-tethys/dropdown';
 import { injectLocale } from 'ngx-tethys/i18n';
+import { DomSanitizer } from '@angular/platform-browser';
 
 /**
  * @private
  */
 class ThyIconNavLink {
     constructor() {
-        this.navLinkActive = false;
-        this.navLinkClass = true;
-    }
-    set thyIconNavLinkIcon(icon) {
-        this.icon = icon;
-    }
-    set thyIconNavLinkActive(active) {
-        this.navLinkActive = active;
+        this.thyIconNavLinkIcon = input('');
+        this.thyIconNavLinkActive = input(false, { transform: coerceBooleanProperty });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyIconNavLink, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyIconNavLink, isStandalone: true, selector: "[thyIconNavLink]", inputs: { thyIconNavLinkIcon: "thyIconNavLinkIcon", thyIconNavLinkActive: ["thyIconNavLinkActive", "thyIconNavLinkActive", coerceBooleanProperty] }, host: { properties: { "class.active": "this.navLinkActive", "class.thy-icon-nav-link": "this.navLinkClass" } }, ngImport: i0, template: '<ng-content></ng-content>@if (icon) {<thy-icon [thyIconName]="icon"></thy-icon>}', isInline: true, dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyIconNavLink, isStandalone: true, selector: "[thyIconNavLink]", inputs: { thyIconNavLinkIcon: { classPropertyName: "thyIconNavLinkIcon", publicName: "thyIconNavLinkIcon", isSignal: true, isRequired: false, transformFunction: null }, thyIconNavLinkActive: { classPropertyName: "thyIconNavLinkActive", publicName: "thyIconNavLinkActive", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.active": "thyIconNavLinkActive()", "class.thy-icon-nav-link": "true" } }, ngImport: i0, template: '<ng-content></ng-content>@if (thyIconNavLinkIcon()) {<thy-icon [thyIconName]="thyIconNavLinkIcon()"></thy-icon>}', isInline: true, dependencies: [{ kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyIconNavLink, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
                     selector: '[thyIconNavLink]',
-                    template: '<ng-content></ng-content>@if (icon) {<thy-icon [thyIconName]="icon"></thy-icon>}',
+                    template: '<ng-content></ng-content>@if (thyIconNavLinkIcon()) {<thy-icon [thyIconName]="thyIconNavLinkIcon()"></thy-icon>}',
+                    host: {
+                        '[class.active]': 'thyIconNavLinkActive()',
+                        '[class.thy-icon-nav-link]': 'true'
+                    },
                     imports: [ThyIcon]
                 }]
-        }], propDecorators: { navLinkActive: [{
-                type: HostBinding,
-                args: ['class.active']
-            }], navLinkClass: [{
-                type: HostBinding,
-                args: ['class.thy-icon-nav-link']
-            }], thyIconNavLinkIcon: [{
-                type: Input
-            }], thyIconNavLinkActive: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }] } });
+        }] });
 
 /**
  * @private
  */
 class ThyIconNav {
-    set thyType(type) {
-        this.type = type;
-        this.updateClasses();
-        this.changeDetectorRef.markForCheck();
-    }
-    updateClasses(bypassInitialized) {
-        if (!bypassInitialized && !this.initialized) {
-            return;
-        }
-        this.hostRenderer.updateClass(this.type ? [`thy-icon-nav-${this.type}`] : []);
+    updateClasses() {
+        this.hostRenderer.updateClass(this.thyType() ? [`thy-icon-nav-${this.thyType()}`] : []);
     }
     constructor() {
-        this.changeDetectorRef = inject(ChangeDetectorRef);
-        this.initialized = false;
         this.hostRenderer = useHostRenderer();
         this.isIconNav = true;
+        this.thyType = input('');
         if (typeof ngDevMode === 'undefined' || ngDevMode) {
             warnDeprecation('thy-icon-nav has been deprecated, please use thyAction and thy-space components instead of it');
         }
-    }
-    ngOnInit() {
-        this.initialized = true;
-        this.updateClasses(true);
+        effect(() => {
+            this.updateClasses();
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyIconNav, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.8", type: ThyIconNav, isStandalone: true, selector: "thy-icon-nav", inputs: { thyType: "thyType" }, host: { properties: { "class.thy-icon-nav": "this.isIconNav" } }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.8", type: ThyIconNav, isStandalone: true, selector: "thy-icon-nav", inputs: { thyType: { classPropertyName: "thyType", publicName: "thyType", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.thy-icon-nav": "this.isIconNav" } }, ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyIconNav, decorators: [{
             type: Component,
@@ -88,8 +65,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
         }], ctorParameters: () => [], propDecorators: { isIconNav: [{
                 type: HostBinding,
                 args: [`class.thy-icon-nav`]
-            }], thyType: [{
-                type: Input
             }] } });
 
 /**
@@ -106,6 +81,30 @@ class ThyNavItemDirective {
          * 唯一标识
          */
         this.id = input();
+        /**
+         * 是否激活状态
+         * @default false
+         */
+        this.thyNavItemActive = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 已经废弃，请使用 thyNavItemActive
+         * @deprecated please use thyNavItemActive
+         * @default false
+         */
+        this.thyNavLinkActive = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 是否禁用
+         * @default false
+         */
+        this.thyNavItemDisabled = input(false, { transform: coerceBooleanProperty });
+        /**
+         * @private
+         */
+        this.links = contentChildren(forwardRef(() => ThyNavItemDirective), { descendants: true });
+        /**
+         * @private
+         */
+        this.routers = contentChildren(RouterLinkActive, { descendants: true });
         // @HostBinding('attr.href') navLinkHref = 'javascript:;';
         this.offset = {
             width: 0,
@@ -132,12 +131,13 @@ class ThyNavItemDirective {
         };
     }
     linkIsActive() {
-        return (this.thyNavItemActive ||
-            this.thyNavLinkActive ||
+        const links = this.links();
+        return (this.thyNavItemActive() ||
+            this.thyNavLinkActive() ||
             (this.routerLinkActive && this.routerLinkActive.isActive) ||
-            this.routers.some(router => router.isActive) ||
-            this.links.some(item => item.thyNavItemActive) ||
-            this.links.some(item => item.thyNavLinkActive));
+            this.routers().some(router => router.isActive) ||
+            links.some(item => item.thyNavItemActive()) ||
+            links.some(item => item.thyNavLinkActive()));
     }
     setNavLinkHidden(value) {
         if (value) {
@@ -154,7 +154,7 @@ class ThyNavItemDirective {
         this.hostRenderer.removeClass(className);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyNavItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyNavItemDirective, isStandalone: true, selector: "[thyNavLink],[thyNavItem]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, thyNavItemActive: { classPropertyName: "thyNavItemActive", publicName: "thyNavItemActive", isSignal: false, isRequired: false, transformFunction: coerceBooleanProperty }, thyNavLinkActive: { classPropertyName: "thyNavLinkActive", publicName: "thyNavLinkActive", isSignal: false, isRequired: false, transformFunction: coerceBooleanProperty }, thyNavItemDisabled: { classPropertyName: "thyNavItemDisabled", publicName: "thyNavItemDisabled", isSignal: false, isRequired: false, transformFunction: coerceBooleanProperty } }, host: { properties: { "class.active": "thyNavItemActive || thyNavLinkActive", "class.disabled": "thyNavItemDisabled" }, classAttribute: "thy-nav-item" }, queries: [{ propertyName: "links", predicate: i0.forwardRef(() => ThyNavItemDirective), descendants: true }, { propertyName: "routers", predicate: RouterLinkActive, descendants: true }], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "19.2.8", type: ThyNavItemDirective, isStandalone: true, selector: "[thyNavLink],[thyNavItem]", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, thyNavItemActive: { classPropertyName: "thyNavItemActive", publicName: "thyNavItemActive", isSignal: true, isRequired: false, transformFunction: null }, thyNavLinkActive: { classPropertyName: "thyNavLinkActive", publicName: "thyNavLinkActive", isSignal: true, isRequired: false, transformFunction: null }, thyNavItemDisabled: { classPropertyName: "thyNavItemDisabled", publicName: "thyNavItemDisabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.active": "thyNavItemActive() || thyNavLinkActive()", "class.disabled": "thyNavItemDisabled()" }, classAttribute: "thy-nav-item" }, queries: [{ propertyName: "links", predicate: i0.forwardRef(() => ThyNavItemDirective), descendants: true, isSignal: true }, { propertyName: "routers", predicate: RouterLinkActive, descendants: true, isSignal: true }], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyNavItemDirective, decorators: [{
             type: Directive,
@@ -162,26 +162,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     selector: '[thyNavLink],[thyNavItem]',
                     host: {
                         class: 'thy-nav-item',
-                        '[class.active]': 'thyNavItemActive || thyNavLinkActive',
-                        '[class.disabled]': 'thyNavItemDisabled'
+                        '[class.active]': 'thyNavItemActive() || thyNavLinkActive()',
+                        '[class.disabled]': 'thyNavItemDisabled()'
                     }
                 }]
-        }], propDecorators: { thyNavItemActive: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyNavLinkActive: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyNavItemDisabled: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], links: [{
-                type: ContentChildren,
-                args: [forwardRef(() => ThyNavItemDirective), { descendants: true }]
-            }], routers: [{
-                type: ContentChildren,
-                args: [RouterLinkActive, { descendants: true }]
-            }] } });
+        }] });
 
 /**
  * @internal
@@ -191,9 +176,9 @@ class ThyNavInkBarDirective {
         this.elementRef = inject(ElementRef);
         this.ngZone = inject(NgZone);
         this.animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
-    }
-    get animated() {
-        return this.animationMode !== 'NoopAnimations' && this.showInkBar;
+        this.isVertical = input(false, { transform: coerceBooleanProperty });
+        this.showInkBar = input(false, { transform: coerceBooleanProperty });
+        this.animated = computed(() => this.animationMode !== 'NoopAnimations' && this.showInkBar());
     }
     alignToElement(element) {
         this.show();
@@ -205,7 +190,7 @@ class ThyNavInkBarDirective {
     }
     setStyles(element) {
         const inkBar = this.elementRef.nativeElement;
-        if (!this.isVertical) {
+        if (!this.isVertical()) {
             inkBar.style.top = '';
             inkBar.style.bottom = '0px';
             inkBar.style.height = '2px';
@@ -238,7 +223,7 @@ class ThyNavInkBarDirective {
         this.elementRef.nativeElement.style.visibility = 'hidden';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyNavInkBarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.8", type: ThyNavInkBarDirective, isStandalone: true, selector: "thy-nav-ink-bar, [thyNavInkBar]", inputs: { isVertical: ["isVertical", "isVertical", coerceBooleanProperty], showInkBar: ["showInkBar", "showInkBar", coerceBooleanProperty] }, host: { properties: { "class.thy-nav-ink-bar-animated": "animated" }, classAttribute: "thy-nav-ink-bar" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.8", type: ThyNavInkBarDirective, isStandalone: true, selector: "thy-nav-ink-bar, [thyNavInkBar]", inputs: { isVertical: { classPropertyName: "isVertical", publicName: "isVertical", isSignal: true, isRequired: false, transformFunction: null }, showInkBar: { classPropertyName: "showInkBar", publicName: "showInkBar", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.thy-nav-ink-bar-animated": "animated()" }, classAttribute: "thy-nav-ink-bar" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyNavInkBarDirective, decorators: [{
             type: Directive,
@@ -246,16 +231,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     selector: 'thy-nav-ink-bar, [thyNavInkBar]',
                     host: {
                         class: 'thy-nav-ink-bar',
-                        '[class.thy-nav-ink-bar-animated]': 'animated'
+                        '[class.thy-nav-ink-bar-animated]': 'animated()'
                     }
                 }]
-        }], propDecorators: { isVertical: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], showInkBar: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }] } });
+        }] });
 
 /**
  * @private
@@ -301,14 +280,36 @@ const tabItemRight = 20;
  * @order 10
  */
 class ThyNav {
+    /**
+     * @private
+     */
+    set links(value) {
+        this.innerLinks = value;
+        this.prevActiveIndex = NaN;
+    }
+    get links() {
+        return this.innerLinks;
+    }
+    get showInkBar() {
+        const showTypes = ['pulled', 'tabs'];
+        return showTypes.includes(this.type());
+    }
+    updateClasses() {
+        let classNames = [];
+        if (navTypeClassesMap[this.type()]) {
+            classNames = [...navTypeClassesMap[this.type()]];
+        }
+        if (navSizeClassesMap[this.thySize()]) {
+            classNames.push(navSizeClassesMap[this.thySize()]);
+        }
+        this.hostRenderer.updateClass(classNames);
+    }
     constructor() {
         this.elementRef = inject(ElementRef);
         this.ngZone = inject(NgZone);
         this.changeDetectorRef = inject(ChangeDetectorRef);
         this.popover = inject(ThyPopover);
         this.destroyRef = inject(DestroyRef);
-        this.type = 'pulled';
-        this.size = 'md';
         this.initialized = false;
         this.wrapperOffset = {
             height: 0,
@@ -321,10 +322,38 @@ class ThyNav {
         this.moreBtnOffset = { height: 0, width: 0 };
         this.hostRenderer = useHostRenderer();
         this.locale = injectLocale('nav');
+        /**
+         * 导航类型
+         * @type pulled | tabs | pills | lite | primary | secondary | thirdly | secondary-divider
+         * @default pulled
+         */
+        this.thyType = input();
+        /**
+         * 导航大小
+         * @type lg | md | sm
+         * @default md
+         */
+        this.thySize = input('md');
+        /**
+         * 水平排列
+         * @type '' | 'start' | 'center' | 'end'
+         * @default false
+         */
+        this.thyHorizontal = input('');
+        /**
+         * 是否垂直排列
+         * @default false
+         */
+        this.thyVertical = input(false, { transform: coerceBooleanProperty });
         /**
          * 是否是填充模式
          */
-        this.thyFill = false;
+        this.thyFill = input(false, { transform: coerceBooleanProperty });
+        /**
+         * 是否响应式，自动计算宽度存放 thyNavItem，并添加更多弹框
+         * @default false
+         */
+        this.thyResponsive = input(undefined, { transform: coerceBooleanProperty });
         /**
          * 支持暂停自适应计算
          */
@@ -333,77 +362,57 @@ class ThyNav {
          * 更多操作的菜单点击内部是否可关闭
          * @deprecated please use thyPopoverOptions
          */
-        this.thyInsideClosable = true;
+        this.thyInsideClosable = input(true, { transform: coerceBooleanProperty });
         /**
          * 更多菜单弹出框的参数，底层使用 Popover 组件
          * @type ThyPopoverConfig
          */
         this.thyPopoverOptions = input(null);
+        /**
+         * 右侧额外区域模板
+         * @type TemplateRef
+         */
+        this.thyExtra = input();
+        /**
+         * @private
+         */
+        this.routers = contentChildren(RouterLinkActive, { descendants: true });
+        /**
+         * 响应式模式下更多操作模板
+         * @type TemplateRef
+         */
+        this.moreOperation = contentChild('more');
+        /**
+         * 响应式模式下更多弹框模板
+         * @type TemplateRef
+         */
+        this.morePopover = contentChild('morePopover');
+        /**
+         * 右侧额外区域模板，支持 thyExtra 传参和 <ng-template #extra></ng-template> 模板
+         * @name extra
+         * @type TemplateRef
+         */
+        this.extra = contentChild('extra');
+        this.defaultMoreOperation = viewChild('moreOperationContainer');
+        this.inkBar = viewChild.required(ThyNavInkBarDirective);
+        this.horizontal = computed(() => {
+            const horizontalValue = this.thyHorizontal();
+            return horizontalValue === 'right' ? 'end' : horizontalValue;
+        });
         this.prevActiveIndex = NaN;
         this.navSubscription = null;
-    }
-    /**
-     * 导航类型
-     * @type pulled | tabs | pills | lite | primary | secondary | thirdly | secondary-divider
-     * @default pulled
-     */
-    set thyType(type) {
-        this.type = type || 'pulled';
-        if (this.initialized) {
+        this.type = computed(() => this.thyType() || 'pulled');
+        effect(() => {
             this.updateClasses();
-        }
-    }
-    /**
-     * 导航大小
-     * @type lg | md | sm
-     * @default md
-     */
-    set thySize(size) {
-        this.size = size;
-        if (this.initialized) {
-            this.updateClasses();
-        }
-    }
-    /**
-     * 水平排列
-     * @type '' | 'start' | 'center' | 'end'
-     * @default false
-     */
-    set thyHorizontal(horizontal) {
-        this.horizontal = horizontal === 'right' ? 'end' : horizontal;
-    }
-    /**
-     * @private
-     */
-    set links(value) {
-        this.innerLinks = value;
-        this.prevActiveIndex = NaN;
-    }
-    get links() {
-        return this.innerLinks;
-    }
-    get showInkBar() {
-        const showTypes = ['pulled', 'tabs'];
-        return showTypes.includes(this.type);
-    }
-    updateClasses() {
-        let classNames = [];
-        if (navTypeClassesMap[this.type]) {
-            classNames = [...navTypeClassesMap[this.type]];
-        }
-        if (navSizeClassesMap[this.size]) {
-            classNames.push(navSizeClassesMap[this.size]);
-        }
-        this.hostRenderer.updateClass(classNames);
+        });
     }
     ngOnInit() {
-        if (!this.thyResponsive) {
+        if (!this.thyResponsive()) {
             this.initialized = true;
         }
-        this.updateClasses();
     }
     ngAfterViewInit() {
-        if (this.thyResponsive) {
+        if (this.thyResponsive()) {
             this.setMoreBtnOffset();
             this.ngZone.onStable.pipe(take(1)).subscribe(() => {
                 this.setMoreBtnOffset();
@@ -416,18 +425,18 @@ class ThyNav {
                 if (this.navSubscription) {
                     this.navSubscription.unsubscribe();
                 }
-                this.navSubscription = merge(this.createResizeObserver(this.elementRef.nativeElement), ...this.links.map(item => this.createResizeObserver(item.elementRef.nativeElement).pipe(tap(() => item.setOffset()))), ...(this.routers || []).map(router => router?.isActiveChange))
+                this.navSubscription = merge(this.createResizeObserver(this.elementRef.nativeElement), ...this.links.map(item => this.createResizeObserver(item.elementRef.nativeElement).pipe(tap(() => item.setOffset()))), ...(this.routers() || []).map(router => router?.isActiveChange))
                     .pipe(takeUntilDestroyed(this.destroyRef), tap(() => {
                     if (this.thyPauseReCalculate()) {
                         return;
                     }
-                    if (this.thyResponsive) {
+                    if (this.thyResponsive()) {
                         this.setMoreBtnOffset();
                         this.resetSizes();
                         this.setHiddenItems();
                         this.calculateMoreIsActive();
                     }
-                    if (this.type === 'card') {
+                    if (this.type() === 'card') {
                         this.setNavItemDivider();
                     }
                 }))
@@ -438,7 +447,7 @@ class ThyNav {
         });
     }
     ngAfterContentInit() {
-        if (this.thyResponsive) {
+        if (this.thyResponsive()) {
             this.ngZone.onStable.pipe(take(1)).subscribe(() => {
                 this.resetSizes();
             });
@@ -448,17 +457,18 @@ class ThyNav {
         this.calculateMoreIsActive();
         this.curActiveIndex = this.links && this.links.length ? this.links.toArray().findIndex(item => item.linkIsActive()) : -1;
         if (this.curActiveIndex < 0) {
-            this.inkBar.hide();
+            this.inkBar().hide();
         }
         else if (this.curActiveIndex !== this.prevActiveIndex) {
             this.alignInkBarToSelectedTab();
         }
     }
     setMoreBtnOffset() {
-        const computedStyle = window.getComputedStyle(this.defaultMoreOperation?.nativeElement);
+        const defaultMoreOperation = this.defaultMoreOperation();
+        const computedStyle = window.getComputedStyle(defaultMoreOperation?.nativeElement);
         this.moreBtnOffset = {
-            height: this.defaultMoreOperation?.nativeElement?.offsetHeight + parseFloat(computedStyle?.marginBottom) || 0,
-            width: this.defaultMoreOperation?.nativeElement?.offsetWidth + parseFloat(computedStyle?.marginRight) || 0
+            height: defaultMoreOperation?.nativeElement?.offsetHeight + parseFloat(computedStyle?.marginBottom) || 0,
+            width: defaultMoreOperation?.nativeElement?.offsetWidth + parseFloat(computedStyle?.marginRight) || 0
         };
     }
     setNavItemDivider() {
@@ -500,7 +510,7 @@ class ThyNav {
             this.showMore.set(false);
             return;
         }
-        const endIndex = this.thyVertical ? this.getShowItemsEndIndexWhenVertical(tabs) : this.getShowItemsEndIndexWhenHorizontal(tabs);
+        const endIndex = this.thyVertical() ? this.getShowItemsEndIndexWhenVertical(tabs) : this.getShowItemsEndIndexWhenHorizontal(tabs);
         const showItems = tabs.slice(0, endIndex + 1);
         (showItems || []).forEach(item => {
             item.setNavLinkHidden(false);
@@ -582,18 +592,18 @@ class ThyNav {
     }
     alignInkBarToSelectedTab() {
         if (!this.showInkBar) {
-            this.inkBar.hide();
+            this.inkBar().hide();
             return;
         }
         const tabs = this.links?.toArray() ?? [];
         const selectedItem = tabs.find(item => item.linkIsActive());
         let selectedItemElement = selectedItem && selectedItem.elementRef.nativeElement;
         if (selectedItem && this.moreActive) {
-            selectedItemElement = this.defaultMoreOperation.nativeElement;
+            selectedItemElement = this.defaultMoreOperation().nativeElement;
         }
         if (selectedItemElement) {
             this.prevActiveIndex = this.curActiveIndex;
-            this.inkBar.alignToElement(selectedItemElement);
+            this.inkBar().alignToElement(selectedItemElement);
         }
     }
     ngOnChanges(changes) {
@@ -608,12 +618,14 @@ class ThyNav {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyNav, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyNav, isStandalone: true, selector: "thy-nav", inputs: { thyType: { classPropertyName: "thyType", publicName: "thyType", isSignal: false, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: false, isRequired: false, transformFunction: null }, thyHorizontal: { classPropertyName: "thyHorizontal", publicName: "thyHorizontal", isSignal: false, isRequired: false, transformFunction: null }, thyVertical: { classPropertyName: "thyVertical", publicName: "thyVertical", isSignal: false, isRequired: false, transformFunction: coerceBooleanProperty }, thyFill: { classPropertyName: "thyFill", publicName: "thyFill", isSignal: false, isRequired: false, transformFunction: coerceBooleanProperty }, thyResponsive: { classPropertyName: "thyResponsive", publicName: "thyResponsive", isSignal: false, isRequired: false, transformFunction: coerceBooleanProperty }, thyPauseReCalculate: { classPropertyName: "thyPauseReCalculate", publicName: "thyPauseReCalculate", isSignal: true, isRequired: false, transformFunction: null }, thyInsideClosable: { classPropertyName: "thyInsideClosable", publicName: "thyInsideClosable", isSignal: false, isRequired: false, transformFunction: coerceBooleanProperty }, thyPopoverOptions: { classPropertyName: "thyPopoverOptions", publicName: "thyPopoverOptions", isSignal: true, isRequired: false, transformFunction: null }, thyExtra: { classPropertyName: "thyExtra", publicName: "thyExtra", isSignal: false, isRequired: false, transformFunction: null } }, host: { properties: { "class.thy-nav--vertical": "this.thyVertical", "class.thy-nav--fill": "this.thyFill" }, classAttribute: "thy-nav" }, queries: [{ propertyName: "moreOperation", first: true, predicate: ["more"], descendants: true }, { propertyName: "morePopover", first: true, predicate: ["morePopover"], descendants: true }, { propertyName: "extra", first: true, predicate: ["extra"], descendants: true }, { propertyName: "links", predicate: ThyNavItemDirective, descendants: true }, { propertyName: "routers", predicate: RouterLinkActive, descendants: true }], viewQueries: [{ propertyName: "defaultMoreOperation", first: true, predicate: ["moreOperationContainer"], descendants: true }, { propertyName: "inkBar", first: true, predicate: ThyNavInkBarDirective, descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"thy-nav-list\" [ngClass]=\"horizontal ? 'justify-content-' + horizontal : ''\" #navList>\n  <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  @if (thyResponsive) {\n    <a\n      href=\"javascript:;\"\n      class=\"thy-nav-more-container\"\n      [class.d-none]=\"!showMore()\"\n      [class.invisible]=\"!initialized\"\n      #moreOperationContainer\n      thyNavLink\n      [thyNavItemActive]=\"moreActive\"\n      (click)=\"openMoreMenu($event, navListPopover)\">\n      @if (moreOperation) {\n        <ng-container [ngTemplateOutlet]=\"moreOperation\"></ng-container>\n      } @else {\n        {{ locale().more }}\n        <thy-icon thyIconName=\"angle-down\" class=\"thy-nav-more-icon\"></thy-icon>\n      }\n    </a>\n  }\n  @if (thyExtra || extra) {\n    <div class=\"thy-nav-extra\">\n      <ng-container [ngTemplateOutlet]=\"thyExtra || extra\"></ng-container>\n    </div>\n  }\n  <thy-nav-ink-bar [showInkBar]=\"showInkBar\" [isVertical]=\"thyVertical\"></thy-nav-ink-bar>\n</div>\n\n<ng-template #navListPopover>\n  @if (morePopover) {\n    <ng-container [ngTemplateOutlet]=\"morePopover\" [ngTemplateOutletContext]=\"{ $implicit: hiddenItems }\"></ng-container>\n  } @else {\n    <thy-dropdown-menu thyImmediateRender>\n      @for (item of hiddenItems; track $index) {\n        <span\n          class=\"thy-nav-item-more\"\n          thyDropdownMenuItem\n          [thyDropdownMenuItemActive]=\"item.isActive\"\n          (click)=\"navItemClick(item)\"\n          [innerHTML]=\"item.elementRef.nativeElement.innerHTML | bypassSecurityTrustHtml\"></span>\n      }\n    </thy-dropdown-menu>\n  }\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ThyNavItemDirective, selector: "[thyNavLink],[thyNavItem]", inputs: ["id", "thyNavItemActive", "thyNavLinkActive", "thyNavItemDisabled"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: ThyNavInkBarDirective, selector: "thy-nav-ink-bar, [thyNavInkBar]", inputs: ["isVertical", "showInkBar"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }, { kind: "pipe", type: BypassSecurityTrustHtmlPipe, name: "bypassSecurityTrustHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.8", type: ThyNav, isStandalone: true, selector: "thy-nav", inputs: { thyType: { classPropertyName: "thyType", publicName: "thyType", isSignal: true, isRequired: false, transformFunction: null }, thySize: { classPropertyName: "thySize", publicName: "thySize", isSignal: true, isRequired: false, transformFunction: null }, thyHorizontal: { classPropertyName: "thyHorizontal", publicName: "thyHorizontal", isSignal: true, isRequired: false, transformFunction: null }, thyVertical: { classPropertyName: "thyVertical", publicName: "thyVertical", isSignal: true, isRequired: false, transformFunction: null }, thyFill: { classPropertyName: "thyFill", publicName: "thyFill", isSignal: true, isRequired: false, transformFunction: null }, thyResponsive: { classPropertyName: "thyResponsive", publicName: "thyResponsive", isSignal: true, isRequired: false, transformFunction: null }, thyPauseReCalculate: { classPropertyName: "thyPauseReCalculate", publicName: "thyPauseReCalculate", isSignal: true, isRequired: false, transformFunction: null }, thyInsideClosable: { classPropertyName: "thyInsideClosable", publicName: "thyInsideClosable", isSignal: true, isRequired: false, transformFunction: null }, thyPopoverOptions: { classPropertyName: "thyPopoverOptions", publicName: "thyPopoverOptions", isSignal: true, isRequired: false, transformFunction: null }, thyExtra: { classPropertyName: "thyExtra", publicName: "thyExtra", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.thy-nav": "true", "class.thy-nav--vertical": "thyVertical()", "class.thy-nav--fill": "thyFill()" } }, queries: [{ propertyName: "routers", predicate: RouterLinkActive, descendants: true, isSignal: true }, { propertyName: "moreOperation", first: true, predicate: ["more"], descendants: true, isSignal: true }, { propertyName: "morePopover", first: true, predicate: ["morePopover"], descendants: true, isSignal: true }, { propertyName: "extra", first: true, predicate: ["extra"], descendants: true, isSignal: true }, { propertyName: "links", predicate: ThyNavItemDirective, descendants: true }], viewQueries: [{ propertyName: "defaultMoreOperation", first: true, predicate: ["moreOperationContainer"], descendants: true, isSignal: true }, { propertyName: "inkBar", first: true, predicate: ThyNavInkBarDirective, descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"thy-nav-list\" [ngClass]=\"horizontal() ? 'justify-content-' + horizontal() : ''\" #navList>\n  <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  @if (thyResponsive()) {\n    <a\n      href=\"javascript:;\"\n      class=\"thy-nav-more-container\"\n      [class.d-none]=\"!showMore()\"\n      [class.invisible]=\"!initialized\"\n      #moreOperationContainer\n      thyNavLink\n      [thyNavItemActive]=\"moreActive\"\n      (click)=\"openMoreMenu($event, navListPopover)\">\n      @if (moreOperation()) {\n        <ng-container [ngTemplateOutlet]=\"moreOperation()\"></ng-container>\n      } @else {\n        {{ locale().more }}\n        <thy-icon thyIconName=\"angle-down\" class=\"thy-nav-more-icon\"></thy-icon>\n      }\n    </a>\n  }\n  @if (thyExtra() || extra()) {\n    <div class=\"thy-nav-extra\">\n      <ng-container [ngTemplateOutlet]=\"thyExtra() || extra()\"></ng-container>\n    </div>\n  }\n  <thy-nav-ink-bar [showInkBar]=\"showInkBar\" [isVertical]=\"thyVertical()\"></thy-nav-ink-bar>\n</div>\n\n<ng-template #navListPopover>\n  @if (morePopover()) {\n    <ng-container [ngTemplateOutlet]=\"morePopover()\" [ngTemplateOutletContext]=\"{ $implicit: hiddenItems }\"></ng-container>\n  } @else {\n    <thy-dropdown-menu thyImmediateRender>\n      @for (item of hiddenItems; track $index) {\n        <span\n          class=\"thy-nav-item-more\"\n          thyDropdownMenuItem\n          [thyDropdownMenuItemActive]=\"item.isActive\"\n          (click)=\"navItemClick(item)\"\n          [innerHTML]=\"item.elementRef.nativeElement.innerHTML | bypassSecurityTrustHtml\"></span>\n      }\n    </thy-dropdown-menu>\n  }\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ThyNavItemDirective, selector: "[thyNavLink],[thyNavItem]", inputs: ["id", "thyNavItemActive", "thyNavLinkActive", "thyNavItemDisabled"] }, { kind: "component", type: ThyIcon, selector: "thy-icon, [thy-icon]", inputs: ["thyIconType", "thyTwotoneColor", "thyIconName", "thyIconRotate", "thyIconSet", "thyIconLegging", "thyIconLinearGradient"] }, { kind: "directive", type: ThyNavInkBarDirective, selector: "thy-nav-ink-bar, [thyNavInkBar]", inputs: ["isVertical", "showInkBar"] }, { kind: "component", type: ThyDropdownMenuComponent, selector: "thy-dropdown-menu", inputs: ["thyWidth", "thyImmediateRender"] }, { kind: "directive", type: ThyDropdownMenuItemDirective, selector: "[thyDropdownMenuItem]", inputs: ["thyType", "thyDisabled"] }, { kind: "directive", type: ThyDropdownMenuItemActiveDirective, selector: "[thyDropdownMenuItemActive]", inputs: ["thyDropdownMenuItemActive"] }, { kind: "pipe", type: BypassSecurityTrustHtmlPipe, name: "bypassSecurityTrustHtml" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyNav, decorators: [{
             type: Component,
             args: [{ selector: 'thy-nav', host: {
-                        class: 'thy-nav'
+                        '[class.thy-nav]': 'true',
+                        '[class.thy-nav--vertical]': 'thyVertical()',
+                        '[class.thy-nav--fill]': 'thyFill()'
                     }, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgClass,
                         NgTemplateOutlet,
@@ -624,54 +636,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         ThyDropdownMenuItemDirective,
                         ThyDropdownMenuItemActiveDirective,
                         BypassSecurityTrustHtmlPipe
-                    ], template: "<div class=\"thy-nav-list\" [ngClass]=\"horizontal ? 'justify-content-' + horizontal : ''\" #navList>\n  <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  @if (thyResponsive) {\n    <a\n      href=\"javascript:;\"\n      class=\"thy-nav-more-container\"\n      [class.d-none]=\"!showMore()\"\n      [class.invisible]=\"!initialized\"\n      #moreOperationContainer\n      thyNavLink\n      [thyNavItemActive]=\"moreActive\"\n      (click)=\"openMoreMenu($event, navListPopover)\">\n      @if (moreOperation) {\n        <ng-container [ngTemplateOutlet]=\"moreOperation\"></ng-container>\n      } @else {\n        {{ locale().more }}\n        <thy-icon thyIconName=\"angle-down\" class=\"thy-nav-more-icon\"></thy-icon>\n      }\n    </a>\n  }\n  @if (thyExtra || extra) {\n    <div class=\"thy-nav-extra\">\n      <ng-container [ngTemplateOutlet]=\"thyExtra || extra\"></ng-container>\n    </div>\n  }\n  <thy-nav-ink-bar [showInkBar]=\"showInkBar\" [isVertical]=\"thyVertical\"></thy-nav-ink-bar>\n</div>\n\n<ng-template #navListPopover>\n  @if (morePopover) {\n    <ng-container [ngTemplateOutlet]=\"morePopover\" [ngTemplateOutletContext]=\"{ $implicit: hiddenItems }\"></ng-container>\n  } @else {\n    <thy-dropdown-menu thyImmediateRender>\n      @for (item of hiddenItems; track $index) {\n        <span\n          class=\"thy-nav-item-more\"\n          thyDropdownMenuItem\n          [thyDropdownMenuItemActive]=\"item.isActive\"\n          (click)=\"navItemClick(item)\"\n          [innerHTML]=\"item.elementRef.nativeElement.innerHTML | bypassSecurityTrustHtml\"></span>\n      }\n    </thy-dropdown-menu>\n  }\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n" }]
-        }], propDecorators: { thyType: [{
-                type: Input
-            }], thySize: [{
-                type: Input
-            }], thyHorizontal: [{
-                type: Input
-            }], thyVertical: [{
-                type: HostBinding,
-                args: ['class.thy-nav--vertical']
-            }, {
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyFill: [{
-                type: HostBinding,
-                args: ['class.thy-nav--fill']
-            }, {
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyResponsive: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyInsideClosable: [{
-                type: Input,
-                args: [{ transform: coerceBooleanProperty }]
-            }], thyExtra: [{
-                type: Input
-            }], links: [{
+                    ], template: "<div class=\"thy-nav-list\" [ngClass]=\"horizontal() ? 'justify-content-' + horizontal() : ''\" #navList>\n  <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n  @if (thyResponsive()) {\n    <a\n      href=\"javascript:;\"\n      class=\"thy-nav-more-container\"\n      [class.d-none]=\"!showMore()\"\n      [class.invisible]=\"!initialized\"\n      #moreOperationContainer\n      thyNavLink\n      [thyNavItemActive]=\"moreActive\"\n      (click)=\"openMoreMenu($event, navListPopover)\">\n      @if (moreOperation()) {\n        <ng-container [ngTemplateOutlet]=\"moreOperation()\"></ng-container>\n      } @else {\n        {{ locale().more }}\n        <thy-icon thyIconName=\"angle-down\" class=\"thy-nav-more-icon\"></thy-icon>\n      }\n    </a>\n  }\n  @if (thyExtra() || extra()) {\n    <div class=\"thy-nav-extra\">\n      <ng-container [ngTemplateOutlet]=\"thyExtra() || extra()\"></ng-container>\n    </div>\n  }\n  <thy-nav-ink-bar [showInkBar]=\"showInkBar\" [isVertical]=\"thyVertical()\"></thy-nav-ink-bar>\n</div>\n\n<ng-template #navListPopover>\n  @if (morePopover()) {\n    <ng-container [ngTemplateOutlet]=\"morePopover()\" [ngTemplateOutletContext]=\"{ $implicit: hiddenItems }\"></ng-container>\n  } @else {\n    <thy-dropdown-menu thyImmediateRender>\n      @for (item of hiddenItems; track $index) {\n        <span\n          class=\"thy-nav-item-more\"\n          thyDropdownMenuItem\n          [thyDropdownMenuItemActive]=\"item.isActive\"\n          (click)=\"navItemClick(item)\"\n          [innerHTML]=\"item.elementRef.nativeElement.innerHTML | bypassSecurityTrustHtml\"></span>\n      }\n    </thy-dropdown-menu>\n  }\n</ng-template>\n\n<ng-template #content>\n  <ng-content></ng-content>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { links: [{
                 type: ContentChildren,
                 args: [ThyNavItemDirective, { descendants: true }]
-            }], routers: [{
-                type: ContentChildren,
-                args: [RouterLinkActive, { descendants: true }]
-            }], moreOperation: [{
-                type: ContentChild,
-                args: ['more']
-            }], morePopover: [{
-                type: ContentChild,
-                args: ['morePopover']
-            }], extra: [{
-                type: ContentChild,
-                args: ['extra']
-            }], defaultMoreOperation: [{
-                type: ViewChild,
-                args: ['moreOperationContainer']
-            }], inkBar: [{
-                type: ViewChild,
-                args: [ThyNavInkBarDirective, { static: true }]
             }] } });
 
 class ThyNavModule {