d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { ANIMATION_MODULE_TYPE, Directive, ElementRef, Inject, Input, NgZone, Optional } from '@angular/core';
import { InputBoolean } from 'ngx-tethys/core';
import { take } from 'rxjs/operators';

/**
 * @internal
 */
@Directive({
    selector: 'thy-nav-ink-bar, [thyNavInkBar]',
    host: {
        class: 'thy-nav-ink-bar',
        '[class.thy-nav-ink-bar-animated]': 'animated'
    },
    standalone: true
})
export class ThyNavInkBarDirective {
    @Input() @InputBoolean() isVertical: boolean;

    @Input() @InputBoolean() showInkBar: boolean;

    get animated(): boolean {
        return this.animationMode !== 'NoopAnimations' && this.showInkBar;
    }
    constructor(
        private elementRef: ElementRef<HTMLElement>,
        private ngZone: NgZone,
        @Optional() @Inject(ANIMATION_MODULE_TYPE) public animationMode?: string
    ) {}

    public alignToElement(element: HTMLElement): void {
        this.show();
        this.ngZone.run(() => {
            this.ngZone.onStable.pipe(take(1)).subscribe(() => {
                this.setStyles(element);
            });
        });
    }

    private setStyles(element: HTMLElement): void {
        const inkBar: HTMLElement = this.elementRef.nativeElement;
        if (!this.isVertical) {
            inkBar.style.top = '';
            inkBar.style.bottom = '0px';
            inkBar.style.height = '2px';
            inkBar.style.left = this.getLeftPosition(element);
            inkBar.style.width = this.getElementWidth(element);
        } else {
            inkBar.style.left = '';
            inkBar.style.width = '2px';
            inkBar.style.top = this.getTopPosition(element);
            inkBar.style.height = this.getElementHeight(element);
        }
    }

    private getLeftPosition(element: HTMLElement): string {
        return element ? `${element.offsetLeft || 0}px` : '0';
    }

    private getElementWidth(element: HTMLElement): string {
        return element ? `${element.offsetWidth || 0}px` : '0';
    }

    private getTopPosition(element: HTMLElement): string {
        return element ? `${element.offsetTop || 0}px` : '0';
    }

    private getElementHeight(element: HTMLElement): string {
        return element ? `${element.offsetHeight || 0}px` : '0';
    }

    private show() {
        this.elementRef.nativeElement.style.visibility = 'visible';
    }

    public hide() {
        this.elementRef.nativeElement.style.visibility = 'hidden';
    }
}

1	import { ANIMATION_MODULE_TYPE, Directive, ElementRef, Inject, Input, NgZone, Optional } from '@angular/core';
2	import { InputBoolean } from 'ngx-tethys/core';
3	import { take } from 'rxjs/operators';
4
5	/**
6	* @internal
7	*/
8	@Directive({	1✔
9	selector: 'thy-nav-ink-bar, [thyNavInkBar]',
10	host: {	×
11	class: 'thy-nav-ink-bar',
12	'[class.thy-nav-ink-bar-animated]': 'animated'
13	},	×
14	standalone: true	×
15	})	×
16	export class ThyNavInkBarDirective {
17	@Input() @InputBoolean() isVertical: boolean;
18		×
19	@Input() @InputBoolean() showInkBar: boolean;	×
20		×
21	get animated(): boolean {	×
22	return this.animationMode !== 'NoopAnimations' && this.showInkBar;
23	}
24	constructor(
25	private elementRef: ElementRef<HTMLElement>,
26	private ngZone: NgZone,	×
27	@Optional() @Inject(ANIMATION_MODULE_TYPE) public animationMode?: string	×
28	) {}	×
29		×
30	public alignToElement(element: HTMLElement): void {	×
31	this.show();	×
32	this.ngZone.run(() => {	×
33	this.ngZone.onStable.pipe(take(1)).subscribe(() => {
34	this.setStyles(element);
35	});	×
36	});	×
37	}	×
38		×
39	private setStyles(element: HTMLElement): void {
40	const inkBar: HTMLElement = this.elementRef.nativeElement;
41	if (!this.isVertical) {
42	inkBar.style.top = '';	×
43	inkBar.style.bottom = '0px';
44	inkBar.style.height = '2px';
45	inkBar.style.left = this.getLeftPosition(element);	×
46	inkBar.style.width = this.getElementWidth(element);
47	} else {
48	inkBar.style.left = '';	×
49	inkBar.style.width = '2px';
50	inkBar.style.top = this.getTopPosition(element);
51	inkBar.style.height = this.getElementHeight(element);	×
52	}
53	}
54		×
55	private getLeftPosition(element: HTMLElement): string {
56	return element ? `${element.offsetLeft \|\| 0}px` : '0';
57	}	×
58
59	private getElementWidth(element: HTMLElement): string {	1✔
60	return element ? `${element.offsetWidth \|\| 0}px` : '0';
61	}
62
63	private getTopPosition(element: HTMLElement): string {
64	return element ? `${element.offsetTop \|\| 0}px` : '0';	1✔
65	}
66
67	private getElementHeight(element: HTMLElement): string {
68	return element ? `${element.offsetHeight \|\| 0}px` : '0';
69	}	1✔
70
71	private show() {
72	this.elementRef.nativeElement.style.visibility = 'visible';
73	}	1✔
74
75	public hide() {
76	this.elementRef.nativeElement.style.visibility = 'hidden';
77	}	1✔
78	}

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

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