98a452f3-cec8-422e-8edd-b84654bee104

Committed 09 Jan 2025 06:48AM UTC coverage: 90.229% (-0.1%) from 90.355%

Build # 98a452f3-cec8-422e-8edd-b84654bee104

Build Type

Pull #3286

circleci

Committed by

minlovehua

Commit Message

feat(nav): card type support dark theme

Pull Request Pull Request #3286: feat(nav): support card type and support thyIsExtraAppend #TINFR-1358

Run Details

5559 of 6819 branches covered (81.52%)

Branch coverage included in aggregate %.

33 of 34 new or added lines in 2 files covered. (97.06%)

17 existing lines in 2 files now uncovered.

13279 of 14059 relevant lines covered (94.45%)

991.45 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

83.74

/src/nav/nav.component.ts

import { ThyPopover } from 'ngx-tethys/popover';
import { merge, Observable, of } from 'rxjs';
import { debounceTime, take, tap } from 'rxjs/operators';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { useHostRenderer } from '@tethys/cdk/dom';
import {
    AfterContentChecked,
    AfterContentInit,
    AfterViewInit,
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    ContentChild,
    ContentChildren,
    DestroyRef,
    ElementRef,
    HostBinding,
    inject,
    input,
    Input,
    NgZone,
    OnChanges,
    OnInit,
    QueryList,
    Signal,
    SimpleChanges,
    TemplateRef,
    ViewChild
} from '@angular/core';

import { RouterLinkActive } from '@angular/router';
import { ThyNavInkBarDirective } from './nav-ink-bar.directive';
import { ThyNavItemDirective } from './nav-item.directive';
import { BypassSecurityTrustHtmlPipe } from './nav.pipe';
import { ThyDropdownMenuComponent, ThyDropdownMenuItemDirective, ThyDropdownMenuItemActiveDirective } from 'ngx-tethys/dropdown';
import { ThyIcon } from 'ngx-tethys/icon';
import { NgClass, NgTemplateOutlet } from '@angular/common';
import { coerceBooleanProperty } from 'ngx-tethys/util';
import { injectLocale, ThyNavLocale } from 'ngx-tethys/i18n';

export type ThyNavType = 'pulled' | 'tabs' | 'pills' | 'lite' | 'card' | 'primary' | 'secondary' | 'thirdly' | 'secondary-divider';
export type ThyNavSize = 'lg' | 'md' | 'sm';
export type ThyNavHorizontal = '' | 'start' | 'center' | 'end';

const navTypeClassesMap = {
    pulled: ['thy-nav-pulled'],
    tabs: ['thy-nav-tabs'],
    pills: ['thy-nav-pills'],
    lite: ['thy-nav-lite'],
    card: ['thy-nav-card'],
    //如下类型已经废弃
    primary: ['thy-nav-primary'],
    secondary: ['thy-nav-secondary'],
    thirdly: ['thy-nav-thirdly'],
    'secondary-divider': ['thy-nav-secondary-divider']
};

const navSizeClassesMap = {
    lg: 'thy-nav-lg',
    md: 'thy-nav-md',
    sm: 'thy-nav-sm'
};

const tabItemRight = 20;

/**
 * 导航组件
 * @name thy-nav
 * @order 10
 */
@Component({
    selector: 'thy-nav',
    templateUrl: './nav.component.html',
    host: {
        class: 'thy-nav'
    },
    changeDetection: ChangeDetectionStrategy.OnPush,
    standalone: true,
    imports: [
        NgClass,
        NgTemplateOutlet,
        ThyNavItemDirective,
        ThyIcon,
        ThyNavInkBarDirective,
        ThyDropdownMenuComponent,
        ThyDropdownMenuItemDirective,
        ThyDropdownMenuItemActiveDirective,
        BypassSecurityTrustHtmlPipe
    ]
})
export class ThyNav implements OnInit, AfterViewInit, AfterContentInit, AfterContentChecked, OnChanges {
    private elementRef = inject(ElementRef);
    private ngZone = inject(NgZone);
    private changeDetectorRef = inject(ChangeDetectorRef);
    private popover = inject(ThyPopover);

    private readonly destroyRef = inject(DestroyRef);

    public type: ThyNavType = 'pulled';
    public isOpenMore = false;
    private size: ThyNavSize = 'md';
    public initialized = false;

    public horizontal: ThyNavHorizontal;
    public wrapperOffset: { height: number; width: number; left: number; top: number } = {
        height: 0,
        width: 0,
        left: 0,
        top: 0
    };

