ngx-formly-tabs
Version:
ngx-formly-tabs is an Angular module that adds Components that enable flexible tab use for @ngx-formly.
575 lines (555 loc) • 21.8 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('rxjs'), require('@angular/common'), require('@angular/forms'), require('@ngx-formly/core'), require('@angular/core')) :
typeof define === 'function' && define.amd ? define('ngx-formly-tabs', ['exports', 'rxjs', '@angular/common', '@angular/forms', '@ngx-formly/core', '@angular/core'], factory) :
(factory((global['ngx-formly-tabs'] = {}),global.rxjs,global.ng.common,global.ng.forms,global.core,global.ng.core));
}(this, (function (exports,rxjs,common,forms,core,core$1) { 'use strict';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TabsetService = /** @class */ (function () {
function TabsetService() {
this._tabs = new rxjs.BehaviorSubject([]);
}
Object.defineProperty(TabsetService.prototype, "tabs", {
get: /**
* @return {?}
*/ function () {
return this._tabs.value.slice();
},
enumerable: true,
configurable: true
});
Object.defineProperty(TabsetService.prototype, "tabs$", {
get: /**
* @return {?}
*/ function () {
return this._tabs.asObservable();
},
enumerable: true,
configurable: true
});
/**
* @param {?} tab
* @return {?}
*/
TabsetService.prototype.add = /**
* @param {?} tab
* @return {?}
*/
function (tab) {
this._tabs.next(this._tabs.value.filter(( /**
* @param {?} t
* @return {?}
*/function (t) { return t !== tab; })).concat(tab));
};
/**
* @param {?} tab
* @return {?}
*/
TabsetService.prototype.remove = /**
* @param {?} tab
* @return {?}
*/
function (tab) {
this._tabs.next(this._tabs.value.filter(( /**
* @param {?} t
* @return {?}
*/function (t) { return t !== tab; })));
};
/**
* @return {?}
*/
TabsetService.prototype.update = /**
* @return {?}
*/
function () {
this._tabs.next(this.tabs);
};
TabsetService.decorators = [
{ type: core$1.Injectable }
];
return TabsetService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TabsetComponent = /** @class */ (function () {
function TabsetComponent(tabsetService) {
this.tabsetService = tabsetService;
this.activeTabChange = new core$1.EventEmitter();
this._tabs = [];
this._visibleCount = 0;
}
Object.defineProperty(TabsetComponent.prototype, "tabs", {
get: /**
* @return {?}
*/ function () {
return this._tabs;
},
enumerable: true,
configurable: true
});
Object.defineProperty(TabsetComponent.prototype, "visibleCount", {
get: /**
* @return {?}
*/ function () {
return this._visibleCount;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
TabsetComponent.prototype.ngAfterContentInit = /**
* @return {?}
*/
function () {
var _this = this;
this.subscription = this.tabsetService.tabs$.subscribe(( /**
* @return {?}
*/function () {
_this.onTabsChanged();
}));
};
/**
* @return {?}
*/
TabsetComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this.subscription) {
this.subscription.unsubscribe();
}
};
/**
* @param {?} tab
* @return {?}
*/
TabsetComponent.prototype.select = /**
* @param {?} tab
* @return {?}
*/
function (tab) {
this.tabsetService.tabs.forEach(( /**
* @param {?} t
* @return {?}
*/function (t) {
t.active = t === tab;
}));
this.activeTabChange.emit(tab ? tab.title : null);
};
/**
* @private
* @return {?}
*/
TabsetComponent.prototype.onTabsChanged = /**
* @private
* @return {?}
*/
function () {
var _this = this;
Promise.resolve().then(( /**
* @return {?}
*/function () {
if (_this.subscription.closed) {
return;
}
/** @type {?} */
var tabs = _this.tabsetService.tabs;
_this._tabs = tabs;
_this._visibleCount = tabs.filter(( /**
* @param {?} t
* @return {?}
*/function (t) { return !t.hidden; })).length;
if (!tabs.some(( /**
* @param {?} tab
* @return {?}
*/function (tab) { return tab.active && !tab.disabled && !tab.hidden; }))) {
_this.select(tabs.find(( /**
* @param {?} t
* @return {?}
*/function (t) { return !t.disabled && !t.hidden; })));
}
}));
};
TabsetComponent.decorators = [
{ type: core$1.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 = function () {
return [
{ type: TabsetService }
];
};
TabsetComponent.propDecorators = {
activeTabChange: [{ type: core$1.Output }]
};
return TabsetComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var TabComponent = /** @class */ (function () {
function TabComponent(tabsetService) {
this.tabsetService = tabsetService;
}
/**
* @param {?} changes
* @return {?}
*/
TabComponent.prototype.ngOnChanges = /**
* @param {?} changes
* @return {?}
*/
function (changes) {
if (!changes.title) {
this.tabsetService.update();
}
};
/**
* @return {?}
*/
TabComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
if (this.tabsetService) {
this.tabsetService.add(this);
}
};
/**
* @return {?}
*/
TabComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
if (this.tabsetService) {
this.tabsetService.remove(this);
}
};
TabComponent.decorators = [
{ type: core$1.Component, args: [{
selector: 'formly-tabs-tab',
template: "<ng-content *ngIf=\"!tabsetService || (active && !disabled && !hidden)\"></ng-content>",
styles: [""]
}] }
];
/** @nocollapse */
TabComponent.ctorParameters = function () {
return [
{ type: TabsetService, decorators: [{ type: core$1.Optional }] }
];
};
TabComponent.propDecorators = {
active: [{ type: core$1.Input }],
disabled: [{ type: core$1.Input }],
hidden: [{ type: core$1.Input }],
title: [{ type: core$1.Input }]
};
return TabComponent;
}());
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
/* global Reflect, Promise */
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b)
if (b.hasOwnProperty(p))
d[p] = b[p]; };
return extendStatics(d, b);
};
function __extends(d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var FormlyFieldTabComponent = /** @class */ (function (_super) {
__extends(FormlyFieldTabComponent, _super);
function FormlyFieldTabComponent() {
return _super.call(this) || this;
}
Object.defineProperty(FormlyFieldTabComponent.prototype, "title", {
get: /**
* @return {?}
*/ function () {
return this.to.tabTitle;
},
enumerable: true,
configurable: true
});
Object.defineProperty(FormlyFieldTabComponent.prototype, "disabled", {
get: /**
* @return {?}
*/ function () {
return this.to.tabDisabled;
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this.to.tabDisabled = !!value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(FormlyFieldTabComponent.prototype, "hidden", {
get: /**
* @return {?}
*/ function () {
return this.to.tabHidden;
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this.to.tabHidden = !!value;
},
enumerable: true,
configurable: true
});
FormlyFieldTabComponent.decorators = [
{ type: core$1.Component, args: [{
selector: 'formly-field-tab',
template: "\n <formly-tabs-tab [title]=\"title\" [disabled]=\"disabled\" [hidden]=\"hidden\">\n <formly-field *ngFor=\"let f of field.fieldGroup\" [field]=\"f\"></formly-field>\n </formly-tabs-tab>\n ",
host: {
'[class]': 'field.fieldGroupClassName || ""',
}
}] }
];
/** @nocollapse */
FormlyFieldTabComponent.ctorParameters = function () { return []; };
return FormlyFieldTabComponent;
}(core.FieldType));
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var FormlyFieldTabsetComponent = /** @class */ (function (_super) {
__extends(FormlyFieldTabsetComponent, _super);
function FormlyFieldTabsetComponent() {
return _super !== null && _super.apply(this, arguments) || this;
}
Object.defineProperty(FormlyFieldTabsetComponent.prototype, "activeTab", {
get: /**
* @return {?}
*/ function () {
return this.to.activeTab;
},
enumerable: true,
configurable: true
});
/**
* @param {?} tabTitle
* @return {?}
*/
FormlyFieldTabsetComponent.prototype.onActiveTagChange = /**
* @param {?} tabTitle
* @return {?}
*/
function (tabTitle) {
this.to.activeTab = tabTitle == null ? null : tabTitle;
if (this.to.activeTabChange) {
this.to.activeTabChange(this.to.activeTab);
}
};
FormlyFieldTabsetComponent.decorators = [
{ type: core$1.Component, args: [{
selector: 'formly-field-tabset',
template: "\n <formly-tabs-tabset (activeTabChange)=\"onActiveTagChange($event)\">\n <formly-field *ngFor=\"let f of field.fieldGroup\" [field]=\"f\"></formly-field>\n </formly-tabs-tabset>\n ",
host: {
'[class]': 'field.fieldGroupClassName || ""',
},
providers: [TabsetService]
}] }
];
return FormlyFieldTabsetComponent;
}(core.FieldType));
/**
* @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
*/
var FormlyWrapperTabComponent = /** @class */ (function (_super) {
__extends(FormlyWrapperTabComponent, _super);
function FormlyWrapperTabComponent() {
return _super !== null && _super.apply(this, arguments) || this;
}
Object.defineProperty(FormlyWrapperTabComponent.prototype, "title", {
get: /**
* @return {?}
*/ function () {
return this.to.tabTitle;
},
enumerable: true,
configurable: true
});
Object.defineProperty(FormlyWrapperTabComponent.prototype, "disabled", {
get: /**
* @return {?}
*/ function () {
return this.to.tabDisabled;
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this.to.tabDisabled = !!value;
},
enumerable: true,
configurable: true
});
Object.defineProperty(FormlyWrapperTabComponent.prototype, "hidden", {
get: /**
* @return {?}
*/ function () {
return this.to.tabHidden;
},
set: /**
* @param {?} value
* @return {?}
*/ function (value) {
this.to.tabHidden = !!value;
},
enumerable: true,
configurable: true
});
FormlyWrapperTabComponent.decorators = [
{ type: core$1.Component, args: [{
selector: 'formly-wrapper-tab',
template: "\n <formly-tabs-tab [title]=\"title\" [disabled]=\"disabled\" [hidden]=\"hidden\">\n <ng-template #fieldComponent>\n </ng-template>\n </formly-tabs-tab>\n "
}] }
];
FormlyWrapperTabComponent.propDecorators = {
fieldComponent: [{ type: core$1.ViewChild, args: ['fieldComponent', { read: core$1.ViewContainerRef },] }]
};
return FormlyWrapperTabComponent;
}(core.FieldWrapper));
/**
* @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
*/
var VisiblePipe = /** @class */ (function () {
function VisiblePipe() {
}
/**
* @param {?} tabs
* @return {?}
*/
VisiblePipe.prototype.transform = /**
* @param {?} tabs
* @return {?}
*/
function (tabs) {
return Array.isArray(tabs) ? tabs.filter(( /**
* @param {?} t
* @return {?}
*/function (t) { return !t.hidden; })) : [];
};
VisiblePipe.decorators = [
{ type: core$1.Pipe, args: [{ name: 'visible' },] }
];
return VisiblePipe;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
var FIELD_TYPE_COMPONENTS = [
// types
FormlyFieldTabComponent,
FormlyFieldTabsetComponent,
// wrappers
FormlyWrapperTabComponent
];
/** @type {?} */
var 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
*/
var FormlyTabsModule = /** @class */ (function () {
function FormlyTabsModule() {
}
FormlyTabsModule.decorators = [
{ type: core$1.NgModule, args: [{
imports: [
common.CommonModule,
forms.ReactiveFormsModule,
core.FormlyModule.forRoot(FORMLY_TABS_FORMLY_CONFIG),
],
declarations: [
TabsetComponent,
TabComponent,
FIELD_TYPE_COMPONENTS,
VisiblePipe,
],
exports: [
TabsetComponent,
TabComponent
]
},] }
];
return FormlyTabsModule;
}());
/**
* @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
*/
exports.TabsetService = TabsetService;
exports.TabsetComponent = TabsetComponent;
exports.TabComponent = TabComponent;
exports.FormlyFieldTabComponent = FormlyFieldTabComponent;
exports.FormlyFieldTabsetComponent = FormlyFieldTabsetComponent;
exports.FormlyWrapperTabComponent = FormlyWrapperTabComponent;
exports.FormlyTabsModule = FormlyTabsModule;
exports.ɵa = FIELD_TYPE_COMPONENTS;
exports.ɵb = FORMLY_TABS_FORMLY_CONFIG;
exports.ɵc = VisiblePipe;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=ngx-formly-tabs.umd.js.map