theme-lib
Version:
This is a simple example Angular Library published to npm.
142 lines • 9.94 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/*
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
import { Component, Input, Output, EventEmitter, HostBinding } from '@angular/core';
import { Router } from '@angular/router';
import { convertToBoolProperty } from '../helpers';
/*
* Route tabset components.
* Renders tabs inside of a router-outlet.
*
* ```ts
* tabs = [
* {
* title: 'Route tab #1',
* route: '/pages/description',
* icon: 'nb-home',
* responsive: true, // hide title before `route-tabs-icon-only-max-width` value
* },
* {
* title: 'Route tab #2',
* route: '/pages/images',
* }
* ];
*
* <nb-route-tabset [tabs]="tabs"></nb-route-tabset>
* ```
* ### Installation
*
* Import `NbRouteTabsetModule` to your feature module.
* ```ts
* @NgModule({
* imports: [
* // ...
* NbRouteTabsetModule,
* ],
* })
* export class PageModule { }
* ```
*
* @stacked-example(Route Tabset, tabset/route-tabset-showcase.component)
*
* @styles
*
* route-tabs-font-family:
* route-tabs-font-size:
* route-tabs-active-bg:
* route-tabs-active-font-weight:
* route-tabs-padding:
* route-tabs-header-bg:
* route-tabs-separator:
* route-tabs-fg:
* route-tabs-fg-heading:
* route-tabs-bg:
* route-tabs-selected:
* route-tabs-icon-only-max-width:
*/
export class NbRouteTabsetComponent {
/**
* @param {?} router
*/
constructor(router) {
this.router = router;
this.fullWidthValue = false;
/*
* Emits when tab is selected
* @type {EventEmitter<any>}
*/
this.changeTab = new EventEmitter();
}
/*
* Take full width of a parent
* @param {boolean} val
*/
/**
* @param {?} val
* @return {?}
*/
set fullWidth(val) {
this.fullWidthValue = convertToBoolProperty(val);
}
/**
* @param {?} tab
* @return {?}
*/
selectTab(tab) {
this.changeTab.emit(tab);
this.router.navigate([tab.route]);
}
}
NbRouteTabsetComponent.decorators = [
{ type: Component, args: [{
selector: 'nb-route-tabset',
template: `
<ul class="route-tabset">
<li *ngFor="let tab of tabs"
(click)="$event.preventDefault(); selectTab(tab)"
routerLink="{{tab.route}}"
routerLinkActive="active"
[routerLinkActiveOptions]="{ exact: true }"
[class.responsive]="tab.responsive"
class="route-tab">
<a href>
<i *ngIf="tab.icon" [class]="tab.icon"></i>
<span *ngIf="tab.title">{{ tab.title }}</span>
</a>
</li>
</ul>
<router-outlet></router-outlet>
`,
styles: [".route-tabset{display:flex;flex-direction:row;list-style-type:none;margin:0}.route-tabset .route-tab{cursor:pointer;margin-bottom:-1px;text-align:center}.route-tabset .route-tab.active a::before{display:block}.route-tabset .route-tab a{position:relative;text-decoration:none;display:inline-block}.route-tabset .route-tab a::before{display:none;position:absolute;content:'';width:100%;height:6px;border-radius:3px;bottom:-2px;left:0}.route-tabset .route-tab a i{font-size:1.5rem;vertical-align:middle}[dir=ltr] .route-tabset .route-tab a i+span{margin-left:.5rem}[dir=rtl] .route-tabset .route-tab a i+span{margin-right:.5rem}:host.full-width .route-tabset{justify-content:space-around}"]
}] }
];
/** @nocollapse */
NbRouteTabsetComponent.ctorParameters = () => [
{ type: Router }
];
NbRouteTabsetComponent.propDecorators = {
fullWidthValue: [{ type: HostBinding, args: ['class.full-width',] }],
tabs: [{ type: Input }],
fullWidth: [{ type: Input }],
changeTab: [{ type: Output }]
};
if (false) {
/** @type {?} */
NbRouteTabsetComponent.prototype.fullWidthValue;
/** @type {?} */
NbRouteTabsetComponent.prototype.tabs;
/** @type {?} */
NbRouteTabsetComponent.prototype.changeTab;
/**
* @type {?}
* @private
*/
NbRouteTabsetComponent.prototype.router;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicm91dGUtdGFic2V0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL3RoZW1lLWxpYi8iLCJzb3VyY2VzIjpbImxpYi9jb21wb25lbnRzL3JvdXRlLXRhYnNldC9yb3V0ZS10YWJzZXQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7OztBQU1BLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxZQUFZLEVBQUUsV0FBVyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ3BGLE9BQU8sRUFBRSxNQUFNLEVBQUUsTUFBTSxpQkFBaUIsQ0FBQztBQUV6QyxPQUFPLEVBQUUscUJBQXFCLEVBQUUsTUFBTSxZQUFZLENBQUM7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQXlFbkQsTUFBTSxPQUFPLHNCQUFzQjs7OztJQXlCakMsWUFBb0IsTUFBYztRQUFkLFdBQU0sR0FBTixNQUFNLENBQVE7UUF2QkQsbUJBQWMsR0FBWSxLQUFLLENBQUM7Ozs7O1FBcUJ2RCxjQUFTLEdBQUcsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQUc5QyxDQUFDOzs7Ozs7Ozs7SUFaRCxJQUNJLFNBQVMsQ0FBQyxHQUFZO1FBQ3hCLElBQUksQ0FBQyxjQUFjLEdBQUcscUJBQXFCLENBQUMsR0FBRyxDQUFDLENBQUM7SUFDbkQsQ0FBQzs7Ozs7SUFXRCxTQUFTLENBQUMsR0FBUTtRQUNoQixJQUFJLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUV6QixJQUFJLENBQUMsTUFBTSxDQUFDLFFBQVEsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDO0lBQ3BDLENBQUM7OztZQXJERixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLGlCQUFpQjtnQkFFM0IsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7O0dBZ0JUOzthQUNGOzs7O1lBMUVRLE1BQU07Ozs2QkE2RVosV0FBVyxTQUFDLGtCQUFrQjttQkFNOUIsS0FBSzt3QkFNTCxLQUFLO3dCQVNMLE1BQU07Ozs7SUFyQlAsZ0RBQWlFOztJQU1qRSxzQ0FBcUI7O0lBZXJCLDJDQUE4Qzs7Ozs7SUFFbEMsd0NBQXNCIiwic291cmNlc0NvbnRlbnQiOlsiLypcclxuICogQGxpY2Vuc2VcclxuICogQ29weXJpZ2h0IEFrdmVvLiBBbGwgUmlnaHRzIFJlc2VydmVkLlxyXG4gKiBMaWNlbnNlZCB1bmRlciB0aGUgTUlUIExpY2Vuc2UuIFNlZSBMaWNlbnNlLnR4dCBpbiB0aGUgcHJvamVjdCByb290IGZvciBsaWNlbnNlIGluZm9ybWF0aW9uLlxyXG4gKi9cclxuXHJcbmltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQsIE91dHB1dCwgRXZlbnRFbWl0dGVyLCBIb3N0QmluZGluZyB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBSb3V0ZXIgfSBmcm9tICdAYW5ndWxhci9yb3V0ZXInO1xyXG5cclxuaW1wb3J0IHsgY29udmVydFRvQm9vbFByb3BlcnR5IH0gZnJvbSAnLi4vaGVscGVycyc7XHJcblxyXG4vKlxyXG4gKiBSb3V0ZSB0YWJzZXQgY29tcG9uZW50cy5cclxuICogUmVuZGVycyB0YWJzIGluc2lkZSBvZiBhIHJvdXRlci1vdXRsZXQuXHJcbiAqXHJcbiAqIGBgYHRzXHJcbiAqICB0YWJzID0gW1xyXG4gKiAge1xyXG4gKiAgICB0aXRsZTogJ1JvdXRlIHRhYiAjMScsXHJcbiAqICAgIHJvdXRlOiAnL3BhZ2VzL2Rlc2NyaXB0aW9uJyxcclxuICogICAgaWNvbjogJ25iLWhvbWUnLFxyXG4gKiAgICByZXNwb25zaXZlOiB0cnVlLCAvLyBoaWRlIHRpdGxlIGJlZm9yZSBgcm91dGUtdGFicy1pY29uLW9ubHktbWF4LXdpZHRoYCB2YWx1ZVxyXG4gKiAgfSxcclxuICogIHtcclxuICogICAgdGl0bGU6ICdSb3V0ZSB0YWIgIzInLFxyXG4gKiAgICByb3V0ZTogJy9wYWdlcy9pbWFnZXMnLFxyXG4gKiAgICB9XHJcbiAqICBdO1xyXG4gKlxyXG4gKiAgPG5iLXJvdXRlLXRhYnNldCBbdGFic109XCJ0YWJzXCI+PC9uYi1yb3V0ZS10YWJzZXQ+XHJcbiAqIGBgYFxyXG4gKiAjIyMgSW5zdGFsbGF0aW9uXHJcbiAqXHJcbiAqIEltcG9ydCBgTmJSb3V0ZVRhYnNldE1vZHVsZWAgdG8geW91ciBmZWF0dXJlIG1vZHVsZS5cclxuICogYGBgdHNcclxuICogQE5nTW9kdWxlKHtcclxuICogICBpbXBvcnRzOiBbXHJcbiAqICAgXHQvLyAuLi5cclxuICogICAgIE5iUm91dGVUYWJzZXRNb2R1bGUsXHJcbiAqICAgXSxcclxuICogfSlcclxuICogZXhwb3J0IGNsYXNzIFBhZ2VNb2R1bGUgeyB9XHJcbiAqIGBgYFxyXG4gKlxyXG4gKiBAc3RhY2tlZC1leGFtcGxlKFJvdXRlIFRhYnNldCwgdGFic2V0L3JvdXRlLXRhYnNldC1zaG93Y2FzZS5jb21wb25lbnQpXHJcbiAqXHJcbiAqIEBzdHlsZXNcclxuICpcclxuICogcm91dGUtdGFicy1mb250LWZhbWlseTpcclxuICogcm91dGUtdGFicy1mb250LXNpemU6XHJcbiAqIHJvdXRlLXRhYnMtYWN0aXZlLWJnOlxyXG4gKiByb3V0ZS10YWJzLWFjdGl2ZS1mb250LXdlaWdodDpcclxuICogcm91dGUtdGFicy1wYWRkaW5nOlxyXG4gKiByb3V0ZS10YWJzLWhlYWRlci1iZzpcclxuICogcm91dGUtdGFicy1zZXBhcmF0b3I6XHJcbiAqIHJvdXRlLXRhYnMtZmc6XHJcbiAqIHJvdXRlLXRhYnMtZmctaGVhZGluZzpcclxuICogcm91dGUtdGFicy1iZzpcclxuICogcm91dGUtdGFicy1zZWxlY3RlZDpcclxuICogcm91dGUtdGFicy1pY29uLW9ubHktbWF4LXdpZHRoOlxyXG4gKi9cclxuQENvbXBvbmVudCh7XHJcbiAgc2VsZWN0b3I6ICduYi1yb3V0ZS10YWJzZXQnLFxyXG4gIHN0eWxlVXJsczogWycuL3JvdXRlLXRhYnNldC5jb21wb25lbnQuc2NzcyddLFxyXG4gIHRlbXBsYXRlOiBgXHJcbiAgICA8dWwgY2xhc3M9XCJyb3V0ZS10YWJzZXRcIj5cclxuICAgICAgPGxpICpuZ0Zvcj1cImxldCB0YWIgb2YgdGFic1wiXHJcbiAgICAgICAgICAoY2xpY2spPVwiJGV2ZW50LnByZXZlbnREZWZhdWx0KCk7IHNlbGVjdFRhYih0YWIpXCJcclxuICAgICAgICAgIHJvdXRlckxpbms9XCJ7e3RhYi5yb3V0ZX19XCJcclxuICAgICAgICAgIHJvdXRlckxpbmtBY3RpdmU9XCJhY3RpdmVcIlxyXG4gICAgICAgICAgW3JvdXRlckxpbmtBY3RpdmVPcHRpb25zXT1cInsgZXhhY3Q6IHRydWUgfVwiXHJcbiAgICAgICAgICBbY2xhc3MucmVzcG9uc2l2ZV09XCJ0YWIucmVzcG9uc2l2ZVwiXHJcbiAgICAgICAgICBjbGFzcz1cInJvdXRlLXRhYlwiPlxyXG4gICAgICAgIDxhIGhyZWY+XHJcbiAgICAgICAgICA8aSAqbmdJZj1cInRhYi5pY29uXCIgW2NsYXNzXT1cInRhYi5pY29uXCI+PC9pPlxyXG4gICAgICAgICAgPHNwYW4gKm5nSWY9XCJ0YWIudGl0bGVcIj57eyB0YWIudGl0bGUgfX08L3NwYW4+XHJcbiAgICAgICAgPC9hPlxyXG4gICAgICA8L2xpPlxyXG4gICAgPC91bD5cclxuICAgIDxyb3V0ZXItb3V0bGV0Pjwvcm91dGVyLW91dGxldD5cclxuICBgLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgTmJSb3V0ZVRhYnNldENvbXBvbmVudCB7XHJcblxyXG4gIEBIb3N0QmluZGluZygnY2xhc3MuZnVsbC13aWR0aCcpIGZ1bGxXaWR0aFZhbHVlOiBib29sZWFuID0gZmFsc2U7XHJcblxyXG4gIC8qXHJcbiAgICogVGFicyBjb25maWd1cmF0aW9uXHJcbiAgICogQHBhcmFtIE9iamVjdHtyb3V0ZTogc3RyaW5nLCB0aXRsZTogc3RyaW5nLCB0YWc/OiBzdHJpbmd9XHJcbiAgICovXHJcbiAgQElucHV0KCkgdGFiczogYW55W107XHJcblxyXG4gIC8qXHJcbiAgICogVGFrZSBmdWxsIHdpZHRoIG9mIGEgcGFyZW50XHJcbiAgICogQHBhcmFtIHtib29sZWFufSB2YWxcclxuICAgKi9cclxuICBASW5wdXQoKVxyXG4gIHNldCBmdWxsV2lkdGgodmFsOiBib29sZWFuKSB7XHJcbiAgICB0aGlzLmZ1bGxXaWR0aFZhbHVlID0gY29udmVydFRvQm9vbFByb3BlcnR5KHZhbCk7XHJcbiAgfVxyXG5cclxuICAvKlxyXG4gICAqIEVtaXRzIHdoZW4gdGFiIGlzIHNlbGVjdGVkXHJcbiAgICogQHR5cGUge0V2ZW50RW1pdHRlcjxhbnk+fVxyXG4gICAqL1xyXG4gIEBPdXRwdXQoKSBjaGFuZ2VUYWIgPSBuZXcgRXZlbnRFbWl0dGVyPGFueT4oKTtcclxuXHJcbiAgY29uc3RydWN0b3IocHJpdmF0ZSByb3V0ZXI6IFJvdXRlcikge1xyXG4gIH1cclxuXHJcbiAgc2VsZWN0VGFiKHRhYjogYW55KSB7XHJcbiAgICB0aGlzLmNoYW5nZVRhYi5lbWl0KHRhYik7XHJcblxyXG4gICAgdGhpcy5yb3V0ZXIubmF2aWdhdGUoW3RhYi5yb3V0ZV0pO1xyXG4gIH1cclxufVxyXG4iXX0=