@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>
125 lines • 7.54 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, HostListener, ElementRef } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
export class TopbarMenu {
/**
* @param {?} domSanitizer
* @param {?} elementRef
*/
constructor(domSanitizer, elementRef) {
this.domSanitizer = domSanitizer;
this.elementRef = elementRef;
this.trigger = 'click';
this.expanded = false;
this._href = 'javascript:void(0)';
}
/**
* @param {?} v
* @return {?}
*/
set href(v) {
this._href = v;
}
/**
* @return {?}
*/
get href() {
return (/** @type {?} */ (this.domSanitizer.bypassSecurityTrustUrl(this._href)));
}
/**
* @return {?}
*/
onClick() {
if (this.trigger === 'click') {
this.expanded = !this.expanded;
}
}
/**
* @return {?}
*/
onMouseOver() {
if (this.trigger === 'mouseover') {
this.expanded = true;
}
}
/**
* @return {?}
*/
onMouseOut() {
if (this.trigger === 'mouseover') {
this.expanded = false;
}
}
/**
* @param {?} event
* @return {?}
*/
onFocusOut(event) {
if (!this.elementRef.nativeElement.contains(event.relatedTarget)) {
this.expanded = false;
}
}
}
TopbarMenu.decorators = [
{ type: Component, args: [{
selector: 'suka-topbar-menu',
template: `
<li
class="topbar__submenu"
style="height: 100%"
>
<a
class="topbar__menu-item topbar__menu-title"
[href]="href"
role="menuitem"
tabindex="0"
aria-haspopup="true"
[attr.aria-expanded]="expanded">
<ng-content></ng-content>
<suka-icon icon="chevron-down" class="topbar__menu-arrow" aria-hidden="true"></suka-icon>
</a>
<ul class="topbar__menu" role="menu">
<ng-content select="suka-topbar-item"></ng-content>
</ul>
</li>
`
}] }
];
/** @nocollapse */
TopbarMenu.ctorParameters = () => [
{ type: DomSanitizer },
{ type: ElementRef }
];
TopbarMenu.propDecorators = {
href: [{ type: Input }],
trigger: [{ type: Input }],
onClick: [{ type: HostListener, args: ['click',] }],
onMouseOver: [{ type: HostListener, args: ['mouseover',] }],
onMouseOut: [{ type: HostListener, args: ['mouseout',] }],
onFocusOut: [{ type: HostListener, args: ['focusout', ['$event'],] }]
};
if (false) {
/** @type {?} */
TopbarMenu.prototype.trigger;
/** @type {?} */
TopbarMenu.prototype.expanded;
/**
* @type {?}
* @protected
*/
TopbarMenu.prototype._href;
/**
* @type {?}
* @protected
*/
TopbarMenu.prototype.domSanitizer;
/**
* @type {?}
* @protected
*/
TopbarMenu.prototype.elementRef;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9wYmFyLW1lbnUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGt1c2hraS9uZy1zdWthLyIsInNvdXJjZXMiOlsibGliL3RvcGJhci90b3BiYXItbWVudS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUNMLFlBQVksRUFDWixVQUFVLEVBQ1gsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBMEJ6RCxNQUFNLE9BQU8sVUFBVTs7Ozs7SUFlckIsWUFBc0IsWUFBMEIsRUFBWSxVQUFzQjtRQUE1RCxpQkFBWSxHQUFaLFlBQVksQ0FBYztRQUFZLGVBQVUsR0FBVixVQUFVLENBQVk7UUFOekUsWUFBTyxHQUEwQixPQUFPLENBQUM7UUFFM0MsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUVkLFVBQUssR0FBRyxvQkFBb0IsQ0FBQztJQUUrQyxDQUFDOzs7OztJQWR2RixJQUFhLElBQUksQ0FBQyxDQUFTO1FBQ3pCLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDO0lBQ2pCLENBQUM7Ozs7SUFFRCxJQUFJLElBQUk7UUFDTixPQUFPLG1CQUFBLElBQUksQ0FBQyxZQUFZLENBQUMsc0JBQXNCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFVLENBQUM7SUFDeEUsQ0FBQzs7OztJQVdELE9BQU87UUFDTCxJQUFJLElBQUksQ0FBQyxPQUFPLEtBQUssT0FBTyxFQUFFO1lBQzVCLElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQyxJQUFJLENBQUMsUUFBUSxDQUFDO1NBQ2hDO0lBQ0gsQ0FBQzs7OztJQUdELFdBQVc7UUFDVCxJQUFJLElBQUksQ0FBQyxPQUFPLEtBQUssV0FBVyxFQUFFO1lBQ2hDLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO1NBQ3RCO0lBQ0gsQ0FBQzs7OztJQUdELFVBQVU7UUFDUixJQUFJLElBQUksQ0FBQyxPQUFPLEtBQUssV0FBVyxFQUFFO1lBQ2hDLElBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO1NBQ3ZCO0lBQ0gsQ0FBQzs7Ozs7SUFHRCxVQUFVLENBQUMsS0FBSztRQUNkLElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLGFBQWEsQ0FBQyxFQUFFO1lBQ2hFLElBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO1NBQ3ZCO0lBQ0gsQ0FBQzs7O1lBbEVGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsa0JBQWtCO2dCQUM1QixRQUFRLEVBQUU7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FtQlQ7YUFDRjs7OztZQXpCUSxZQUFZO1lBRm5CLFVBQVU7OzttQkE2QlQsS0FBSztzQkFRTCxLQUFLO3NCQVFMLFlBQVksU0FBQyxPQUFPOzBCQU9wQixZQUFZLFNBQUMsV0FBVzt5QkFPeEIsWUFBWSxTQUFDLFVBQVU7eUJBT3ZCLFlBQVksU0FBQyxVQUFVLEVBQUUsQ0FBQyxRQUFRLENBQUM7Ozs7SUE3QnBDLDZCQUFrRDs7SUFFbEQsOEJBQXdCOzs7OztJQUV4QiwyQkFBdUM7Ozs7O0lBRTNCLGtDQUFvQzs7Ozs7SUFBRSxnQ0FBZ0MiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIElucHV0LFxuICBIb3N0TGlzdGVuZXIsXG4gIEVsZW1lbnRSZWZcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBEb21TYW5pdGl6ZXIgfSBmcm9tICdAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyJztcblxuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzdWthLXRvcGJhci1tZW51JyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8bGlcbiAgICAgIGNsYXNzPVwidG9wYmFyX19zdWJtZW51XCJcbiAgICAgIHN0eWxlPVwiaGVpZ2h0OiAxMDAlXCJcbiAgICA+XG4gICAgICA8YVxuICAgICAgICBjbGFzcz1cInRvcGJhcl9fbWVudS1pdGVtIHRvcGJhcl9fbWVudS10aXRsZVwiXG4gICAgICAgIFtocmVmXT1cImhyZWZcIlxuICAgICAgICByb2xlPVwibWVudWl0ZW1cIlxuICAgICAgICB0YWJpbmRleD1cIjBcIlxuICAgICAgICBhcmlhLWhhc3BvcHVwPVwidHJ1ZVwiXG4gICAgICAgIFthdHRyLmFyaWEtZXhwYW5kZWRdPVwiZXhwYW5kZWRcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgICAgICA8c3VrYS1pY29uIGljb249XCJjaGV2cm9uLWRvd25cIiBjbGFzcz1cInRvcGJhcl9fbWVudS1hcnJvd1wiIGFyaWEtaGlkZGVuPVwidHJ1ZVwiPjwvc3VrYS1pY29uPlxuICAgICAgPC9hPlxuICAgICAgPHVsIGNsYXNzPVwidG9wYmFyX19tZW51XCIgcm9sZT1cIm1lbnVcIj5cbiAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwic3VrYS10b3BiYXItaXRlbVwiPjwvbmctY29udGVudD5cbiAgICAgIDwvdWw+XG4gICAgPC9saT5cbiAgYFxufSlcbmV4cG9ydCBjbGFzcyBUb3BiYXJNZW51IHtcbiAgQElucHV0KCkgc2V0IGhyZWYodjogc3RyaW5nKSB7XG4gICAgdGhpcy5faHJlZiA9IHY7XG4gIH1cblxuICBnZXQgaHJlZigpIHtcbiAgICByZXR1cm4gdGhpcy5kb21TYW5pdGl6ZXIuYnlwYXNzU2VjdXJpdHlUcnVzdFVybCh0aGlzLl9ocmVmKSBhcyBzdHJpbmc7XG4gIH1cblxuICBASW5wdXQoKSB0cmlnZ2VyOiAnY2xpY2snIHwgJ21vdXNlb3ZlcicgPSAnY2xpY2snO1xuXG4gIHB1YmxpYyBleHBhbmRlZCA9IGZhbHNlO1xuXG4gIHByb3RlY3RlZCBfaHJlZiA9ICdqYXZhc2NyaXB0OnZvaWQoMCknO1xuXG4gIGNvbnN0cnVjdG9yKHByb3RlY3RlZCBkb21TYW5pdGl6ZXI6IERvbVNhbml0aXplciwgcHJvdGVjdGVkIGVsZW1lbnRSZWY6IEVsZW1lbnRSZWYpIHsgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2NsaWNrJylcbiAgb25DbGljaygpIHtcbiAgICBpZiAodGhpcy50cmlnZ2VyID09PSAnY2xpY2snKSB7XG4gICAgICB0aGlzLmV4cGFuZGVkID0gIXRoaXMuZXhwYW5kZWQ7XG4gICAgfVxuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignbW91c2VvdmVyJylcbiAgb25Nb3VzZU92ZXIoKSB7XG4gICAgaWYgKHRoaXMudHJpZ2dlciA9PT0gJ21vdXNlb3ZlcicpIHtcbiAgICAgIHRoaXMuZXhwYW5kZWQgPSB0cnVlO1xuICAgIH1cbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ21vdXNlb3V0JylcbiAgb25Nb3VzZU91dCgpIHtcbiAgICBpZiAodGhpcy50cmlnZ2VyID09PSAnbW91c2VvdmVyJykge1xuICAgICAgdGhpcy5leHBhbmRlZCA9IGZhbHNlO1xuICAgIH1cbiAgfVxuXG4gIEBIb3N0TGlzdGVuZXIoJ2ZvY3Vzb3V0JywgWyckZXZlbnQnXSlcbiAgb25Gb2N1c091dChldmVudCkge1xuICAgIGlmICghdGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQuY29udGFpbnMoZXZlbnQucmVsYXRlZFRhcmdldCkpIHtcbiAgICAgIHRoaXMuZXhwYW5kZWQgPSBmYWxzZTtcbiAgICB9XG4gIH1cbn1cbiJdfQ==