UNPKG

@kushki/ng-suka

Version:

<p align="center"> <h1 align="center">Suka Components Angular</h1> <p align="center"> An Angular implementation of the Suka Design System </p> </p>

108 lines 7.43 kB
/** * @fileoverview added by tsickle * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ import { Component, ContentChildren, Input, QueryList, ElementRef } from '@angular/core'; import { NavigationItem } from './navigation-item.component'; /** * `SideNavMenu` provides a method to group `SideNavItem`s under a common heading. */ export class NavigationMenu { constructor() { /** * Controls the visibility of the child `SideNavItem`s */ this.expanded = false; this.childrenHeight = 0; } /** * @return {?} */ ngAfterContentInit() { setTimeout((/** * @return {?} */ () => { this.navigationItems.forEach((/** * @param {?} item * @return {?} */ item => { item.isSubMenu = true; })); })); setTimeout((/** * @return {?} */ () => { this.navigationNativeItems.forEach((/** * @param {?} item * @return {?} */ item => { item.nativeElement.children.forEach((/** * @param {?} children * @return {?} */ children => { this.childrenHeight += children.offsetHeight; })); })); })); } /** * @return {?} */ toggle() { this.expanded = !this.expanded; } } NavigationMenu.decorators = [ { type: Component, args: [{ selector: 'suka-navigation-menu', template: ` <li class="navigation__item navigation__item--icon"> <button (click)="toggle()" class="navigation__submenu" aria-haspopup="true" [attr.aria-expanded]="expanded" type="button"> <div class="navigation__icon"> <ng-content select="suka-icon"></ng-content> </div> <span class="navigation__submenu-title">{{title}}</span> <suka-icon icon="chevron-down" class="navigation__submenu-icon"></suka-icon> </button> <ul class="navigation__menu" role="menu" [ngStyle]="{'max-height': expanded ? childrenHeight + 'px' : '0px'}"> <ng-content></ng-content> </ul> </li> ` }] } ]; NavigationMenu.propDecorators = { title: [{ type: Input }], expanded: [{ type: Input }], navigationItems: [{ type: ContentChildren, args: [NavigationItem,] }], navigationNativeItems: [{ type: ContentChildren, args: [NavigationItem, { read: ElementRef },] }] }; if (false) { /** * Heading for the gorup * @type {?} */ NavigationMenu.prototype.title; /** * Controls the visibility of the child `SideNavItem`s * @type {?} */ NavigationMenu.prototype.expanded; /** @type {?} */ NavigationMenu.prototype.navigationItems; /** @type {?} */ NavigationMenu.prototype.navigationNativeItems; /** @type {?} */ NavigationMenu.prototype.childrenHeight; } //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2aWdhdGlvbi1tZW51LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BrdXNoa2kvbmctc3VrYS8iLCJzb3VyY2VzIjpbImxpYi9uYXZpZ2F0aW9uL25hdmlnYXRpb24tbWVudS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFFTCxTQUFTLEVBQ1QsZUFBZSxFQUNmLEtBQUssRUFDTCxTQUFTLEVBQ1QsVUFBVSxFQUNYLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSw2QkFBNkIsQ0FBQzs7OztBQTJCN0QsTUFBTSxPQUFPLGNBQWM7SUF0QjNCOzs7O1FBOEJXLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFLMUIsbUJBQWMsR0FBRyxDQUFDLENBQUM7SUFxQnJCLENBQUM7Ozs7SUFuQkMsa0JBQWtCO1FBQ2hCLFVBQVU7OztRQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksQ0FBQyxlQUFlLENBQUMsT0FBTzs7OztZQUFDLElBQUksQ0FBQyxFQUFFO2dCQUNsQyxJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQztZQUN4QixDQUFDLEVBQUMsQ0FBQztRQUNMLENBQUMsRUFBQyxDQUFDO1FBRUgsVUFBVTs7O1FBQUMsR0FBRyxFQUFFO1lBQ2QsSUFBSSxDQUFDLHFCQUFxQixDQUFDLE9BQU87Ozs7WUFBQyxJQUFJLENBQUMsRUFBRTtnQkFDeEMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsT0FBTzs7OztnQkFBQyxRQUFRLENBQUMsRUFBRTtvQkFDNUMsSUFBSSxDQUFDLGNBQWMsSUFBSSxRQUFRLENBQUMsWUFBWSxDQUFDO2dCQUNoRCxDQUFDLEVBQUMsQ0FBQztZQUNMLENBQUMsRUFBQyxDQUFDO1FBQ0wsQ0FBQyxFQUFDLENBQUM7SUFDTCxDQUFDOzs7O0lBRUQsTUFBTTtRQUNKLElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDO0lBQ2pDLENBQUM7OztZQXZERixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLHNCQUFzQjtnQkFDaEMsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FrQlQ7YUFDRjs7O29CQUtFLEtBQUs7dUJBSUwsS0FBSzs4QkFFTCxlQUFlLFNBQUMsY0FBYztvQ0FDOUIsZUFBZSxTQUFDLGNBQWMsRUFBRSxFQUFFLElBQUksRUFBRSxVQUFVLEVBQUU7Ozs7Ozs7SUFQckQsK0JBQXVCOzs7OztJQUl2QixrQ0FBMEI7O0lBRTFCLHlDQUE0RTs7SUFDNUUsK0NBQW9HOztJQUVwRyx3Q0FBbUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBBZnRlckNvbnRlbnRJbml0LFxuICBDb21wb25lbnQsXG4gIENvbnRlbnRDaGlsZHJlbixcbiAgSW5wdXQsXG4gIFF1ZXJ5TGlzdCxcbiAgRWxlbWVudFJlZlxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE5hdmlnYXRpb25JdGVtIH0gZnJvbSAnLi9uYXZpZ2F0aW9uLWl0ZW0uY29tcG9uZW50JztcblxuLyoqXG4gKiBgU2lkZU5hdk1lbnVgIHByb3ZpZGVzIGEgbWV0aG9kIHRvIGdyb3VwIGBTaWRlTmF2SXRlbWBzIHVuZGVyIGEgY29tbW9uIGhlYWRpbmcuXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3N1a2EtbmF2aWdhdGlvbi1tZW51JyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8bGkgY2xhc3M9XCJuYXZpZ2F0aW9uX19pdGVtIG5hdmlnYXRpb25fX2l0ZW0tLWljb25cIj5cbiAgICAgIDxidXR0b25cbiAgICAgICAgKGNsaWNrKT1cInRvZ2dsZSgpXCJcbiAgICAgICAgY2xhc3M9XCJuYXZpZ2F0aW9uX19zdWJtZW51XCJcbiAgICAgICAgYXJpYS1oYXNwb3B1cD1cInRydWVcIlxuICAgICAgICBbYXR0ci5hcmlhLWV4cGFuZGVkXT1cImV4cGFuZGVkXCJcbiAgICAgICAgdHlwZT1cImJ1dHRvblwiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwibmF2aWdhdGlvbl9faWNvblwiPlxuICAgICAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cInN1a2EtaWNvblwiPjwvbmctY29udGVudD5cbiAgICAgICAgPC9kaXY+XG4gICAgICAgIDxzcGFuIGNsYXNzPVwibmF2aWdhdGlvbl9fc3VibWVudS10aXRsZVwiPnt7dGl0bGV9fTwvc3Bhbj5cbiAgICAgICAgPHN1a2EtaWNvbiBpY29uPVwiY2hldnJvbi1kb3duXCIgY2xhc3M9XCJuYXZpZ2F0aW9uX19zdWJtZW51LWljb25cIj48L3N1a2EtaWNvbj5cbiAgICAgIDwvYnV0dG9uPlxuICAgICAgPHVsIGNsYXNzPVwibmF2aWdhdGlvbl9fbWVudVwiIHJvbGU9XCJtZW51XCIgW25nU3R5bGVdPVwieydtYXgtaGVpZ2h0JzogZXhwYW5kZWQgPyBjaGlsZHJlbkhlaWdodCArICdweCcgOiAnMHB4J31cIj5cbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgICAgPC91bD5cbiAgICA8L2xpPlxuICBgXG59KVxuZXhwb3J0IGNsYXNzIE5hdmlnYXRpb25NZW51IGltcGxlbWVudHMgQWZ0ZXJDb250ZW50SW5pdCB7XG4gIC8qKlxuICAgKiBIZWFkaW5nIGZvciB0aGUgZ29ydXBcbiAgICovXG4gIEBJbnB1dCgpIHRpdGxlOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBDb250cm9scyB0aGUgdmlzaWJpbGl0eSBvZiB0aGUgY2hpbGQgYFNpZGVOYXZJdGVtYHNcbiAgICovXG4gIEBJbnB1dCgpIGV4cGFuZGVkID0gZmFsc2U7XG5cbiAgQENvbnRlbnRDaGlsZHJlbihOYXZpZ2F0aW9uSXRlbSkgbmF2aWdhdGlvbkl0ZW1zOiBRdWVyeUxpc3Q8TmF2aWdhdGlvbkl0ZW0+O1xuICBAQ29udGVudENoaWxkcmVuKE5hdmlnYXRpb25JdGVtLCB7IHJlYWQ6IEVsZW1lbnRSZWYgfSkgbmF2aWdhdGlvbk5hdGl2ZUl0ZW1zOiBRdWVyeUxpc3Q8RWxlbWVudFJlZj47XG5cbiAgY2hpbGRyZW5IZWlnaHQgPSAwO1xuXG4gIG5nQWZ0ZXJDb250ZW50SW5pdCgpIHtcbiAgICBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgIHRoaXMubmF2aWdhdGlvbkl0ZW1zLmZvckVhY2goaXRlbSA9PiB7XG4gICAgICAgIGl0ZW0uaXNTdWJNZW51ID0gdHJ1ZTtcbiAgICAgIH0pO1xuICAgIH0pO1xuXG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICB0aGlzLm5hdmlnYXRpb25OYXRpdmVJdGVtcy5mb3JFYWNoKGl0ZW0gPT4ge1xuICAgICAgICBpdGVtLm5hdGl2ZUVsZW1lbnQuY2hpbGRyZW4uZm9yRWFjaChjaGlsZHJlbiA9PiB7XG4gICAgICAgICAgIHRoaXMuY2hpbGRyZW5IZWlnaHQgKz0gY2hpbGRyZW4ub2Zmc2V0SGVpZ2h0O1xuICAgICAgICB9KTtcbiAgICAgIH0pO1xuICAgIH0pO1xuICB9XG5cbiAgdG9nZ2xlKCkge1xuICAgIHRoaXMuZXhwYW5kZWQgPSAhdGhpcy5leHBhbmRlZDtcbiAgfVxufVxuIl19