ngx-tethys 19.1.13 → 20.0.0-next.0

package/fesm2022/ngx-tethys-nav.mjs

@@ -18,13 +18,13 @@ import { DomSanitizer } from '@angular/platform-browser';
  */
 class ThyIconNavLink {
     constructor() {
-        this.thyIconNavLinkIcon = input('');
-        this.thyIconNavLinkActive = input(false, { transform: coerceBooleanProperty });
+        this.thyIconNavLinkIcon = input('', ...(ngDevMode ? [{ debugName: "thyIconNavLinkIcon" }] : []));
+        this.thyIconNavLinkActive = input(false, ...(ngDevMode ? [{ debugName: "thyIconNavLinkActive", transform: coerceBooleanProperty }] : [{ 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: { 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"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyIconNavLink, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyIconNavLink, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -36,7 +36,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                     },
                     imports: [ThyIcon]
                 }]
-        }] });
+        }], propDecorators: { thyIconNavLinkIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyIconNavLinkIcon", required: false }] }], thyIconNavLinkActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyIconNavLinkActive", required: false }] }] } });
 
 /**
  * @private
@@ -48,7 +48,7 @@ class ThyIconNav {
     constructor() {
         this.hostRenderer = useHostRenderer();
         this.isIconNav = true;
-        this.thyType = input('');
+        this.thyType = input('', ...(ngDevMode ? [{ debugName: "thyType" }] : []));
         if (typeof ngDevMode === 'undefined' || ngDevMode) {
             warnDeprecation('thy-icon-nav has been deprecated, please use thyAction and thy-space components instead of it');
         }
@@ -56,16 +56,16 @@ class ThyIconNav {
             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: "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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyIconNav, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.10", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyIconNav, decorators: [{
             type: Component,
             args: [{ selector: 'thy-icon-nav', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n" }]
         }], ctorParameters: () => [], propDecorators: { isIconNav: [{
                 type: HostBinding,
                 args: [`class.thy-icon-nav`]
-            }] } });
+            }], thyType: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyType", required: false }] }] } });
 
 /**
  * 导航项
@@ -80,31 +80,31 @@ class ThyNavItemDirective {
         /**
          * 唯一标识
          */
-        this.id = input();
+        this.id = input(...(ngDevMode ? [undefined, { debugName: "id" }] : []));
         /**
          * 是否激活状态
          * @default false
          */
