/**
 *
 * carbon-angular v0.0.0 | tab-headers.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, ViewChild, ContentChildren, ViewChildren, ElementRef, TemplateRef } from "@angular/core";
import { Tab } from "./tab.component";
/**
 * The `TabHeaders` component contains the `Tab` items and controls scroll functionality
 * if content has overflow.
 */
var TabHeaders = /** @class */ (function () {
    function TabHeaders(elementRef) {
        this.elementRef = elementRef;
        /**
         * Set to 'true' to have `Tab` items cached and not reloaded on tab switching.
         * Duplicate from `n-tabs` to support standalone headers
         */
        this.cacheActive = false;
        /**
         * Set to `true` to put tabs in a loading state.
         */
        this.skeleton = false;
        /**
         * The index of the first visible tab.
         */
        this.firstVisibleTab = 0;
        this.tabListVisible = false;
    }
    // keyboard accessibility
    /**
     * Controls the keydown events used for tabbing through the headings.
     */
    TabHeaders.prototype.keyboardInput = function (event) {
        var tabsArray = Array.from(this.tabs);
        // "Right" is an ie11 specific value
        if (event.key === "Right" || event.key === "ArrowRight") {
            if (this.currentSelectedTab < this.allTabHeaders.length - 1) {
                event.preventDefault();
                if (this.followFocus) {
                    this.selectTab(event.target, tabsArray[this.currentSelectedTab + 1], this.currentSelectedTab);
                }
                this.allTabHeaders.toArray()[this.currentSelectedTab + 1].nativeElement.focus();
            }
            else {
                event.preventDefault();
                if (this.followFocus) {
                    this.selectTab(event.target, tabsArray[0], 0);
                }
                this.allTabHeaders.first.nativeElement.focus();
            }
        }
        // "Left" is an ie11 specific value
        if (event.key === "Left" || event.key === "ArrowLeft") {
            if (this.currentSelectedTab > 0) {
                event.preventDefault();
                if (this.followFocus) {
                    this.selectTab(event.target, tabsArray[this.currentSelectedTab - 1], this.currentSelectedTab);
                }
                this.allTabHeaders.toArray()[this.currentSelectedTab - 1].nativeElement.focus();
            }
            else {
                event.preventDefault();
                if (this.followFocus) {
                    this.selectTab(event.target, tabsArray[this.allTabHeaders.length - 1], this.allTabHeaders.length);
                }
                this.allTabHeaders.toArray()[this.allTabHeaders.length - 1].nativeElement.focus();
            }
        }
        if (event.key === "Home") {
            event.preventDefault();
            if (this.followFocus) {
                this.selectTab(event.target, tabsArray[0], 0);
            }
            this.allTabHeaders.toArray()[0].nativeElement.focus();
        }
        if (event.key === "End") {
            event.preventDefault();
            if (this.followFocus) {
                this.selectTab(event.target, tabsArray[this.allTabHeaders.length - 1], this.allTabHeaders.length);
            }
            this.allTabHeaders.toArray()[this.allTabHeaders.length - 1].nativeElement.focus();
        }
        // `"Spacebar"` is IE11 specific value
        if ((event.key === " " || event.key === "Spacebar") && !this.followFocus) {
            this.selectTab(event.target, tabsArray[this.currentSelectedTab], this.currentSelectedTab);
        }
        // dropdown list handler
        if (event.key === "Escape") {
            this.hideTabList();
        }
    };
    TabHeaders.prototype.focusOut = function (event) {
        if (this.tabListVisible && !this.elementRef.nativeElement.contains(event.relatedTarget)) {
            this.tabListVisible = false;
        }
    };
    TabHeaders.prototype.ngAfterContentInit = function () {
        var _this = this;
        if (!this.tabInput) {
            this.tabs = this.tabQuery;
        }
        else {
            this.tabs = this.tabInput;
        }
        this.tabs.forEach(function (tab) { return tab.cacheActive = _this.cacheActive; });
        this.tabs.changes.subscribe(function () {
            _this.setFirstTab();
        });
        this.setFirstTab();
    };
    TabHeaders.prototype.ngOnChanges = function (changes) {
        var _this = this;
        if (this.tabs && changes.cacheActive) {
            this.tabs.forEach(function (tab) { return tab.cacheActive = _this.cacheActive; });
        }
    };
    /**
     * Controls manually focusing tabs.
     */
    TabHeaders.prototype.onTabFocus = function (ref, index) {
        if (this.tabListVisible) {
            return;
        }
        this.currentSelectedTab = index;
        // reset scroll left because we're already handling it
        this.headerContainer.nativeElement.parentElement.scrollLeft = 0;
    };
    TabHeaders.prototype.getSelectedTab = function () {
        var selected = this.tabs.find(function (tab) { return tab.active; });
        if (selected) {
            return selected;
        }
        return { headingIsTemplate: false, heading: "" };
    };
    TabHeaders.prototype.showTabList = function () {
        this.tabListVisible = true;
        var focusTarget = this.allTabHeaders.find(function (tab) {
            var tabContainer = tab.nativeElement.parentElement;
            return !tabContainer.classList.contains("bx--tabs__nav-item--selected");
        });
        focusTarget.nativeElement.focus();
    };
    TabHeaders.prototype.hideTabList = function () {
        this.tabListVisible = false;
    };
    TabHeaders.prototype.onDropdownKeydown = function (event) {
        switch (event.key) {
            case " ":
            case "Spacebar":
            case "Enter":
                event.preventDefault();
                this.showTabList();
                break;
            default:
                break;
        }
    };
    TabHeaders.prototype.tabDropdownKeydown = function (event) {
        if (!this.tabListVisible) {
            return;
        }
        var target = event.target.closest("a");
        var headers = this.allTabHeaders.toArray().filter(function (tab) {
            return !tab.nativeElement.parentElement.classList.contains("bx--tabs__nav-item--disabled") &&
                !tab.nativeElement.parentElement.classList.contains("bx--tabs__nav-item--selected");
        });
        // unless the 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].nativeElement === target) {
                if (i + 1 < headers.length) {
                    next = headers[i + 1].nativeElement;
                }
                if (i - 1 >= 0) {
                    previous = headers[i - 1].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;
        }
    };
    /**
     * Selects `Tab` 'tab' and moves it into view on the view DOM if it is not already.
     */
    TabHeaders.prototype.selectTab = function (ref, tab, tabIndex) {
        if (tab.disabled) {
            return;
        }
        // hide the tablist on mobile
        this.tabListVisible = false;
        this.currentSelectedTab = tabIndex;
        this.tabs.forEach(function (_tab) { return _tab.active = false; });
        tab.active = true;
        tab.doSelect();
    };
    /**
     * Determines which `Tab` is initially selected.
     */
    TabHeaders.prototype.setFirstTab = function () {
        var _this = this;
        setTimeout(function () {
            var firstTab = _this.tabs.find(function (tab) { return tab.active; });
            if (!firstTab && _this.tabs.first) {
                firstTab = _this.tabs.first;
                firstTab.active = true;
            }
            if (firstTab) {
                firstTab.doSelect();
            }
        });
    };
    TabHeaders.decorators = [
        { type: Component, args: [{
                    selector: "ibm-tab-headers",
                    template: "\n\t\t<nav\n\t\t\tclass=\"bx--tabs\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--skeleton': skeleton\n\t\t\t}\"\n\t\t\trole=\"navigation\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\">\n\t\t\t<div\n\t\t\t\tclass=\"bx--tabs-trigger\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t(click)=\"showTabList()\"\n\t\t\t\t(keydown)=\"onDropdownKeydown($event)\">\n\t\t\t\t<a\n\t\t\t\t\thref=\"javascript:void(0)\"\n\t\t\t\t\tclass=\"bx--tabs-trigger-text\"\n\t\t\t\t\ttabindex=\"-1\">\n\t\t\t\t\t<ng-container *ngIf=\"!getSelectedTab().headingIsTemplate\">\n\t\t\t\t\t\t{{ getSelectedTab().heading }}\n\t\t\t\t\t</ng-container>\n\t\t\t\t\t<ng-template\n\t\t\t\t\t\t*ngIf=\"getSelectedTab().headingIsTemplate\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"getSelectedTab().heading\"\n\t\t\t\t\t\t[ngTemplateOutletContext]=\"{$implicit: getSelectedTab().context}\">\n\t\t\t\t\t</ng-template>\n\t\t\t\t</a>\n\t\t\t\t<svg width=\"10\" height=\"5\" viewBox=\"0 0 10 5\">\n\t\t\t\t\t<path d=\"M0 0l5 4.998L10 0z\" fill-rule=\"evenodd\"></path>\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<ul\n\t\t\t\t#tabList\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--tabs__nav--hidden': !tabListVisible\n\t\t\t\t}\"\n\t\t\t\tclass=\"bx--tabs__nav\"\n\t\t\t\trole=\"tablist\">\n\t\t\t\t<li role=\"presentation\">\n\t\t\t\t\t<ng-container *ngIf=\"contentBefore\" [ngTemplateOutlet]=\"contentBefore\"></ng-container>\n\t\t\t\t</li>\n\t\t\t\t<li\n\t\t\t\t\t*ngFor=\"let tab of tabs; let i = index;\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'bx--tabs__nav-item--selected': tab.active,\n\t\t\t\t\t\t'bx--tabs__nav-item--disabled': tab.disabled\n\t\t\t\t\t}\"\n\t\t\t\t\tclass=\"bx--tabs__nav-item\"\n\t\t\t\t\trole=\"presentation\"\n\t\t\t\t\t(click)=\"selectTab(tabItem, tab, i)\"\n\t\t\t\t\t(keydown)=\"tabDropdownKeydown($event)\">\n\t\t\t\t\t<a\n\t\t\t\t\t\t#tabItem\n\t\t\t\t\t\t[attr.aria-selected]=\"tab.active\"\n\t\t\t\t\t\t[attr.tabindex]=\"(tab.active?0:-1)\"\n\t\t\t\t\t\t[attr.aria-controls]=\"tab.id\"\n\t\t\t\t\t\t(focus)=\"onTabFocus(tabItem, i)\"\n\t\t\t\t\t\tdraggable=\"false\"\n\t\t\t\t\t\tid=\"{{tab.id}}-header\"\n\t\t\t\t\t\tclass=\"bx--tabs__nav-link\"\n\t\t\t\t\t\thref=\"javascript:void(0)\"\n\t\t\t\t\t\trole=\"tab\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!tab.headingIsTemplate\">\n\t\t\t\t\t\t\t{{ tab.heading }}\n\t\t\t\t\t\t</ng-container>\n\t\t\t\t\t\t<ng-template\n\t\t\t\t\t\t\t*ngIf=\"tab.headingIsTemplate\"\n\t\t\t\t\t\t\t[ngTemplateOutlet]=\"tab.heading\"\n\t\t\t\t\t\t\t[ngTemplateOutletContext]=\"{$implicit: tab.context}\">\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t\t<li role=\"presentation\">\n\t\t\t\t\t<ng-container *ngIf=\"contentAfter\" [ngTemplateOutlet]=\"contentAfter\"></ng-container>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</nav>\n\t"
                },] },
    ];
    /** @nocollapse */
    TabHeaders.ctorParameters = function () { return [
        { type: ElementRef }
    ]; };
    TabHeaders.propDecorators = {
        tabInput: [{ type: Input, args: ["tabs",] }],
        cacheActive: [{ type: Input }],
        followFocus: [{ type: Input }],
        skeleton: [{ type: Input }],
        ariaLabel: [{ type: Input }],
        ariaLabelledby: [{ type: Input }],
        contentBefore: [{ type: Input }],
        contentAfter: [{ type: Input }],
        headerContainer: [{ type: ViewChild, args: ["tabList",] }],
        tabQuery: [{ type: ContentChildren, args: [Tab,] }],
        allTabHeaders: [{ type: ViewChildren, args: ["tabItem",] }],
        keyboardInput: [{ type: HostListener, args: ["keydown", ["$event"],] }],
        focusOut: [{ type: HostListener, args: ["focusout", ["$event"],] }]
    };
    return TabHeaders;
}());
export { TabHeaders };
//# sourceMappingURL=tab-headers.component.js.map