@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>
121 lines • 8.23 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';
var TopbarMenu = /** @class */ (function () {
function TopbarMenu(domSanitizer, elementRef) {
this.domSanitizer = domSanitizer;
this.elementRef = elementRef;
this.trigger = 'click';
this.expanded = false;
this._href = 'javascript:void(0)';
}
Object.defineProperty(TopbarMenu.prototype, "href", {
get: /**
* @return {?}
*/
function () {
return (/** @type {?} */ (this.domSanitizer.bypassSecurityTrustUrl(this._href)));
},
set: /**
* @param {?} v
* @return {?}
*/
function (v) {
this._href = v;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
TopbarMenu.prototype.onClick = /**
* @return {?}
*/
function () {
if (this.trigger === 'click') {
this.expanded = !this.expanded;
}
};
/**
* @return {?}
*/
TopbarMenu.prototype.onMouseOver = /**
* @return {?}
*/
function () {
if (this.trigger === 'mouseover') {
this.expanded = true;
}
};
/**
* @return {?}
*/
TopbarMenu.prototype.onMouseOut = /**
* @return {?}
*/
function () {
if (this.trigger === 'mouseover') {
this.expanded = false;
}
};
/**
* @param {?} event
* @return {?}
*/
TopbarMenu.prototype.onFocusOut = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (!this.elementRef.nativeElement.contains(event.relatedTarget)) {
this.expanded = false;
}
};
TopbarMenu.decorators = [
{ type: Component, args: [{
selector: 'suka-topbar-menu',
template: "\n <li\n class=\"topbar__sub-menu\"\n style=\"height: 100%\"\n >\n <a\n class=\"topbar__menu-item topbar__menu-title\"\n [href]=\"href\"\n role=\"menuitem\"\n tabindex=\"0\"\n aria-haspopup=\"true\"\n [attr.aria-expanded]=\"expanded\">\n <ng-content></ng-content>\n <suka-icon icon=\"chevron-down\" class=\"topbar__menu-arrow\" aria-hidden=\"true\"></suka-icon>\n </a>\n <ul class=\"topbar__menu\" role=\"menu\">\n <ng-content select=\"suka-topbar-item\"></ng-content>\n </ul>\n </li>\n "
}] }
];
/** @nocollapse */
TopbarMenu.ctorParameters = function () { return [
{ 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'],] }]
};
return TopbarMenu;
}());
export { TopbarMenu };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9wYmFyLW1lbnUuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6Im5nOi8vQGt1c2hraS9uZy1zdWthLyIsInNvdXJjZXMiOlsibGliL3RvcGJhci90b3BiYXItbWVudS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUNMLFlBQVksRUFDWixVQUFVLEVBQ1gsTUFBTSxlQUFlLENBQUM7QUFDdkIsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBR3pEO0lBc0NFLG9CQUFzQixZQUEwQixFQUFZLFVBQXNCO1FBQTVELGlCQUFZLEdBQVosWUFBWSxDQUFjO1FBQVksZUFBVSxHQUFWLFVBQVUsQ0FBWTtRQU56RSxZQUFPLEdBQTBCLE9BQU8sQ0FBQztRQUUzQyxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBRWQsVUFBSyxHQUFHLG9CQUFvQixDQUFDO0lBRStDLENBQUM7SUFkdkYsc0JBQWEsNEJBQUk7Ozs7UUFJakI7WUFDRSxPQUFPLG1CQUFBLElBQUksQ0FBQyxZQUFZLENBQUMsc0JBQXNCLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxFQUFVLENBQUM7UUFDeEUsQ0FBQzs7Ozs7UUFORCxVQUFrQixDQUFTO1lBQ3pCLElBQUksQ0FBQyxLQUFLLEdBQUcsQ0FBQyxDQUFDO1FBQ2pCLENBQUM7OztPQUFBOzs7O0lBZUQsNEJBQU87OztJQURQO1FBRUUsSUFBSSxJQUFJLENBQUMsT0FBTyxLQUFLLE9BQU8sRUFBRTtZQUM1QixJQUFJLENBQUMsUUFBUSxHQUFHLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQztTQUNoQztJQUNILENBQUM7Ozs7SUFHRCxnQ0FBVzs7O0lBRFg7UUFFRSxJQUFJLElBQUksQ0FBQyxPQUFPLEtBQUssV0FBVyxFQUFFO1lBQ2hDLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDO1NBQ3RCO0lBQ0gsQ0FBQzs7OztJQUdELCtCQUFVOzs7SUFEVjtRQUVFLElBQUksSUFBSSxDQUFDLE9BQU8sS0FBSyxXQUFXLEVBQUU7WUFDaEMsSUFBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7U0FDdkI7SUFDSCxDQUFDOzs7OztJQUdELCtCQUFVOzs7O0lBRFYsVUFDVyxLQUFLO1FBQ2QsSUFBSSxDQUFDLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxLQUFLLENBQUMsYUFBYSxDQUFDLEVBQUU7WUFDaEUsSUFBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7U0FDdkI7SUFDSCxDQUFDOztnQkFsRUYsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxrQkFBa0I7b0JBQzVCLFFBQVEsRUFBRSxnbEJBbUJUO2lCQUNGOzs7O2dCQXpCUSxZQUFZO2dCQUZuQixVQUFVOzs7dUJBNkJULEtBQUs7MEJBUUwsS0FBSzswQkFRTCxZQUFZLFNBQUMsT0FBTzs4QkFPcEIsWUFBWSxTQUFDLFdBQVc7NkJBT3hCLFlBQVksU0FBQyxVQUFVOzZCQU92QixZQUFZLFNBQUMsVUFBVSxFQUFFLENBQUMsUUFBUSxDQUFDOztJQU10QyxpQkFBQztDQUFBLEFBbkVELElBbUVDO1NBNUNZLFVBQVU7OztJQVNyQiw2QkFBa0Q7O0lBRWxELDhCQUF3Qjs7Ozs7SUFFeEIsMkJBQXVDOzs7OztJQUUzQixrQ0FBb0M7Ozs7O0lBQUUsZ0NBQWdDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgSG9zdExpc3RlbmVyLFxuICBFbGVtZW50UmVmXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgRG9tU2FuaXRpemVyIH0gZnJvbSAnQGFuZ3VsYXIvcGxhdGZvcm0tYnJvd3Nlcic7XG5cblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3VrYS10b3BiYXItbWVudScsXG4gIHRlbXBsYXRlOiBgXG4gICAgPGxpXG4gICAgICBjbGFzcz1cInRvcGJhcl9fc3ViLW1lbnVcIlxuICAgICAgc3R5bGU9XCJoZWlnaHQ6IDEwMCVcIlxuICAgID5cbiAgICAgIDxhXG4gICAgICAgIGNsYXNzPVwidG9wYmFyX19tZW51LWl0ZW0gdG9wYmFyX19tZW51LXRpdGxlXCJcbiAgICAgICAgW2hyZWZdPVwiaHJlZlwiXG4gICAgICAgIHJvbGU9XCJtZW51aXRlbVwiXG4gICAgICAgIHRhYmluZGV4PVwiMFwiXG4gICAgICAgIGFyaWEtaGFzcG9wdXA9XCJ0cnVlXCJcbiAgICAgICAgW2F0dHIuYXJpYS1leHBhbmRlZF09XCJleHBhbmRlZFwiPlxuICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgICAgIDxzdWthLWljb24gaWNvbj1cImNoZXZyb24tZG93blwiIGNsYXNzPVwidG9wYmFyX19tZW51LWFycm93XCIgYXJpYS1oaWRkZW49XCJ0cnVlXCI+PC9zdWthLWljb24+XG4gICAgICA8L2E+XG4gICAgICA8dWwgY2xhc3M9XCJ0b3BiYXJfX21lbnVcIiByb2xlPVwibWVudVwiPlxuICAgICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJzdWthLXRvcGJhci1pdGVtXCI+PC9uZy1jb250ZW50PlxuICAgICAgPC91bD5cbiAgICA8L2xpPlxuICBgXG59KVxuZXhwb3J0IGNsYXNzIFRvcGJhck1lbnUge1xuICBASW5wdXQoKSBzZXQgaHJlZih2OiBzdHJpbmcpIHtcbiAgICB0aGlzLl9ocmVmID0gdjtcbiAgfVxuXG4gIGdldCBocmVmKCkge1xuICAgIHJldHVybiB0aGlzLmRvbVNhbml0aXplci5ieXBhc3NTZWN1cml0eVRydXN0VXJsKHRoaXMuX2hyZWYpIGFzIHN0cmluZztcbiAgfVxuXG4gIEBJbnB1dCgpIHRyaWdnZXI6ICdjbGljaycgfCAnbW91c2VvdmVyJyA9ICdjbGljayc7XG5cbiAgcHVibGljIGV4cGFuZGVkID0gZmFsc2U7XG5cbiAgcHJvdGVjdGVkIF9ocmVmID0gJ2phdmFzY3JpcHQ6dm9pZCgwKSc7XG5cbiAgY29uc3RydWN0b3IocHJvdGVjdGVkIGRvbVNhbml0aXplcjogRG9tU2FuaXRpemVyLCBwcm90ZWN0ZWQgZWxlbWVudFJlZjogRWxlbWVudFJlZikgeyB9XG5cbiAgQEhvc3RMaXN0ZW5lcignY2xpY2snKVxuICBvbkNsaWNrKCkge1xuICAgIGlmICh0aGlzLnRyaWdnZXIgPT09ICdjbGljaycpIHtcbiAgICAgIHRoaXMuZXhwYW5kZWQgPSAhdGhpcy5leHBhbmRlZDtcbiAgICB9XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdtb3VzZW92ZXInKVxuICBvbk1vdXNlT3ZlcigpIHtcbiAgICBpZiAodGhpcy50cmlnZ2VyID09PSAnbW91c2VvdmVyJykge1xuICAgICAgdGhpcy5leHBhbmRlZCA9IHRydWU7XG4gICAgfVxuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignbW91c2VvdXQnKVxuICBvbk1vdXNlT3V0KCkge1xuICAgIGlmICh0aGlzLnRyaWdnZXIgPT09ICdtb3VzZW92ZXInKSB7XG4gICAgICB0aGlzLmV4cGFuZGVkID0gZmFsc2U7XG4gICAgfVxuICB9XG5cbiAgQEhvc3RMaXN0ZW5lcignZm9jdXNvdXQnLCBbJyRldmVudCddKVxuICBvbkZvY3VzT3V0KGV2ZW50KSB7XG4gICAgaWYgKCF0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5jb250YWlucyhldmVudC5yZWxhdGVkVGFyZ2V0KSkge1xuICAgICAgdGhpcy5leHBhbmRlZCA9IGZhbHNlO1xuICAgIH1cbiAgfVxufVxuIl19