    public hiddenItems: ThyNavItemDirective[] = [];

    public moreActive: boolean;

    public showMore = true;

    private moreBtnOffset: { height: number; width: number } = { height: 0, width: 0 };

    private hostRenderer = useHostRenderer();

    private innerLinks: QueryList<ThyNavItemDirective>;

    locale: Signal<ThyNavLocale> = injectLocale('nav');

    /**
     * 导航类型
     * @type pulled | tabs | pills | lite | primary | secondary | thirdly | secondary-divider
     * @default pulled
     */
    @Input()
    set thyType(type: ThyNavType) {
        this.type = type || 'pulled';
        if (this.initialized) {
            this.updateClasses();
        }
    }

    /**
     * 导航大小
     * @type lg | md | sm
     * @default md
     */
    @Input()
    set thySize(size: ThyNavSize) {
        this.size = size;
        if (this.initialized) {
            this.updateClasses();
        }
    }

    /**
     * 水平排列
     * @type '' | 'start' | 'center' | 'end'
     * @default false
     */
    @Input()
    set thyHorizontal(horizontal: ThyNavHorizontal) {
        this.horizontal = (horizontal as string) === 'right' ? 'end' : horizontal;
    }

    /**
     * 是否垂直排列
     * @default false
     */
    @HostBinding('class.thy-nav--vertical')
    @Input({ transform: coerceBooleanProperty })
    thyVertical: boolean;

    /**
     * 是否是填充模式
     */
    @HostBinding('class.thy-nav--fill')
    @Input({ transform: coerceBooleanProperty })
    thyFill: boolean = false;

    /**
     * 是否响应式，自动计算宽度存放 thyNavItem，并添加更多弹框
     * @default false
     */
    @Input({ transform: coerceBooleanProperty })
    thyResponsive: boolean;

    /**
     * 更多操作的菜单点击内部是否可关闭
     */
    @Input({ transform: coerceBooleanProperty })
    thyInsideClosable = true;

    /**
     * 右侧额外区域模板
     * @type TemplateRef
     */
    @Input() thyExtra: TemplateRef<unknown>;

    thyIsExtraAppend = input<boolean>(false);

    /**
     * @private
     */
    @ContentChildren(ThyNavItemDirective, { descendants: true })
    set links(value) {
        this.innerLinks = value;
        this.prevActiveIndex = NaN;
    }
    get links(): QueryList<ThyNavItemDirective> {
        return this.innerLinks;
    }

    /**
     * @private
     */
    @ContentChildren(RouterLinkActive, { descendants: true }) routers: QueryList<RouterLinkActive>;

    /**
     * 响应式模式下更多操作模板
     * @type TemplateRef
     */
    @ContentChild('more') moreOperation: TemplateRef<unknown>;

    /**
     * 响应式模式下更多弹框模板
     * @type TemplateRef
     */
    @ContentChild('morePopover') morePopover: TemplateRef<unknown>;

    /**
     * 右侧额外区域模板，支持 thyExtra 传参和 <ng-template #extra></ng-template> 模板
     * @name extra
     * @type TemplateRef
     */
    @ContentChild('extra') extra: TemplateRef<unknown>;

    @ViewChild('moreOperationContainer') defaultMoreOperation: ElementRef<HTMLAnchorElement>;

    @ViewChild(ThyNavInkBarDirective, { static: true }) inkBar!: ThyNavInkBarDirective;

    get showInkBar(): boolean {
        const showTypes: ThyNavType[] = ['pulled', 'tabs'];
        return showTypes.includes(this.type);
    }

    private updateClasses() {
        let classNames: string[] = [];
        if (navTypeClassesMap[this.type]) {
            classNames = [...navTypeClassesMap[this.type]];
        }
        if (navSizeClassesMap[this.size]) {
            classNames.push(navSizeClassesMap[this.size]);
        }
        this.hostRenderer.updateClass(classNames);
    }

    private curActiveIndex: number;

    private prevActiveIndex: number = NaN;

    ngOnInit() {
        if (!this.thyResponsive) {
            this.initialized = true;
        }

        this.updateClasses();
    }

