@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--suffix">{{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+e3ticmFuZH19PC9zcGFuPlxuICAgICAgICAgIDxzcGFuICpuZ0lmPVwicHJvZHVjdE5hbWVcIiBjbGFzcz1cInRvcGJhcl9fbmFtZS0tc3VmZml4XCI+e3twcm9kdWN0TmFtZX19PC9zcGFuPlxuICAgICAgICA8L2E+XG4gICAgICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbiAgICAgIDwvbmctdGVtcGxhdGU+XG4gICAgPC9oZWFkZXI+XG4gIGBcbn0pXG5leHBvcnQgY2xhc3MgVG9wYmFyIHtcbiAgLyoqXG4gICAqICBQdXQgdG9wYmFyIGNvbnRlbnRzIGluc2lkZSBhIGNvbnRhaW5lci4gRGVmYXVsdHMgdG8gYGZhbHNlYFxuICAgKi9cbiAgQElucHV0KCkgaW5zaWRlQ29udGFpbmVyID0gZmFsc2U7XG4gIC8qKlxuICAgKiBMYWJlbCB0aGF0IHNob3dzIHRvIHRoZSByaWdodCBvZiB0aGUgYGJyYW5kYC5cbiAgICovXG4gIEBJbnB1dCgpIHByb2R1Y3ROYW1lOiBzdHJpbmc7XG4gIC8qKlxuICAgKiBTb3VyY2UgZm9yIHRoZSBoZWFkZXIgbG9nby5cbiAgICovXG4gIEBJbnB1dCgpIGxvZ29TcmM6IHN0cmluZztcbiAgLyoqXG4gICAqIFRvcCBsZXZlbCBicmFuZGluZy4gRGVmYXVsdHMgdG8gXCJLdXNoa2lcIlxuICAgKi9cbiAgQElucHV0KCkgYnJhbmQ6IHN0cmluZyB8IFRlbXBsYXRlUmVmPGFueT4gPSAnS3VzaGtpJztcbiAgLyoqXG4gICAqIE9wdGlvbmFsIGxpbmsgZm9yIHRoZSBoZWFkZXJcbiAgICovXG4gIEBJbnB1dCgpIHNldCBocmVmKHY6IHN0cmluZykge1xuICAgIHRoaXMuX2hyZWYgPSB2O1xuICB9XG5cbiAgZ2V0IGhyZWYoKSB7XG4gICAgcmV0dXJuIHRoaXMuZG9tU2FuaXRpemVyLmJ5cGFzc1NlY3VyaXR5VHJ1c3RVcmwodGhpcy5faHJlZikgYXMgc3RyaW5nO1xuICB9XG4gIC8qKlxuICAgKiBBcnJheSBvZiBjb21tYW5kcyB0byBzZW5kIHRvIHRoZSByb3V0ZXIgd2hlbiB0aGUgbGluayBpcyBhY3RpdmF0ZWRcbiAgICogU2VlOiBodHRwczovL2FuZ3VsYXIuaW8vYXBpL3JvdXRlci9Sb3V0ZXIjbmF2aWdhdGVcbiAgICovXG4gIEBJbnB1dCgpIHJvdXRlOiBhbnlbXTtcblxuICAvKipcbiAgICogUm91dGVyIG9wdGlvbnMuIFVzZWQgaW4gY29uanVuY3Rpb24gd2l0aCBgcm91dGVgXG4gICAqIFNlZTogaHR0cHM6Ly9hbmd1bGFyLmlvL2FwaS9yb3V0ZXIvUm91dGVyI25hdmlnYXRlXG4gICAqL1xuICBASW5wdXQoKSByb3V0ZUV4dHJhczogYW55O1xuXG4gIC8qKlxuICAgKiBFbWl0cyB0aGUgbmF2aWdhdGlvbiBzdGF0dXMgcHJvbWlzZSB3aGVuIHRoZSBsaW5rIGlzIGFjdGl2YXRlZFxuICAgKi9cbiAgQE91dHB1dCgpIG5hdmlnYXRpb24gPSBuZXcgRXZlbnRFbWl0dGVyPFByb21pc2U8Ym9vbGVhbj4+KCk7XG5cbiAgcHJvdGVjdGVkIF9ocmVmID0gJ2phdmFzY3JpcHQ6dm9pZCgwKSc7XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJvdGVjdGVkIGRvbVNhbml0aXplcjogRG9tU2FuaXRpemVyLFxuICAgIEBPcHRpb25hbCgpIHByb3RlY3RlZCByb3V0ZXI6IFJvdXRlclxuICApIHsgfVxuXG4gIHB1YmxpYyBpc1RlbXBsYXRlKHZhbHVlKSB7XG4gICAgcmV0dXJuIHZhbHVlIGluc3RhbmNlb2YgVGVtcGxhdGVSZWY7XG4gIH1cblxuICBuYXZpZ2F0ZShldmVudCkge1xuICAgIGlmICh0aGlzLnJvdXRlciAmJiB0aGlzLnJvdXRlKSB7XG4gICAgICBldmVudC5wcmV2ZW50RGVmYXVsdCgpO1xuICAgICAgY29uc3Qgc3RhdHVzID0gdGhpcy5yb3V0ZXIubmF2aWdhdGUodGhpcy5yb3V0ZSwgdGhpcy5yb3V0ZUV4dHJhcyk7XG4gICAgICB0aGlzLm5hdmlnYXRpb24uZW1pdChzdGF0dXMpO1xuICAgIH1cbiAgfVxufVxuIl19