@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>
179 lines • 12.4 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';
var NavigationItem = /** @class */ (function () {
function NavigationItem(domSanitizer, router) {
var _this = this;
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.subscription = router.events.subscribe((/**
* @param {?} s
* @return {?}
*/
function (s) {
if (s instanceof NavigationEnd) {
_this.update();
}
}));
}
}
Object.defineProperty(NavigationItem.prototype, "href", {
get: /**
* @return {?}
*/
function () {
return (/** @type {?} */ (this.domSanitizer.bypassSecurityTrustUrl(this._href)));
},
/**
* Link for the item. NOTE: *do not* pass unsafe or untrusted values, this has the potential to open you up to XSS attacks
*/
set: /**
* 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 {?}
*/
function (v) {
this._href = v;
},
enumerable: true,
configurable: true
});
/**
* @param {?} event
* @return {?}
*/
NavigationItem.prototype.navigate = /**
* @param {?} event
* @return {?}
*/
function (event) {
if (this.router && this.route) {
event.preventDefault();
/** @type {?} */
var status_1 = this.router.navigate(this.route, this.routeExtras);
this.navigation.emit(status_1);
}
};
/**
* @return {?}
*/
NavigationItem.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this.subscription) {
this.subscription.unsubscribe();
}
};
/**
* @private
* @return {?}
*/
NavigationItem.prototype.isActive = /**
* @private
* @return {?}
*/
function () {
/** @type {?} */
var itemUrl = this.router.createUrlTree(this.route, this.routeExtras);
return this.router.isActive(itemUrl, true);
};
/**
* @private
* @return {?}
*/
NavigationItem.prototype.update = /**
* @private
* @return {?}
*/
function () {
if (this.isActive()) {
this.active = true;
}
else {
this.active = false;
}
};
NavigationItem.decorators = [
{ type: Component, args: [{
selector: 'suka-navigation-item',
template: "\n <li [ngClass]=\"{\n 'navigation__item': !isSubMenu,\n 'navigation__menu-item': isSubMenu\n }\"\n [attr.role]=\"(isSubMenu ? 'none' : null)\">\n <a\n class=\"navigation__link\"\n [href]=\"href\"\n [attr.role]=\"(isSubMenu ? 'menuitem' : null)\"\n [attr.aria-current]=\"(active ? 'page' : null)\"\n (click)=\"navigate($event)\">\n <div *ngIf=\"!isSubMenu\" class=\"navigation__icon\">\n <ng-content select=\"suka-icon\"></ng-content>\n </div>\n <span class=\"navigation__link-text\">\n <ng-content></ng-content>\n </span>\n </a>\n </li>\n "
}] }
];
/** @nocollapse */
NavigationItem.ctorParameters = function () { return [
{ type: DomSanitizer },
{ type: Router, decorators: [{ type: Optional }] }
]; };
NavigationItem.propDecorators = {
href: [{ type: Input }],
active: [{ type: Input }],
route: [{ type: Input }],
routeExtras: [{ type: Input }],
navigation: [{ type: Output }]
};
return NavigationItem;
}());
export { NavigationItem };
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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF2aWdhdGlvbi1pdGVtLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BrdXNoa2kvbmctc3VrYS8iLCJzb3VyY2VzIjpbImxpYi9uYXZpZ2F0aW9uL25hdmlnYXRpb24taXRlbS5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7OztBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUNMLFFBQVEsRUFDUixNQUFNLEVBQ04sWUFBWSxFQUViLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsTUFBTSxFQUFFLGFBQWEsRUFBZSxNQUFNLGlCQUFpQixDQUFDO0FBR3JFO0lBK0RFLHdCQUFzQixZQUEwQixFQUF3QixNQUFjO1FBQXRGLGlCQVFDO1FBUnFCLGlCQUFZLEdBQVosWUFBWSxDQUFjO1FBQXdCLFdBQU0sR0FBTixNQUFNLENBQVE7Ozs7UUF2QjdFLFdBQU0sR0FBRyxLQUFLLENBQUM7Ozs7UUFpQmQsZUFBVSxHQUFHLElBQUksWUFBWSxFQUFvQixDQUFDO1FBRTVELGNBQVMsR0FBRyxLQUFLLENBQUM7UUFFUixVQUFLLEdBQUcsb0JBQW9CLENBQUM7UUFHckMsSUFBSSxNQUFNLEVBQUU7WUFDVixJQUFJLENBQUMsWUFBWSxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQUMsU0FBUzs7OztZQUFDLFVBQUMsQ0FBYztnQkFDekQsSUFBSSxDQUFDLFlBQVksYUFBYSxFQUFFO29CQUM5QixLQUFJLENBQUMsTUFBTSxFQUFFLENBQUM7aUJBQ2Y7WUFDSCxDQUFDLEVBQUMsQ0FBQztTQUNKO0lBQ0gsQ0FBQztJQTFDRCxzQkFBYSxnQ0FBSTs7OztRQUlqQjtZQUNFLE9BQU8sbUJBQUEsSUFBSSxDQUFDLFlBQVksQ0FBQyxzQkFBc0IsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLEVBQVUsQ0FBQztRQUN4RSxDQUFDO1FBVEQ7O1dBRUc7Ozs7OztRQUNILFVBQWtCLENBQVM7WUFDekIsSUFBSSxDQUFDLEtBQUssR0FBRyxDQUFDLENBQUM7UUFDakIsQ0FBQzs7O09BQUE7Ozs7O0lBMENELGlDQUFROzs7O0lBQVIsVUFBUyxLQUFLO1FBQ1osSUFBSSxJQUFJLENBQUMsTUFBTSxJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUU7WUFDN0IsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDOztnQkFDakIsUUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQztZQUNqRSxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxRQUFNLENBQUMsQ0FBQztTQUM5QjtJQUNILENBQUM7Ozs7SUFFRCxvQ0FBVzs7O0lBQVg7UUFDRSxJQUFJLElBQUksQ0FBQyxZQUFZLEVBQUU7WUFDckIsSUFBSSxDQUFDLFlBQVksQ0FBQyxXQUFXLEVBQUUsQ0FBQztTQUNqQztJQUNILENBQUM7Ozs7O0lBRU8saUNBQVE7Ozs7SUFBaEI7O1lBQ1EsT0FBTyxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQztRQUN2RSxPQUFPLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLE9BQU8sRUFBRSxJQUFJLENBQUMsQ0FBQztJQUM3QyxDQUFDOzs7OztJQUVPLCtCQUFNOzs7O0lBQWQ7UUFDRSxJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUUsRUFBRTtZQUNuQixJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQztTQUNwQjthQUFNO1lBQ0wsSUFBSSxDQUFDLE1BQU0sR0FBRyxLQUFLLENBQUM7U0FDckI7SUFDSCxDQUFDOztnQkFsR0YsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxzQkFBc0I7b0JBQ2hDLFFBQVEsRUFBRSxncEJBb0JUO2lCQUNGOzs7O2dCQTNCUSxZQUFZO2dCQUNaLE1BQU0sdUJBa0VzQyxRQUFROzs7dUJBbEMxRCxLQUFLO3lCQVdMLEtBQUs7d0JBTUwsS0FBSzs4QkFNTCxLQUFLOzZCQUtMLE1BQU07O0lBMENULHFCQUFDO0NBQUEsQUFuR0QsSUFtR0M7U0EzRVksY0FBYzs7Ozs7O0lBQ3pCLHNDQUFtQzs7Ozs7SUFlbkMsZ0NBQXdCOzs7Ozs7SUFNeEIsK0JBQXNCOzs7Ozs7SUFNdEIscUNBQTBCOzs7OztJQUsxQixvQ0FBNEQ7O0lBRTVELG1DQUFrQjs7Ozs7SUFFbEIsK0JBQXVDOzs7OztJQUUzQixzQ0FBb0M7Ozs7O0lBQUUsZ0NBQW9DIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgT3B0aW9uYWwsXG4gIE91dHB1dCxcbiAgRXZlbnRFbWl0dGVyLFxuICBPbkRlc3Ryb3lcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBEb21TYW5pdGl6ZXIgfSBmcm9tICdAYW5ndWxhci9wbGF0Zm9ybS1icm93c2VyJztcbmltcG9ydCB7IFJvdXRlciwgTmF2aWdhdGlvbkVuZCwgUm91dGVyRXZlbnQgfSBmcm9tICdAYW5ndWxhci9yb3V0ZXInO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3N1a2EtbmF2aWdhdGlvbi1pdGVtJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8bGkgW25nQ2xhc3NdPVwie1xuICAgICAgJ25hdmlnYXRpb25fX2l0ZW0nOiAhaXNTdWJNZW51LFxuICAgICAgJ25hdmlnYXRpb25fX21lbnUtaXRlbSc6IGlzU3ViTWVudVxuICAgIH1cIlxuICAgIFthdHRyLnJvbGVdPVwiKGlzU3ViTWVudSA/ICdub25lJyA6IG51bGwpXCI+XG4gICAgICA8YVxuICAgICAgICBjbGFzcz1cIm5hdmlnYXRpb25fX2xpbmtcIlxuICAgICAgICBbaHJlZl09XCJocmVmXCJcbiAgICAgICAgW2F0dHIucm9sZV09XCIoaXNTdWJNZW51ID8gJ21lbnVpdGVtJyA6IG51bGwpXCJcbiAgICAgICAgW2F0dHIuYXJpYS1jdXJyZW50XT1cIihhY3RpdmUgPyAncGFnZScgOiBudWxsKVwiXG4gICAgICAgIChjbGljayk9XCJuYXZpZ2F0ZSgkZXZlbnQpXCI+XG4gICAgICAgIDxkaXYgKm5nSWY9XCIhaXNTdWJNZW51XCIgY2xhc3M9XCJuYXZpZ2F0aW9uX19pY29uXCI+XG4gICAgICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwic3VrYS1pY29uXCI+PC9uZy1jb250ZW50PlxuICAgICAgICA8L2Rpdj5cbiAgICAgICAgPHNwYW4gY2xhc3M9XCJuYXZpZ2F0aW9uX19saW5rLXRleHRcIj5cbiAgICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgICAgIDwvc3Bhbj5cbiAgICAgIDwvYT5cbiAgICA8L2xpPlxuICBgXG59KVxuZXhwb3J0IGNsYXNzIE5hdmlnYXRpb25JdGVtIGltcGxlbWVudHMgT25EZXN0cm95IHtcbiAgcHJpdmF0ZSBzdWJzY3JpcHRpb246IFN1YnNjcmlwdGlvbjtcbiAgLyoqXG4gICAqIExpbmsgZm9yIHRoZSBpdGVtLiBOT1RFOiAqZG8gbm90KiBwYXNzIHVuc2FmZSBvciB1bnRydXN0ZWQgdmFsdWVzLCB0aGlzIGhhcyB0aGUgcG90ZW50aWFsIHRvIG9wZW4geW91IHVwIHRvIFhTUyBhdHRhY2tzXG4gICAqL1xuICBASW5wdXQoKSBzZXQgaHJlZih2OiBzdHJpbmcpIHtcbiAgICB0aGlzLl9ocmVmID0gdjtcbiAgfVxuXG4gIGdldCBocmVmKCkge1xuICAgIHJldHVybiB0aGlzLmRvbVNhbml0aXplci5ieXBhc3NTZWN1cml0eVRydXN0VXJsKHRoaXMuX2hyZWYpIGFzIHN0cmluZztcbiAgfVxuXG4gIC8qKlxuICAgKiBUb2dnbGVzIHRoZSBhY3RpdmUgKGN1cnJlbnQgcGFnZSkgc3RhdGUgZm9yIHRoZSBsaW5rLlxuICAgKi9cbiAgQElucHV0KCkgYWN0aXZlID0gZmFsc2U7XG5cbiAgLyoqXG4gICAqIEFycmF5IG9mIGNvbW1hbmRzIHRvIHNlbmQgdG8gdGhlIHJvdXRlciB3aGVuIHRoZSBsaW5rIGlzIGFjdGl2YXRlZFxuICAgKiBTZWU6IGh0dHBzOi8vYW5ndWxhci5pby9hcGkvcm91dGVyL1JvdXRlciNuYXZpZ2F0ZVxuICAgKi9cbiAgQElucHV0KCkgcm91dGU6IGFueVtdO1xuXG4gIC8qKlxuICAgKiBSb3V0ZXIgb3B0aW9ucy4gVXNlZCBpbiBjb25qdW5jdGlvbiB3aXRoIGByb3V0ZWBcbiAgICogU2VlOiBodHRwczovL2FuZ3VsYXIuaW8vYXBpL3JvdXRlci9Sb3V0ZXIjbmF2aWdhdGVcbiAgICovXG4gIEBJbnB1dCgpIHJvdXRlRXh0cmFzOiBhbnk7XG5cbiAgLyoqXG4gICAqIEVtaXRzIHRoZSBuYXZpZ2F0aW9uIHN0YXR1cyBwcm9taXNlIHdoZW4gdGhlIGxpbmsgaXMgYWN0aXZhdGVkXG4gICAqL1xuICBAT3V0cHV0KCkgbmF2aWdhdGlvbiA9IG5ldyBFdmVudEVtaXR0ZXI8UHJvbWlzZTxib29sZWFuPj4oKTtcblxuICBpc1N1Yk1lbnUgPSBmYWxzZTtcblxuICBwcm90ZWN0ZWQgX2hyZWYgPSAnamF2YXNjcmlwdDp2b2lkKDApJztcblxuICBjb25zdHJ1Y3Rvcihwcm90ZWN0ZWQgZG9tU2FuaXRpemVyOiBEb21TYW5pdGl6ZXIsIEBPcHRpb25hbCgpIHByb3RlY3RlZCByb3V0ZXI6IFJvdXRlcikge1xuICAgIGlmIChyb3V0ZXIpIHtcbiAgICAgIHRoaXMuc3Vic2NyaXB0aW9uID0gcm91dGVyLmV2ZW50cy5zdWJzY3JpYmUoKHM6IFJvdXRlckV2ZW50KSA9PiB7XG4gICAgICAgIGlmIChzIGluc3RhbmNlb2YgTmF2aWdhdGlvbkVuZCkge1xuICAgICAgICAgIHRoaXMudXBkYXRlKCk7XG4gICAgICAgIH1cbiAgICAgIH0pO1xuICAgIH1cbiAgfVxuXG4gIG5hdmlnYXRlKGV2ZW50KTogdm9pZCB7XG4gICAgaWYgKHRoaXMucm91dGVyICYmIHRoaXMucm91dGUpIHtcbiAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICBjb25zdCBzdGF0dXMgPSB0aGlzLnJvdXRlci5uYXZpZ2F0ZSh0aGlzLnJvdXRlLCB0aGlzLnJvdXRlRXh0cmFzKTtcbiAgICAgIHRoaXMubmF2aWdhdGlvbi5lbWl0KHN0YXR1cyk7XG4gICAgfVxuICB9XG5cbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuc3Vic2NyaXB0aW9uKSB7XG4gICAgICB0aGlzLnN1YnNjcmlwdGlvbi51bnN1YnNjcmliZSgpO1xuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgaXNBY3RpdmUoKTogYm9vbGVhbiB7XG4gICAgY29uc3QgaXRlbVVybCA9IHRoaXMucm91dGVyLmNyZWF0ZVVybFRyZWUodGhpcy5yb3V0ZSwgdGhpcy5yb3V0ZUV4dHJhcyk7XG4gICAgcmV0dXJuIHRoaXMucm91dGVyLmlzQWN0aXZlKGl0ZW1VcmwsIHRydWUpO1xuICB9XG5cbiAgcHJpdmF0ZSB1cGRhdGUoKTogdm9pZCB7XG4gICAgaWYgKHRoaXMuaXNBY3RpdmUoKSkge1xuICAgICAgdGhpcy5hY3RpdmUgPSB0cnVlO1xuICAgIH0gZWxzZSB7XG4gICAgICB0aGlzLmFjdGl2ZSA9IGZhbHNlO1xuICAgIH1cbiAgfVxufVxuIl19