    ngAfterViewInit() {
        if (this.thyResponsive) {
            this.setMoreBtnOffset();
            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
                this.links.toArray().forEach(link => link.setOffset());
                this.setHiddenItems();
            });
        }
        this.ngZone.runOutsideAngular(() => {
            merge(
                this.links.changes,
                this.createResizeObserver(this.elementRef.nativeElement).pipe(debounceTime(100)),
                ...this.links.map(item => this.createResizeObserver(item.elementRef.nativeElement).pipe(debounceTime(100))),
                ...(this.routers || []).map(router => router?.isActiveChange)
            )
                .pipe(
                    takeUntilDestroyed(this.destroyRef),
                    tap(() => {
                        if (this.thyResponsive) {
                            this.resetSizes();
                            this.setHiddenItems();
                            this.calculateMoreIsActive();
                        }
                    })
                )
                .subscribe(() => {
                    this.alignInkBarToSelectedTab();
                });

            if (this.type === 'card') {
                merge(...this.links.map(item => this.createResizeObserver(item.elementRef.nativeElement)))
                    .pipe(takeUntilDestroyed(this.destroyRef))
                    .subscribe(() => {
                        this.setNavItemDivider();
                    });
            }
        });
    }

    ngAfterContentInit(): void {
        if (this.thyResponsive) {
            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
                this.resetSizes();
            });
        }
    }

    ngAfterContentChecked() {
        this.calculateMoreIsActive();

        this.curActiveIndex = this.links && this.links.length ? this.links.toArray().findIndex(item => item.linkIsActive()) : -1;
        if (this.curActiveIndex < 0) {
            this.inkBar.hide();
        } else if (this.curActiveIndex !== this.prevActiveIndex) {
            this.alignInkBarToSelectedTab();
        }
    }

    private setMoreBtnOffset() {
        this.moreBtnOffset = {
            height: this.defaultMoreOperation?.nativeElement?.offsetHeight,
            width: this.defaultMoreOperation?.nativeElement?.offsetWidth
        };
    }

    private setNavItemDivider() {
        const tabs = this.links.toArray();
        const activeIndex = tabs.findIndex(item => item.linkIsActive());
        const rightDividerClass = 'has-right-divider';

        for (let i = 0; i < tabs.length; i++) {
            const isOrdinaryItem = i !== activeIndex && i !== activeIndex - 1 && i !== tabs.length - 1;
            const isMorePreviewItem = this.moreActive && i === activeIndex - 1;
            const isExtraPreviewItem =
                i === tabs.length - 1 && i !== activeIndex && (this.thyExtra || this.extra) && this.thyIsExtraAppend();

            if (isOrdinaryItem || isMorePreviewItem || isExtraPreviewItem) {
                tabs[i].addClass(rightDividerClass);
            } else {
                tabs[i].removeClass(rightDividerClass);
            }
        }
    }

    createResizeObserver(element: HTMLElement) {
        return typeof ResizeObserver === 'undefined'
            ? of(null)
            : new Observable(observer => {
                  const resize = new ResizeObserver(entries => {
                      observer.next(entries);
                  });
                  resize.observe(element);
                  return () => {
                      resize.disconnect();
                  };
              });
    }

    private calculateMoreIsActive() {
        this.moreActive = this.hiddenItems.some(item => {
            return item.linkIsActive();
        });
        this.changeDetectorRef.detectChanges();
    }

    private setHiddenItems() {
        this.moreActive = false;
        const tabs = this.links.toArray();
        if (!tabs.length) {
            this.hiddenItems = [];
            this.showMore = this.hiddenItems.length > 0;
            return;
        }

        const endIndex = this.thyVertical ? this.getShowItemsEndIndexWhenVertical(tabs) : this.getShowItemsEndIndexWhenHorizontal(tabs);

        const showItems = tabs.slice(0, endIndex + 1);
        (showItems || []).forEach(item => {
            item.setNavLinkHidden(false);
        });

        this.hiddenItems = endIndex === tabs.length - 1 ? [] : tabs.slice(endIndex + 1);
        (this.hiddenItems || []).forEach(item => {
            item.setNavLinkHidden(true);
        });

        this.showMore = this.hiddenItems.length > 0;
        this.initialized = true;
    }

    private getShowItemsEndIndexWhenHorizontal(tabs: ThyNavItemDirective[]) {
        const tabsLength = tabs.length;
        let endIndex = tabsLength;
        let totalWidth = 0;

        for (let i = 0; i < tabsLength; i += 1) {
            const _totalWidth = i === tabsLength - 1 ? totalWidth + tabs[i].offset.width : totalWidth + tabs[i].offset.width + tabItemRight;
            if (_totalWidth > this.wrapperOffset.width) {
                let moreOperationWidth = this.moreBtnOffset.width;
                if (totalWidth + moreOperationWidth <= this.wrapperOffset.width) {
                    endIndex = i - 1;
                } else {
                    endIndex = i - 2;
                }
                break;
            } else {
                totalWidth = _totalWidth;
                endIndex = i;
            }
        }
        return endIndex;
    }

    private getShowItemsEndIndexWhenVertical(tabs: ThyNavItemDirective[]) {
        const tabsLength = tabs.length;
        let endIndex = tabsLength;
        let totalHeight = 0;
        for (let i = 0; i < tabsLength; i += 1) {
            const _totalHeight = totalHeight + tabs[i].offset.height;
            if (_totalHeight > this.wrapperOffset.height) {
                let moreOperationHeight = this.moreBtnOffset.height;
                if (totalHeight + moreOperationHeight <= this.wrapperOffset.height) {
                    endIndex = i - 1;
                } else {
                    endIndex = i - 2;
                }
                break;
            } else {
                totalHeight = _totalHeight;
                endIndex = i;
            }
        }
        return endIndex;
    }

    private resetSizes() {
        this.wrapperOffset = {
            height: this.elementRef.nativeElement.offsetHeight || 0,
            width: this.elementRef.nativeElement.offsetWidth || 0,
            left: this.elementRef.nativeElement.offsetLeft || 0,
            top: this.elementRef.nativeElement.offsetTop || 0
        };
    }

    openMore(event: Event, template: TemplateRef<any>) {
        this.isOpenMore = true;
        const popoverRef = this.popover.open(template, {
            origin: event.currentTarget as HTMLElement,
            hasBackdrop: true,
            backdropClosable: true,
            insideClosable: this.thyInsideClosable,
            placement: 'bottom',
            panelClass: 'thy-nav-list-popover',
            originActiveClass: 'thy-nav-origin-active'
        });
        popoverRef.afterClosed().subscribe(() => {
            this.isOpenMore = false;
        });
    }

    navItemClick(item: ThyNavItemDirective) {
        item.elementRef.nativeElement.click();
    }

    private alignInkBarToSelectedTab(): void {
        if (!this.showInkBar) {
            this.inkBar.hide();
            return;
        }
        const tabs = this.links?.toArray() ?? [];
        const selectedItem = tabs.find(item => item.linkIsActive());
        let selectedItemElement: HTMLElement = selectedItem && selectedItem.elementRef.nativeElement;

        if (selectedItem && this.moreActive) {
            selectedItemElement = this.defaultMoreOperation.nativeElement;
        }
        if (selectedItemElement) {
            this.prevActiveIndex = this.curActiveIndex;
            this.inkBar.alignToElement(selectedItemElement);
        }
    }

    ngOnChanges(changes: SimpleChanges): void {
        const { thyVertical, thyType } = changes;

        if (thyType?.currentValue !== thyType?.previousValue || thyVertical?.currentValue !== thyVertical?.previousValue) {
            this.alignInkBarToSelectedTab();
        }
    }
}

