/**
 *
 * carbon-angular v0.0.0 | tab-header-group.component.js
 *
 * Copyright 2014, 2020 IBM
 *
 * 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

 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


import { Component, QueryList, Input, HostListener, ContentChildren, ElementRef, TemplateRef } from "@angular/core";
import { TabHeader } from "./tab-header.component";
import { Subscription } from "rxjs";
var TabHeaderGroup = /** @class */ (function () {
    function TabHeaderGroup(elementRef) {
        this.elementRef = elementRef;
        /**
         * Set to `true` to put tabs in a loading state.
         */
        this.skeleton = false;
        /**
         * Set to 'true' to have all pane references associated with each tab header
         * in the tab header group cached and not reloaded on tab switching.
         */
        this.cacheActive = false;
        /**
         * Keeps track of all the subscriptions to the tab header selection events.
         */
        this.selectedSubscriptionTracker = new Subscription();
        this.tabListVisible = false;
        /**
         * Controls the manual focusing done by tabbing through headings.
         */
        this.currentSelectedIndex = 0;
        this._cacheActive = false;
    }
    // keyboard accessibility
    /**
     * Controls the keydown events used for tabbing through the headings.
     */
    TabHeaderGroup.prototype.keyboardInput = function (event) {
        var tabHeadersArray = Array.from(this.tabHeaderQuery);
        if (event.key === "Right" || event.key === "ArrowRight") {
            if (this.currentSelectedIndex < tabHeadersArray.length - 1) {
                event.preventDefault();
                if (this.followFocus && !tabHeadersArray[this.currentSelectedIndex + 1].disabled) {
                    tabHeadersArray[this.currentSelectedIndex + 1].selectTab();
                }
                else {
                    tabHeadersArray[this.currentSelectedIndex + 1].tabItem.nativeElement.focus();
                    this.currentSelectedIndex++;
                }
            }
            else {
                event.preventDefault();
                if (this.followFocus && !tabHeadersArray[0].disabled) {
                    tabHeadersArray[0].selectTab();
                }
                else {
                    tabHeadersArray[0].tabItem.nativeElement.focus();
                    this.currentSelectedIndex = 0;
                }
            }
        }
        if (event.key === "Left" || event.key === "ArrowLeft") {
            if (this.currentSelectedIndex > 0) {
                event.preventDefault();
                if (this.followFocus && !tabHeadersArray[this.currentSelectedIndex - 1].disabled) {
                    tabHeadersArray[this.currentSelectedIndex - 1].selectTab();
                }
                else {
                    tabHeadersArray[this.currentSelectedIndex - 1].tabItem.nativeElement.focus();
                    this.currentSelectedIndex--;
                }
            }
            else {
                event.preventDefault();
                if (this.followFocus && !tabHeadersArray[tabHeadersArray.length - 1].disabled) {
                    tabHeadersArray[tabHeadersArray.length - 1].selectTab();
                }
                else {
                    tabHeadersArray[tabHeadersArray.length - 1].tabItem.nativeElement.focus();
                    this.currentSelectedIndex = tabHeadersArray.length - 1;
                }
            }
        }
        if (event.key === "Home") {
            event.preventDefault();
            if (this.followFocus && !tabHeadersArray[0].disabled) {
                tabHeadersArray[0].selectTab();
            }
            else {
                tabHeadersArray[0].tabItem.nativeElement.focus();
                this.currentSelectedIndex = 0;
            }
        }
        if (event.key === "End") {
            event.preventDefault();
            if (this.followFocus && !tabHeadersArray[tabHeadersArray.length - 1].disabled) {
                tabHeadersArray[tabHeadersArray.length - 1].selectTab();
            }
            else {
                tabHeadersArray[tabHeadersArray.length - 1].tabItem.nativeElement.focus();
                this.currentSelectedIndex = tabHeadersArray.length - 1;
            }
        }
        // `"Spacebar"` is IE11 specific value
        if ((event.key === " " || event.key === "Spacebar") && !this.followFocus) {
            tabHeadersArray[this.currentSelectedIndex].selectTab();
        }
        // dropdown list handler
        if (event.key === "Escape") {
            this.tabListVisible = false;
        }
    };
    TabHeaderGroup.prototype.focusOut = function (event) {
        if (this.tabListVisible && !this.elementRef.nativeElement.contains(event.relatedTarget)) {
            this.tabListVisible = false;
        }
    };
    TabHeaderGroup.prototype.ngAfterContentInit = function () {
        var _this = this;
        this.selectedSubscriptionTracker.unsubscribe();
        if (this.tabHeaderQuery) {
            this.tabHeaderQuery.toArray().forEach(function (tabHeader) { return tabHeader.cacheActive = _this.cacheActive; });
        }
        var selectedSubscriptions = this.tabHeaderQuery.toArray().forEach(function (tabHeader) {
            tabHeader.selected.subscribe(function () {
                _this.currentSelectedIndex = _this.tabHeaderQuery.toArray().indexOf(tabHeader);
                // The Filter takes the current selected tab out, then all other headers are
                // deactivated and their associated pane references are also deactivated.
                _this.tabHeaderQuery.toArray().filter(function (header) { return header !== tabHeader; })
                    .forEach(function (filteredHeader) {
                    filteredHeader.active = false;
                    if (filteredHeader.paneReference) {
                        filteredHeader.paneReference.active = false;
                    }
                });
            });
        });
        this.selectedSubscriptionTracker.add(selectedSubscriptions);
        this.tabHeaderQuery.toArray()[this.currentSelectedIndex].selectTab();
    };
    TabHeaderGroup.prototype.ngOnChanges = function (changes) {
        var _this = this;
        if (this.tabHeaderQuery && changes.cacheActive) {
            this.tabHeaderQuery.toArray().forEach(function (tabHeader) { return tabHeader.cacheActive = _this.cacheActive; });
        }
    };
    TabHeaderGroup.prototype.getSelectedTab = function () {
        var selected = this.tabHeaderQuery.toArray()[this.currentSelectedIndex];
        if (selected) {
            return selected;
        }
        return {
            headingIsTemplate: false,
            heading: ""
        };
    };
    TabHeaderGroup.prototype.showTabList = function () {
        this.tabListVisible = true;
        var focusTarget = this.tabHeaderQuery.toArray().find(function (tab) {
            var tabContainer = tab.tabItem.nativeElement.parentElement;
            return !tabContainer.classList.contains("bx--tabs__nav-item--selected");
        });
        focusTarget.tabItem.nativeElement.focus();
    };
    TabHeaderGroup.prototype.onDropdownKeydown = function (event) {
        switch (event.key) {
            case " ":
            case "Spacebar":
            case "Enter":
                event.preventDefault();
                this.showTabList();
                break;
            default:
                break;
        }
    };
    TabHeaderGroup.prototype.tabDropdownKeydown = function (event) {
        if (!this.tabListVisible) {
            return;
        }
        var target = event.target.closest("a");
        var headers = this.tabHeaderQuery.toArray().filter(function (tab) {
            return !tab.tabItem.nativeElement.parentElement.classList.contains("bx--tabs__nav-item--disabled") &&
                !tab.tabItem.nativeElement.parentElement.classList.contains("bx--tabs__nav-item--selected");
        });
        // unless focus can move, it should remain on the target
        var next = target;
        var previous = target;
        for (var i = 0; i < headers.length; i++) {
            if (headers[i].tabItem.nativeElement === target) {
                if (i + 1 < headers.length) {
                    next = headers[i + 1].tabItem.nativeElement;
                }
                if (i - 1 >= 0) {
                    previous = headers[i - 1].tabItem.nativeElement;
                }
            }
        }
        switch (event.key) {
            case "ArrowDown":
            case "Down": // IE11 specific value
                next.focus();
                break;
            case "ArrowUp":
            case "Up": // IE11 specific value
                previous.focus();
                break;
            default:
                break;
        }
    };
    TabHeaderGroup.prototype.ngOnDestroy = function () {
        this.selectedSubscriptionTracker.unsubscribe();
    };
    TabHeaderGroup.decorators = [
        { type: Component, args: [{
                    selector: "ibm-tab-header-group",
                    template: "\n\t<nav\n\t\tclass=\"bx--tabs\"\n\t\t[ngClass]=\"{\n\t\t\t'bx--skeleton': skeleton\n\t\t}\"\n\t\trole=\"navigation\"\n\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t[attr.aria-labelledby]=\"ariaLabelledby\">\n\t\t<div\n\t\t\tclass=\"bx--tabs-trigger\"\n\t\t\ttabindex=\"0\"\n\t\t\t(click)=\"showTabList()\"\n\t\t\t(keydown)=\"onDropdownKeydown($event)\">\n\t\t\t<a\n\t\t\t\thref=\"javascript:void(0)\"\n\t\t\t\tclass=\"bx--tabs-trigger-text\"\n\t\t\t\ttabindex=\"-1\">\n\t\t\t\t<ng-container *ngIf=\"!getSelectedTab().headingIsTemplate\">\n\t\t\t\t\t{{ getSelectedTab().heading }}\n\t\t\t\t</ng-container>\n\t\t\t\t<ng-template\n\t\t\t\t\t*ngIf=\"getSelectedTab().headingIsTemplate\"\n\t\t\t\t\t[ngTemplateOutlet]=\"getSelectedTab().heading\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"{$implicit: getSelectedTab().context}\">\n\t\t\t\t</ng-template>\n\t\t\t</a>\n\t\t\t<svg width=\"10\" height=\"5\" viewBox=\"0 0 10 5\">\n\t\t\t\t<path d=\"M0 0l5 4.998L10 0z\" fill-rule=\"evenodd\"></path>\n\t\t\t</svg>\n\t\t</div>\n\t\t<ul\n\t\t\t#tabList\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--tabs__nav--hidden': !tabListVisible\n\t\t\t}\"\n\t\t\t(keydown)=\"tabDropdownKeydown($event)\"\n\t\t\tclass=\"bx--tabs__nav\"\n\t\t\trole=\"tablist\">\n\t\t\t<li role=\"presentation\">\n\t\t\t\t<ng-container *ngIf=\"contentBefore\" [ngTemplateOutlet]=\"contentBefore\"></ng-container>\n\t\t\t</li>\n\t\t\t<ng-content></ng-content>\n\t\t\t<li role=\"presentation\">\n\t\t\t\t<ng-container *ngIf=\"contentAfter\" [ngTemplateOutlet]=\"contentAfter\"></ng-container>\n\t\t\t</li>\n\t\t</ul>\n\t</nav>\n\t"
                },] },
    ];
    /** @nocollapse */
    TabHeaderGroup.ctorParameters = function () { return [
        { type: ElementRef }
    ]; };
    TabHeaderGroup.propDecorators = {
        followFocus: [{ type: Input }],
        skeleton: [{ type: Input }],
        ariaLabel: [{ type: Input }],
        ariaLabelledby: [{ type: Input }],
        contentAfter: [{ type: Input }],
        contentBefore: [{ type: Input }],
        cacheActive: [{ type: Input }],
        tabHeaderQuery: [{ type: ContentChildren, args: [TabHeader,] }],
        keyboardInput: [{ type: HostListener, args: ["keydown", ["$event"],] }],
        focusOut: [{ type: HostListener, args: ["focusout", ["$event"],] }]
    };
    return TabHeaderGroup;
}());
export { TabHeaderGroup };
//# sourceMappingURL=tab-header-group.component.js.map