ngx-formly-tabs
Version:
ngx-formly-tabs is an Angular module that adds Components that enable flexible tab use for @ngx-formly.
462 lines (447 loc) • 12.8 kB
JavaScript
import { BehaviorSubject } from 'rxjs';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { FieldType, FieldWrapper, FormlyModule } from '@ngx-formly/core';
import { Injectable, Component, EventEmitter, Output, Input, Optional, ViewContainerRef, ViewChild, Pipe, NgModule } from '@angular/core';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class TabsetService {
constructor() {
this._tabs = new BehaviorSubject([]);
}
/**
* @return {?}
*/
get tabs() {
return this._tabs.value.slice();
}
/**
* @return {?}
*/
get tabs$() {
return this._tabs.asObservable();
}
/**
* @param {?} tab
* @return {?}
*/
add(tab) {
this._tabs.next(this._tabs.value.filter((/**
* @param {?} t
* @return {?}
*/
t => t !== tab)).concat(tab));
}
/**
* @param {?} tab
* @return {?}
*/
remove(tab) {
this._tabs.next(this._tabs.value.filter((/**
* @param {?} t
* @return {?}
*/
t => t !== tab)));
}
/**
* @return {?}
*/
update() {
this._tabs.next(this.tabs);
}
}
TabsetService.decorators = [
{ type: Injectable }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class TabsetComponent {
/**
* @param {?} tabsetService
*/
constructor(tabsetService) {
this.tabsetService = tabsetService;
this.activeTabChange = new EventEmitter();
this._tabs = [];
this._visibleCount = 0;
}
/**
* @return {?}
*/
get tabs() {
return this._tabs;
}
/**
* @return {?}
*/
get visibleCount() {
return this._visibleCount;
}
/**
* @return {?}
*/
ngAfterContentInit() {
this.subscription = this.tabsetService.tabs$.subscribe((/**
* @return {?}
*/
() => {
this.onTabsChanged();
}));
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
/**
* @param {?} tab
* @return {?}
*/
select(tab) {
this.tabsetService.tabs.forEach((/**
* @param {?} t
* @return {?}
*/
t => {
t.active = t === tab;
}));
this.activeTabChange.emit(tab ? tab.title : null);
}
/**
* @private
* @return {?}
*/
onTabsChanged() {
Promise.resolve().then((/**
* @return {?}
*/
() => {
if (this.subscription.closed) {
return;
}
/** @type {?} */
const tabs = this.tabsetService.tabs;
this._tabs = tabs;
this._visibleCount = tabs.filter((/**
* @param {?} t
* @return {?}
*/
t => !t.hidden)).length;
if (!tabs.some((/**
* @param {?} tab
* @return {?}
*/
tab => tab.active && !tab.disabled && !tab.hidden))) {
this.select(tabs.find((/**
* @param {?} t
* @return {?}
*/
t => !t.disabled && !t.hidden)));
}
}));
}
}
TabsetComponent.decorators = [
{ type: Component, args: [{
selector: 'formly-tabs-tabset',
template: "<ul class=\"nav nav-tabs\">\r\n <li class=\"nav-item\" *ngFor=\"let tab of tabs | visible\" role=\"presentation\" (click)=\"!tab.disabled && !tab.hidden && select(tab)\">\r\n <div class=\"nav-link\" [ngClass]=\"{active: tab.active && !tab.disabled && !tab.hidden, disabled: tab.disabled}\">\r\n {{ tab.title }}\r\n </div>\r\n </li>\r\n</ul>\r\n<div class=\"content\" [ngClass]=\"{empty: visibleCount === 0}\">\r\n <ng-content></ng-content>\r\n</div>",
styles: [".nav-link{cursor:pointer;cursor:hand}:host>.content{border:1px solid #ddd;border-top:0;padding:1em}"]
}] }
];
/** @nocollapse */
TabsetComponent.ctorParameters = () => [
{ type: TabsetService }
];
TabsetComponent.propDecorators = {
activeTabChange: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class TabComponent {
/**
* @param {?} tabsetService
*/
constructor(tabsetService) {
this.tabsetService = tabsetService;
}
/**
* @param {?} changes
* @return {?}
*/
ngOnChanges(changes) {
if (!changes.title) {
this.tabsetService.update();
}
}
/**
* @return {?}
*/
ngOnInit() {
if (this.tabsetService) {
this.tabsetService.add(this);
}
}
/**
* @return {?}
*/
ngOnDestroy() {
if (this.tabsetService) {
this.tabsetService.remove(this);
}
}
}
TabComponent.decorators = [
{ type: Component, args: [{
selector: 'formly-tabs-tab',
template: "<ng-content *ngIf=\"!tabsetService || (active && !disabled && !hidden)\"></ng-content>",
styles: [""]
}] }
];
/** @nocollapse */
TabComponent.ctorParameters = () => [
{ type: TabsetService, decorators: [{ type: Optional }] }
];
TabComponent.propDecorators = {
active: [{ type: Input }],
disabled: [{ type: Input }],
hidden: [{ type: Input }],
title: [{ type: Input }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class FormlyFieldTabComponent extends FieldType {
constructor() {
super();
}
/**
* @return {?}
*/
get title() {
return this.to.tabTitle;
}
/**
* @return {?}
*/
get disabled() {
return this.to.tabDisabled;
}
/**
* @param {?} value
* @return {?}
*/
set disabled(value) {
this.to.tabDisabled = !!value;
}
/**
* @return {?}
*/
get hidden() {
return this.to.tabHidden;
}
/**
* @param {?} value
* @return {?}
*/
set hidden(value) {
this.to.tabHidden = !!value;
}
}
FormlyFieldTabComponent.decorators = [
{ type: Component, args: [{
selector: 'formly-field-tab',
template: `
<formly-tabs-tab [title]="title" [disabled]="disabled" [hidden]="hidden">
<formly-field *ngFor="let f of field.fieldGroup" [field]="f"></formly-field>
</formly-tabs-tab>
`,
host: {
'[class]': 'field.fieldGroupClassName || ""',
}
}] }
];
/** @nocollapse */
FormlyFieldTabComponent.ctorParameters = () => [];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class FormlyFieldTabsetComponent extends FieldType {
/**
* @return {?}
*/
get activeTab() {
return this.to.activeTab;
}
/**
* @param {?} tabTitle
* @return {?}
*/
onActiveTagChange(tabTitle) {
this.to.activeTab = tabTitle == null ? null : tabTitle;
if (this.to.activeTabChange) {
this.to.activeTabChange(this.to.activeTab);
}
}
}
FormlyFieldTabsetComponent.decorators = [
{ type: Component, args: [{
selector: 'formly-field-tabset',
template: `
<formly-tabs-tabset (activeTabChange)="onActiveTagChange($event)">
<formly-field *ngFor="let f of field.fieldGroup" [field]="f"></formly-field>
</formly-tabs-tabset>
`,
host: {
'[class]': 'field.fieldGroupClassName || ""',
},
providers: [TabsetService]
}] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class FormlyWrapperTabComponent extends FieldWrapper {
/**
* @return {?}
*/
get title() {
return this.to.tabTitle;
}
/**
* @return {?}
*/
get disabled() {
return this.to.tabDisabled;
}
/**
* @param {?} value
* @return {?}
*/
set disabled(value) {
this.to.tabDisabled = !!value;
}
/**
* @return {?}
*/
get hidden() {
return this.to.tabHidden;
}
/**
* @param {?} value
* @return {?}
*/
set hidden(value) {
this.to.tabHidden = !!value;
}
}
FormlyWrapperTabComponent.decorators = [
{ type: Component, args: [{
selector: 'formly-wrapper-tab',
template: `
<formly-tabs-tab [title]="title" [disabled]="disabled" [hidden]="hidden">
<ng-template #fieldComponent>
</ng-template>
</formly-tabs-tab>
`
}] }
];
FormlyWrapperTabComponent.propDecorators = {
fieldComponent: [{ type: ViewChild, args: ['fieldComponent', { read: ViewContainerRef },] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class VisiblePipe {
/**
* @param {?} tabs
* @return {?}
*/
transform(tabs) {
return Array.isArray(tabs) ? tabs.filter((/**
* @param {?} t
* @return {?}
*/
t => !t.hidden)) : [];
}
}
VisiblePipe.decorators = [
{ type: Pipe, args: [{ name: 'visible' },] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const FIELD_TYPE_COMPONENTS = [
// types
FormlyFieldTabComponent,
FormlyFieldTabsetComponent,
// wrappers
FormlyWrapperTabComponent
];
/** @type {?} */
const FORMLY_TABS_FORMLY_CONFIG = {
types: [
{ name: 'tab', component: FormlyFieldTabComponent },
{ name: 'tabset', component: FormlyFieldTabsetComponent }
],
wrappers: [
{ name: 'tab', component: FormlyWrapperTabComponent }
]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class FormlyTabsModule {
}
FormlyTabsModule.decorators = [
{ type: NgModule, args: [{
imports: [
CommonModule,
ReactiveFormsModule,
FormlyModule.forRoot(FORMLY_TABS_FORMLY_CONFIG),
],
declarations: [
TabsetComponent,
TabComponent,
FIELD_TYPE_COMPONENTS,
VisiblePipe,
],
exports: [
TabsetComponent,
TabComponent
]
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { TabsetService, TabsetComponent, TabComponent, FormlyFieldTabComponent, FormlyFieldTabsetComponent, FormlyWrapperTabComponent, FormlyTabsModule, FIELD_TYPE_COMPONENTS as ɵa, FORMLY_TABS_FORMLY_CONFIG as ɵb, VisiblePipe as ɵc };
//# sourceMappingURL=ngx-formly-tabs.js.map