-        this.thyNavItemActive = input(false, { transform: coerceBooleanProperty });
+        this.thyNavItemActive = input(false, ...(ngDevMode ? [{ debugName: "thyNavItemActive", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         /**
          * 已经废弃，请使用 thyNavItemActive
          * @deprecated please use thyNavItemActive
          * @default false
          */
-        this.thyNavLinkActive = input(false, { transform: coerceBooleanProperty });
+        this.thyNavLinkActive = input(false, ...(ngDevMode ? [{ debugName: "thyNavLinkActive", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         /**
          * 是否禁用
          * @default false
          */
-        this.thyNavItemDisabled = input(false, { transform: coerceBooleanProperty });
+        this.thyNavItemDisabled = input(false, ...(ngDevMode ? [{ debugName: "thyNavItemDisabled", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         /**
          * @private
          */
-        this.links = contentChildren(forwardRef(() => ThyNavItemDirective), { descendants: true });
+        this.links = contentChildren(forwardRef(() => ThyNavItemDirective), ...(ngDevMode ? [{ debugName: "links", descendants: true }] : [{ descendants: true }]));
         /**
          * @private
          */
-        this.routers = contentChildren(RouterLinkActive, { descendants: true });
+        this.routers = contentChildren(RouterLinkActive, ...(ngDevMode ? [{ debugName: "routers", descendants: true }] : [{ descendants: true }]));
         // @HostBinding('attr.href') navLinkHref = 'javascript:;';
         this.offset = {
             width: 0,
@@ -153,10 +153,10 @@ class ThyNavItemDirective {
     removeClass(className) {
         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.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyNavItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.3.10", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyNavItemDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[thyNavLink],[thyNavItem]',
@@ -166,7 +166,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         '[class.disabled]': 'thyNavItemDisabled()'
                     }
                 }]
-        }] });
+        }], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], thyNavItemActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyNavItemActive", required: false }] }], thyNavLinkActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyNavLinkActive", required: false }] }], thyNavItemDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyNavItemDisabled", required: false }] }], links: [{ type: i0.ContentChildren, args: [forwardRef(() => ThyNavItemDirective), { ...{ descendants: true }, isSignal: true }] }], routers: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => RouterLinkActive), { ...{ descendants: true }, isSignal: true }] }] } });
 
 /**
  * @internal
@@ -176,9 +176,9 @@ class ThyNavInkBarDirective {
         this.elementRef = inject(ElementRef);
         this.ngZone = inject(NgZone);
         this.animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
-        this.isVertical = input(false, { transform: coerceBooleanProperty });
-        this.showInkBar = input(false, { transform: coerceBooleanProperty });
-        this.animated = computed(() => this.animationMode !== 'NoopAnimations' && this.showInkBar());
+        this.isVertical = input(false, ...(ngDevMode ? [{ debugName: "isVertical", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.showInkBar = input(false, ...(ngDevMode ? [{ debugName: "showInkBar", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
+        this.animated = computed(() => this.animationMode !== 'NoopAnimations' && this.showInkBar(), ...(ngDevMode ? [{ debugName: "animated" }] : []));
     }
     alignToElement(element) {
         this.show();
@@ -222,10 +222,10 @@ class ThyNavInkBarDirective {
     hide() {
         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: "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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyNavInkBarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.10", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyNavInkBarDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'thy-nav-ink-bar, [thyNavInkBar]',
@@ -234,7 +234,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         '[class.thy-nav-ink-bar-animated]': 'animated()'
                     }
                 }]
-        }] });
+        }], propDecorators: { isVertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVertical", required: false }] }], showInkBar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInkBar", required: false }] }] } });
 
 /**
  * @private
@@ -246,10 +246,10 @@ class BypassSecurityTrustHtmlPipe {
     transform(format) {
         return this.sanitizer.bypassSecurityTrustHtml(format);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BypassSecurityTrustHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: BypassSecurityTrustHtmlPipe, isStandalone: true, name: "bypassSecurityTrustHtml" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BypassSecurityTrustHtmlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: BypassSecurityTrustHtmlPipe, isStandalone: true, name: "bypassSecurityTrustHtml" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: BypassSecurityTrustHtmlPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: BypassSecurityTrustHtmlPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'bypassSecurityTrustHtml'
@@ -318,7 +318,7 @@ class ThyNav {
             top: 0
         };
         this.hiddenItems = [];
-        this.showMore = signal(false);
+        this.showMore = signal(false, ...(ngDevMode ? [{ debugName: "showMore" }] : []));
         this.moreBtnOffset = { height: 0, width: 0 };
         this.hostRenderer = useHostRenderer();
         this.locale = injectLocale('nav');
@@ -327,81 +327,81 @@ class ThyNav {
          * @type pulled | tabs | pills | lite | primary | secondary | thirdly | secondary-divider
          * @default pulled
          */
-        this.thyType = input();
+        this.thyType = input(...(ngDevMode ? [undefined, { debugName: "thyType" }] : []));
         /**
          * 导航大小
          * @type lg | md | sm
          * @default md
          */
-        this.thySize = input('md');
+        this.thySize = input('md', ...(ngDevMode ? [{ debugName: "thySize" }] : []));
         /**
          * 水平排列
          * @type '' | 'start' | 'center' | 'end'
          * @default false
          */
-        this.thyHorizontal = input('');
+        this.thyHorizontal = input('', ...(ngDevMode ? [{ debugName: "thyHorizontal" }] : []));
         /**
          * 是否垂直排列
          * @default false
          */
-        this.thyVertical = input(false, { transform: coerceBooleanProperty });
+        this.thyVertical = input(false, ...(ngDevMode ? [{ debugName: "thyVertical", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         /**
          * 是否是填充模式
          */
-        this.thyFill = input(false, { transform: coerceBooleanProperty });
+        this.thyFill = input(false, ...(ngDevMode ? [{ debugName: "thyFill", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         /**
          * 是否响应式，自动计算宽度存放 thyNavItem，并添加更多弹框
          * @default false
          */
-        this.thyResponsive = input(undefined, { transform: coerceBooleanProperty });
+        this.thyResponsive = input(undefined, ...(ngDevMode ? [{ debugName: "thyResponsive", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         /**
          * 支持暂停自适应计算
          */
-        this.thyPauseReCalculate = input(false);
+        this.thyPauseReCalculate = input(false, ...(ngDevMode ? [{ debugName: "thyPauseReCalculate" }] : []));
         /**
          * 更多操作的菜单点击内部是否可关闭
          * @deprecated please use thyPopoverOptions
          */
-        this.thyInsideClosable = input(true, { transform: coerceBooleanProperty });
+        this.thyInsideClosable = input(true, ...(ngDevMode ? [{ debugName: "thyInsideClosable", transform: coerceBooleanProperty }] : [{ transform: coerceBooleanProperty }]));
         /**
          * 更多菜单弹出框的参数，底层使用 Popover 组件
          * @type ThyPopoverConfig
          */
-        this.thyPopoverOptions = input(null);
+        this.thyPopoverOptions = input(null, ...(ngDevMode ? [{ debugName: "thyPopoverOptions" }] : []));
         /**
          * 右侧额外区域模板
          * @type TemplateRef
          */
-        this.thyExtra = input();
+        this.thyExtra = input(...(ngDevMode ? [undefined, { debugName: "thyExtra" }] : []));
         /**
          * @private
          */
-        this.routers = contentChildren(RouterLinkActive, { descendants: true });
+        this.routers = contentChildren(RouterLinkActive, ...(ngDevMode ? [{ debugName: "routers", descendants: true }] : [{ descendants: true }]));
         /**
          * 响应式模式下更多操作模板
          * @type TemplateRef
          */
-        this.moreOperation = contentChild('more');
+        this.moreOperation = contentChild('more', ...(ngDevMode ? [{ debugName: "moreOperation" }] : []));
         /**
          * 响应式模式下更多弹框模板
          * @type TemplateRef
          */
-        this.morePopover = contentChild('morePopover');
+        this.morePopover = contentChild('morePopover', ...(ngDevMode ? [{ debugName: "morePopover" }] : []));
         /**
          * 右侧额外区域模板，支持 thyExtra 传参和 <ng-template #extra></ng-template> 模板
          * @name extra
          * @type TemplateRef
          */
-        this.extra = contentChild('extra');
-        this.defaultMoreOperation = viewChild('moreOperationContainer');
+        this.extra = contentChild('extra', ...(ngDevMode ? [{ debugName: "extra" }] : []));
+        this.defaultMoreOperation = viewChild('moreOperationContainer', ...(ngDevMode ? [{ debugName: "defaultMoreOperation" }] : []));
         this.inkBar = viewChild.required(ThyNavInkBarDirective);
         this.horizontal = computed(() => {
             const horizontalValue = this.thyHorizontal();
             return horizontalValue === 'right' ? 'end' : horizontalValue;
-        });
+        }, ...(ngDevMode ? [{ debugName: "horizontal" }] : []));
         this.prevActiveIndex = NaN;
         this.navSubscription = null;
-        this.type = computed(() => this.thyType() || 'pulled');
+        this.type = computed(() => this.thyType() || 'pulled', ...(ngDevMode ? [{ debugName: "type" }] : []));
         effect(() => {
             this.updateClasses();
         });
@@ -617,10 +617,10 @@ class ThyNav {
             this.navSubscription.unsubscribe();
         }
     }
-    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: 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyNav, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyNav, decorators: [{
             type: Component,
             args: [{ selector: 'thy-nav', host: {
                         '[class.thy-nav]': 'true',
@@ -637,14 +637,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImpor
                         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" }]
-        }], ctorParameters: () => [], propDecorators: { links: [{
+        }], ctorParameters: () => [], propDecorators: { thyType: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyType", required: false }] }], thySize: [{ type: i0.Input, args: [{ isSignal: true, alias: "thySize", required: false }] }], thyHorizontal: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyHorizontal", required: false }] }], thyVertical: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyVertical", required: false }] }], thyFill: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyFill", required: false }] }], thyResponsive: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyResponsive", required: false }] }], thyPauseReCalculate: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyPauseReCalculate", required: false }] }], thyInsideClosable: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyInsideClosable", required: false }] }], thyPopoverOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyPopoverOptions", required: false }] }], thyExtra: [{ type: i0.Input, args: [{ isSignal: true, alias: "thyExtra", required: false }] }], links: [{
                 type: ContentChildren,
                 args: [ThyNavItemDirective, { descendants: true }]
-            }] } });
+            }], routers: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => RouterLinkActive), { ...{ descendants: true }, isSignal: true }] }], moreOperation: [{ type: i0.ContentChild, args: ['more', { isSignal: true }] }], morePopover: [{ type: i0.ContentChild, args: ['morePopover', { isSignal: true }] }], extra: [{ type: i0.ContentChild, args: ['extra', { isSignal: true }] }], defaultMoreOperation: [{ type: i0.ViewChild, args: ['moreOperationContainer', { isSignal: true }] }], inkBar: [{ type: i0.ViewChild, args: [i0.forwardRef(() => ThyNavInkBarDirective), { isSignal: true }] }] } });
 
 class ThyNavModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.8", ngImport: i0, type: ThyNavModule, imports: [CommonModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyNavModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: ThyNavModule, imports: [CommonModule,
             ThyIconModule,
             ThyPopoverModule,
             ThyDropdownModule,
@@ -655,7 +655,7 @@ class ThyNavModule {
             ThyIconNavLink,
             BypassSecurityTrustHtmlPipe,
             ThyNavInkBarDirective], exports: [ThyNav, ThyNavItemDirective, ThyIconNav, ThyIconNavLink, BypassSecurityTrustHtmlPipe] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyNavModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyNavModule, imports: [CommonModule,
             ThyIconModule,
             ThyPopoverModule,
             ThyDropdownModule,
@@ -663,7 +663,7 @@ class ThyNavModule {
             ThyNav,
             ThyIconNavLink] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.8", ngImport: i0, type: ThyNavModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: ThyNavModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [