ngx-formly-tabs/fesm5/ngx-formly-tabs.js

ngx-formly-tabs is an Angular module that adds Components that enable flexible tab use for @ngx-formly.

import { BehaviorSubject } from 'rxjs';
import { __extends } from 'tslib';
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
 */
var TabsetService = /** @class */ (function () {
    function TabsetService() {
        this._tabs = new 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: 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 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: 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: 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: 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: Optional }] }
    ]; };
    TabComponent.propDecorators = {
        active: [{ type: Input }],
        disabled: [{ type: Input }],
        hidden: [{ type: Input }],
        title: [{ type: Input }]
    };
    return TabComponent;
}());

/**
 * @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: 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;
}(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: 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;
}(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: 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: ViewChild, args: ['fieldComponent', { read: ViewContainerRef },] }]
    };
    return FormlyWrapperTabComponent;
}(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: 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: NgModule, args: [{
                    imports: [
                        CommonModule,
                        ReactiveFormsModule,
                        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
 */

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