@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>
166 lines (164 loc) • 10.3 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, Input, Optional, Output, EventEmitter, TemplateRef } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { Router } from '@angular/router';
export class Topbar {
/**
* @param {?} domSanitizer
* @param {?} router
*/
constructor(domSanitizer, router) {
this.domSanitizer = domSanitizer;
this.router = router;
/**
* Put topbar contents inside a container. Defaults to `false`
*/
this.insideContainer = false;
/**
* Top level branding. Defaults to "Kushki"
*/
this.brand = 'Kushki';
/**
* Emits the navigation status promise when the link is activated
*/
this.navigation = new EventEmitter();
this._href = 'javascript:void(0)';
}
/**
* Optional link for the header
* @param {?} v
* @return {?}
*/
set href(v) {
this._href = v;
}
/**
* @return {?}
*/
get href() {
return (/** @type {?} */ (this.domSanitizer.bypassSecurityTrustUrl(this._href)));
}
/**
* @param {?} value
* @return {?}
*/
isTemplate(value) {
return value instanceof TemplateRef;
}
/**
* @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);
}
}
}
Topbar.decorators = [
{ type: Component, args: [{
selector: 'suka-topbar',
template: `
<header
class="topbar"
role="banner"
[attr.aria-label]="brand + ' ' + productName">
<div class="container" *ngIf="insideContainer else elseTpl">
<ng-container *ngTemplateOutlet="elseTpl"></ng-container>
</div>
<ng-template #elseTpl>
<ng-template
*ngIf="isTemplate(brand)"
[ngTemplateOutlet]="brand">
</ng-template>
<a
*ngIf="!isTemplate(brand)"
class="topbar__name"
[href]="href"
(click)="navigate($event)">
<img *ngIf="logoSrc" [src]="logoSrc" class="topbar__logo" [attr.alt]="brand" />
<span *ngIf="!logoSrc" class="topbar__name--prefix">{{brand}}</span>
<span *ngIf="productName" class="topbar__name--sufix">{{productName}}</span>
</a>
<ng-content></ng-content>
</ng-template>
</header>
`
}] }
];
/** @nocollapse */
Topbar.ctorParameters = () => [
{ type: DomSanitizer },
{ type: Router, decorators: [{ type: Optional }] }
];
Topbar.propDecorators = {
insideContainer: [{ type: Input }],
productName: [{ type: Input }],
logoSrc: [{ type: Input }],
brand: [{ type: Input }],
href: [{ type: Input }],
route: [{ type: Input }],
routeExtras: [{ type: Input }],
navigation: [{ type: Output }]
};
if (false) {
/**
* Put topbar contents inside a container. Defaults to `false`
* @type {?}
*/
Topbar.prototype.insideContainer;
/**
* Label that shows to the right of the `brand`.
* @type {?}
*/
Topbar.prototype.productName;
/**
* Source for the header logo.
* @type {?}
*/
Topbar.prototype.logoSrc;
/**
* Top level branding. Defaults to "Kushki"
* @type {?}
*/
Topbar.prototype.brand;
/**
* Array of commands to send to the router when the link is activated
* See: https://angular.io/api/router/Router#navigate
* @type {?}
*/
Topbar.prototype.route;
/**
* Router options. Used in conjunction with `route`
* See: https://angular.io/api/router/Router#navigate
* @type {?}
*/
Topbar.prototype.routeExtras;
/**
* Emits the navigation status promise when the link is activated
* @type {?}
*/
Topbar.prototype.navigation;
/**
* @type {?}
* @protected
*/
Topbar.prototype._href;
/**
* @type {?}
* @protected
*/
Topbar.prototype.domSanitizer;
/**
* @type {?}
* @protected
*/
Topbar.prototype.router;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG9wYmFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BrdXNoa2kvbmctc3VrYS8iLCJzb3VyY2VzIjpbImxpYi90b3BiYXIvdG9wYmFyLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxLQUFLLEVBQ0wsUUFBUSxFQUNSLE1BQU0sRUFDTixZQUFZLEVBQ1osV0FBVyxFQUNaLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFpQ3pDLE1BQU0sT0FBTyxNQUFNOzs7OztJQThDakIsWUFDWSxZQUEwQixFQUNkLE1BQWM7UUFEMUIsaUJBQVksR0FBWixZQUFZLENBQWM7UUFDZCxXQUFNLEdBQU4sTUFBTSxDQUFROzs7O1FBNUM3QixvQkFBZSxHQUFHLEtBQUssQ0FBQzs7OztRQVl4QixVQUFLLEdBQThCLFFBQVEsQ0FBQzs7OztRQTBCM0MsZUFBVSxHQUFHLElBQUksWUFBWSxFQUFvQixDQUFDO1FBRWxELFVBQUssR0FBRyxvQkFBb0IsQ0FBQztJQUtuQyxDQUFDOzs7Ozs7SUE3QkwsSUFBYSxJQUFJLENBQUMsQ0FBUztRQUN6QixJQUFJLENBQUMsS0FBSyxHQUFHLENBQUMsQ0FBQztJQUNqQixDQUFDOzs7O0lBRUQsSUFBSSxJQUFJO1FBQ04sT0FBTyxtQkFBQSxJQUFJLENBQUMsWUFBWSxDQUFDLHNCQUFzQixDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBVSxDQUFDO0lBQ3hFLENBQUM7Ozs7O0lBeUJNLFVBQVUsQ0FBQyxLQUFLO1FBQ3JCLE9BQU8sS0FBSyxZQUFZLFdBQVcsQ0FBQztJQUN0QyxDQUFDOzs7OztJQUVELFFBQVEsQ0FBQyxLQUFLO1FBQ1osSUFBSSxJQUFJLENBQUMsTUFBTSxJQUFJLElBQUksQ0FBQyxLQUFLLEVBQUU7WUFDN0IsS0FBSyxDQUFDLGNBQWMsRUFBRSxDQUFDOztrQkFDakIsTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLFdBQVcsQ0FBQztZQUNqRSxJQUFJLENBQUMsVUFBVSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztTQUM5QjtJQUNILENBQUM7OztZQTVGRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGFBQWE7Z0JBQ3ZCLFFBQVEsRUFBRTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBMkJUO2FBQ0Y7Ozs7WUFqQ1EsWUFBWTtZQUNaLE1BQU0sdUJBaUZWLFFBQVE7Ozs4QkE1Q1YsS0FBSzswQkFJTCxLQUFLO3NCQUlMLEtBQUs7b0JBSUwsS0FBSzttQkFJTCxLQUFLO29CQVdMLEtBQUs7MEJBTUwsS0FBSzt5QkFLTCxNQUFNOzs7Ozs7O0lBdENQLGlDQUFpQzs7Ozs7SUFJakMsNkJBQTZCOzs7OztJQUk3Qix5QkFBeUI7Ozs7O0lBSXpCLHVCQUFxRDs7Ozs7O0lBZXJELHVCQUFzQjs7Ozs7O0lBTXRCLDZCQUEwQjs7Ozs7SUFLMUIsNEJBQTREOzs7OztJQUU1RCx1QkFBdUM7Ozs7O0lBR3JDLDhCQUFvQzs7Ozs7SUFDcEMsd0JBQW9DIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgT3B0aW9uYWwsXG4gIE91dHB1dCxcbiAgRXZlbnRFbWl0dGVyLFxuICBUZW1wbGF0ZVJlZlxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IERvbVNhbml0aXplciB9IGZyb20gJ0Bhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXInO1xuaW1wb3J0IHsgUm91dGVyIH0gZnJvbSAnQGFuZ3VsYXIvcm91dGVyJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3VrYS10b3BiYXInLFxuICB0ZW1wbGF0ZTogYFxuICAgIDxoZWFkZXJcbiAgICAgIGNsYXNzPVwidG9wYmFyXCJcbiAgICAgIHJvbGU9XCJiYW5uZXJcIlxuICAgICAgW2F0dHIuYXJpYS1sYWJlbF09XCJicmFuZCArICcgJyArIHByb2R1Y3ROYW1lXCI+XG5cbiAgICAgIDxkaXYgY2xhc3M9XCJjb250YWluZXJcIiAqbmdJZj1cImluc2lkZUNvbnRhaW5lciBlbHNlIGVsc2VUcGxcIj5cbiAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImVsc2VUcGxcIj48L25nLWNvbnRhaW5lcj5cbiAgICAgIDwvZGl2PlxuXG4gICAgICA8bmctdGVtcGxhdGUgI2Vsc2VUcGw+XG4gICAgICAgIDxuZy10ZW1wbGF0ZVxuICAgICAgICAgICpuZ0lmPVwiaXNUZW1wbGF0ZShicmFuZClcIlxuICAgICAgICAgIFtuZ1RlbXBsYXRlT3V0bGV0XT1cImJyYW5kXCI+XG4gICAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgICAgIDxhXG4gICAgICAgICAgKm5nSWY9XCIhaXNUZW1wbGF0ZShicmFuZClcIlxuICAgICAgICAgIGNsYXNzPVwidG9wYmFyX19uYW1lXCJcbiAgICAgICAgICBbaHJlZl09XCJocmVmXCJcbiAgICAgICAgICAoY2xpY2spPVwibmF2aWdhdGUoJGV2ZW50KVwiPlxuICAgICAgICAgIDxpbWcgKm5nSWY9XCJsb2dvU3JjXCIgW3NyY109XCJsb2dvU3JjXCIgY2xhc3M9XCJ0b3BiYXJfX2xvZ29cIiBbYXR0ci5hbHRdPVwiYnJhbmRcIiAvPlxuICAgICAgICAgIDxzcGFuICpuZ0lmPVwiIWxvZ29TcmNcIiBjbGFzcz1cInRvcGJhcl9fbmFtZS0tcHJlZml4XCI+e3ticmFuZH19PC9zcGFuPlxuICAgICAgICAgIDxzcGFuICpuZ0lmPVwicHJvZHVjdE5hbWVcIiBjbGFzcz1cInRvcGJhcl9fbmFtZS0tc3VmaXhcIj57e3Byb2R1Y3ROYW1lfX08L3NwYW4+XG4gICAgICAgIDwvYT5cbiAgICAgICAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICA8L2hlYWRlcj5cbiAgYFxufSlcbmV4cG9ydCBjbGFzcyBUb3BiYXIge1xuICAvKipcbiAgICogIFB1dCB0b3BiYXIgY29udGVudHMgaW5zaWRlIGEgY29udGFpbmVyLiBEZWZhdWx0cyB0byBgZmFsc2VgXG4gICAqL1xuICBASW5wdXQoKSBpbnNpZGVDb250YWluZXIgPSBmYWxzZTtcbiAgLyoqXG4gICAqIExhYmVsIHRoYXQgc2hvd3MgdG8gdGhlIHJpZ2h0IG9mIHRoZSBgYnJhbmRgLlxuICAgKi9cbiAgQElucHV0KCkgcHJvZHVjdE5hbWU6IHN0cmluZztcbiAgLyoqXG4gICAqIFNvdXJjZSBmb3IgdGhlIGhlYWRlciBsb2dvLlxuICAgKi9cbiAgQElucHV0KCkgbG9nb1NyYzogc3RyaW5nO1xuICAvKipcbiAgICogVG9wIGxldmVsIGJyYW5kaW5nLiBEZWZhdWx0cyB0byBcIkt1c2hraVwiXG4gICAqL1xuICBASW5wdXQoKSBicmFuZDogc3RyaW5nIHwgVGVtcGxhdGVSZWY8YW55PiA9ICdLdXNoa2knO1xuICAvKipcbiAgICogT3B0aW9uYWwgbGluayBmb3IgdGhlIGhlYWRlclxuICAgKi9cbiAgQElucHV0KCkgc2V0IGhyZWYodjogc3RyaW5nKSB7XG4gICAgdGhpcy5faHJlZiA9IHY7XG4gIH1cblxuICBnZXQgaHJlZigpIHtcbiAgICByZXR1cm4gdGhpcy5kb21TYW5pdGl6ZXIuYnlwYXNzU2VjdXJpdHlUcnVzdFVybCh0aGlzLl9ocmVmKSBhcyBzdHJpbmc7XG4gIH1cbiAgLyoqXG4gICAqIEFycmF5IG9mIGNvbW1hbmRzIHRvIHNlbmQgdG8gdGhlIHJvdXRlciB3aGVuIHRoZSBsaW5rIGlzIGFjdGl2YXRlZFxuICAgKiBTZWU6IGh0dHBzOi8vYW5ndWxhci5pby9hcGkvcm91dGVyL1JvdXRlciNuYXZpZ2F0ZVxuICAgKi9cbiAgQElucHV0KCkgcm91dGU6IGFueVtdO1xuXG4gIC8qKlxuICAgKiBSb3V0ZXIgb3B0aW9ucy4gVXNlZCBpbiBjb25qdW5jdGlvbiB3aXRoIGByb3V0ZWBcbiAgICogU2VlOiBodHRwczovL2FuZ3VsYXIuaW8vYXBpL3JvdXRlci9Sb3V0ZXIjbmF2aWdhdGVcbiAgICovXG4gIEBJbnB1dCgpIHJvdXRlRXh0cmFzOiBhbnk7XG5cbiAgLyoqXG4gICAqIEVtaXRzIHRoZSBuYXZpZ2F0aW9uIHN0YXR1cyBwcm9taXNlIHdoZW4gdGhlIGxpbmsgaXMgYWN0aXZhdGVkXG4gICAqL1xuICBAT3V0cHV0KCkgbmF2aWdhdGlvbiA9IG5ldyBFdmVudEVtaXR0ZXI8UHJvbWlzZTxib29sZWFuPj4oKTtcblxuICBwcm90ZWN0ZWQgX2hyZWYgPSAnamF2YXNjcmlwdDp2b2lkKDApJztcblxuICBjb25zdHJ1Y3RvcihcbiAgICBwcm90ZWN0ZWQgZG9tU2FuaXRpemVyOiBEb21TYW5pdGl6ZXIsXG4gICAgQE9wdGlvbmFsKCkgcHJvdGVjdGVkIHJvdXRlcjogUm91dGVyXG4gICkgeyB9XG5cbiAgcHVibGljIGlzVGVtcGxhdGUodmFsdWUpIHtcbiAgICByZXR1cm4gdmFsdWUgaW5zdGFuY2VvZiBUZW1wbGF0ZVJlZjtcbiAgfVxuXG4gIG5hdmlnYXRlKGV2ZW50KSB7XG4gICAgaWYgKHRoaXMucm91dGVyICYmIHRoaXMucm91dGUpIHtcbiAgICAgIGV2ZW50LnByZXZlbnREZWZhdWx0KCk7XG4gICAgICBjb25zdCBzdGF0dXMgPSB0aGlzLnJvdXRlci5uYXZpZ2F0ZSh0aGlzLnJvdXRlLCB0aGlzLnJvdXRlRXh0cmFzKTtcbiAgICAgIHRoaXMubmF2aWdhdGlvbi5lbWl0KHN0YXR1cyk7XG4gICAgfVxuICB9XG59XG4iXX0=