@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>
90 lines • 6.22 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, ContentChildren, QueryList, HostBinding, Input, TemplateRef, } from '@angular/core';
import { TabItem } from './tab-item.component';
export class Tabs {
constructor() {
/**
* Set to `true` to fit tabs to container.
*/
this.fitted = false;
}
/**
* @return {?}
*/
ngAfterContentInit() {
/** @type {?} */
const activeTabs = this.tabs.filter((/**
* @param {?} tab
* @return {?}
*/
(tab) => tab.active));
if (activeTabs.length === 0 && this.tabs.length > 0) {
this.selectTab(this.tabs.first);
}
}
/**
* Selects a particular tab and activates it.
* @param {?} tabItem
* @return {?}
*/
selectTab(tabItem) {
this.tabs.toArray().forEach((/**
* @param {?} tab
* @return {?}
*/
tab => tab.active = false));
tabItem.activate();
}
/**
* @param {?} value
* @return {?}
*/
isTemplate(value) {
return value instanceof TemplateRef;
}
}
Tabs.decorators = [
{ type: Component, args: [{
selector: 'suka-tabs',
template: `
<div class="tabs-wrapper">
<ul class="tabs">
<li
*ngFor="let tab of tabs"
(click)="selectTab(tab)"
[class.tabs__tab-container--selected]="tab.active"
class="tabs__tab-container"
>
<button class="tabs__tab" type="button" role="tab">
<span class="tabs__title">
<ng-container *ngIf="!isTemplate(tab.title)">{{tab.title}}</ng-container>
<ng-template *ngIf="isTemplate(tab.title)" [ngTemplateOutlet]="tab.title"></ng-template>
</span>
</button>
</li>
</ul>
</div>
<ng-content></ng-content>
`
}] }
];
Tabs.propDecorators = {
fitted: [{ type: HostBinding, args: ['class.tabs-fitted',] }, { type: Input }],
tabs: [{ type: ContentChildren, args: [TabItem,] }]
};
if (false) {
/**
* Set to `true` to fit tabs to container.
* @type {?}
*/
Tabs.prototype.fitted;
/**
* List of tabs associated to the main wrapper.
* @type {?}
*/
Tabs.prototype.tabs;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFicy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290Ijoibmc6Ly9Aa3VzaGtpL25nLXN1a2EvIiwic291cmNlcyI6WyJsaWIvdGFicy90YWJzLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUNMLFNBQVMsRUFDVCxlQUFlLEVBQ2YsU0FBUyxFQUVULFdBQVcsRUFDWCxLQUFLLEVBQ0wsV0FBVyxHQUNaLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQXlCL0MsTUFBTSxPQUFPLElBQUk7SUF2QmpCOzs7O1FBMkI2QyxXQUFNLEdBQUcsS0FBSyxDQUFDO0lBMkI1RCxDQUFDOzs7O0lBcEJDLGtCQUFrQjs7Y0FDVixVQUFVLEdBQUcsSUFBSSxDQUFDLElBQUksQ0FBQyxNQUFNOzs7O1FBQUMsQ0FBQyxHQUFHLEVBQUUsRUFBRSxDQUFDLEdBQUcsQ0FBQyxNQUFNLEVBQUM7UUFFeEQsSUFBSSxVQUFVLENBQUMsTUFBTSxLQUFLLENBQUMsSUFBSSxJQUFJLENBQUMsSUFBSSxDQUFDLE1BQU0sR0FBRyxDQUFDLEVBQUU7WUFDbkQsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEtBQUssQ0FBQyxDQUFDO1NBQ2pDO0lBQ0gsQ0FBQzs7Ozs7O0lBS0QsU0FBUyxDQUFDLE9BQWdCO1FBQ3hCLElBQUksQ0FBQyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUMsT0FBTzs7OztRQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxDQUFDLE1BQU0sR0FBRyxLQUFLLEVBQUMsQ0FBQztRQUV2RCxPQUFPLENBQUMsUUFBUSxFQUFFLENBQUM7SUFDckIsQ0FBQzs7Ozs7SUFFTSxVQUFVLENBQUMsS0FBSztRQUNyQixPQUFPLEtBQUssWUFBWSxXQUFXLENBQUM7SUFDdEMsQ0FBQzs7O1lBckRGLFNBQVMsU0FBQztnQkFDVCxRQUFRLEVBQUUsV0FBVztnQkFDckIsUUFBUSxFQUFFOzs7Ozs7Ozs7Ozs7Ozs7Ozs7O0dBbUJUO2FBQ0Y7OztxQkFLRSxXQUFXLFNBQUMsbUJBQW1CLGNBQUcsS0FBSzttQkFLdkMsZUFBZSxTQUFDLE9BQU87Ozs7Ozs7SUFMeEIsc0JBQTBEOzs7OztJQUsxRCxvQkFBbUQiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIENvbnRlbnRDaGlsZHJlbixcbiAgUXVlcnlMaXN0LFxuICBBZnRlckNvbnRlbnRJbml0LFxuICBIb3N0QmluZGluZyxcbiAgSW5wdXQsXG4gIFRlbXBsYXRlUmVmLFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuaW1wb3J0IHsgVGFiSXRlbSB9IGZyb20gJy4vdGFiLWl0ZW0uY29tcG9uZW50JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3VrYS10YWJzJyxcbiAgdGVtcGxhdGU6IGBcbiAgICA8ZGl2IGNsYXNzPVwidGFicy13cmFwcGVyXCI+XG4gICAgICA8dWwgY2xhc3M9XCJ0YWJzXCI+XG4gICAgICAgIDxsaVxuICAgICAgICAgICpuZ0Zvcj1cImxldCB0YWIgb2YgdGFic1wiXG4gICAgICAgICAgKGNsaWNrKT1cInNlbGVjdFRhYih0YWIpXCJcbiAgICAgICAgICBbY2xhc3MudGFic19fdGFiLWNvbnRhaW5lci0tc2VsZWN0ZWRdPVwidGFiLmFjdGl2ZVwiXG4gICAgICAgICAgY2xhc3M9XCJ0YWJzX190YWItY29udGFpbmVyXCJcbiAgICAgICAgPlxuICAgICAgICAgIDxidXR0b24gY2xhc3M9XCJ0YWJzX190YWJcIiB0eXBlPVwiYnV0dG9uXCIgcm9sZT1cInRhYlwiPlxuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJ0YWJzX190aXRsZVwiPlxuICAgICAgICAgICAgPG5nLWNvbnRhaW5lciAqbmdJZj1cIiFpc1RlbXBsYXRlKHRhYi50aXRsZSlcIj57e3RhYi50aXRsZX19PC9uZy1jb250YWluZXI+XG4gICAgICAgICAgICA8bmctdGVtcGxhdGUgKm5nSWY9XCJpc1RlbXBsYXRlKHRhYi50aXRsZSlcIiBbbmdUZW1wbGF0ZU91dGxldF09XCJ0YWIudGl0bGVcIj48L25nLXRlbXBsYXRlPlxuICAgICAgICAgICAgPC9zcGFuPlxuICAgICAgICAgIDwvYnV0dG9uPlxuICAgICAgICA8L2xpPlxuICAgICAgPC91bD5cbiAgICA8L2Rpdj5cbiAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gIGAsXG59KVxuZXhwb3J0IGNsYXNzIFRhYnMgaW1wbGVtZW50cyBBZnRlckNvbnRlbnRJbml0IHtcbiAgLyoqXG4gICAqIFNldCB0byBgdHJ1ZWAgdG8gZml0IHRhYnMgdG8gY29udGFpbmVyLlxuICAgKi9cbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy50YWJzLWZpdHRlZCcpIEBJbnB1dCgpIGZpdHRlZCA9IGZhbHNlO1xuXG4gIC8qKlxuICAgKiBMaXN0IG9mIHRhYnMgYXNzb2NpYXRlZCB0byB0aGUgbWFpbiB3cmFwcGVyLlxuICAgKi9cbiAgQENvbnRlbnRDaGlsZHJlbihUYWJJdGVtKSB0YWJzOiBRdWVyeUxpc3Q8VGFiSXRlbT47XG5cbiAgbmdBZnRlckNvbnRlbnRJbml0KCkge1xuICAgIGNvbnN0IGFjdGl2ZVRhYnMgPSB0aGlzLnRhYnMuZmlsdGVyKCh0YWIpID0+IHRhYi5hY3RpdmUpO1xuXG4gICAgaWYgKGFjdGl2ZVRhYnMubGVuZ3RoID09PSAwICYmIHRoaXMudGFicy5sZW5ndGggPiAwKSB7XG4gICAgICB0aGlzLnNlbGVjdFRhYih0aGlzLnRhYnMuZmlyc3QpO1xuICAgIH1cbiAgfVxuXG4gIC8qKlxuICAgKiBTZWxlY3RzIGEgcGFydGljdWxhciB0YWIgYW5kIGFjdGl2YXRlcyBpdC5cbiAgICovXG4gIHNlbGVjdFRhYih0YWJJdGVtOiBUYWJJdGVtKSB7XG4gICAgdGhpcy50YWJzLnRvQXJyYXkoKS5mb3JFYWNoKHRhYiA9PiB0YWIuYWN0aXZlID0gZmFsc2UpO1xuXG4gICAgdGFiSXRlbS5hY3RpdmF0ZSgpO1xuICB9XG5cbiAgcHVibGljIGlzVGVtcGxhdGUodmFsdWUpIHtcbiAgICByZXR1cm4gdmFsdWUgaW5zdGFuY2VvZiBUZW1wbGF0ZVJlZjtcbiAgfVxufVxuIl19