ba7e05e2-37c0-44c6-8725-6f617aa0d43e

import { Constructor, InputBoolean, MixinBase, mixinUnsubscribe, ThyUnsubscribe } from 'ngx-tethys/core';
import { ThyPopover } from 'ngx-tethys/popover';
import { merge, Observable, of } from 'rxjs';
import { debounceTime, take, takeUntil, tap } from 'rxjs/operators';
import { useHostRenderer } from '@tethys/cdk/dom';
import {
    AfterContentChecked,
    AfterContentInit,
    AfterViewInit,
    ChangeDetectionStrategy,
    ChangeDetectorRef,
    Component,
    ContentChild,
    ContentChildren,
    ElementRef,
    HostBinding,
    Input,
    NgZone,
    OnChanges,
    OnDestroy,
    OnInit,
    QueryList,
    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 { ThyActionMenuComponent, ThyActionMenuItemDirective, ThyActionMenuItemActiveDirective } from 'ngx-tethys/action-menu';
import { ThyIconComponent } from 'ngx-tethys/icon';
import { NgClass, NgTemplateOutlet, NgIf, NgFor } from '@angular/common';

const _MixinBase: Constructor<ThyUnsubscribe> & typeof MixinBase = mixinUnsubscribe(MixinBase);

export type ThyNavType = 'pulled' | 'tabs' | 'pills' | 'lite' | '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'],
    //如下类型已经废弃
    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,
        NgIf,
        ThyNavItemDirective,
        ThyIconComponent,
        ThyNavInkBarDirective,
        ThyActionMenuComponent,
        NgFor,
        ThyActionMenuItemDirective,
        ThyActionMenuItemActiveDirective,
        BypassSecurityTrustHtmlPipe
    ]
})
export class ThyNavComponent
    extends _MixinBase
    implements OnInit, AfterViewInit, AfterContentInit, AfterContentChecked, OnChanges, OnDestroy
{
    private type: ThyNavType = 'pulled';
    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();

    /**
     * 导航类型
     * @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()
    @InputBoolean()
    thyVertical: boolean;

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

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

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

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

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

    /**
     * @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;

    constructor(
        private elementRef: ElementRef,
        private ngZone: NgZone,
        private changeDetectorRef: ChangeDetectorRef,
        private popover: ThyPopover
    ) {
        super();
    }

    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(
                    takeUntil(this.ngUnsubscribe$),
                    tap(() => {
                        if (this.thyResponsive) {
                            this.resetSizes();
                            this.setHiddenItems();
                            this.calculateMoreIsActive();
                        }
                    })
                )
                .subscribe(() => {
                    this.alignInkBarToSelectedTab();
                });
        });
    }

    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
        };
    }

    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.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'
        });
    }

    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();
        }
    }

    ngOnDestroy() {
        this.ngUnsubscribe$.next();
        this.ngUnsubscribe$.complete();
    }
}

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

atinc / ngx-tethys / ba7e05e2-37c0-44c6-8725-6f617aa0d43e

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