@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>
181 lines • 11.8 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, Optional, Output, EventEmitter } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { Router, NavigationEnd } from '@angular/router';
export class NavigationItem {
/**
* @param {?} domSanitizer
* @param {?} router
*/
constructor(domSanitizer, router) {
this.domSanitizer = domSanitizer;
this.router = router;
/**
* Toggles the active (current page) state for the link.
*/
this.active = false;
/**
* Emits the navigation status promise when the link is activated
*/
this.navigation = new EventEmitter();
this.isSubMenu = false;
this._href = 'javascript:void(0)';
if (router && this.route) {
this.subscription = router.events.subscribe((/**
* @param {?} s
* @return {?}
*/
(s) => {
if (s instanceof NavigationEnd) {
this.update();
}
}));
}
}
/**
* Link for the item. NOTE: *do not* pass unsafe or untrusted values, this has the potential to open you up to XSS attacks
* @param {?} v
* @return {?}
*/
set href(v) {
this._href = v;
}
/**
* @return {?}
*/
get href() {
return (/** @type {?} */ (this.domSanitizer.bypassSecurityTrustUrl(this._href)));
}
/**
* @param {?} event
* @return {?}
*/
navigate(event) {
if (this.router && this.route) {
event.preventDefault();
/** @type {?} */
const status = this.router.navigate(this.route, this.routeExtras);
this.navigation.emit(status);
}
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
/**
* @private
* @return {?}
*/
isActive() {
if (this.router && this.route) {
/** @type {?} */
const itemUrl = this.router.createUrlTree(this.route, this.routeExtras);
return this.router.isActive(itemUrl, true);
}
return false;
}
/**
* @private
* @return {?}
*/
update() {
if (this.isActive()) {
this.active = true;
}
else {
this.active = false;
}
}
}
NavigationItem.decorators = [
{ type: Component, args: [{
selector: 'suka-navigation-item',
template: `
<li [ngClass]="{
'navigation__item': !isSubMenu,
'navigation__menu-item': isSubMenu
}"
[attr.role]="(isSubMenu ? 'none' : null)">
<a
class="navigation__link"
[href]="href"
[attr.role]="(isSubMenu ? 'menuitem' : null)"
[attr.aria-current]="(active ? 'page' : null)"
(click)="navigate($event)">
<div *ngIf="!isSubMenu" class="navigation__icon">
<ng-content select="suka-icon"></ng-content>
</div>
<span class="navigation__link-text">
<ng-content></ng-content>
</span>
</a>
</li>
`
}] }
];
/** @nocollapse */
NavigationItem.ctorParameters = () => [
{ type: DomSanitizer },
{ type: Router, decorators: [{ type: Optional }] }
];
NavigationItem.propDecorators = {
href: [{ type: Input }],
active: [{ type: Input }],
route: [{ type: Input }],
routeExtras: [{ type: Input }],
navigation: [{ type: Output }]
};
if (false) {
/**
* @type {?}
* @private
*/
NavigationItem.prototype.subscription;
/**
* Toggles the active (current page) state for the link.
* @type {?}
*/
NavigationItem.prototype.active;
/**
* Array of commands to send to the router when the link is activated
* See: https://angular.io/api/router/Router#navigate
* @type {?}
*/
NavigationItem.prototype.route;
/**
* Router options. Used in conjunction with `route`
* See: https://angular.io/api/router/Router#navigate
* @type {?}
*/
NavigationItem.prototype.routeExtras;
/**
* Emits the navigation status promise when the link is activated
* @type {?}
*/
NavigationItem.prototype.navigation;
/** @type {?} */
NavigationItem.prototype.isSubMenu;
/**
* @type {?}
* @protected
*/
NavigationItem.prototype._href;
/**
* @type {?}
* @protected
*/
NavigationItem.prototype.domSanitizer;
/**
* @type {?}
* @protected
*/
NavigationItem.prototype.router;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2aWdhdGlvbi1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BrdXNoa2kvbmctc3VrYS8iLCJzb3VyY2VzIjpbImxpYi9uYXZpZ2F0aW9uL25hdmlnYXRpb24taXRlbS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUNMLFFBQVEsRUFDUixNQUFNLEVBQ04sWUFBWSxFQUViLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsTUFBTSxFQUFFLGFBQWEsRUFBZSxNQUFNLGlCQUFpQixDQUFDO0FBMkJyRSxNQUFNLE9BQU8sY0FBYzs7Ozs7SUF1Q3pCLFlBQ1ksWUFBMEIsRUFDZCxNQUFjO1FBRDFCLGlCQUFZLEdBQVosWUFBWSxDQUFjO1FBQ2QsV0FBTSxHQUFOLE1BQU0sQ0FBUTs7OztRQXpCN0IsV0FBTSxHQUFHLEtBQUssQ0FBQzs7OztRQWlCZCxlQUFVLEdBQUcsSUFBSSxZQUFZLEVBQW9CLENBQUM7UUFFNUQsY0FBUyxHQUFHLEtBQUssQ0FBQztRQUVSLFVBQUssR0FBRyxvQkFBb0IsQ0FBQztRQU1yQyxJQUFJLE1BQU0sSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQ3hCLElBQUksQ0FBQyxZQUFZLEdBQUcsTUFBTSxDQUFDLE1BQU0sQ0FBQyxTQUFTOzs7O1lBQUMsQ0FBQyxDQUFjLEVBQUUsRUFBRTtnQkFDN0QsSUFBSSxDQUFDLFlBQVksYUFBYSxFQUFFO29CQUM5QixJQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7aUJBQ2Y7WUFDSCxDQUFDLEVBQUMsQ0FBQztTQUNKO0lBQ0gsQ0FBQzs7Ozs7O0lBN0NELElBQWEsSUFBSSxDQUFDLENBQVM7UUFDekIsSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUM7SUFDakIsQ0FBQzs7OztJQUVELElBQUksSUFBSTtRQUNOLE9BQU8sbUJBQUEsSUFBSSxDQUFDLFlBQVksQ0FBQyxzQkFBc0IsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEVBQVUsQ0FBQztJQUN4RSxDQUFDOzs7OztJQXlDRCxRQUFRLENBQUMsS0FBSztRQUNaLElBQUksSUFBSSxDQUFDLE1BQU0sSUFBSSxJQUFJLENBQUMsS0FBSyxFQUFFO1lBQzdCLEtBQUssQ0FBQyxjQUFjLEVBQUUsQ0FBQzs7a0JBQ2pCLE1BQU0sR0FBRyxJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxXQUFXLENBQUM7WUFDakUsSUFBSSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7U0FDOUI7SUFDSCxDQUFDOzs7O0lBRUQsV0FBVztRQUNULElBQUksSUFBSSxDQUFDLFlBQVksRUFBRTtZQUNyQixJQUFJLENBQUMsWUFBWSxDQUFDLFdBQVcsRUFBRSxDQUFDO1NBQ2pDO0lBQ0gsQ0FBQzs7Ozs7SUFFTyxRQUFRO1FBQ2QsSUFBSSxJQUFJLENBQUMsTUFBTSxJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUU7O2tCQUN2QixPQUFPLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsV0FBVyxDQUFDO1lBQ3ZFLE9BQU8sSUFBSSxDQUFDLE1BQU0sQ0FBQyxRQUFRLENBQUMsT0FBTyxFQUFFLElBQUksQ0FBQyxDQUFDO1NBQzVDO1FBRUQsT0FBTyxLQUFLLENBQUM7SUFDZixDQUFDOzs7OztJQUVPLE1BQU07UUFDWixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsRUFBRTtZQUNuQixJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztTQUNwQjthQUFNO1lBQ0wsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7U0FDckI7SUFDSCxDQUFDOzs7WUF6R0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxzQkFBc0I7Z0JBQ2hDLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FvQlQ7YUFDRjs7OztZQTNCUSxZQUFZO1lBQ1osTUFBTSx1QkFvRVYsUUFBUTs7O21CQXBDVixLQUFLO3FCQVdMLEtBQUs7b0JBTUwsS0FBSzswQkFNTCxLQUFLO3lCQUtMLE1BQU07Ozs7Ozs7SUFoQ1Asc0NBQW1DOzs7OztJQWVuQyxnQ0FBd0I7Ozs7OztJQU14QiwrQkFBc0I7Ozs7OztJQU10QixxQ0FBMEI7Ozs7O0lBSzFCLG9DQUE0RDs7SUFFNUQsbUNBQWtCOzs7OztJQUVsQiwrQkFBdUM7Ozs7O0lBR3JDLHNDQUFvQzs7Ozs7SUFDcEMsZ0NBQW9DIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgT3B0aW9uYWwsXG4gIE91dHB1dCxcbiAgRXZlbnRFbWl0dGVyLFxuICBPbkRlc3Ryb3lcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBEb21TYW5pdGl6ZXIgfSBmcm9tICdAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyJztcbmltcG9ydCB7IFJvdXRlciwgTmF2aWdhdGlvbkVuZCwgUm91dGVyRXZlbnQgfSBmcm9tICdAYW5ndWxhci9yb3V0ZXInO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3N1a2EtbmF2aWdhdGlvbi1pdGVtJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8bGkgW25nQ2xhc3NdPVwie1xuICAgICAgJ25hdmlnYXRpb25fX2l0ZW0nOiAhaXNTdWJNZW51LFxuICAgICAgJ25hdmlnYXRpb25fX21lbnUtaXRlbSc6IGlzU3ViTWVudVxuICAgIH1cIlxuICAgIFthdHRyLnJvbGVdPVwiKGlzU3ViTWVudSA/ICdub25lJyA6IG51bGwpXCI+XG4gICAgICA8YVxuICAgICAgICBjbGFzcz1cIm5hdmlnYXRpb25fX2xpbmtcIlxuICAgICAgICBbaHJlZl09XCJocmVmXCJcbiAgICAgICAgW2F0dHIucm9sZV09XCIoaXNTdWJNZW51ID8gJ21lbnVpdGVtJyA6IG51bGwpXCJcbiAgICAgICAgW2F0dHIuYXJpYS1jdXJyZW50XT1cIihhY3RpdmUgPyAncGFnZScgOiBudWxsKVwiXG4gICAgICAgIChjbGljayk9XCJuYXZpZ2F0ZSgkZXZlbnQpXCI+XG4gICAgICAgIDxkaXYgKm5nSWY9XCIhaXNTdWJNZW51XCIgY2xhc3M9XCJuYXZpZ2F0aW9uX19pY29uXCI+XG4gICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwic3VrYS1pY29uXCI+PC9uZy1jb250ZW50PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJuYXZpZ2F0aW9uX19saW5rLXRleHRcIj5cbiAgICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYT5cbiAgICA8L2xpPlxuICBgXG59KVxuZXhwb3J0IGNsYXNzIE5hdmlnYXRpb25JdGVtIGltcGxlbWVudHMgT25EZXN0cm95IHtcbiAgcHJpdmF0ZSBzdWJzY3JpcHRpb246IFN1YnNjcmlwdGlvbjtcbiAgLyoqXG4gICAqIExpbmsgZm9yIHRoZSBpdGVtLiBOT1RFOiAqZG8gbm90KiBwYXNzIHVuc2FmZSBvciB1bnRydXN0ZWQgdmFsdWVzLCB0aGlzIGhhcyB0aGUgcG90ZW50aWFsIHRvIG9wZW4geW91IHVwIHRvIFhTUyBhdHRhY2tzXG4gICAqL1xuICBASW5wdXQoKSBzZXQgaHJlZih2OiBzdHJpbmcpIHtcbiAgICB0aGlzLl9ocmVmID0gdjtcbiAgfVxuXG4gIGdldCBocmVmKCkge1xuICAgIHJldHVybiB0aGlzLmRvbVNhbml0aXplci5ieXBhc3NTZWN1cml0eVRydXN0VXJsKHRoaXMuX2hyZWYpIGFzIHN0cmluZztcbiAgfVxuXG4gIC8qKlxuICAgKiBUb2dnbGVzIHRoZSBhY3RpdmUgKGN1cnJlbnQgcGFnZSkgc3RhdGUgZm9yIHRoZSBsaW5rLlxuICAgKi9cbiAgQElucHV0KCkgYWN0aXZlID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIEFycmF5IG9mIGNvbW1hbmRzIHRvIHNlbmQgdG8gdGhlIHJvdXRlciB3aGVuIHRoZSBsaW5rIGlzIGFjdGl2YXRlZFxuICAgKiBTZWU6IGh0dHBzOi8vYW5ndWxhci5pby9hcGkvcm91dGVyL1JvdXRlciNuYXZpZ2F0ZVxuICAgKi9cbiAgQElucHV0KCkgcm91dGU6IGFueVtdO1xuXG4gIC8qKlxuICAgKiBSb3V0ZXIgb3B0aW9ucy4gVXNlZCBpbiBjb25qdW5jdGlvbiB3aXRoIGByb3V0ZWBcbiAgICogU2VlOiBodHRwczovL2FuZ3VsYXIuaW8vYXBpL3JvdXRlci9Sb3V0ZXIjbmF2aWdhdGVcbiAgICovXG4gIEBJbnB1dCgpIHJvdXRlRXh0cmFzOiBhbnk7XG5cbiAgLyoqXG4gICAqIEVtaXRzIHRoZSBuYXZpZ2F0aW9uIHN0YXR1cyBwcm9taXNlIHdoZW4gdGhlIGxpbmsgaXMgYWN0aXZhdGVkXG4gICAqL1xuICBAT3V0cHV0KCkgbmF2aWdhdGlvbiA9IG5ldyBFdmVudEVtaXR0ZXI8UHJvbWlzZTxib29sZWFuPj4oKTtcblxuICBpc1N1Yk1lbnUgPSBmYWxzZTtcblxuICBwcm90ZWN0ZWQgX2hyZWYgPSAnamF2YXNjcmlwdDp2b2lkKDApJztcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcm90ZWN0ZWQgZG9tU2FuaXRpemVyOiBEb21TYW5pdGl6ZXIsXG4gICAgQE9wdGlvbmFsKCkgcHJvdGVjdGVkIHJvdXRlcjogUm91dGVyXG4gICkge1xuICAgIGlmIChyb3V0ZXIgJiYgdGhpcy5yb3V0ZSkge1xuICAgICAgdGhpcy5zdWJzY3JpcHRpb24gPSByb3V0ZXIuZXZlbnRzLnN1YnNjcmliZSgoczogUm91dGVyRXZlbnQpID0+IHtcbiAgICAgICAgaWYgKHMgaW5zdGFuY2VvZiBOYXZpZ2F0aW9uRW5kKSB7XG4gICAgICAgICAgdGhpcy51cGRhdGUoKTtcbiAgICAgICAgfVxuICAgICAgfSk7XG4gICAgfVxuICB9XG5cbiAgbmF2aWdhdGUoZXZlbnQpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5yb3V0ZXIgJiYgdGhpcy5yb3V0ZSkge1xuICAgICAgZXZlbnQucHJldmVudERlZmF1bHQoKTtcbiAgICAgIGNvbnN0IHN0YXR1cyA9IHRoaXMucm91dGVyLm5hdmlnYXRlKHRoaXMucm91dGUsIHRoaXMucm91dGVFeHRyYXMpO1xuICAgICAgdGhpcy5uYXZpZ2F0aW9uLmVtaXQoc3RhdHVzKTtcbiAgICB9XG4gIH1cblxuICBuZ09uRGVzdHJveSgpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5zdWJzY3JpcHRpb24pIHtcbiAgICAgIHRoaXMuc3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBpc0FjdGl2ZSgpOiBib29sZWFuIHtcbiAgICBpZiAodGhpcy5yb3V0ZXIgJiYgdGhpcy5yb3V0ZSkge1xuICAgICAgY29uc3QgaXRlbVVybCA9IHRoaXMucm91dGVyLmNyZWF0ZVVybFRyZWUodGhpcy5yb3V0ZSwgdGhpcy5yb3V0ZUV4dHJhcyk7XG4gICAgICByZXR1cm4gdGhpcy5yb3V0ZXIuaXNBY3RpdmUoaXRlbVVybCwgdHJ1ZSk7XG4gICAgfVxuXG4gICAgcmV0dXJuIGZhbHNlO1xuICB9XG5cbiAgcHJpdmF0ZSB1cGRhdGUoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuaXNBY3RpdmUoKSkge1xuICAgICAgdGhpcy5hY3RpdmUgPSB0cnVlO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLmFjdGl2ZSA9IGZhbHNlO1xuICAgIH1cbiAgfVxufVxuIl19