1	import { ThyPopover } from 'ngx-tethys/popover';
2	import { merge, Observable, of } from 'rxjs';
3	import { debounceTime, take, tap } from 'rxjs/operators';
4	import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
5	import { useHostRenderer } from '@tethys/cdk/dom';
6	import {
7	AfterContentChecked,
8	AfterContentInit,
9	AfterViewInit,
10	ChangeDetectionStrategy,
11	ChangeDetectorRef,
12	Component,
13	ContentChild,
14	ContentChildren,
15	DestroyRef,
16	ElementRef,
17	HostBinding,
18	inject,
19	input,	1✔
20	Input,
21	NgZone,
22	OnChanges,
23	OnInit,
24	QueryList,
25	Signal,
26	SimpleChanges,
27	TemplateRef,
28	ViewChild
29	} from '@angular/core';
30
31	import { RouterLinkActive } from '@angular/router';	1✔
32	import { ThyNavInkBarDirective } from './nav-ink-bar.directive';
33	import { ThyNavItemDirective } from './nav-item.directive';
34	import { BypassSecurityTrustHtmlPipe } from './nav.pipe';
35	import { ThyDropdownMenuComponent, ThyDropdownMenuItemDirective, ThyDropdownMenuItemActiveDirective } from 'ngx-tethys/dropdown';
36	import { ThyIcon } from 'ngx-tethys/icon';	1✔
37	import { NgClass, NgTemplateOutlet } from '@angular/common';
38	import { coerceBooleanProperty } from 'ngx-tethys/util';
39	import { injectLocale, ThyNavLocale } from 'ngx-tethys/i18n';
40
41	export type ThyNavType = 'pulled' \| 'tabs' \| 'pills' \| 'lite' \| 'card' \| 'primary' \| 'secondary' \| 'thirdly' \| 'secondary-divider';
42	export type ThyNavSize = 'lg' \| 'md' \| 'sm';	1✔
43	export type ThyNavHorizontal = '' \| 'start' \| 'center' \| 'end';
44		50✔
45	const navTypeClassesMap = {	50✔
46	pulled: ['thy-nav-pulled'],	50✔
47	tabs: ['thy-nav-tabs'],	50✔
48	pills: ['thy-nav-pills'],	50✔
49	lite: ['thy-nav-lite'],	50✔
50	card: ['thy-nav-card'],	50✔
51	//如下类型已经废弃	50✔
52	primary: ['thy-nav-primary'],	50✔
53	secondary: ['thy-nav-secondary'],	50✔
54	thirdly: ['thy-nav-thirdly'],
55	'secondary-divider': ['thy-nav-secondary-divider']
56	};
57
58	const navSizeClassesMap = {
59	lg: 'thy-nav-lg',	50✔
60	md: 'thy-nav-md',	50✔
61	sm: 'thy-nav-sm'	50✔
62	};	50✔
63		50✔
64	const tabItemRight = 20;	50✔
65		50✔
66	/**	50✔
67	* 导航组件	50✔
68	* @name thy-nav
69	* @order 10
70	*/	73✔
71	@Component({	73✔
72	selector: 'thy-nav',	23✔
73	templateUrl: './nav.component.html',
74	host: {
75	class: 'thy-nav'
76	},	53✔
77	changeDetection: ChangeDetectionStrategy.OnPush,	53✔
78	standalone: true,	5✔
79	imports: [
80	NgClass,
81	NgTemplateOutlet,
82	ThyNavItemDirective,	22!
83	ThyIcon,
84	ThyNavInkBarDirective,
85	ThyDropdownMenuComponent,	56✔
86	ThyDropdownMenuItemDirective,	56✔
87	ThyDropdownMenuItemActiveDirective,
88	BypassSecurityTrustHtmlPipe
89	]	659✔
90	})
91	export class ThyNav implements OnInit, AfterViewInit, AfterContentInit, AfterContentChecked, OnChanges {
92	private elementRef = inject(ElementRef);	281✔
93	private ngZone = inject(NgZone);	281✔
94	private changeDetectorRef = inject(ChangeDetectorRef);
95	private popover = inject(ThyPopover);
96		78✔
97	private readonly destroyRef = inject(DestroyRef);	78!
98		78✔
99	public type: ThyNavType = 'pulled';
100	public isOpenMore = false;	78✔
101	private size: ThyNavSize = 'md';	48✔
102	public initialized = false;
103		78✔
104	public horizontal: ThyNavHorizontal;
105	public wrapperOffset: { height: number; width: number; left: number; top: number } = {
106	height: 0,	50✔
107	width: 0,	42✔
108	left: 0,
109	top: 0	50✔
110	};
111
112	public hiddenItems: ThyNavItemDirective[] = [];	50✔
113		8✔
114	public moreActive: boolean;	8✔
115		21✔
116	public showMore = true;	8✔
117
118	private moreBtnOffset: { height: number; width: number } = { height: 0, width: 0 };
119		50✔
120	private hostRenderer = useHostRenderer();	140!
121
122	private innerLinks: QueryList<ThyNavItemDirective>;	10✔
123		2✔
124	locale: Signal<ThyNavLocale> = injectLocale('nav');	2✔
125		2✔
126	/**
127	* 导航类型
128	* @type pulled \| tabs \| pills \| lite \| primary \| secondary \| thirdly \| secondary-divider
129	* @default pulled	10✔
130	*/
131	@Input()	50!
UNCOV 132	set thyType(type: ThyNavType) {	×
133	this.type = type \|\| 'pulled';
134	if (this.initialized) {
UNCOV 135	this.updateClasses();	×
136	}
137	}
138
139	/**
140	* 导航大小
141	* @type lg \| md \| sm	50✔
142	* @default md	8✔
143	*/	8✔
144	@Input()
145	set thySize(size: ThyNavSize) {
146	this.size = size;
147	if (this.initialized) {
148	this.updateClasses();	140✔
149	}	215✔
150	}	140✔
151		25✔
152	/**
153	* 水平排列	115✔
154	* @type '' \| 'start' \| 'center' \| 'end'	54✔
155	* @default false
156	*/
157	@Input()
158	set thyHorizontal(horizontal: ThyNavHorizontal) {	8✔
159	this.horizontal = (horizontal as string) === 'right' ? 'end' : horizontal;
160	}
161
162	/**
163	* 是否垂直排列
UNCOV 164	* @default false	×
UNCOV 165	*/	×
UNCOV 166	@HostBinding('class.thy-nav--vertical')	×
UNCOV 167	@Input({ transform: coerceBooleanProperty })	×
UNCOV 168	thyVertical: boolean;	×
UNCOV 169		×
UNCOV 170	/**	×
UNCOV 171	* 是否是填充模式	×
UNCOV 172	*/	×
173	@HostBinding('class.thy-nav--fill')
174	@Input({ transform: coerceBooleanProperty })
UNCOV 175	thyFill: boolean = false;	×
176
177	/**
178	* 是否响应式，自动计算宽度存放 thyNavItem，并添加更多弹框
179	* @default false
180	*/	190!
181	@Input({ transform: coerceBooleanProperty })
182	thyResponsive: boolean;
183		190✔
UNCOV 184	/**	×
185	* 更多操作的菜单点击内部是否可关闭
186	*/	190✔
187	@Input({ transform: coerceBooleanProperty })	190✔
188	thyInsideClosable = true;	190✔
189
190	/**
191	* 右侧额外区域模板
192	* @type TemplateRef
193	*/	142✔
194	@Input() thyExtra: TemplateRef<unknown>;	42✔
195
196	thyIsExtraAppend = input<boolean>(false);	142✔
197
198	/**
199	* @private	10✔
200	*/	10✔
201	@ContentChildren(ThyNavItemDirective, { descendants: true })	10✔
202	set links(value) {	1✔
203	this.innerLinks = value;	1✔
204	this.prevActiveIndex = NaN;	1✔
205	}
206	get links(): QueryList<ThyNavItemDirective> {	9✔
207	return this.innerLinks;	9✔
208	}	9!
209		7✔
210	/**
211	* @private	9!
212	*/	9!
213	@ContentChildren(RouterLinkActive, { descendants: true }) routers: QueryList<RouterLinkActive>;	21✔
214
215	/**	9✔
216	* 响应式模式下更多操作模板	9✔
217	* @type TemplateRef
218	*/
219	@ContentChild('more') moreOperation: TemplateRef<unknown>;	8✔
220		8✔
221	/**	8✔
222	* 响应式模式下更多弹框模板	8✔
223	* @type TemplateRef	21✔
224	*/	21✔
225	@ContentChild('morePopover') morePopover: TemplateRef<unknown>;	8✔
226		8✔
227	/**	1✔
228	* 右侧额外区域模板，支持 thyExtra 传参和 <ng-template #extra></ng-template> 模板
229	* @name extra
230	* @type TemplateRef	7✔
231	*/
232	@ContentChild('extra') extra: TemplateRef<unknown>;	8✔
233
234	@ViewChild('moreOperationContainer') defaultMoreOperation: ElementRef<HTMLAnchorElement>;
235		13✔
236	@ViewChild(ThyNavInkBarDirective, { static: true }) inkBar!: ThyNavInkBarDirective;	13✔
237
238	get showInkBar(): boolean {
239	const showTypes: ThyNavType[] = ['pulled', 'tabs'];	8✔
240	return showTypes.includes(this.type);
241	}
242		1✔
243	private updateClasses() {	1✔
244	let classNames: string[] = [];	1✔
245	if (navTypeClassesMap[this.type]) {	1✔
246	classNames = [...navTypeClassesMap[this.type]];	3✔
247	}	3✔
248	if (navSizeClassesMap[this.size]) {	1✔
249	classNames.push(navSizeClassesMap[this.size]);	1!
UNCOV 250	}	×
251	this.hostRenderer.updateClass(classNames);
252	}
253		1✔
254	private curActiveIndex: number;
255		1✔
256	private prevActiveIndex: number = NaN;
257
258	ngOnInit() {	2✔
259	if (!this.thyResponsive) {	2✔
260	this.initialized = true;
261	}
262		1✔
263	this.updateClasses();
264	}
265		10✔
266	ngAfterViewInit() {	10!
267	if (this.thyResponsive) {	10!
268	this.setMoreBtnOffset();	12✔
269	this.ngZone.onStable.pipe(take(1)).subscribe(() => {	12✔
270	this.links.toArray().forEach(link => link.setOffset());
271	this.setHiddenItems();
272	});
273	}	2✔
274	this.ngZone.runOutsideAngular(() => {	2✔
275	merge(
276	this.links.changes,
277	this.createResizeObserver(this.elementRef.nativeElement).pipe(debounceTime(100)),
278	...this.links.map(item => this.createResizeObserver(item.elementRef.nativeElement).pipe(debounceTime(100))),
279	...(this.routers \|\| []).map(router => router?.isActiveChange)
280	)
281	.pipe(
282	takeUntilDestroyed(this.destroyRef),
283	tap(() => {	2✔
284	if (this.thyResponsive) {	2✔
285	this.resetSizes();
286	this.setHiddenItems();
287	this.calculateMoreIsActive();
288	}	1✔
289	})
290	)
291	.subscribe(() => {	139✔
292	this.alignInkBarToSelectedTab();	16✔
293	});	16✔
294
295	if (this.type === 'card') {	123✔
296	merge(...this.links.map(item => this.createResizeObserver(item.elementRef.nativeElement)))	123✔
297	.pipe(takeUntilDestroyed(this.destroyRef))	123✔
298	.subscribe(() => {	123✔
299	this.setNavItemDivider();	2✔
300	});
301	}	123✔
302	});	72✔
303	}	72✔
304
305	ngAfterContentInit(): void {
306	if (this.thyResponsive) {
307	this.ngZone.onStable.pipe(take(1)).subscribe(() => {	84✔
308	this.resetSizes();	84✔
309	});	75✔
310	}
311	}
312		1✔
313	ngAfterContentChecked() {
314	this.calculateMoreIsActive();
315
316	this.curActiveIndex = this.links && this.links.length ? this.links.toArray().findIndex(item => item.linkIsActive()) : -1;
317	if (this.curActiveIndex < 0) {
318	this.inkBar.hide();
319	} else if (this.curActiveIndex !== this.prevActiveIndex) {
320	this.alignInkBarToSelectedTab();
321	}
322	}
323
324	private setMoreBtnOffset() {
325	this.moreBtnOffset = {
326	height: this.defaultMoreOperation?.nativeElement?.offsetHeight,
327	width: this.defaultMoreOperation?.nativeElement?.offsetWidth
328	};
329	}
330
331	private setNavItemDivider() {	1✔
332	const tabs = this.links.toArray();
333	const activeIndex = tabs.findIndex(item => item.linkIsActive());
334	const rightDividerClass = 'has-right-divider';
335
336	for (let i = 0; i < tabs.length; i++) {
337	const isOrdinaryItem = i !== activeIndex && i !== activeIndex - 1 && i !== tabs.length - 1;
338	const isMorePreviewItem = this.moreActive && i === activeIndex - 1;
339	const isExtraPreviewItem =
340	i === tabs.length - 1 && i !== activeIndex && (this.thyExtra \|\| this.extra) && this.thyIsExtraAppend();
341
342	if (isOrdinaryItem \|\| isMorePreviewItem \|\| isExtraPreviewItem) {
343	tabs[i].addClass(rightDividerClass);
344	} else {
345	tabs[i].removeClass(rightDividerClass);
346	}
347	}
348	}
349
350	createResizeObserver(element: HTMLElement) {
351	return typeof ResizeObserver === 'undefined'
352	? of(null)
353	: new Observable(observer => {
354	const resize = new ResizeObserver(entries => {
355	observer.next(entries);
356	});
357	resize.observe(element);
358	return () => {
359	resize.disconnect();
360	};
361	});
362	}
363
364	private calculateMoreIsActive() {
365	this.moreActive = this.hiddenItems.some(item => {
366	return item.linkIsActive();
367	});
368	this.changeDetectorRef.detectChanges();
369	}
370
371	private setHiddenItems() {
372	this.moreActive = false;
373	const tabs = this.links.toArray();
374	if (!tabs.length) {
375	this.hiddenItems = [];
376	this.showMore = this.hiddenItems.length > 0;
377	return;
378	}
379
380	const endIndex = this.thyVertical ? this.getShowItemsEndIndexWhenVertical(tabs) : this.getShowItemsEndIndexWhenHorizontal(tabs);
381
382	const showItems = tabs.slice(0, endIndex + 1);
383	(showItems \|\| []).forEach(item => {
384	item.setNavLinkHidden(false);
385	});
386
387	this.hiddenItems = endIndex === tabs.length - 1 ? [] : tabs.slice(endIndex + 1);
388	(this.hiddenItems \|\| []).forEach(item => {
389	item.setNavLinkHidden(true);
390	});
391
392	this.showMore = this.hiddenItems.length > 0;
393	this.initialized = true;
394	}
395
396	private getShowItemsEndIndexWhenHorizontal(tabs: ThyNavItemDirective[]) {
397	const tabsLength = tabs.length;
398	let endIndex = tabsLength;
399	let totalWidth = 0;
400
401	for (let i = 0; i < tabsLength; i += 1) {
402	const _totalWidth = i === tabsLength - 1 ? totalWidth + tabs[i].offset.width : totalWidth + tabs[i].offset.width + tabItemRight;
403	if (_totalWidth > this.wrapperOffset.width) {
404	let moreOperationWidth = this.moreBtnOffset.width;
405	if (totalWidth + moreOperationWidth <= this.wrapperOffset.width) {
406	endIndex = i - 1;
407	} else {
408	endIndex = i - 2;
409	}
410	break;
411	} else {
412	totalWidth = _totalWidth;
413	endIndex = i;
414	}
415	}
416	return endIndex;
417	}
418
419	private getShowItemsEndIndexWhenVertical(tabs: ThyNavItemDirective[]) {
420	const tabsLength = tabs.length;
421	let endIndex = tabsLength;
422	let totalHeight = 0;
423	for (let i = 0; i < tabsLength; i += 1) {
424	const _totalHeight = totalHeight + tabs[i].offset.height;
425	if (_totalHeight > this.wrapperOffset.height) {
426	let moreOperationHeight = this.moreBtnOffset.height;
427	if (totalHeight + moreOperationHeight <= this.wrapperOffset.height) {
428	endIndex = i - 1;
429	} else {
430	endIndex = i - 2;
431	}
432	break;
433	} else {
434	totalHeight = _totalHeight;
435	endIndex = i;
436	}
437	}
438	return endIndex;
439	}
440
441	private resetSizes() {
442	this.wrapperOffset = {
443	height: this.elementRef.nativeElement.offsetHeight \|\| 0,
444	width: this.elementRef.nativeElement.offsetWidth \|\| 0,
445	left: this.elementRef.nativeElement.offsetLeft \|\| 0,
446	top: this.elementRef.nativeElement.offsetTop \|\| 0
447	};
448	}
449
450	openMore(event: Event, template: TemplateRef<any>) {
451	this.isOpenMore = true;
452	const popoverRef = this.popover.open(template, {
453	origin: event.currentTarget as HTMLElement,
454	hasBackdrop: true,
455	backdropClosable: true,
456	insideClosable: this.thyInsideClosable,
457	placement: 'bottom',
458	panelClass: 'thy-nav-list-popover',
459	originActiveClass: 'thy-nav-origin-active'
460	});
461	popoverRef.afterClosed().subscribe(() => {
462	this.isOpenMore = false;
463	});
464	}
465
466	navItemClick(item: ThyNavItemDirective) {
467	item.elementRef.nativeElement.click();
468	}
469
470	private alignInkBarToSelectedTab(): void {
471	if (!this.showInkBar) {
472	this.inkBar.hide();
473	return;
474	}
475	const tabs = this.links?.toArray() ?? [];
476	const selectedItem = tabs.find(item => item.linkIsActive());
477	let selectedItemElement: HTMLElement = selectedItem && selectedItem.elementRef.nativeElement;
478
479	if (selectedItem && this.moreActive) {
480	selectedItemElement = this.defaultMoreOperation.nativeElement;
481	}
482	if (selectedItemElement) {
483	this.prevActiveIndex = this.curActiveIndex;
484	this.inkBar.alignToElement(selectedItemElement);
485	}
486	}
487
488	ngOnChanges(changes: SimpleChanges): void {
489	const { thyVertical, thyType } = changes;
490
491	if (thyType?.currentValue !== thyType?.previousValue \|\| thyVertical?.currentValue !== thyVertical?.previousValue) {
492	this.alignInkBarToSelectedTab();
493	}
494	}
495	}

atinc / ngx-tethys / 98a452f3-cec8-422e-8edd-b84654bee104

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous