VLEX/BPM-UI/node_modules/ngx-bootstrap/tabs/bundles/ngx-bootstrap-tabs.umd.js

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common')) :
    typeof define === 'function' && define.amd ? define('ngx-bootstrap/tabs', ['exports', '@angular/core', '@angular/common'], factory) :
    (global = global || self, factory((global['ngx-bootstrap'] = global['ngx-bootstrap'] || {}, global['ngx-bootstrap'].tabs = {}), global.ng.core, global.ng.common));
}(this, function (exports, core, common) { 'use strict';

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var NgTranscludeDirective = /** @class */ (function () {
        function NgTranscludeDirective(viewRef) {
            this.viewRef = viewRef;
        }
        Object.defineProperty(NgTranscludeDirective.prototype, "ngTransclude", {
            /* tslint:disable-next-line:no-any */
            get: /* tslint:disable-next-line:no-any */
            /**
             * @return {?}
             */
            function () {
                return this._ngTransclude;
            },
            set: /**
             * @param {?} templateRef
             * @return {?}
             */
            function (templateRef) {
                this._ngTransclude = templateRef;
                if (templateRef) {
                    this.viewRef.createEmbeddedView(templateRef);
                }
            },
            enumerable: true,
            configurable: true
        });
        NgTranscludeDirective.decorators = [
            { type: core.Directive, args: [{
                        selector: '[ngTransclude]'
                    },] }
        ];
        /** @nocollapse */
        NgTranscludeDirective.ctorParameters = function () { return [
            { type: core.ViewContainerRef }
        ]; };
        NgTranscludeDirective.propDecorators = {
            ngTransclude: [{ type: core.Input }]
        };
        return NgTranscludeDirective;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var TabsetConfig = /** @class */ (function () {
        function TabsetConfig() {
            /**
             * provides default navigation context class: 'tabs' or 'pills'
             */
            this.type = 'tabs';
        }
        TabsetConfig.decorators = [
            { type: core.Injectable }
        ];
        return TabsetConfig;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    // todo: add active event to tab
    // todo: fix? mixing static and dynamic tabs position tabs in order of creation
    var TabsetComponent = /** @class */ (function () {
        function TabsetComponent(config, renderer, elementRef) {
            this.renderer = renderer;
            this.elementRef = elementRef;
            this.clazz = true;
            this.tabs = [];
            this.classMap = {};
            Object.assign(this, config);
        }
        Object.defineProperty(TabsetComponent.prototype, "vertical", {
            /** if true tabs will be placed vertically */
            get: /**
             * if true tabs will be placed vertically
             * @return {?}
             */
            function () {
                return this._vertical;
            },
            set: /**
             * @param {?} value
             * @return {?}
             */
            function (value) {
                this._vertical = value;
                this.setClassMap();
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(TabsetComponent.prototype, "justified", {
            /** if true tabs fill the container and have a consistent width */
            get: /**
             * if true tabs fill the container and have a consistent width
             * @return {?}
             */
            function () {
                return this._justified;
            },
            set: /**
             * @param {?} value
             * @return {?}
             */
            function (value) {
                this._justified = value;
                this.setClassMap();
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(TabsetComponent.prototype, "type", {
            /** navigation context class: 'tabs' or 'pills' */
            get: /**
             * navigation context class: 'tabs' or 'pills'
             * @return {?}
             */
            function () {
                return this._type;
            },
            set: /**
             * @param {?} value
             * @return {?}
             */
            function (value) {
                this._type = value;
                this.setClassMap();
            },
            enumerable: true,
            configurable: true
        });
        /**
         * @return {?}
         */
        TabsetComponent.prototype.ngOnDestroy = /**
         * @return {?}
         */
        function () {
            this.isDestroyed = true;
        };
        /**
         * @param {?} tab
         * @return {?}
         */
        TabsetComponent.prototype.addTab = /**
         * @param {?} tab
         * @return {?}
         */
        function (tab) {
            this.tabs.push(tab);
            tab.active = this.tabs.length === 1 && typeof tab.active === 'undefined';
        };
        /**
         * @param {?} tab
         * @param {?=} options
         * @return {?}
         */
        TabsetComponent.prototype.removeTab = /**
         * @param {?} tab
         * @param {?=} options
         * @return {?}
         */
        function (tab, options) {
            if (options === void 0) { options = { reselect: true, emit: true }; }
            /** @type {?} */
            var index = this.tabs.indexOf(tab);
            if (index === -1 || this.isDestroyed) {
                return;
            }
            // Select a new tab if the tab to be removed is selected and not destroyed
            if (options.reselect && tab.active && this.hasAvailableTabs(index)) {
                /** @type {?} */
                var newActiveIndex = this.getClosestTabIndex(index);
                this.tabs[newActiveIndex].active = true;
            }
            if (options.emit) {
                tab.removed.emit(tab);
            }
            this.tabs.splice(index, 1);
            if (tab.elementRef.nativeElement.parentNode) {
                this.renderer.removeChild(tab.elementRef.nativeElement.parentNode, tab.elementRef.nativeElement);
            }
        };
        /* tslint:disable-next-line: cyclomatic-complexity */
        /* tslint:disable-next-line: cyclomatic-complexity */
        /**
         * @param {?} event
         * @param {?} index
         * @return {?}
         */
        TabsetComponent.prototype.keyNavActions = /* tslint:disable-next-line: cyclomatic-complexity */
        /**
         * @param {?} event
         * @param {?} index
         * @return {?}
         */
        function (event, index) {
            /** @type {?} */
            var list = Array.from(this.elementRef.nativeElement.querySelectorAll('.nav-link'));
            // const activeElList = list.filter((el: HTMLElement) => !el.classList.contains('disabled'));
            // tslint:disable-next-line:deprecation
            if (event.keyCode === 13 || event.key === 'Enter' || event.keyCode === 32 || event.key === 'Space') {
                event.preventDefault();
                /** @type {?} */
                var currentTab = list[(index) % list.length];
                currentTab.click();
                return;
            }
            // tslint:disable-next-line:deprecation
            if (event.keyCode === 39 || event.key === 'RightArrow') {
                /** @type {?} */
                var nextTab = void 0;
                /** @type {?} */
                var shift = 1;
                do {
                    nextTab = list[(index + shift) % list.length];
                    shift++;
                } while (nextTab.classList.contains('disabled'));
                nextTab.focus();
                return;
            }
            // tslint:disable-next-line:deprecation
            if (event.keyCode === 37 || event.key === 'LeftArrow') {
                /** @type {?} */
                var previousTab = void 0;
                /** @type {?} */
                var shift = 1;
                /** @type {?} */
                var i = index;
                do {
                    if ((i - shift) < 0) {
                        i = list.length - 1;
                        previousTab = list[i];
                        shift = 0;
                    }
                    else {
                        previousTab = list[i - shift];
                    }
                    shift++;
                } while (previousTab.classList.contains('disabled'));
                previousTab.focus();
                return;
            }
            // tslint:disable-next-line:deprecation
            if (event.keyCode === 36 || event.key === 'Home') {
                event.preventDefault();
                /** @type {?} */
                var firstTab = void 0;
                /** @type {?} */
                var shift = 0;
                do {
                    firstTab = list[shift % list.length];
                    shift++;
                } while (firstTab.classList.contains('disabled'));
                firstTab.focus();
                return;
            }
            // tslint:disable-next-line:deprecation
            if (event.keyCode === 35 || event.key === 'End') {
                event.preventDefault();
                /** @type {?} */
                var lastTab = void 0;
                /** @type {?} */
                var shift = 1;
                /** @type {?} */
                var i = index;
                do {
                    if ((i - shift) < 0) {
                        i = list.length - 1;
                        lastTab = list[i];
                        shift = 0;
                    }
                    else {
                        lastTab = list[i - shift];
                    }
                    shift++;
                } while (lastTab.classList.contains('disabled'));
                lastTab.focus();
                return;
            }
            // tslint:disable-next-line:deprecation
            if (event.keyCode === 46 || event.key === 'Delete') {
                if (this.tabs[index].removable) {
                    this.removeTab(this.tabs[index]);
                    if (list[index + 1]) {
                        list[(index + 1) % list.length].focus();
                        return;
                    }
                    if (list[list.length - 1]) {
                        list[0].focus();
                    }
                }
            }
        };
        /**
         * @protected
         * @param {?} index
         * @return {?}
         */
        TabsetComponent.prototype.getClosestTabIndex = /**
         * @protected
         * @param {?} index
         * @return {?}
         */
        function (index) {
            /** @type {?} */
            var tabsLength = this.tabs.length;
            if (!tabsLength) {
                return -1;
            }
            for (var step = 1; step <= tabsLength; step += 1) {
                /** @type {?} */
                var prevIndex = index - step;
                /** @type {?} */
                var nextIndex = index + step;
                if (this.tabs[prevIndex] && !this.tabs[prevIndex].disabled) {
                    return prevIndex;
                }
                if (this.tabs[nextIndex] && !this.tabs[nextIndex].disabled) {
                    return nextIndex;
                }
            }
            return -1;
        };
        /**
         * @protected
         * @param {?} index
         * @return {?}
         */
        TabsetComponent.prototype.hasAvailableTabs = /**
         * @protected
         * @param {?} index
         * @return {?}
         */
        function (index) {
            /** @type {?} */
            var tabsLength = this.tabs.length;
            if (!tabsLength) {
                return false;
            }
            for (var i = 0; i < tabsLength; i += 1) {
                if (!this.tabs[i].disabled && i !== index) {
                    return true;
                }
            }
            return false;
        };
        /**
         * @protected
         * @return {?}
         */
        TabsetComponent.prototype.setClassMap = /**
         * @protected
         * @return {?}
         */
        function () {
            var _a;
            this.classMap = (_a = {
                    'nav-stacked': this.vertical,
                    'flex-column': this.vertical,
                    'nav-justified': this.justified
                },
                _a["nav-" + this.type] = true,
                _a);
        };
        TabsetComponent.decorators = [
            { type: core.Component, args: [{
                        selector: 'tabset',
                        template: "<ul class=\"nav\" [ngClass]=\"classMap\" (click)=\"$event.preventDefault()\">\n  <li *ngFor=\"let tabz of tabs; let i = index\" [ngClass]=\"['nav-item', tabz.customClass || '']\"\n      [class.active]=\"tabz.active\" [class.disabled]=\"tabz.disabled\" (keydown)=\"keyNavActions($event, i)\">\n    <a href=\"javascript:void(0);\" class=\"nav-link\"\n       [attr.id]=\"tabz.id ? tabz.id + '-link' : ''\"\n       [class.active]=\"tabz.active\" [class.disabled]=\"tabz.disabled\"\n       (click)=\"tabz.active = true\">\n      <span [ngTransclude]=\"tabz.headingRef\">{{ tabz.heading }}</span>\n      <span *ngIf=\"tabz.removable\" (click)=\"$event.preventDefault(); removeTab(tabz);\" class=\"bs-remove-tab\"> &#10060;</span>\n    </a>\n  </li>\n</ul>\n<div class=\"tab-content\">\n  <ng-content></ng-content>\n</div>\n",
                        styles: [":host .nav-tabs .nav-item.disabled a.disabled{cursor:default}"]
                    }] }
        ];
        /** @nocollapse */
        TabsetComponent.ctorParameters = function () { return [
            { type: TabsetConfig },
            { type: core.Renderer2 },
            { type: core.ElementRef }
        ]; };
        TabsetComponent.propDecorators = {
            vertical: [{ type: core.Input }],
            justified: [{ type: core.Input }],
            type: [{ type: core.Input }],
            clazz: [{ type: core.HostBinding, args: ['class.tab-container',] }]
        };
        return TabsetComponent;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var TabDirective = /** @class */ (function () {
        function TabDirective(tabset, elementRef, renderer) {
            this.elementRef = elementRef;
            this.renderer = renderer;
            /**
             * fired when tab became active, $event:Tab equals to selected instance of Tab component
             */
            this.selectTab = new core.EventEmitter();
            /**
             * fired when tab became inactive, $event:Tab equals to deselected instance of Tab component
             */
            this.deselect = new core.EventEmitter();
            /**
             * fired before tab will be removed, $event:Tab equals to instance of removed tab
             */
            this.removed = new core.EventEmitter();
            this.addClass = true;
            this.tabset = tabset;
            this.tabset.addTab(this);
        }
        Object.defineProperty(TabDirective.prototype, "customClass", {
            /** if set, will be added to the tab's class attribute. Multiple classes are supported. */
            get: /**
             * if set, will be added to the tab's class attribute. Multiple classes are supported.
             * @return {?}
             */
            function () {
                return this._customClass;
            },
            set: /**
             * @param {?} customClass
             * @return {?}
             */
            function (customClass) {
                var _this = this;
                if (this.customClass) {
                    this.customClass.split(' ').forEach((/**
                     * @param {?} cssClass
                     * @return {?}
                     */
                    function (cssClass) {
                        _this.renderer.removeClass(_this.elementRef.nativeElement, cssClass);
                    }));
                }
                this._customClass = customClass ? customClass.trim() : null;
                if (this.customClass) {
                    this.customClass.split(' ').forEach((/**
                     * @param {?} cssClass
                     * @return {?}
                     */
                    function (cssClass) {
                        _this.renderer.addClass(_this.elementRef.nativeElement, cssClass);
                    }));
                }
            },
            enumerable: true,
            configurable: true
        });
        Object.defineProperty(TabDirective.prototype, "active", {
            /** tab active state toggle */
            get: /**
             * tab active state toggle
             * @return {?}
             */
            function () {
                return this._active;
            },
            set: /**
             * @param {?} active
             * @return {?}
             */
            function (active) {
                var _this = this;
                if (this._active === active) {
                    return;
                }
                if ((this.disabled && active) || !active) {
                    if (this._active && !active) {
                        this.deselect.emit(this);
                        this._active = active;
                    }
                    return;
                }
                this._active = active;
                this.selectTab.emit(this);
                this.tabset.tabs.forEach((/**
                 * @param {?} tab
                 * @return {?}
                 */
                function (tab) {
                    if (tab !== _this) {
                        tab.active = false;
                    }
                }));
            },
            enumerable: true,
            configurable: true
        });
        /**
         * @return {?}
         */
        TabDirective.prototype.ngOnInit = /**
         * @return {?}
         */
        function () {
            this.removable = this.removable;
        };
        /**
         * @return {?}
         */
        TabDirective.prototype.ngOnDestroy = /**
         * @return {?}
         */
        function () {
            this.tabset.removeTab(this, { reselect: false, emit: false });
        };
        TabDirective.decorators = [
            { type: core.Directive, args: [{ selector: 'tab, [tab]' },] }
        ];
        /** @nocollapse */
        TabDirective.ctorParameters = function () { return [
            { type: TabsetComponent },
            { type: core.ElementRef },
            { type: core.Renderer2 }
        ]; };
        TabDirective.propDecorators = {
            heading: [{ type: core.Input }],
            id: [{ type: core.HostBinding, args: ['attr.id',] }, { type: core.Input }],
            disabled: [{ type: core.Input }],
            removable: [{ type: core.Input }],
            customClass: [{ type: core.Input }],
            active: [{ type: core.HostBinding, args: ['class.active',] }, { type: core.Input }],
            selectTab: [{ type: core.Output }],
            deselect: [{ type: core.Output }],
            removed: [{ type: core.Output }],
            addClass: [{ type: core.HostBinding, args: ['class.tab-pane',] }]
        };
        return TabDirective;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    /**
     * Should be used to mark <ng-template> element as a template for tab heading
     */
    var TabHeadingDirective = /** @class */ (function () {
        /* tslint:disable-next-line:no-any */
        function TabHeadingDirective(templateRef, tab) {
            tab.headingRef = templateRef;
        }
        TabHeadingDirective.decorators = [
            { type: core.Directive, args: [{ selector: '[tabHeading]' },] }
        ];
        /** @nocollapse */
        TabHeadingDirective.ctorParameters = function () { return [
            { type: core.TemplateRef },
            { type: TabDirective }
        ]; };
        return TabHeadingDirective;
    }());

    /**
     * @fileoverview added by tsickle
     * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
     */
    var TabsModule = /** @class */ (function () {
        function TabsModule() {
        }
        /**
         * @return {?}
         */
        TabsModule.forRoot = /**
         * @return {?}
         */
        function () {
            return {
                ngModule: TabsModule,
                providers: [TabsetConfig]
            };
        };
        TabsModule.decorators = [
            { type: core.NgModule, args: [{
                        imports: [common.CommonModule],
                        declarations: [
                            NgTranscludeDirective,
                            TabDirective,
                            TabsetComponent,
                            TabHeadingDirective
                        ],
                        exports: [
                            TabDirective,
                            TabsetComponent,
                            TabHeadingDirective,
                            NgTranscludeDirective
                        ]
                    },] }
        ];
        return TabsModule;
    }());

    exports.NgTranscludeDirective = NgTranscludeDirective;
    exports.TabDirective = TabDirective;
    exports.TabHeadingDirective = TabHeadingDirective;
    exports.TabsModule = TabsModule;
    exports.TabsetComponent = TabsetComponent;
    exports.TabsetConfig = TabsetConfig;

    Object.defineProperty(exports, '__esModule', { value: true });

}));
//# sourceMappingURL=ngx-bootstrap-tabs.umd.js.map