Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | 1x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 4x 1x 1x 1x 1x 1x 1x 1x 1x 1x 2x 1x 1x 3x 3x 3x 3x | import { AfterContentInit, ChangeDetectionStrategy, Component, HostBinding, Injector, Input, OnInit } from '@angular/core';
import { TamuAbstractBaseComponent } from '../../shared/tl-abstract-base.component';
import { TlMegaMenuComponent } from '../tl-mega-menu.component';
@Component({
selector: 'tl-mega-menu-section-component',
templateUrl: './tl-mega-menu-section.component.html',
styleUrls: ['./tl-mega-menu-section.component.scss'],
changeDetection: ChangeDetectionStrategy.Default
})
export class TlMegaMenuSectionComponent extends TamuAbstractBaseComponent implements AfterContentInit, OnInit {
private parent: TlMegaMenuComponent;
/** Toggles the mobile-layout class on the root element. */
@HostBinding('class.mobile-layout') mobileLayout = this.isMobileLayout;
/** Allows for the override of the --tl-mobile-display-wvr-nav-list-component-max-height variable. */
@HostBinding('style.--wvr-nav-list-component-max-height') wvrNavListComponentMaxHeight: string;
/** The text value to be displayed as section title in the tl-mega-menu dropdown menu. */
@Input() sectionTitle = 'Section Title';
/** The href value for the view all button. */
@Input() viewAllHref: string;
active = false;
// tslint:disable-next-line:unnecessary-constructor
constructor(injector: Injector) {
super(injector);
}
ngOnInit(): void {
super.ngOnInit();
const elem = this.eRef.nativeElement as HTMLElement;
const parentElem = elem.closest('tl-mega-menu');
Iif (parentElem) {
this.parent = this.componentRegistry.getComponentByElement(parentElem as HTMLElement) as TlMegaMenuComponent;
} else {
console.warn(`TlMegaMenuSectionComponent (${this.id}) is not within a TlMegaMenuComponent`);
}
}
ngAfterContentInit(): void {
super.ngAfterContentInit();
setTimeout(() => {
this.parent.addSection(this);
}, 1500);
}
open(): void {
// tslint:disable-next-line: radix
let mobileDisplayMaxHeight = parseInt(this.parent.mobileDisplayMaxHeight.replace('px', ''));
mobileDisplayMaxHeight += this.getExpandedHeight();
this.active = true;
this.parent.mobileDisplayMaxHeight = `${mobileDisplayMaxHeight}px`;
this.wvrNavListComponentMaxHeight = `${this.getExpandedHeight()}px`;
}
close(): void {
// tslint:disable-next-line: radix
let mobileDisplayMaxHeight = parseInt(this.parent.mobileDisplayMaxHeight.replace('px', ''));
this.active = false;
mobileDisplayMaxHeight -= this.getExpandedHeight();
this.parent.mobileDisplayMaxHeight = `${mobileDisplayMaxHeight}px`;
}
toggleOpenClose(): void {
if (this.active) {
this.close();
} else {
this.open();
}
}
getElementHeight(): number {
return (this.eRef.nativeElement as HTMLElement).clientHeight;
}
getExpandedHeight(): number {
const elem = (this.eRef.nativeElement as HTMLElement);
const lis = elem.querySelectorAll('tl-nav-li');
const liHeight = lis.length ? lis[0].clientHeight : 0;
return lis.length * liHeight;
}
}
|