/**
 *
 * @ai-apps/angular v2.147.1-next.0 | ai-apps-angular-tabs.umd.js
 *
 * Copyright 2014, 2022 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.
 */


(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('carbon-components-angular'), require('carbon-components-angular/tabs'), require('carbon-components-angular/context-menu'), require('rxjs/operators')) :
    typeof define === 'function' && define.amd ? define('@ai-apps/angular/tabs', ['exports', '@angular/core', '@angular/common', 'carbon-components-angular', 'carbon-components-angular/tabs', 'carbon-components-angular/context-menu', 'rxjs/operators'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global['ai-apps'] = global['ai-apps'] || {}, global['ai-apps'].angular = global['ai-apps'].angular || {}, global['ai-apps'].angular.tabs = {}), global.ng.core, global.ng.common, global.i1, global.tabs, global.i3, global.rxjs.operators));
}(this, (function (exports, i0, i2, i1, tabs, i3, operators) { 'use strict';

    /*! *****************************************************************************
    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 __());
    }
    var __assign = function () {
        __assign = Object.assign || function __assign(t) {
            for (var s, i = 1, n = arguments.length; i < n; i++) {
                s = arguments[i];
                for (var p in s)
                    if (Object.prototype.hasOwnProperty.call(s, p))
                        t[p] = s[p];
            }
            return t;
        };
        return __assign.apply(this, arguments);
    };
    function __rest(s, e) {
        var t = {};
        for (var p in s)
            if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
                t[p] = s[p];
        if (s != null && typeof Object.getOwnPropertySymbols === "function")
            for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++)
                if (e.indexOf(p[i]) < 0)
                    t[p[i]] = s[p[i]];
        return t;
    }
    function __decorate(decorators, target, key, desc) {
        var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
        if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
            r = Reflect.decorate(decorators, target, key, desc);
        else
            for (var i = decorators.length - 1; i >= 0; i--)
                if (d = decorators[i])
                    r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
        return c > 3 && r && Object.defineProperty(target, key, r), r;
    }
    function __param(paramIndex, decorator) {
        return function (target, key) { decorator(target, key, paramIndex); };
    }
    function __metadata(metadataKey, metadataValue) {
        if (typeof Reflect === "object" && typeof Reflect.metadata === "function")
            return Reflect.metadata(metadataKey, metadataValue);
    }
    function __awaiter(thisArg, _arguments, P, generator) {
        return new (P || (P = Promise))(function (resolve, reject) {
            function fulfilled(value) { try {
                step(generator.next(value));
            }
            catch (e) {
                reject(e);
            } }
            function rejected(value) { try {
                step(generator["throw"](value));
            }
            catch (e) {
                reject(e);
            } }
            function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
            step((generator = generator.apply(thisArg, _arguments || [])).next());
        });
    }
    function __generator(thisArg, body) {
        var _ = { label: 0, sent: function () { if (t[0] & 1)
                throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
        return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function () { return this; }), g;
        function verb(n) { return function (v) { return step([n, v]); }; }
        function step(op) {
            if (f)
                throw new TypeError("Generator is already executing.");
            while (_)
                try {
                    if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done)
                        return t;
                    if (y = 0, t)
                        op = [op[0] & 2, t.value];
                    switch (op[0]) {
                        case 0:
                        case 1:
                            t = op;
                            break;
                        case 4:
                            _.label++;
                            return { value: op[1], done: false };
                        case 5:
                            _.label++;
                            y = op[1];
                            op = [0];
                            continue;
                        case 7:
                            op = _.ops.pop();
                            _.trys.pop();
                            continue;
                        default:
                            if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
                                _ = 0;
                                continue;
                            }
                            if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
                                _.label = op[1];
                                break;
                            }
                            if (op[0] === 6 && _.label < t[1]) {
                                _.label = t[1];
                                t = op;
                                break;
                            }
                            if (t && _.label < t[2]) {
                                _.label = t[2];
                                _.ops.push(op);
                                break;
                            }
                            if (t[2])
                                _.ops.pop();
                            _.trys.pop();
                            continue;
                    }
                    op = body.call(thisArg, _);
                }
                catch (e) {
                    op = [6, e];
                    y = 0;
                }
                finally {
                    f = t = 0;
                }
            if (op[0] & 5)
                throw op[1];
            return { value: op[0] ? op[1] : void 0, done: true };
        }
    }
    function __exportStar(m, exports) {
        for (var p in m)
            if (!exports.hasOwnProperty(p))
                exports[p] = m[p];
    }
    function __values(o) {
        var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
        if (m)
            return m.call(o);
        return {
            next: function () {
                if (o && i >= o.length)
                    o = void 0;
                return { value: o && o[i++], done: !o };
            }
        };
    }
    function __read(o, n) {
        var m = typeof Symbol === "function" && o[Symbol.iterator];
        if (!m)
            return o;
        var i = m.call(o), r, ar = [], e;
        try {
            while ((n === void 0 || n-- > 0) && !(r = i.next()).done)
                ar.push(r.value);
        }
        catch (error) {
            e = { error: error };
        }
        finally {
            try {
                if (r && !r.done && (m = i["return"]))
                    m.call(i);
            }
            finally {
                if (e)
                    throw e.error;
            }
        }
        return ar;
    }
    function __spread() {
        for (var ar = [], i = 0; i < arguments.length; i++)
            ar = ar.concat(__read(arguments[i]));
        return ar;
    }
    function __await(v) {
        return this instanceof __await ? (this.v = v, this) : new __await(v);
    }
    function __asyncGenerator(thisArg, _arguments, generator) {
        if (!Symbol.asyncIterator)
            throw new TypeError("Symbol.asyncIterator is not defined.");
        var g = generator.apply(thisArg, _arguments || []), i, q = [];
        return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
        function verb(n) { if (g[n])
            i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
        function resume(n, v) { try {
            step(g[n](v));
        }
        catch (e) {
            settle(q[0][3], e);
        } }
        function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
        function fulfill(value) { resume("next", value); }
        function reject(value) { resume("throw", value); }
        function settle(f, v) { if (f(v), q.shift(), q.length)
            resume(q[0][0], q[0][1]); }
    }
    function __asyncDelegator(o) {
        var i, p;
        return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
        function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
    }
    function __asyncValues(o) {
        if (!Symbol.asyncIterator)
            throw new TypeError("Symbol.asyncIterator is not defined.");
        var m = o[Symbol.asyncIterator], i;
        return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
        function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
        function settle(resolve, reject, d, v) { Promise.resolve(v).then(function (v) { resolve({ value: v, done: d }); }, reject); }
    }
    function __makeTemplateObject(cooked, raw) {
        if (Object.defineProperty) {
            Object.defineProperty(cooked, "raw", { value: raw });
        }
        else {
            cooked.raw = raw;
        }
        return cooked;
    }
    ;
    function __importStar(mod) {
        if (mod && mod.__esModule)
            return mod;
        var result = {};
        if (mod != null)
            for (var k in mod)
                if (Object.hasOwnProperty.call(mod, k))
                    result[k] = mod[k];
        result.default = mod;
        return result;
    }
    function __importDefault(mod) {
        return (mod && mod.__esModule) ? mod : { default: mod };
    }

    var _c0 = function (a0) { return { display: a0 }; };
    function TabComponent_div_0_Template(rf, ctx) {
        if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 1);
            i0.ɵɵprojection(1);
            i0.ɵɵelementEnd();
        }
        if (rf & 2) {
            var ctx_r0 = i0.ɵɵnextContext();
            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(3, _c0, ctx_r0.active ? null : "none"));
            i0.ɵɵattribute("tabindex", ctx_r0.tabIndex)("aria-labelledby", ctx_r0.id + "-header");
        }
    }
    var _c1 = ["*"];
    var TabComponent = /** @class */ (function (_super) {
        __extends(TabComponent, _super);
        function TabComponent() {
            return _super !== null && _super.apply(this, arguments) || this;
        }
        TabComponent.prototype.ngOnInit = function () {
            var _this = this;
            // use a subscription to set this.active since that affects a number of other
            // tab internals
            this.selectionSubscription = this.controller.selection.subscribe(function (key) {
                _this.active = key === _this.key;
            });
        };
        TabComponent.prototype.ngOnDestroy = function () {
            this.selectionSubscription.unsubscribe();
        };
        return TabComponent;
    }(i1.Tab));
    TabComponent.ɵfac = function TabComponent_Factory(t) { return ɵTabComponent_BaseFactory(t || TabComponent); };
    TabComponent.ɵcmp = i0.ɵɵdefineComponent({ type: TabComponent, selectors: [["ai-tab"]], inputs: { key: "key", controller: "controller" }, features: [i0.ɵɵInheritDefinitionFeature], ngContentSelectors: _c1, decls: 1, vars: 1, consts: [["role", "tabpanel", "class", "bx--tab-content", "aria-live", "polite", 3, "ngStyle", 4, "ngIf"], ["role", "tabpanel", "aria-live", "polite", 1, "bx--tab-content", 3, "ngStyle"]], template: function TabComponent_Template(rf, ctx) {
            if (rf & 1) {
                i0.ɵɵprojectionDef();
                i0.ɵɵtemplate(0, TabComponent_div_0_Template, 2, 5, "div", 0);
            }
            if (rf & 2) {
                i0.ɵɵproperty("ngIf", ctx.shouldRender());
            }
        }, directives: [i2.NgIf, i2.NgStyle], encapsulation: 2 });
    var ɵTabComponent_BaseFactory = /*@__PURE__*/ i0.ɵɵgetInheritedFactory(TabComponent);
    (function () {
        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TabComponent, [{
                type: i0.Component,
                args: [{
                        selector: 'ai-tab',
                        template: "\n    <div\n      [attr.tabindex]=\"tabIndex\"\n      role=\"tabpanel\"\n      *ngIf=\"shouldRender()\"\n      class=\"bx--tab-content\"\n      [ngStyle]=\"{\n        display: active ? null : 'none'\n      }\"\n      [attr.aria-labelledby]=\"id + '-header'\"\n      aria-live=\"polite\"\n    >\n      <ng-content></ng-content>\n    </div>\n  ",
                    }]
            }], null, { key: [{
                    type: i0.Input
                }], controller: [{
                    type: i0.Input
                }] });
    })();

    function TabHeader_ng_container_5_Template(rf, ctx) {
        if (rf & 1) {
            var _r4_1 = i0.ɵɵgetCurrentView();
            i0.ɵɵelementContainerStart(0);
            i0.ɵɵelementStart(1, "button", 5);
            i0.ɵɵlistener("click", function TabHeader_ng_container_5_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r4_1); var ctx_r3 = i0.ɵɵnextContext(); return ctx_r3.onActionClick(ctx_r3.tabAction); });
            i0.ɵɵnamespaceSVG();
            i0.ɵɵelement(2, "svg", 6);
            i0.ɵɵelementEnd();
            i0.ɵɵelementContainerEnd();
        }
        if (rf & 2) {
            var ctx_r1 = i0.ɵɵnextContext();
            i0.ɵɵadvance(1);
            i0.ɵɵproperty("title", ctx_r1.tabAction.title);
            i0.ɵɵadvance(1);
            i0.ɵɵproperty("ibmIcon", ctx_r1.tabAction.icon);
        }
    }
    function TabHeader_ng_container_6_ibm_context_menu_item_4_Template(rf, ctx) {
        if (rf & 1) {
            var _r8_1 = i0.ɵɵgetCurrentView();
            i0.ɵɵelementStart(0, "ibm-context-menu-item", 11);
            i0.ɵɵlistener("click", function TabHeader_ng_container_6_ibm_context_menu_item_4_Template_ibm_context_menu_item_click_0_listener() { i0.ɵɵrestoreView(_r8_1); var action_r6 = ctx.$implicit; var ctx_r7 = i0.ɵɵnextContext(2); return ctx_r7.onActionClick(action_r6); })("keydown.enter", function TabHeader_ng_container_6_ibm_context_menu_item_4_Template_ibm_context_menu_item_keydown_enter_0_listener() { i0.ɵɵrestoreView(_r8_1); var action_r6 = ctx.$implicit; var ctx_r9 = i0.ɵɵnextContext(2); return ctx_r9.onActionClick(action_r6); })("keydown.space", function TabHeader_ng_container_6_ibm_context_menu_item_4_Template_ibm_context_menu_item_keydown_space_0_listener() { i0.ɵɵrestoreView(_r8_1); var action_r6 = ctx.$implicit; var ctx_r10 = i0.ɵɵnextContext(2); return ctx_r10.onActionClick(action_r6); });
            i0.ɵɵelementEnd();
        }
        if (rf & 2) {
            var action_r6 = ctx.$implicit;
            i0.ɵɵproperty("label", action_r6.title)("icon", action_r6.icon);
        }
    }
    function TabHeader_ng_container_6_Template(rf, ctx) {
        if (rf & 1) {
            var _r12_1 = i0.ɵɵgetCurrentView();
            i0.ɵɵelementContainerStart(0);
            i0.ɵɵelementStart(1, "button", 7);
            i0.ɵɵlistener("click", function TabHeader_ng_container_6_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r12_1); var ctx_r11 = i0.ɵɵnextContext(); return ctx_r11.onTabMenuClick($event); });
            i0.ɵɵnamespaceSVG();
            i0.ɵɵelement(2, "svg", 8);
            i0.ɵɵelementEnd();
            i0.ɵɵnamespaceHTML();
            i0.ɵɵelementStart(3, "ibm-context-menu", 9);
            i0.ɵɵtemplate(4, TabHeader_ng_container_6_ibm_context_menu_item_4_Template, 1, 2, "ibm-context-menu-item", 10);
            i0.ɵɵelementEnd();
            i0.ɵɵelementContainerEnd();
        }
        if (rf & 2) {
            var ctx_r2 = i0.ɵɵnextContext();
            i0.ɵɵadvance(3);
            i0.ɵɵproperty("open", ctx_r2.menuOpen)("position", ctx_r2.menuPosition);
            i0.ɵɵadvance(1);
            i0.ɵɵproperty("ngForOf", ctx_r2.tabActions);
        }
    }
    var _c0$1 = function (a0, a1) { return { "bx--tabs__nav-item--selected bx--tabs--scrollable__nav-item--selected": a0, "bx--tabs__nav-item--disabled bx--tabs--scrollable__nav-item--disabled": a1 }; };
    var _c1$1 = ["*"];
    var TabHeader = /** @class */ (function (_super) {
        __extends(TabHeader, _super);
        function TabHeader(elementRef, documentService) {
            var _this = _super.call(this) || this;
            _this.elementRef = elementRef;
            _this.documentService = documentService;
            _this.actions = [];
            _this.tabAction = null;
            _this.tabActions = null;
            _this.menuOpen = false;
            _this.menuPosition = {
                top: 0,
                left: 0,
            };
            return _this;
        }
        TabHeader.prototype.ngOnChanges = function (changes) {
            var _a;
            var actions = (_a = changes.actions) === null || _a === void 0 ? void 0 : _a.currentValue;
            if (actions) {
                if (actions.length === 1) {
                    this.tabAction = Object.assign({}, {
                        title: '',
                        icon: 'close',
                        onClick: function () { },
                    }, actions[0]);
                }
                else if (actions.length > 1) {
                    this.tabActions = actions.map(function (action) { return Object.assign({}, {
                        title: '',
                        icon: '',
                        onClick: function () { },
                    }, action); });
                }
            }
        };
        TabHeader.prototype.ngAfterViewInit = function () {
            var _this = this;
            this.documentService.handleClick(function (event) {
                var nativeElement = _this.elementRef.nativeElement;
                if (_this.menuOpen && !nativeElement.contains(event.target)) {
                    _this.menuOpen = false;
                }
            });
        };
        TabHeader.prototype.onActionClick = function (action) {
            action.onClick(this.tab);
            this.menuOpen = false;
        };
        TabHeader.prototype.onTabMenuClick = function (event) {
            var target = event.target;
            var button = target.closest('button');
            var buttonRect = button.getBoundingClientRect();
            var menuRect = button.parentElement
                .querySelector('.bx--context-menu')
                .getBoundingClientRect();
            this.menuOpen = !this.menuOpen;
            this.menuPosition = {
                top: buttonRect.top + buttonRect.height,
                left: buttonRect.right - menuRect.width,
            };
        };
        return TabHeader;
    }(tabs.TabHeader));
    TabHeader.ɵfac = function TabHeader_Factory(t) { return new (t || TabHeader)(i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.DocumentService)); };
    TabHeader.ɵcmp = i0.ɵɵdefineComponent({ type: TabHeader, selectors: [["ai-tab-header"]], inputs: { tab: "tab", actions: "actions" }, features: [i0.ɵɵProvidersFeature([
                {
                    provide: tabs.TabHeader,
                    useExisting: TabHeader,
                },
            ]), i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c1$1, decls: 7, vars: 9, consts: [["role", "presentation", 1, "bx--tabs--scrollable__nav-item", 3, "ngClass", "click"], ["draggable", "false", "role", "tab", 1, "bx--tabs--scrollable__nav-link", 3, "title"], ["tabItem", ""], [1, "ai--tabs--header_content"], [4, "ngIf"], ["ibmButton", "ghost", 1, "ai--tabs--header_action", 3, "title", "click"], ["size", "16", 3, "ibmIcon"], ["ibmButton", "ghost", 1, "ai--tabs--header_action", 3, "click"], ["ibmIcon", "overflow-menu--vertical", "size", "16"], [3, "open", "position"], [3, "label", "icon", "click", "keydown.enter", "keydown.space", 4, "ngFor", "ngForOf"], [3, "label", "icon", "click", "keydown.enter", "keydown.space"]], template: function TabHeader_Template(rf, ctx) {
            if (rf & 1) {
                i0.ɵɵprojectionDef();
                i0.ɵɵelementStart(0, "li", 0);
                i0.ɵɵlistener("click", function TabHeader_Template_li_click_0_listener() { return ctx.selectTab(); });
                i0.ɵɵelementStart(1, "div", 1, 2);
                i0.ɵɵelementStart(3, "div", 3);
                i0.ɵɵprojection(4);
                i0.ɵɵelementEnd();
                i0.ɵɵtemplate(5, TabHeader_ng_container_5_Template, 3, 2, "ng-container", 4);
                i0.ɵɵtemplate(6, TabHeader_ng_container_6_Template, 5, 3, "ng-container", 4);
                i0.ɵɵelementEnd();
                i0.ɵɵelementEnd();
            }
            if (rf & 2) {
                i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction2(6, _c0$1, ctx.active, ctx.disabled));
                i0.ɵɵadvance(1);
                i0.ɵɵproperty("title", ctx.title);
                i0.ɵɵattribute("aria-selected", ctx.active)("tabindex", ctx.active ? 0 : -1);
                i0.ɵɵadvance(4);
                i0.ɵɵproperty("ngIf", ctx.tabAction);
                i0.ɵɵadvance(1);
                i0.ɵɵproperty("ngIf", ctx.tabActions);
            }
        }, directives: [i2.NgClass, i2.NgIf, i1.Button, i1.IconDirective, i3.ContextMenuComponent, i2.NgForOf, i3.ContextMenuItemComponent], styles: [".bx--tabs--scrollable__nav-link[_ngcontent-%COMP%] {\n        display: flex;\n        align-items: end;\n      }\n\n        .bx--tabs--scrollable .bx--tabs--scrollable__nav-link {\n        padding: 0;\n      }\n\n      .ai--tabs--header_content[_ngcontent-%COMP%] {\n        width: 100%;\n        padding: 0.75rem 1rem 0.5rem;\n      }\n\n      .ai--tabs--header_action[_ngcontent-%COMP%] {\n        padding: 0;\n        min-height: 0;\n        height: 1.5rem;\n        width: 1.5rem;\n        align-content: center;\n        justify-content: center;\n        margin-bottom: 0.3rem;\n        margin-right: 0.5rem;\n      }"] });
    (function () {
        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TabHeader, [{
                type: i0.Component,
                args: [{
                        selector: 'ai-tab-header',
                        template: "\n    <li\n      [ngClass]=\"{\n        'bx--tabs__nav-item--selected bx--tabs--scrollable__nav-item--selected': active,\n        'bx--tabs__nav-item--disabled bx--tabs--scrollable__nav-item--disabled': disabled\n      }\"\n      class=\"bx--tabs--scrollable__nav-item\"\n      role=\"presentation\"\n      (click)=\"selectTab()\"\n    >\n      <div\n        class=\"bx--tabs--scrollable__nav-link\"\n        #tabItem\n        [attr.aria-selected]=\"active\"\n        draggable=\"false\"\n        [title]=\"title\"\n        [attr.tabindex]=\"active ? 0 : -1\"\n        role=\"tab\"\n      >\n        <div class=\"ai--tabs--header_content\">\n          <ng-content></ng-content>\n        </div>\n        <ng-container *ngIf=\"tabAction\">\n          <button\n            ibmButton=\"ghost\"\n            class=\"ai--tabs--header_action\"\n            [title]=\"tabAction.title\"\n            (click)=\"onActionClick(tabAction)\"\n          >\n            <svg [ibmIcon]=\"tabAction.icon\" size=\"16\"></svg>\n          </button>\n        </ng-container>\n        <ng-container *ngIf=\"tabActions\">\n          <button\n            ibmButton=\"ghost\"\n            class=\"ai--tabs--header_action\"\n            (click)=\"onTabMenuClick($event)\"\n          >\n            <svg ibmIcon=\"overflow-menu--vertical\" size=\"16\"></svg>\n          </button>\n          <ibm-context-menu [open]=\"menuOpen\" [position]=\"menuPosition\">\n            <ibm-context-menu-item\n              *ngFor=\"let action of tabActions\"\n              [label]=\"action.title\"\n              [icon]=\"action.icon\"\n              (click)=\"onActionClick(action)\"\n              (keydown.enter)=\"onActionClick(action)\"\n              (keydown.space)=\"onActionClick(action)\"\n            >\n            </ibm-context-menu-item>\n          </ibm-context-menu>\n        </ng-container>\n      </div>\n    </li>\n  ",
                        styles: [
                            "\n      .bx--tabs--scrollable__nav-link {\n        display: flex;\n        align-items: end;\n      }\n\n      ::ng-deep .bx--tabs--scrollable .bx--tabs--scrollable__nav-link {\n        padding: 0;\n      }\n\n      .ai--tabs--header_content {\n        width: 100%;\n        padding: 0.75rem 1rem 0.5rem;\n      }\n\n      .ai--tabs--header_action {\n        padding: 0;\n        min-height: 0;\n        height: 1.5rem;\n        width: 1.5rem;\n        align-content: center;\n        justify-content: center;\n        margin-bottom: 0.3rem;\n        margin-right: 0.5rem;\n      }\n    ",
                        ],
                        providers: [
                            {
                                provide: tabs.TabHeader,
                                useExisting: TabHeader,
                            },
                        ],
                    }]
            }], function () { return [{ type: i0.ElementRef }, { type: i1.DocumentService }]; }, { tab: [{
                    type: i0.Input
                }], actions: [{
                    type: i0.Input
                }] });
    })();

    function TabsComponent_ai_tab_header_1_Template(rf, ctx) {
        if (rf & 1) {
            var _r3_1 = i0.ɵɵgetCurrentView();
            i0.ɵɵelementStart(0, "ai-tab-header", 2);
            i0.ɵɵlistener("selected", function TabsComponent_ai_tab_header_1_Template_ai_tab_header_selected_0_listener() { i0.ɵɵrestoreView(_r3_1); var tab_r1 = ctx.$implicit; var ctx_r2 = i0.ɵɵnextContext(); return ctx_r2.onSelected(tab_r1.key); });
            i0.ɵɵpipe(1, "async");
            i0.ɵɵelementStart(2, "div", 3);
            i0.ɵɵelementStart(3, "span");
            i0.ɵɵtext(4);
            i0.ɵɵelementEnd();
            i0.ɵɵelementEnd();
            i0.ɵɵelementEnd();
        }
        if (rf & 2) {
            var tab_r1 = ctx.$implicit;
            var ctx_r0 = i0.ɵɵnextContext();
            i0.ɵɵproperty("active", i0.ɵɵpipeBind1(1, 4, ctx_r0.controller.selection) === tab_r1.key)("tab", tab_r1)("actions", tab_r1.actions);
            i0.ɵɵadvance(4);
            i0.ɵɵtextInterpolate(tab_r1.title);
        }
    }
    var _c0$2 = [[["ai-tab-actions"]]];
    var _c1$2 = function (a0) { return { "max-width": a0 }; };
    var _c2 = ["ai-tab-actions"];
    var TabsComponent = /** @class */ (function () {
        function TabsComponent(elementRef) {
            this.elementRef = elementRef;
        }
        TabsComponent.prototype.onSelected = function (key) {
            this.controller.selectTab(key);
        };
        TabsComponent.prototype.getMaxWidth = function () {
            var actions = this.elementRef.nativeElement.querySelector('ai-tab-actions');
            if (!actions) {
                return null;
            }
            return "calc(100% - " + getComputedStyle(actions).width + ")";
        };
        return TabsComponent;
    }());
    TabsComponent.ɵfac = function TabsComponent_Factory(t) { return new (t || TabsComponent)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
    TabsComponent.ɵcmp = i0.ɵɵdefineComponent({ type: TabsComponent, selectors: [["ai-tabs"]], inputs: { controller: "controller" }, ngContentSelectors: _c2, decls: 3, vars: 4, consts: [[3, "ngStyle"], [3, "active", "tab", "actions", "selected", 4, "ngFor", "ngForOf"], [3, "active", "tab", "actions", "selected"], [1, "iot--tab__title-container"]], template: function TabsComponent_Template(rf, ctx) {
            if (rf & 1) {
                i0.ɵɵprojectionDef(_c0$2);
                i0.ɵɵelementStart(0, "ibm-tab-header-group", 0);
                i0.ɵɵtemplate(1, TabsComponent_ai_tab_header_1_Template, 5, 6, "ai-tab-header", 1);
                i0.ɵɵelementEnd();
                i0.ɵɵprojection(2);
            }
            if (rf & 2) {
                i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(2, _c1$2, ctx.getMaxWidth()));
                i0.ɵɵadvance(1);
                i0.ɵɵproperty("ngForOf", ctx.controller.getTabs());
            }
        }, directives: [i1.TabHeaderGroup, i2.NgStyle, i2.NgForOf, TabHeader], pipes: [i2.AsyncPipe], styles: ["[_nghost-%COMP%] {\n        display: flex;\n      }"] });
    (function () {
        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TabsComponent, [{
                type: i0.Component,
                args: [{
                        selector: 'ai-tabs',
                        template: "\n    <ibm-tab-header-group\n      [ngStyle]=\"{\n        'max-width': getMaxWidth()\n      }\"\n    >\n      <ai-tab-header\n        *ngFor=\"let tab of controller.getTabs()\"\n        [active]=\"(controller.selection | async) === tab.key\"\n        [tab]=\"tab\"\n        [actions]=\"tab.actions\"\n        (selected)=\"onSelected(tab.key)\"\n      >\n        <div class=\"iot--tab__title-container\">\n          <span>{{ tab.title }}</span>\n        </div>\n      </ai-tab-header>\n    </ibm-tab-header-group>\n    <ng-content select=\"ai-tab-actions\"></ng-content>\n  ",
                        styles: [
                            "\n      :host {\n        display: flex;\n      }\n    ",
                        ],
                    }]
            }], function () { return [{ type: i0.ElementRef }]; }, { controller: [{
                    type: i0.Input
                }] });
    })();

    var TabActionDirective = /** @class */ (function (_super) {
        __extends(TabActionDirective, _super);
        function TabActionDirective(elementRef) {
            var _this = _super.call(this) || this;
            _this.elementRef = elementRef;
            return _this;
        }
        TabActionDirective.prototype.ngOnInit = function () {
            this.ibmButton = 'ghost';
            this.size = 'sm';
            this.iconOnly = true;
            var el = this.elementRef.nativeElement;
            el.style.width = '40px';
            el.style.height = '40px';
            el.style.justifyContent = 'center';
        };
        return TabActionDirective;
    }(i1.Button));
    TabActionDirective.ɵfac = function TabActionDirective_Factory(t) { return new (t || TabActionDirective)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
    TabActionDirective.ɵdir = i0.ɵɵdefineDirective({ type: TabActionDirective, selectors: [["", "aiTabAction", ""]], features: [i0.ɵɵInheritDefinitionFeature] });
    (function () {
        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TabActionDirective, [{
                type: i0.Directive,
                args: [{
                        selector: '[aiTabAction]',
                    }]
            }], function () { return [{ type: i0.ElementRef }]; }, null);
    })();

    var _c0$3 = ["dropdownMenu"];
    var _c1$3 = ["dropdownButton"];
    var TabDropdownComponent = /** @class */ (function () {
        function TabDropdownComponent(dropdownService, elementRef, documentService) {
            this.dropdownService = dropdownService;
            this.elementRef = elementRef;
            this.documentService = documentService;
            this.isOpen = false;
        }
        TabDropdownComponent.prototype.ngOnInit = function () {
            var _this = this;
            // TODO: update dropdown service to handle menus fixed to the right side of the trigger
            this.dropdownService.offset = {
                /**
                 * 105 = 210 / 2 the dropdown service will center the menu and
                 * then align it to the left edge of the trigger element
                 */
                left: 105,
            };
            this.documentService.handleClick(function (event) {
                var hostElement = _this.elementRef.nativeElement;
                var menuElement = _this.dropdownMenu.nativeElement;
                var target = event.target;
                if (_this.isOpen && !hostElement.contains(target) && !menuElement.contains(target)) {
                    _this.closeMenu();
                }
            });
            this.displayItems = this.controller.tabListWithSelection.pipe(operators.map(function (list) {
                return list.map(function (item) { return ({
                    content: item.title,
                    key: item.key,
                    selected: item.selected,
                }); });
            }));
        };
        TabDropdownComponent.prototype.onSelect = function (event) {
            if (!event.isUpdate) {
                this.controller.selectTab(event.item.key);
                this.closeMenu();
            }
        };
        TabDropdownComponent.prototype.toggleMenu = function () {
            if (!this.isOpen) {
                this.openMenu();
            }
            else {
                this.closeMenu();
            }
        };
        TabDropdownComponent.prototype.openMenu = function () {
            this.isOpen = true;
            var wrapper = this.dropdownService.appendToBody(this.dropdownButton.nativeElement, this.dropdownMenu.nativeElement, '');
            wrapper.style.width = '250px';
            this.dropdownList.initFocus();
        };
        TabDropdownComponent.prototype.closeMenu = function () {
            this.isOpen = false;
            this.dropdownService.appendToDropdown(this.elementRef.nativeElement);
        };
        TabDropdownComponent.prototype.ngOnDestroy = function () {
            this.closeMenu();
        };
        return TabDropdownComponent;
    }());
    TabDropdownComponent.ɵfac = function TabDropdownComponent_Factory(t) { return new (t || TabDropdownComponent)(i0.ɵɵdirectiveInject(i1.DropdownService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i1.DocumentService)); };
    TabDropdownComponent.ɵcmp = i0.ɵɵdefineComponent({ type: TabDropdownComponent, selectors: [["ai-tab-dropdown"]], viewQuery: function TabDropdownComponent_Query(rf, ctx) {
            if (rf & 1) {
                i0.ɵɵviewQuery(_c0$3, 3);
                i0.ɵɵviewQuery(_c1$3, 3);
                i0.ɵɵviewQuery(i1.DropdownList, 1);
            }
            if (rf & 2) {
                var _t = void 0;
                i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdownMenu = _t.first);
                i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdownButton = _t.first);
                i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.dropdownList = _t.first);
            }
        }, inputs: { controller: "controller" }, features: [i0.ɵɵProvidersFeature([i1.DropdownService])], decls: 6, vars: 1, consts: [["aiTabAction", "", 3, "click"], ["dropdownButton", ""], ["ibmIcon", "chevron--down", "size", "16", 1, "bx--btn__icon"], [1, "dropdown-menu", "bx--list-box--expanded", 2, "display", "none"], ["dropdownMenu", ""], [3, "items", "select"]], template: function TabDropdownComponent_Template(rf, ctx) {
            if (rf & 1) {
                i0.ɵɵelementStart(0, "button", 0, 1);
                i0.ɵɵlistener("click", function TabDropdownComponent_Template_button_click_0_listener() { return ctx.toggleMenu(); });
                i0.ɵɵnamespaceSVG();
                i0.ɵɵelement(2, "svg", 2);
                i0.ɵɵelementEnd();
                i0.ɵɵnamespaceHTML();
                i0.ɵɵelementStart(3, "div", 3, 4);
                i0.ɵɵelementStart(5, "ibm-dropdown-list", 5);
                i0.ɵɵlistener("select", function TabDropdownComponent_Template_ibm_dropdown_list_select_5_listener($event) { return ctx.onSelect($event); });
                i0.ɵɵelementEnd();
                i0.ɵɵelementEnd();
            }
            if (rf & 2) {
                i0.ɵɵadvance(5);
                i0.ɵɵproperty("items", ctx.displayItems);
            }
        }, directives: [TabActionDirective, i1.IconDirective, i1.DropdownList], encapsulation: 2 });
    (function () {
        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TabDropdownComponent, [{
                type: i0.Component,
                args: [{
                        selector: 'ai-tab-dropdown',
                        template: "\n    <button aiTabAction #dropdownButton (click)=\"toggleMenu()\">\n      <svg class=\"bx--btn__icon\" ibmIcon=\"chevron--down\" size=\"16\"></svg>\n    </button>\n    <div style=\"display: none;\" class=\"dropdown-menu bx--list-box--expanded\" #dropdownMenu>\n      <ibm-dropdown-list [items]=\"displayItems\" (select)=\"onSelect($event)\"></ibm-dropdown-list>\n    </div>\n  ",
                        providers: [i1.DropdownService],
                    }]
            }], function () { return [{ type: i1.DropdownService }, { type: i0.ElementRef }, { type: i1.DocumentService }]; }, { controller: [{
                    type: i0.Input
                }], dropdownMenu: [{
                    type: i0.ViewChild,
                    args: ['dropdownMenu', { static: true }]
                }], dropdownButton: [{
                    type: i0.ViewChild,
                    args: ['dropdownButton', { static: true }]
                }], dropdownList: [{
                    type: i0.ViewChild,
                    args: [i1.DropdownList]
                }] });
    })();

    var _c0$4 = ["*"];
    var TabActionsComponent = /** @class */ (function () {
        function TabActionsComponent() {
        }
        return TabActionsComponent;
    }());
    TabActionsComponent.ɵfac = function TabActionsComponent_Factory(t) { return new (t || TabActionsComponent)(); };
    TabActionsComponent.ɵcmp = i0.ɵɵdefineComponent({ type: TabActionsComponent, selectors: [["ai-tab-actions"]], ngContentSelectors: _c0$4, decls: 1, vars: 0, template: function TabActionsComponent_Template(rf, ctx) {
            if (rf & 1) {
                i0.ɵɵprojectionDef();
                i0.ɵɵprojection(0);
            }
        }, styles: ["[_nghost-%COMP%] {\n        display: flex;\n      }"] });
    (function () {
        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TabActionsComponent, [{
                type: i0.Component,
                args: [{
                        selector: 'ai-tab-actions',
                        template: " <ng-content></ng-content> ",
                        styles: [
                            "\n      :host {\n        display: flex;\n      }\n    ",
                        ],
                    }]
            }], null, null);
    })();

    var TabsModule = /** @class */ (function () {
        function TabsModule() {
        }
        return TabsModule;
    }());
    TabsModule.ɵmod = i0.ɵɵdefineNgModule({ type: TabsModule });
    TabsModule.ɵinj = i0.ɵɵdefineInjector({ factory: function TabsModule_Factory(t) { return new (t || TabsModule)(); }, imports: [[
                i2.CommonModule,
                i1.TabsModule,
                i1.IconModule,
                i1.DropdownModule,
                i1.ButtonModule,
                i1.UtilsModule,
                i3.ContextMenuModule,
            ]] });
    (function () {
        (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(TabsModule, { declarations: [TabsComponent,
                TabComponent,
                TabDropdownComponent,
                TabActionsComponent,
                TabActionDirective,
                TabHeader], imports: [i2.CommonModule,
                i1.TabsModule,
                i1.IconModule,
                i1.DropdownModule,
                i1.ButtonModule,
                i1.UtilsModule,
                i3.ContextMenuModule], exports: [TabsComponent,
                TabComponent,
                TabDropdownComponent,
                TabActionsComponent,
                TabActionDirective,
                TabHeader] });
    })();
    (function () {
        (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TabsModule, [{
                type: i0.NgModule,
                args: [{
                        declarations: [
                            TabsComponent,
                            TabComponent,
                            TabDropdownComponent,
                            TabActionsComponent,
                            TabActionDirective,
                            TabHeader,
                        ],
                        imports: [
                            i2.CommonModule,
                            i1.TabsModule,
                            i1.IconModule,
                            i1.DropdownModule,
                            i1.ButtonModule,
                            i1.UtilsModule,
                            i3.ContextMenuModule,
                        ],
                        exports: [
                            TabsComponent,
                            TabComponent,
                            TabDropdownComponent,
                            TabActionsComponent,
                            TabActionDirective,
                            TabHeader,
                        ],
                    }]
            }], null, null);
    })();

    /**
     * Generated bundle index. Do not edit.
     */

    exports.TabActionDirective = TabActionDirective;
    exports.TabActionsComponent = TabActionsComponent;
    exports.TabComponent = TabComponent;
    exports.TabDropdownComponent = TabDropdownComponent;
    exports.TabHeader = TabHeader;
    exports.TabsComponent = TabsComponent;
    exports.TabsModule = TabsModule;

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

})));
//# sourceMappingURL=ai-apps-angular-tabs.umd.js.map
