npm - carbon-components-angular - Versions diffs - 3.13.1 → 3.13.2 - Mend

carbon-components-angular 3.13.1 → 3.13.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "carbon-components-angular",
-  "version": "3.13.1",
+  "version": "3.13.2",
   "description": "Next generation components",
   "main": "index.js",
   "scripts": {

package/tabs/tab-headers.component.d.ts CHANGED Viewed

@@ -45,6 +45,14 @@ export declare class TabHeaders implements AfterContentInit {
      * Set to `true` to put tabs in a loading state.
      */
     skeleton: boolean;
+    /**
+     * Sets the aria label on the nav element.
+     */
+    ariaLabel: string;
+    /**
+     * Sets the aria labelledby on the nav element.
+     */
+    ariaLabelledby: string;
     contentBefore: any;
     contentAfter: any;
     /**
@@ -76,6 +84,7 @@ export declare class TabHeaders implements AfterContentInit {
      * Controls the keydown events used for tabbing through the headings.
      */
     keyboardInput(event: any): void;
+    focusOut(event: any): void;
     ngAfterContentInit(): void;
     /**
      * Controls manually focusing tabs.

package/tabs/tab-headers.component.js CHANGED Viewed

@@ -103,6 +103,11 @@ var TabHeaders = /** @class */ (function () {
             this.selectTab(event.target, tabsArray[this.currentSelectedTab], this.currentSelectedTab);
         }
     };
+    TabHeaders.prototype.focusOut = function (event) {
+        if (this.tabListVisible && event.relatedTarget === null) {
+            this.tabListVisible = false;
+        }
+    };
     TabHeaders.prototype.ngAfterContentInit = function () {
         var _this = this;
         if (!this.tabInput) {
@@ -168,7 +173,7 @@ var TabHeaders = /** @class */ (function () {
     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<div class=\"bx--tabs-trigger\" tabindex=\"0\" (click)=\"showTabList()\">\n\t\t\t\t<a href=\"javascript:void(0)\" class=\"bx--tabs-trigger-text\" tabindex=\"-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</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(tabref, tab, i)\">\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(tabref, 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 "
+                    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 class=\"bx--tabs-trigger\" tabindex=\"0\" (click)=\"showTabList()\">\n\t\t\t\t<a href=\"javascript:void(0)\" class=\"bx--tabs-trigger-text\" tabindex=\"-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</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(tabref, tab, i)\">\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(tabref, 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 "
                 },] },
     ];
     TabHeaders.propDecorators = {
@@ -176,12 +181,15 @@ var TabHeaders = /** @class */ (function () {
         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"],] }]
+        keyboardInput: [{ type: HostListener, args: ["keydown", ["$event"],] }],
+        focusOut: [{ type: HostListener, args: ["focusout", ["$event"],] }]
     };
     return TabHeaders;
 }());

package/tabs/tab-headers.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab-headers.component.js","sourceRoot":"","sources":["../src/tabs/tab-headers.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tQueryList,\n\tInput,\n\tHostListener,\n\tViewChild,\n\tContentChildren,\n\tAfterContentInit,\n\tViewChildren,\n\tElementRef\n} from \"@angular/core\";\n\nimport { Tab } from \"./tab.component\";\n\n\n/*\n The `TabHeaders` component contains the `Tab` items and controls scroll functionality\n * if content has overflow.\n * @export\n * @class TabHeaders\n * @implements {AfterViewInit}\n /\n@Component({\n\tselector: \"ibm-tab-headers\",\n\ttemplate: `\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<div class=\"bx--tabs-trigger\" tabindex=\"0\" (click)=\"showTabList()\">\n\t\t\t\t<a href=\"javascript:void(0)\" class=\"bx--tabs-trigger-text\" tabindex=\"-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\tngIf=\"getSelectedTab().headingIsTemplate\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"getSelectedTab().heading\">\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\tngFor=\"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(tabref, tab, i)\">\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(tabref, 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\tngIf=\"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 `\n})\n\nexport class TabHeaders implements AfterContentInit {\n\t/*\n\t List of `Tab` components.\n\t /\n\t// disable the next line because we need to rename the input\n\t// tslint:disable-next-line\n\t@Input(\"tabs\") tabInput: QueryList<Tab>;\n\t/\n\t Set to 'true' to have `Tab` items cached and not reloaded on tab switching.\n\t * Duplicate from `n-tabs` to support standalone headers\n\t /\n\t@Input() cacheActive = false;\n\t/\n\t Set to 'true' to have tabs automatically activated and have their content displayed when they receive focus.\n\t /\n\t@Input() followFocus: boolean;\n\t/\n\t Set to `true` to put tabs in a loading state.\n\t /\n\t@Input() skeleton = false;\n\n\t@Input() contentBefore;\n\t@Input() contentAfter;\n\n\t/\n\t Gets the Unordered List element that holds the `Tab` headings from the view DOM.\n\t /\n\t@ViewChild(\"tabList\") headerContainer;\n\t/\n\t ContentChild of all the n-tabs\n\t /\n\t@ContentChildren(Tab) tabQuery: QueryList<Tab>;\n\t/\n\t set to tabQuery if tabInput is empty\n\t /\n\tpublic tabs: QueryList<Tab>;\n\t/\n\t The index of the first visible tab.\n\t /\n\tpublic firstVisibleTab = 0;\n\t/\n\t The DOM element containing the `Tab` headings displayed.\n\t /\n\t@ViewChildren(\"tabItem\") allTabHeaders: QueryList<ElementRef>;\n\t/\n\t Controls the manual focusing done by tabbing through headings.\n\t /\n\tpublic currentSelectedTab: number;\n\tpublic tabListVisible = false;\n\n\t// keyboard accessibility\n\t/\n\t Controls the keydown events used for tabbing through the headings.\n\t /\n\t@HostListener(\"keydown\", [\"$event\"])\n\tkeyboardInput(event) {\n\t\tlet tabsArray = Array.from<any>(this.tabs);\n\n\t\t// \"Right\" is an ie11 specific value\n\t\tif (event.key === \"Right\" \|\| event.key === \"ArrowRight\") {\n\t\t\tif (this.currentSelectedTab < this.allTabHeaders.length - 1) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus) {\n\t\t\t\t\tthis.selectTab(event.target, tabsArray[this.currentSelectedTab + 1], this.currentSelectedTab);\n\t\t\t\t}\n\t\t\t\tthis.allTabHeaders.toArray()[this.currentSelectedTab + 1].nativeElement.focus();\n\t\t\t} else {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus) {\n\t\t\t\t\tthis.selectTab(event.target, tabsArray[0], 0);\n\t\t\t\t}\n\t\t\t\tthis.allTabHeaders.first.nativeElement.focus();\n\t\t\t}\n\t\t}\n\n\t\t// \"Left\" is an ie11 specific value\n\t\tif (event.key === \"Left\" \|\| event.key === \"ArrowLeft\") {\n\t\t\tif (this.currentSelectedTab > 0) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus) {\n\t\t\t\t\tthis.selectTab(event.target, tabsArray[this.currentSelectedTab - 1], this.currentSelectedTab);\n\t\t\t\t}\n\t\t\t\tthis.allTabHeaders.toArray()[this.currentSelectedTab - 1].nativeElement.focus();\n\t\t\t} else {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus) {\n\t\t\t\t\tthis.selectTab(event.target, tabsArray[this.allTabHeaders.length - 1], this.allTabHeaders.length);\n\t\t\t\t}\n\t\t\t\tthis.allTabHeaders.toArray()[this.allTabHeaders.length - 1].nativeElement.focus();\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"Home\") {\n\t\t\tevent.preventDefault();\n\t\t\tif (this.followFocus) {\n\t\t\t\tthis.selectTab(event.target, tabsArray[0], 0);\n\t\t\t}\n\t\t\tthis.allTabHeaders.toArray()[0].nativeElement.focus();\n\t\t}\n\n\t\tif (event.key === \"End\") {\n\t\t\tevent.preventDefault();\n\t\t\tif (this.followFocus) {\n\t\t\t\tthis.selectTab(event.target, tabsArray[this.allTabHeaders.length - 1], this.allTabHeaders.length);\n\t\t\t}\n\t\t\tthis.allTabHeaders.toArray()[this.allTabHeaders.length - 1].nativeElement.focus();\n\t\t}\n\n\t\t// `\"Spacebar\"` is IE11 specific value\n\t\tif ((event.key === \" \" \|\| event.key === \"Spacebar\") && !this.followFocus) {\n\t\t\tthis.selectTab(event.target, tabsArray[this.currentSelectedTab], this.currentSelectedTab);\n\t\t}\n\t}\n\n\tngAfterContentInit() {\n\t\tif (!this.tabInput) {\n\t\t\tthis.tabs = this.tabQuery;\n\t\t} else {\n\t\t\tthis.tabs = this.tabInput;\n\t\t}\n\n\t\tthis.tabs.forEach(tab => tab.cacheActive = this.cacheActive);\n\t\tthis.tabs.changes.subscribe(() => {\n\t\t\tthis.setFirstTab();\n\t\t});\n\t\tthis.setFirstTab();\n\t}\n\n\t/\n\t Controls manually focusing tabs.\n\t /\n\tpublic onTabFocus(ref: HTMLElement, index: number) {\n\t\tthis.currentSelectedTab = index;\n\t\t// reset scroll left because we're already handling it\n\t\tthis.headerContainer.nativeElement.parentElement.scrollLeft = 0;\n\t}\n\n\tpublic getSelectedTab(): any {\n\t\tconst selected = this.tabs.find(tab => tab.active);\n\t\tif (selected) {\n\t\t\treturn selected;\n\t\t}\n\t\treturn {headingIsTemplate: false, heading: \"\"};\n\t}\n\n\tpublic showTabList() {\n\t\tthis.tabListVisible = true;\n\t}\n\n\t/\n\t Selects `Tab` 'tab' and moves it into view on the view DOM if it is not already.\n\t /\n\tpublic selectTab(ref: HTMLElement, tab: Tab, tabIndex: number) {\n\t\tif (tab.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\t// hide the tablist on mobile\n\t\tthis.tabListVisible = false;\n\t\tthis.currentSelectedTab = tabIndex;\n\t\tthis.tabs.forEach(_tab => _tab.active = false);\n\t\ttab.active = true;\n\t\ttab.doSelect();\n\t}\n\n\t/\n\t Determines which `Tab` is initially selected.\n\t */\n\tprotected setFirstTab() {\n\t\tsetTimeout(() => {\n\t\t\tlet firstTab = this.tabs.find(tab => tab.active);\n\t\t\tif (!firstTab && this.tabs.first) {\n\t\t\t\tfirstTab = this.tabs.first;\n\t\t\t\tfirstTab.active = true;\n\t\t\t}\n\t\t\tif (firstTab) {\n\t\t\t\tfirstTab.doSelect();\n\t\t\t}\n\t\t});\n\t}\n}\n"]}
1	+ {"version":3,"file":"tab-headers.component.js","sourceRoot":"","sources":["../src/tabs/tab-headers.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n\tComponent,\n\tQueryList,\n\tInput,\n\tHostListener,\n\tViewChild,\n\tContentChildren,\n\tAfterContentInit,\n\tViewChildren,\n\tElementRef\n} from \"@angular/core\";\n\nimport { Tab } from \"./tab.component\";\n\n\n/*\n The `TabHeaders` component contains the `Tab` items and controls scroll functionality\n * if content has overflow.\n * @export\n * @class TabHeaders\n * @implements {AfterViewInit}\n /\n@Component({\n\tselector: \"ibm-tab-headers\",\n\ttemplate: `\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 class=\"bx--tabs-trigger\" tabindex=\"0\" (click)=\"showTabList()\">\n\t\t\t\t<a href=\"javascript:void(0)\" class=\"bx--tabs-trigger-text\" tabindex=\"-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\tngIf=\"getSelectedTab().headingIsTemplate\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"getSelectedTab().heading\">\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\tngFor=\"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(tabref, tab, i)\">\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(tabref, 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\tngIf=\"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 `\n})\n\nexport class TabHeaders implements AfterContentInit {\n\t/*\n\t List of `Tab` components.\n\t /\n\t// disable the next line because we need to rename the input\n\t// tslint:disable-next-line\n\t@Input(\"tabs\") tabInput: QueryList<Tab>;\n\t/\n\t Set to 'true' to have `Tab` items cached and not reloaded on tab switching.\n\t * Duplicate from `n-tabs` to support standalone headers\n\t /\n\t@Input() cacheActive = false;\n\t/\n\t Set to 'true' to have tabs automatically activated and have their content displayed when they receive focus.\n\t /\n\t@Input() followFocus: boolean;\n\t/\n\t Set to `true` to put tabs in a loading state.\n\t /\n\t@Input() skeleton = false;\n\t/\n\t Sets the aria label on the nav element.\n\t /\n\t@Input() ariaLabel: string;\n\t/\n\t Sets the aria labelledby on the nav element.\n\t /\n\t@Input() ariaLabelledby: string;\n\n\t@Input() contentBefore;\n\t@Input() contentAfter;\n\n\t/\n\t Gets the Unordered List element that holds the `Tab` headings from the view DOM.\n\t /\n\t@ViewChild(\"tabList\") headerContainer;\n\t/\n\t ContentChild of all the n-tabs\n\t /\n\t@ContentChildren(Tab) tabQuery: QueryList<Tab>;\n\t/\n\t set to tabQuery if tabInput is empty\n\t /\n\tpublic tabs: QueryList<Tab>;\n\t/\n\t The index of the first visible tab.\n\t /\n\tpublic firstVisibleTab = 0;\n\t/\n\t The DOM element containing the `Tab` headings displayed.\n\t /\n\t@ViewChildren(\"tabItem\") allTabHeaders: QueryList<ElementRef>;\n\t/\n\t Controls the manual focusing done by tabbing through headings.\n\t /\n\tpublic currentSelectedTab: number;\n\tpublic tabListVisible = false;\n\n\t// keyboard accessibility\n\t/\n\t Controls the keydown events used for tabbing through the headings.\n\t /\n\t@HostListener(\"keydown\", [\"$event\"])\n\tkeyboardInput(event) {\n\t\tlet tabsArray = Array.from<any>(this.tabs);\n\n\t\t// \"Right\" is an ie11 specific value\n\t\tif (event.key === \"Right\" \|\| event.key === \"ArrowRight\") {\n\t\t\tif (this.currentSelectedTab < this.allTabHeaders.length - 1) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus) {\n\t\t\t\t\tthis.selectTab(event.target, tabsArray[this.currentSelectedTab + 1], this.currentSelectedTab);\n\t\t\t\t}\n\t\t\t\tthis.allTabHeaders.toArray()[this.currentSelectedTab + 1].nativeElement.focus();\n\t\t\t} else {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus) {\n\t\t\t\t\tthis.selectTab(event.target, tabsArray[0], 0);\n\t\t\t\t}\n\t\t\t\tthis.allTabHeaders.first.nativeElement.focus();\n\t\t\t}\n\t\t}\n\n\t\t// \"Left\" is an ie11 specific value\n\t\tif (event.key === \"Left\" \|\| event.key === \"ArrowLeft\") {\n\t\t\tif (this.currentSelectedTab > 0) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus) {\n\t\t\t\t\tthis.selectTab(event.target, tabsArray[this.currentSelectedTab - 1], this.currentSelectedTab);\n\t\t\t\t}\n\t\t\t\tthis.allTabHeaders.toArray()[this.currentSelectedTab - 1].nativeElement.focus();\n\t\t\t} else {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tif (this.followFocus) {\n\t\t\t\t\tthis.selectTab(event.target, tabsArray[this.allTabHeaders.length - 1], this.allTabHeaders.length);\n\t\t\t\t}\n\t\t\t\tthis.allTabHeaders.toArray()[this.allTabHeaders.length - 1].nativeElement.focus();\n\t\t\t}\n\t\t}\n\n\t\tif (event.key === \"Home\") {\n\t\t\tevent.preventDefault();\n\t\t\tif (this.followFocus) {\n\t\t\t\tthis.selectTab(event.target, tabsArray[0], 0);\n\t\t\t}\n\t\t\tthis.allTabHeaders.toArray()[0].nativeElement.focus();\n\t\t}\n\n\t\tif (event.key === \"End\") {\n\t\t\tevent.preventDefault();\n\t\t\tif (this.followFocus) {\n\t\t\t\tthis.selectTab(event.target, tabsArray[this.allTabHeaders.length - 1], this.allTabHeaders.length);\n\t\t\t}\n\t\t\tthis.allTabHeaders.toArray()[this.allTabHeaders.length - 1].nativeElement.focus();\n\t\t}\n\n\t\t// `\"Spacebar\"` is IE11 specific value\n\t\tif ((event.key === \" \" \|\| event.key === \"Spacebar\") && !this.followFocus) {\n\t\t\tthis.selectTab(event.target, tabsArray[this.currentSelectedTab], this.currentSelectedTab);\n\t\t}\n\t}\n\n\t@HostListener(\"focusout\", [\"$event\"])\n\tfocusOut(event) {\n\t\tif (this.tabListVisible && event.relatedTarget === null) {\n\t\t\tthis.tabListVisible = false;\n\t\t}\n\t}\n\n\tngAfterContentInit() {\n\t\tif (!this.tabInput) {\n\t\t\tthis.tabs = this.tabQuery;\n\t\t} else {\n\t\t\tthis.tabs = this.tabInput;\n\t\t}\n\n\t\tthis.tabs.forEach(tab => tab.cacheActive = this.cacheActive);\n\t\tthis.tabs.changes.subscribe(() => {\n\t\t\tthis.setFirstTab();\n\t\t});\n\t\tthis.setFirstTab();\n\t}\n\n\t/\n\t Controls manually focusing tabs.\n\t /\n\tpublic onTabFocus(ref: HTMLElement, index: number) {\n\t\tthis.currentSelectedTab = index;\n\t\t// reset scroll left because we're already handling it\n\t\tthis.headerContainer.nativeElement.parentElement.scrollLeft = 0;\n\t}\n\n\tpublic getSelectedTab(): any {\n\t\tconst selected = this.tabs.find(tab => tab.active);\n\t\tif (selected) {\n\t\t\treturn selected;\n\t\t}\n\t\treturn {headingIsTemplate: false, heading: \"\"};\n\t}\n\n\tpublic showTabList() {\n\t\tthis.tabListVisible = true;\n\t}\n\n\t/\n\t Selects `Tab` 'tab' and moves it into view on the view DOM if it is not already.\n\t /\n\tpublic selectTab(ref: HTMLElement, tab: Tab, tabIndex: number) {\n\t\tif (tab.disabled) {\n\t\t\treturn;\n\t\t}\n\n\t\t// hide the tablist on mobile\n\t\tthis.tabListVisible = false;\n\t\tthis.currentSelectedTab = tabIndex;\n\t\tthis.tabs.forEach(_tab => _tab.active = false);\n\t\ttab.active = true;\n\t\ttab.doSelect();\n\t}\n\n\t/\n\t Determines which `Tab` is initially selected.\n\t */\n\tprotected setFirstTab() {\n\t\tsetTimeout(() => {\n\t\t\tlet firstTab = this.tabs.find(tab => tab.active);\n\t\t\tif (!firstTab && this.tabs.first) {\n\t\t\t\tfirstTab = this.tabs.first;\n\t\t\t\tfirstTab.active = true;\n\t\t\t}\n\t\t\tif (firstTab) {\n\t\t\t\tfirstTab.doSelect();\n\t\t\t}\n\t\t});\n\t}\n}\n"]}

package/tabs/tab-headers.component.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- [{"__symbolic":"module","version":4,"metadata":{"TabHeaders":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":22,"character":1},"arguments":[{"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<div class=\"bx--tabs-trigger\" tabindex=\"0\" (click)=\"showTabList()\">\n\t\t\t\t<a href=\"javascript:void(0)\" class=\"bx--tabs-trigger-text\" tabindex=\"-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\tngIf=\"getSelectedTab().headingIsTemplate\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"getSelectedTab().heading\">\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\tngFor=\"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(tabref, tab, i)\">\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(tabref, 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\tngIf=\"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 "}]}],"members":{"tabInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":99,"character":2},"arguments":["tabs"]}]}],"cacheActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~104~~,"character":2}}]}],"followFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~108~~,"character":2}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~112~~,"character":2}}]}],"contentBefore":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~114~~,"character":2}}]}],"contentAfter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":~~115~~,"character":2}}]}],"headerContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":~~120~~,"character":2},"arguments":["tabList"]}]}],"tabQuery":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":~~124~~,"character":2},"arguments":[{"__symbolic":"reference","module":"./tab.component","name":"Tab","line":~~124~~,"character":18}]}]}],"allTabHeaders":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":~~136~~,"character":2},"arguments":["tabItem"]}]}],"keyboardInput":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":~~147~~,"character":2},"arguments":["keydown",["$event"]]}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"onTabFocus":[{"__symbolic":"method"}],"getSelectedTab":[{"__symbolic":"method"}],"showTabList":[{"__symbolic":"method"}],"selectTab":[{"__symbolic":"method"}],"setFirstTab":[{"__symbolic":"method"}]}}}}]
1	+ [{"__symbolic":"module","version":4,"metadata":{"TabHeaders":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":22,"character":1},"arguments":[{"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 class=\"bx--tabs-trigger\" tabindex=\"0\" (click)=\"showTabList()\">\n\t\t\t\t<a href=\"javascript:void(0)\" class=\"bx--tabs-trigger-text\" tabindex=\"-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\tngIf=\"getSelectedTab().headingIsTemplate\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"getSelectedTab().heading\">\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\tngFor=\"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(tabref, tab, i)\">\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(tabref, 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\tngIf=\"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 "}]}],"members":{"tabInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":101,"character":2},"arguments":["tabs"]}]}],"cacheActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":106,"character":2}}]}],"followFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":110,"character":2}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":114,"character":2}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":118,"character":2}}]}],"ariaLabelledby":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":122,"character":2}}]}],"contentBefore":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":124,"character":2}}]}],"contentAfter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":125,"character":2}}]}],"headerContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":130,"character":2},"arguments":["tabList"]}]}],"tabQuery":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":134,"character":2},"arguments":[{"__symbolic":"reference","module":"./tab.component","name":"Tab","line":134,"character":18}]}]}],"allTabHeaders":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":146,"character":2},"arguments":["tabItem"]}]}],"keyboardInput":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":157,"character":2},"arguments":["keydown",["$event"]]}]}],"focusOut":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostListener","line":217,"character":2},"arguments":["focusout",["$event"]]}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"onTabFocus":[{"__symbolic":"method"}],"getSelectedTab":[{"__symbolic":"method"}],"showTabList":[{"__symbolic":"method"}],"selectTab":[{"__symbolic":"method"}],"setFirstTab":[{"__symbolic":"method"}]}}}}]

package/tabs/tab-headers.component.ngfactory.js CHANGED Viewed

@@ -45,14 +45,17 @@ function View_TabHeaders_5(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, nul
         ad = (pd_0 && ad);
     } return ad; }, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_TabHeaders_6)), i0.ɵdid(5, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_TabHeaders_7)), i0.ɵdid(7, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (_ck, _v) { var currVal_0 = "bx--tabs__nav-item"; var currVal_1 = _ck(_v, 2, 0, _v.context.$implicit.active, _v.context.$implicit.disabled); _ck(_v, 1, 0, currVal_0, currVal_1); var currVal_6 = !_v.context.$implicit.headingIsTemplate; _ck(_v, 5, 0, currVal_6); var currVal_7 = _v.context.$implicit.headingIsTemplate; _ck(_v, 7, 0, currVal_7); }, function (_ck, _v) { var currVal_2 = _v.context.$implicit.active; var currVal_3 = (_v.context.$implicit.active ? 0 : (0 - 1)); var currVal_4 = _v.context.$implicit.id; var currVal_5 = i0.ɵinlineInterpolate(1, "", _v.context.$implicit.id, "-header"); _ck(_v, 3, 0, currVal_2, currVal_3, currVal_4, currVal_5); }); }
 function View_TabHeaders_9(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 16777216, null, null, 1, null, null, null, null, null, null, null)), i0.ɵdid(1, 540672, null, 0, i1.NgTemplateOutlet, [i0.ViewContainerRef], { ngTemplateOutlet: [0, "ngTemplateOutlet"] }, null), (_l()(), i0.ɵand(0, null, null, 0))], function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.contentAfter; _ck(_v, 1, 0, currVal_0); }, null); }
-export function View_TabHeaders_0(_l) { return i0.ɵvid(0, [i0.ɵqud(402653184, 1, { headerContainer: 0 }), i0.ɵqud(671088640, 2, { allTabHeaders: 1 }), (_l()(), i0.ɵeld(2, 0, null, null, 21, "nav", [["class", "bx--tabs"], ["role", "navigation"]], null, null, null, null, null)), i0.ɵdid(3, 278528, null, 0, i1.NgClass, [i0.IterableDiffers, i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { klass: [0, "klass"], ngClass: [1, "ngClass"] }, null), i0.ɵpod(4, { "bx--skeleton": 0 }), (_l()(), i0.ɵeld(5, 0, null, null, 7, "div", [["class", "bx--tabs-trigger"], ["tabindex", "0"]], null, [[null, "click"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("click" === en)) {
+export function View_TabHeaders_0(_l) { return i0.ɵvid(0, [i0.ɵqud(402653184, 1, { headerContainer: 0 }), i0.ɵqud(671088640, 2, { allTabHeaders: 1 }), (_l()(), i0.ɵeld(2, 0, null, null, 21, "nav", [["class", "bx--tabs"], ["role", "navigation"]], [[1, "aria-label", 0], [1, "aria-labelledby", 0]], null, null, null, null)), i0.ɵdid(3, 278528, null, 0, i1.NgClass, [i0.IterableDiffers, i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { klass: [0, "klass"], ngClass: [1, "ngClass"] }, null), i0.ɵpod(4, { "bx--skeleton": 0 }), (_l()(), i0.ɵeld(5, 0, null, null, 7, "div", [["class", "bx--tabs-trigger"], ["tabindex", "0"]], null, [[null, "click"]], function (_v, en, $event) { var ad = true; var _co = _v.component; if (("click" === en)) {
         var pd_0 = (_co.showTabList() !== false);
         ad = (pd_0 && ad);
-    } return ad; }, null, null)), (_l()(), i0.ɵeld(6, 0, null, null, 4, "a", [["class", "bx--tabs-trigger-text"], ["href", "javascript:void(0)"], ["tabindex", "-1"]], null, null, null, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_TabHeaders_1)), i0.ɵdid(8, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_TabHeaders_2)), i0.ɵdid(10, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵeld(11, 0, null, null, 1, ":svg:svg", [["height", "5"], ["viewBox", "0 0 10 5"], ["width", "10"]], null, null, null, null, null)), (_l()(), i0.ɵeld(12, 0, null, null, 0, ":svg:path", [["d", "M0 0l5 4.998L10 0z"], ["fill-rule", "evenodd"]], null, null, null, null, null)), (_l()(), i0.ɵeld(13, 0, [[1, 0], ["tabList", 1]], null, 10, "ul", [["class", "bx--tabs__nav"], ["role", "tablist"]], null, null, null, null, null)), i0.ɵdid(14, 278528, null, 0, i1.NgClass, [i0.IterableDiffers, i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { klass: [0, "klass"], ngClass: [1, "ngClass"] }, null), i0.ɵpod(15, { "bx--tabs__nav--hidden": 0 }), (_l()(), i0.ɵeld(16, 0, null, null, 2, "li", [["role", "presentation"]], null, null, null, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_TabHeaders_4)), i0.ɵdid(18, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_TabHeaders_5)), i0.ɵdid(20, 278528, null, 0, i1.NgForOf, [i0.ViewContainerRef, i0.TemplateRef, i0.IterableDiffers], { ngForOf: [0, "ngForOf"] }, null), (_l()(), i0.ɵeld(21, 0, null, null, 2, "li", [["role", "presentation"]], null, null, null, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_TabHeaders_9)), i0.ɵdid(23, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (_ck, _v) { var _co = _v.component; var currVal_0 = "bx--tabs"; var currVal_1 = _ck(_v, 4, 0, _co.skeleton); _ck(_v, 3, 0, currVal_0, currVal_1); var currVal_2 = !_co.getSelectedTab().headingIsTemplate; _ck(_v, 8, 0, currVal_2); var currVal_3 = _co.getSelectedTab().headingIsTemplate; _ck(_v, 10, 0, currVal_3); var currVal_4 = "bx--tabs__nav"; var currVal_5 = _ck(_v, 15, 0, !_co.tabListVisible); _ck(_v, 14, 0, currVal_4, currVal_5); var currVal_6 = _co.contentBefore; _ck(_v, 18, 0, currVal_6); var currVal_7 = _co.tabs; _ck(_v, 20, 0, currVal_7); var currVal_8 = _co.contentAfter; _ck(_v, 23, 0, currVal_8); }, null); }
-export function View_TabHeaders_Host_0(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 2, "ibm-tab-headers", [], null, [[null, "keydown"]], function (_v, en, $event) { var ad = true; if (("keydown" === en)) {
+    } return ad; }, null, null)), (_l()(), i0.ɵeld(6, 0, null, null, 4, "a", [["class", "bx--tabs-trigger-text"], ["href", "javascript:void(0)"], ["tabindex", "-1"]], null, null, null, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_TabHeaders_1)), i0.ɵdid(8, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_TabHeaders_2)), i0.ɵdid(10, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵeld(11, 0, null, null, 1, ":svg:svg", [["height", "5"], ["viewBox", "0 0 10 5"], ["width", "10"]], null, null, null, null, null)), (_l()(), i0.ɵeld(12, 0, null, null, 0, ":svg:path", [["d", "M0 0l5 4.998L10 0z"], ["fill-rule", "evenodd"]], null, null, null, null, null)), (_l()(), i0.ɵeld(13, 0, [[1, 0], ["tabList", 1]], null, 10, "ul", [["class", "bx--tabs__nav"], ["role", "tablist"]], null, null, null, null, null)), i0.ɵdid(14, 278528, null, 0, i1.NgClass, [i0.IterableDiffers, i0.KeyValueDiffers, i0.ElementRef, i0.Renderer2], { klass: [0, "klass"], ngClass: [1, "ngClass"] }, null), i0.ɵpod(15, { "bx--tabs__nav--hidden": 0 }), (_l()(), i0.ɵeld(16, 0, null, null, 2, "li", [["role", "presentation"]], null, null, null, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_TabHeaders_4)), i0.ɵdid(18, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_TabHeaders_5)), i0.ɵdid(20, 278528, null, 0, i1.NgForOf, [i0.ViewContainerRef, i0.TemplateRef, i0.IterableDiffers], { ngForOf: [0, "ngForOf"] }, null), (_l()(), i0.ɵeld(21, 0, null, null, 2, "li", [["role", "presentation"]], null, null, null, null, null)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_TabHeaders_9)), i0.ɵdid(23, 16384, null, 0, i1.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (_ck, _v) { var _co = _v.component; var currVal_2 = "bx--tabs"; var currVal_3 = _ck(_v, 4, 0, _co.skeleton); _ck(_v, 3, 0, currVal_2, currVal_3); var currVal_4 = !_co.getSelectedTab().headingIsTemplate; _ck(_v, 8, 0, currVal_4); var currVal_5 = _co.getSelectedTab().headingIsTemplate; _ck(_v, 10, 0, currVal_5); var currVal_6 = "bx--tabs__nav"; var currVal_7 = _ck(_v, 15, 0, !_co.tabListVisible); _ck(_v, 14, 0, currVal_6, currVal_7); var currVal_8 = _co.contentBefore; _ck(_v, 18, 0, currVal_8); var currVal_9 = _co.tabs; _ck(_v, 20, 0, currVal_9); var currVal_10 = _co.contentAfter; _ck(_v, 23, 0, currVal_10); }, function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.ariaLabel; var currVal_1 = _co.ariaLabelledby; _ck(_v, 2, 0, currVal_0, currVal_1); }); }
+export function View_TabHeaders_Host_0(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 2, "ibm-tab-headers", [], null, [[null, "keydown"], [null, "focusout"]], function (_v, en, $event) { var ad = true; if (("keydown" === en)) {
         var pd_0 = (i0.ɵnov(_v, 1).keyboardInput($event) !== false);
         ad = (pd_0 && ad);
+    } if (("focusout" === en)) {
+        var pd_1 = (i0.ɵnov(_v, 1).focusOut($event) !== false);
+        ad = (pd_1 && ad);
     } return ad; }, View_TabHeaders_0, RenderType_TabHeaders)), i0.ɵdid(1, 1097728, null, 1, i2.TabHeaders, [], null, null), i0.ɵqud(603979776, 1, { tabQuery: 1 })], null, null); }
-var TabHeadersNgFactory = i0.ɵccf("ibm-tab-headers", i2.TabHeaders, View_TabHeaders_Host_0, { tabInput: "tabs", cacheActive: "cacheActive", followFocus: "followFocus", skeleton: "skeleton", contentBefore: "contentBefore", contentAfter: "contentAfter" }, {}, []);
+var TabHeadersNgFactory = i0.ɵccf("ibm-tab-headers", i2.TabHeaders, View_TabHeaders_Host_0, { tabInput: "tabs", cacheActive: "cacheActive", followFocus: "followFocus", skeleton: "skeleton", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby", contentBefore: "contentBefore", contentAfter: "contentAfter" }, {}, []);
 export { TabHeadersNgFactory as TabHeadersNgFactory };
 //# sourceMappingURL=tab-headers.component.ngfactory.js.map

package/tabs/tab-headers.component.ngfactory.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab-headers.component.ngfactory.js","sourceRoot":"","sources":["../src/tabs/tab-headers.component.ngfactory.ts","../src/tabs/tab-headers.component.ts.TabHeaders.html"],"names":[],"mappings":";;;;;;;;;;;;~~qDCSK~~,6EAA0D,KAAA,gKAE1D;;qDACA,+LAE+C,sFAA9C,mBAA6C,2BAF9C,YAE+C,EAA9C,SAA6C;qDAe9C,mNAAuE,sFAAnC,mBAAkC,gBAAtE,YAAuE,EAAnC,SAAkC;qDAsBrE,6EAA6C,KAAA,+IAE7C;;qDACA,wPAGsD,GAArD,yHAAoD,oCADpD,kBAAgC,mCAFjC,YAGsD,EAArD,SAAoD,EADpD,SAAgC;qDAzBnC,wLAQqC,YAApC;;wBAAmC;MARpC,iMAQqC,GANpC,iFAGE,MAIF,0UAUY,YALX;;wBAA+B;MALhC,wBAUY,KACX,0KAA6C,IAG7C,0KAGsD,yBApBvD,oCAA0B,EAJ1B,6DAGE,8BALH,YAQqC,EAFpC,SAA0B,EAJ1B,SAGE,GAea,mBAA8B,sCAA5C,YAA6C,EAA/B,SAA8B,GAI3C,kBAA6B,sCAD9B,YAGsD,EAFrD,SAA6B,2BAb9B,kBAAiC,2BACjC,yDAAmC,IACnC,kBAA6B,uBAG7B,+EAAsB,GAPvB,YAUY,EARX,SAAiC,EACjC,SAAmC,EACnC,SAA6B,EAG7B,SAAsB;qDAevB,mNAAqE,sFAAlC,mBAAiC,eAApE,YAAqE,EAAlC,SAAiC;~~wJA7DvE~~,~~mSAKmB~~,~~GAHlB~~,8BAEE,~~MAEF~~,gLAAmE,YAAxB;;wBAAuB;MAAlE,wBAAmE,KAClE,gKAAyE,KACxE,0KAA0D,IAG1D,2KAE+C,IAGhD,2IAA8C,KAC7C,wIAAiD,KAGnD,0TAMgB,GAJf,wCAEE,MAGF,oGAAwB,KACvB,2KAAuE,IAExE,yMAQqC,IAsBrC,oGAAwB,KACvB,2KAAqE,~~iDA5DvE~~,0BAAgB,EAChB,iCAEE,YAJH,~~YAKmB~~,~~EAJlB~~,SAAgB,EAChB,SAEE,~~GAIc~~,oBAA2C,qCAAzD,YAA0D,EAA5C,SAA2C,GAIxD,mBAA0C,qCAD3C,aAE+C,EAD9C,SAA0C,GAa5C,+BAAqB,EAHrB,mCAEE,kBAJH,aAMgB,EADf,SAAqB,EAHrB,SAEE,GAIa,mBAAqB,gBAAnC,aAAuE,EAAzD,SAAqB,GAGnC,mBAAwC,OADzC,aAQqC,EAPpC,SAAwC,GA8B1B,~~mBAAoB~~,eAAlC,aAAqE,EAAvD,~~SAAoB~~","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n","\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<div class=\"bx--tabs-trigger\" tabindex=\"0\" (click)=\"showTabList()\">\n\t\t\t\t<a href=\"javascript:void(0)\" class=\"bx--tabs-trigger-text\" tabindex=\"-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\tngIf=\"getSelectedTab().headingIsTemplate\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"getSelectedTab().heading\">\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\tngFor=\"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(tabref, tab, i)\">\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(tabref, 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\tngIf=\"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 "]}
1	+ {"version":3,"file":"tab-headers.component.ngfactory.js","sourceRoot":"","sources":["../src/tabs/tab-headers.component.ngfactory.ts","../src/tabs/tab-headers.component.ts.TabHeaders.html"],"names":[],"mappings":";;;;;;;;;;;;qDCWK,6EAA0D,KAAA,gKAE1D;;qDACA,+LAE+C,sFAA9C,mBAA6C,2BAF9C,YAE+C,EAA9C,SAA6C;qDAe9C,mNAAuE,sFAAnC,mBAAkC,gBAAtE,YAAuE,EAAnC,SAAkC;qDAsBrE,6EAA6C,KAAA,+IAE7C;;qDACA,wPAGsD,GAArD,yHAAoD,oCADpD,kBAAgC,mCAFjC,YAGsD,EAArD,SAAoD,EADpD,SAAgC;qDAzBnC,wLAQqC,YAApC;;wBAAmC;MARpC,iMAQqC,GANpC,iFAGE,MAIF,0UAUY,YALX;;wBAA+B;MALhC,wBAUY,KACX,0KAA6C,IAG7C,0KAGsD,yBApBvD,oCAA0B,EAJ1B,6DAGE,8BALH,YAQqC,EAFpC,SAA0B,EAJ1B,SAGE,GAea,mBAA8B,sCAA5C,YAA6C,EAA/B,SAA8B,GAI3C,kBAA6B,sCAD9B,YAGsD,EAFrD,SAA6B,2BAb9B,kBAAiC,2BACjC,yDAAmC,IACnC,kBAA6B,uBAG7B,+EAAsB,GAPvB,YAUY,EARX,SAAiC,EACjC,SAAmC,EACnC,SAA6B,EAG7B,SAAsB;qDAevB,mNAAqE,sFAAlC,mBAAiC,eAApE,YAAqE,EAAlC,SAAiC;wJA/DvE,gVAOyC,GALxC,8BAEE,MAIF,gLAAmE,YAAxB;;wBAAuB;MAAlE,wBAAmE,KAClE,gKAAyE,KACxE,0KAA0D,IAG1D,2KAE+C,IAGhD,2IAA8C,KAC7C,wIAAiD,KAGnD,0TAMgB,GAJf,wCAEE,MAGF,oGAAwB,KACvB,2KAAuE,IAExE,yMAQqC,IAsBrC,oGAAwB,KACvB,2KAAqE,iDA9DvE,0BAAgB,EAChB,iCAEE,YAJH,YAOyC,EANxC,SAAgB,EAChB,SAEE,GAMc,oBAA2C,qCAAzD,YAA0D,EAA5C,SAA2C,GAIxD,mBAA0C,qCAD3C,aAE+C,EAD9C,SAA0C,GAa5C,+BAAqB,EAHrB,mCAEE,kBAJH,aAMgB,EADf,SAAqB,EAHrB,SAEE,GAIa,mBAAqB,gBAAnC,aAAuE,EAAzD,SAAqB,GAGnC,mBAAwC,OADzC,aAQqC,EAPpC,SAAwC,GA8B1B,oBAAoB,eAAlC,aAAqE,EAAvD,UAAoB,mDAzDpC,mBAA6B,YAC7B,mBAAuC,iBAPxC,YAOyC,EADxC,SAA6B,EAC7B,SAAuC","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n","\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 class=\"bx--tabs-trigger\" tabindex=\"0\" (click)=\"showTabList()\">\n\t\t\t\t<a href=\"javascript:void(0)\" class=\"bx--tabs-trigger-text\" tabindex=\"-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\tngIf=\"getSelectedTab().headingIsTemplate\"\n\t\t\t\t\t\t[ngTemplateOutlet]=\"getSelectedTab().heading\">\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\tngFor=\"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(tabref, tab, i)\">\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(tabref, 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\tngIf=\"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 "]}

package/tabs/tab-headers.component.ngsummary.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"moduleName":null,"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"class","members":{"tabInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]},"arguments":["tabs"]}]}],"cacheActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"followFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"contentBefore":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"contentAfter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"headerContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":2,"members":[]},"arguments":["tabList"]}]}],"tabQuery":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]},"arguments":[{"__symbol":4,"members":[]}]}]}],"allTabHeaders":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":5,"members":[]},"arguments":["tabItem"]}]}],"keyboardInput":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbol":6,"members":[]},"arguments":["keydown",["$event"]]}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"onTabFocus":[{"__symbolic":"method"}],"getSelectedTab":[{"__symbolic":"method"}],"showTabList":[{"__symbolic":"method"}],"selectTab":[{"__symbolic":"method"}],"setFirstTab":[{"__symbolic":"method"}]}},"type":{"summaryKind":1,"type":{"reference":{"__symbol":0,"members":[]},"diDeps":[],"lifecycleHooks":[4]},"isComponent":true,"selector":"ibm-tab-headers","exportAs":null,"inputs":{"tabInput":"tabs","cacheActive":"cacheActive","followFocus":"followFocus","skeleton":"skeleton","contentBefore":"contentBefore","contentAfter":"contentAfter"},"outputs":{},"hostListeners":{"keydown":"keyboardInput($event)"},"hostProperties":{},"hostAttributes":{},"providers":[],"viewProviders":[],"queries":[{"selectors":[{"identifier":{"reference":{"__symbol":4,"members":[]}}}],"first":false,"descendants":false,"propertyName":"tabQuery","read":null}],"guards":{},"viewQueries":[{"selectors":[{"value":"tabList"}],"first":true,"descendants":true,"propertyName":"headerContainer","read":null},{"selectors":[{"value":"tabItem"}],"first":false,"descendants":true,"propertyName":"allTabHeaders","read":null}],"entryComponents":[],"changeDetection":1,"template":{"ngContentSelectors":[],"encapsulation":2},"componentViewType":{"__symbol":7,"members":[]},"rendererType":{"__symbol":8,"members":[]},"componentFactory":{"__symbol":9,"members":[]}}}],"symbols":[{"__symbol":0,"name":"TabHeaders","filePath":"./tab-headers.component"},{"__symbol":1,"name":"Input","filePath":"@angular/core"},{"__symbol":2,"name":"ViewChild","filePath":"@angular/core"},{"__symbol":3,"name":"ContentChildren","filePath":"@angular/core"},{"__symbol":4,"name":"Tab","filePath":"./tab.component"},{"__symbol":5,"name":"ViewChildren","filePath":"@angular/core"},{"__symbol":6,"name":"HostListener","filePath":"@angular/core"},{"__symbol":7,"name":"View_TabHeaders_0","filePath":"./tab-headers.component.ngfactory"},{"__symbol":8,"name":"RenderType_TabHeaders","filePath":"./tab-headers.component.ngfactory"},{"__symbol":9,"name":"TabHeadersNgFactory","filePath":"./tab-headers.component.ngfactory"}]}
1	+ {"moduleName":null,"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"class","members":{"tabInput":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]},"arguments":["tabs"]}]}],"cacheActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"followFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"ariaLabelledby":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"contentBefore":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"contentAfter":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"headerContainer":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":2,"members":[]},"arguments":["tabList"]}]}],"tabQuery":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":3,"members":[]},"arguments":[{"__symbol":4,"members":[]}]}]}],"allTabHeaders":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":5,"members":[]},"arguments":["tabItem"]}]}],"keyboardInput":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbol":6,"members":[]},"arguments":["keydown",["$event"]]}]}],"focusOut":[{"__symbolic":"method","decorators":[{"__symbolic":"call","expression":{"__symbol":6,"members":[]},"arguments":["focusout",["$event"]]}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"onTabFocus":[{"__symbolic":"method"}],"getSelectedTab":[{"__symbolic":"method"}],"showTabList":[{"__symbolic":"method"}],"selectTab":[{"__symbolic":"method"}],"setFirstTab":[{"__symbolic":"method"}]}},"type":{"summaryKind":1,"type":{"reference":{"__symbol":0,"members":[]},"diDeps":[],"lifecycleHooks":[4]},"isComponent":true,"selector":"ibm-tab-headers","exportAs":null,"inputs":{"tabInput":"tabs","cacheActive":"cacheActive","followFocus":"followFocus","skeleton":"skeleton","ariaLabel":"ariaLabel","ariaLabelledby":"ariaLabelledby","contentBefore":"contentBefore","contentAfter":"contentAfter"},"outputs":{},"hostListeners":{"keydown":"keyboardInput($event)","focusout":"focusOut($event)"},"hostProperties":{},"hostAttributes":{},"providers":[],"viewProviders":[],"queries":[{"selectors":[{"identifier":{"reference":{"__symbol":4,"members":[]}}}],"first":false,"descendants":false,"propertyName":"tabQuery","read":null}],"guards":{},"viewQueries":[{"selectors":[{"value":"tabList"}],"first":true,"descendants":true,"propertyName":"headerContainer","read":null},{"selectors":[{"value":"tabItem"}],"first":false,"descendants":true,"propertyName":"allTabHeaders","read":null}],"entryComponents":[],"changeDetection":1,"template":{"ngContentSelectors":[],"encapsulation":2},"componentViewType":{"__symbol":7,"members":[]},"rendererType":{"__symbol":8,"members":[]},"componentFactory":{"__symbol":9,"members":[]}}}],"symbols":[{"__symbol":0,"name":"TabHeaders","filePath":"./tab-headers.component"},{"__symbol":1,"name":"Input","filePath":"@angular/core"},{"__symbol":2,"name":"ViewChild","filePath":"@angular/core"},{"__symbol":3,"name":"ContentChildren","filePath":"@angular/core"},{"__symbol":4,"name":"Tab","filePath":"./tab.component"},{"__symbol":5,"name":"ViewChildren","filePath":"@angular/core"},{"__symbol":6,"name":"HostListener","filePath":"@angular/core"},{"__symbol":7,"name":"View_TabHeaders_0","filePath":"./tab-headers.component.ngfactory"},{"__symbol":8,"name":"RenderType_TabHeaders","filePath":"./tab-headers.component.ngfactory"},{"__symbol":9,"name":"TabHeadersNgFactory","filePath":"./tab-headers.component.ngfactory"}]}

package/tabs/tabs.component.d.ts CHANGED Viewed

@@ -71,6 +71,14 @@ export declare class Tabs implements AfterContentInit {
      * Set to `true` to have the tabIndex of the all tabpanels be -1.
      */
     isNavigation: boolean;
+    /**
+     * Sets the aria label on the `TabHeader`s nav element.
+     */
+    ariaLabel: string;
+    /**
+     * Sets the aria labelledby on the `TabHeader`s nav element.
+     */
+    ariaLabelledby: string;
     /**
      * Maintains a `QueryList` of the `Tab` elements and updates if `Tab`s are added or removed.
      */

package/tabs/tabs.component.js CHANGED Viewed

@@ -96,7 +96,7 @@ var Tabs = /** @class */ (function () {
     Tabs.decorators = [
         { type: Component, args: [{
                     selector: "ibm-tabs",
-                    template: "\n\t\t\t<ibm-tab-headers\n\t\t\t\t*ngIf=\"hasTabHeaders() && position === 'top'\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[tabs]=\"tabs\"\n\t\t\t\t[followFocus]=\"followFocus\"\n\t\t\t\t[cacheActive]=\"cacheActive\"\n\t\t\t\t[contentBefore]=\"before\"\n\t\t\t\t[contentAfter]=\"after\">\n\t\t\t</ibm-tab-headers>\n\t\t\t<ng-content></ng-content>\n\t\t\t<ng-template #before>\n\t\t\t\t<ng-content select=\"[before]\"></ng-content>\n\t\t\t</ng-template>\n\t\t\t<ng-template #after>\n\t\t\t\t<ng-content select=\"[after]\"></ng-content>\n\t\t\t</ng-template>\n\t\t\t<ibm-tab-headers\n\t\t\t\t*ngIf=\"hasTabHeaders() && position === 'bottom'\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[tabs]=\"tabs\"\n\t\t\t\t[cacheActive]=\"cacheActive\">\n\t\t\t</ibm-tab-headers>\n\t "
+                    template: "\n\t\t\t<ibm-tab-headers\n\t\t\t\t*ngIf=\"hasTabHeaders() && position === 'top'\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[tabs]=\"tabs\"\n\t\t\t\t[followFocus]=\"followFocus\"\n\t\t\t\t[cacheActive]=\"cacheActive\"\n\t\t\t\t[contentBefore]=\"before\"\n\t\t\t\t[contentAfter]=\"after\"\n\t\t\t\t[ariaLabel]=\"ariaLabel\"\n\t\t\t\t[ariaLabelledby]=\"ariaLabelledby\">\n\t\t\t</ibm-tab-headers>\n\t\t\t<ng-content></ng-content>\n\t\t\t<ng-template #before>\n\t\t\t\t<ng-content select=\"[before]\"></ng-content>\n\t\t\t</ng-template>\n\t\t\t<ng-template #after>\n\t\t\t\t<ng-content select=\"[after]\"></ng-content>\n\t\t\t</ng-template>\n\t\t\t<ibm-tab-headers\n\t\t\t\t*ngIf=\"hasTabHeaders() && position === 'bottom'\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[tabs]=\"tabs\"\n\t\t\t\t[cacheActive]=\"cacheActive\">\n\t\t\t</ibm-tab-headers>\n\t "
                 },] },
     ];
     Tabs.propDecorators = {
@@ -105,6 +105,8 @@ var Tabs = /** @class */ (function () {
         followFocus: [{ type: Input }],
         skeleton: [{ type: Input }],
         isNavigation: [{ type: Input }],
+        ariaLabel: [{ type: Input }],
+        ariaLabelledby: [{ type: Input }],
         tabs: [{ type: ContentChildren, args: [Tab, { descendants: false },] }],
         tabHeaders: [{ type: ContentChild, args: [TabHeaders,] }]
     };

package/tabs/tabs.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.component.js","sourceRoot":"","sources":["../src/tabs/tabs.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,KAAK,EACL,eAAe,EACf,SAAS,EAET,YAAY,EAEZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH;IAAA;~~QA4BC~~;;;WAGG;QACM,aAAQ,GAAqB,KAAK,CAAC;QAC5C;;WAEG;QACM,gBAAW,GAAG,KAAK,CAAC;QAC7B;;WAEG;QACM,gBAAW,GAAG,IAAI,CAAC;QAC5B;;WAEG;QACM,aAAQ,GAAG,KAAK,CAAC;QAC1B;;WAEG;QACM,iBAAY,GAAG,KAAK,CAAC;~~IA+B~~/B,CAAC;IApBA;;;OAGG;IACH,iCAAkB,GAAlB;QAAA,iBAQC;QAPA,IAAI,IAAI,CAAC,UAAU,EAAE;YACpB,IAAI,CAAC,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;SAC/C;QAED,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAA,GAAG;YACpB,GAAG,CAAC,QAAQ,GAAG,KAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,4BAAa,GAAb;QACC,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;IAC7B,CAAC;;~~gBA9ED~~,SAAS,SAAC;oBACV,QAAQ,EAAE,UAAU;oBACpB,QAAQ,EAAE,~~owBAuBR~~;iBACF;;;2BAMC,KAAK;8BAIL,KAAK;8BAIL,KAAK;2BAIL,KAAK;+BAIL,KAAK;uBAKL,eAAe,SAAC,GAAG,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE;6BAI3C,YAAY,SAAC,UAAU;;IAsBzB,WAAC;CAAA,~~AA/ED~~,~~IA+EC~~;~~SApDY~~,IAAI","sourcesContent":["import {\n\tComponent,\n\tInput,\n\tContentChildren,\n\tQueryList,\n\tAfterContentInit,\n\tContentChild,\n\tQuery\n} from \"@angular/core\";\nimport { Tab } from \"./tab.component\";\nimport { TabHeaders } from \"./tab-headers.component\";\n\n\n/*\n Build out your application's tabs using this component.\n * This is the parent of the `Tab` and `TabHeader` components.\n \n [See demo](../../?path=/story/tabs--basic)\n \n `Tabs` expects a set of `n-tab` elements\n \n ```html\n * <ibm-tabs>\n * \t<ibm-tab heading='tab1'>\n * \t\ttab 1 content\n * \t</ibm-tab>\n * \t<ibm-tab heading='tab1'>\n * \t\ttab 2 content\n * \t</ibm-tab>\n * \t<!-- ... -->\n * \t<ibm-tab heading='tab1'>\n * \t\ttab n content\n * \t</ibm-tab>\n * </ibm-tabs>\n * ```\n \n <example-url>../../iframe.html?id=tabs--basic</example-url>\n \n @export\n * @class Tabs\n * @implements {AfterContentInit}\n /\n@Component({\n\tselector: \"ibm-tabs\",\n\ttemplate: `\n\t\t\t<ibm-tab-headers\n\t\t\t\tngIf=\"hasTabHeaders() && position === 'top'\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[tabs]=\"tabs\"\n\t\t\t\t[followFocus]=\"followFocus\"\n\t\t\t\t[cacheActive]=\"cacheActive\"\n\t\t\t\t[contentBefore]=\"before\"\n\t\t\t\t[contentAfter]=\"after\">\n\t\t\t</ibm-tab-headers>\n\t\t\t<ng-content></ng-content>\n\t\t\t<ng-template #before>\n\t\t\t\t<ng-content select=\"[before]\"></ng-content>\n\t\t\t</ng-template>\n\t\t\t<ng-template #after>\n\t\t\t\t<ng-content select=\"[after]\"></ng-content>\n\t\t\t</ng-template>\n\t\t\t<ibm-tab-headers\n\t\t\t\tngIf=\"hasTabHeaders() && position === 'bottom'\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[tabs]=\"tabs\"\n\t\t\t\t[cacheActive]=\"cacheActive\">\n\t\t\t</ibm-tab-headers>\n\t `\n})\nexport class Tabs implements AfterContentInit {\n\t/\n\t Takes either the string value 'top' or 'bottom' to place TabHeader\n\t * relative to the `TabPanel`s.\n\t /\n\t@Input() position: \"top\" \| \"bottom\" = \"top\";\n\t/\n\t Set to 'true' to have `Tab` items cached and not reloaded on tab switching.\n\t /\n\t@Input() cacheActive = false;\n\t/\n\t Set to 'true' to have tabs automatically activated and have their content displayed when they receive focus.\n\t /\n\t@Input() followFocus = true;\n\t/\n\t Set to `true` to put tabs in a loading state.\n\t /\n\t@Input() skeleton = false;\n\t/\n\t Set to `true` to have the tabIndex of the all tabpanels be -1.\n\t /\n\t@Input() isNavigation = false;\n\n\t/\n\t Maintains a `QueryList` of the `Tab` elements and updates if `Tab`s are added or removed.\n\t /\n\t@ContentChildren(Tab, { descendants: false }) tabs: QueryList<Tab>;\n\t/\n\t Content child of the projected header component\n\t /\n\t@ContentChild(TabHeaders) tabHeaders;\n\n\t/\n\t After content is initialized update `Tab`s to cache (if turned on) and set the initial\n\t * selected Tab item.\n\t /\n\tngAfterContentInit() {\n\t\tif (this.tabHeaders) {\n\t\t\tthis.tabHeaders.cacheActive = this.cacheActive;\n\t\t}\n\n\t\tthis.tabs.forEach(tab => {\n\t\t\ttab.tabIndex = this.isNavigation ? -1 : 0;\n\t\t});\n\t}\n\n\t/\n\t true if the n-tab's are passed directly to the component as children\n\t */\n\thasTabHeaders() {\n\t\treturn this.tabs.length > 0;\n\t}\n}\n"]}
1	+ {"version":3,"file":"tabs.component.js","sourceRoot":"","sources":["../src/tabs/tabs.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,SAAS,EACT,KAAK,EACL,eAAe,EACf,SAAS,EAET,YAAY,EAEZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAGrD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH;IAAA;QA8BC;;;WAGG;QACM,aAAQ,GAAqB,KAAK,CAAC;QAC5C;;WAEG;QACM,gBAAW,GAAG,KAAK,CAAC;QAC7B;;WAEG;QACM,gBAAW,GAAG,IAAI,CAAC;QAC5B;;WAEG;QACM,aAAQ,GAAG,KAAK,CAAC;QAC1B;;WAEG;QACM,iBAAY,GAAG,KAAK,CAAC;IAuC/B,CAAC;IApBA;;;OAGG;IACH,iCAAkB,GAAlB;QAAA,iBAQC;QAPA,IAAI,IAAI,CAAC,UAAU,EAAE;YACpB,IAAI,CAAC,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;SAC/C;QAED,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,UAAA,GAAG;YACpB,GAAG,CAAC,QAAQ,GAAG,KAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC3C,CAAC,CAAC,CAAC;IACJ,CAAC;IAED;;OAEG;IACH,4BAAa,GAAb;QACC,OAAO,IAAI,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC;IAC7B,CAAC;;gBAxFD,SAAS,SAAC;oBACV,QAAQ,EAAE,UAAU;oBACpB,QAAQ,EAAE,o1BAyBR;iBACF;;;2BAMC,KAAK;8BAIL,KAAK;8BAIL,KAAK;2BAIL,KAAK;+BAIL,KAAK;4BAIL,KAAK;iCAIL,KAAK;uBAKL,eAAe,SAAC,GAAG,EAAE,EAAE,WAAW,EAAE,KAAK,EAAE;6BAI3C,YAAY,SAAC,UAAU;;IAsBzB,WAAC;CAAA,AAzFD,IAyFC;SA5DY,IAAI","sourcesContent":["import {\n\tComponent,\n\tInput,\n\tContentChildren,\n\tQueryList,\n\tAfterContentInit,\n\tContentChild,\n\tQuery\n} from \"@angular/core\";\nimport { Tab } from \"./tab.component\";\nimport { TabHeaders } from \"./tab-headers.component\";\n\n\n/*\n Build out your application's tabs using this component.\n * This is the parent of the `Tab` and `TabHeader` components.\n \n [See demo](../../?path=/story/tabs--basic)\n \n `Tabs` expects a set of `n-tab` elements\n \n ```html\n * <ibm-tabs>\n * \t<ibm-tab heading='tab1'>\n * \t\ttab 1 content\n * \t</ibm-tab>\n * \t<ibm-tab heading='tab1'>\n * \t\ttab 2 content\n * \t</ibm-tab>\n * \t<!-- ... -->\n * \t<ibm-tab heading='tab1'>\n * \t\ttab n content\n * \t</ibm-tab>\n * </ibm-tabs>\n * ```\n \n <example-url>../../iframe.html?id=tabs--basic</example-url>\n \n @export\n * @class Tabs\n * @implements {AfterContentInit}\n /\n@Component({\n\tselector: \"ibm-tabs\",\n\ttemplate: `\n\t\t\t<ibm-tab-headers\n\t\t\t\tngIf=\"hasTabHeaders() && position === 'top'\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[tabs]=\"tabs\"\n\t\t\t\t[followFocus]=\"followFocus\"\n\t\t\t\t[cacheActive]=\"cacheActive\"\n\t\t\t\t[contentBefore]=\"before\"\n\t\t\t\t[contentAfter]=\"after\"\n\t\t\t\t[ariaLabel]=\"ariaLabel\"\n\t\t\t\t[ariaLabelledby]=\"ariaLabelledby\">\n\t\t\t</ibm-tab-headers>\n\t\t\t<ng-content></ng-content>\n\t\t\t<ng-template #before>\n\t\t\t\t<ng-content select=\"[before]\"></ng-content>\n\t\t\t</ng-template>\n\t\t\t<ng-template #after>\n\t\t\t\t<ng-content select=\"[after]\"></ng-content>\n\t\t\t</ng-template>\n\t\t\t<ibm-tab-headers\n\t\t\t\tngIf=\"hasTabHeaders() && position === 'bottom'\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[tabs]=\"tabs\"\n\t\t\t\t[cacheActive]=\"cacheActive\">\n\t\t\t</ibm-tab-headers>\n\t `\n})\nexport class Tabs implements AfterContentInit {\n\t/\n\t Takes either the string value 'top' or 'bottom' to place TabHeader\n\t * relative to the `TabPanel`s.\n\t /\n\t@Input() position: \"top\" \| \"bottom\" = \"top\";\n\t/\n\t Set to 'true' to have `Tab` items cached and not reloaded on tab switching.\n\t /\n\t@Input() cacheActive = false;\n\t/\n\t Set to 'true' to have tabs automatically activated and have their content displayed when they receive focus.\n\t /\n\t@Input() followFocus = true;\n\t/\n\t Set to `true` to put tabs in a loading state.\n\t /\n\t@Input() skeleton = false;\n\t/\n\t Set to `true` to have the tabIndex of the all tabpanels be -1.\n\t /\n\t@Input() isNavigation = false;\n\t/\n\t Sets the aria label on the `TabHeader`s nav element.\n\t /\n\t@Input() ariaLabel: string;\n\t/\n\t Sets the aria labelledby on the `TabHeader`s nav element.\n\t /\n\t@Input() ariaLabelledby: string;\n\n\t/\n\t Maintains a `QueryList` of the `Tab` elements and updates if `Tab`s are added or removed.\n\t /\n\t@ContentChildren(Tab, { descendants: false }) tabs: QueryList<Tab>;\n\t/\n\t Content child of the projected header component\n\t /\n\t@ContentChild(TabHeaders) tabHeaders;\n\n\t/\n\t After content is initialized update `Tab`s to cache (if turned on) and set the initial\n\t * selected Tab item.\n\t /\n\tngAfterContentInit() {\n\t\tif (this.tabHeaders) {\n\t\t\tthis.tabHeaders.cacheActive = this.cacheActive;\n\t\t}\n\n\t\tthis.tabs.forEach(tab => {\n\t\t\ttab.tabIndex = this.isNavigation ? -1 : 0;\n\t\t});\n\t}\n\n\t/\n\t true if the n-tab's are passed directly to the component as children\n\t */\n\thasTabHeaders() {\n\t\treturn this.tabs.length > 0;\n\t}\n}\n"]}

package/tabs/tabs.component.metadata.json CHANGED Viewed

	@@ -1 +1 @@
1	- [{"__symbolic":"module","version":4,"metadata":{"Tabs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":42,"character":1},"arguments":[{"selector":"ibm-tabs","template":"\n\t\t\t<ibm-tab-headers\n\t\t\t\tngIf=\"hasTabHeaders() && position === 'top'\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[tabs]=\"tabs\"\n\t\t\t\t[followFocus]=\"followFocus\"\n\t\t\t\t[cacheActive]=\"cacheActive\"\n\t\t\t\t[contentBefore]=\"before\"\n\t\t\t\t[contentAfter]=\"after\">\n\t\t\t</ibm-tab-headers>\n\t\t\t<ng-content></ng-content>\n\t\t\t<ng-template #before>\n\t\t\t\t<ng-content select=\"[before]\"></ng-content>\n\t\t\t</ng-template>\n\t\t\t<ng-template #after>\n\t\t\t\t<ng-content select=\"[after]\"></ng-content>\n\t\t\t</ng-template>\n\t\t\t<ibm-tab-headers\n\t\t\t\tngIf=\"hasTabHeaders() && position === 'bottom'\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[tabs]=\"tabs\"\n\t\t\t\t[cacheActive]=\"cacheActive\">\n\t\t\t</ibm-tab-headers>\n\t "}]}],"members":{"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":74,"character":2}}]}],"cacheActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":78,"character":2}}]}],"followFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":2}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":86,"character":2}}]}],"isNavigation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":90,"character":2}}]}],"tabs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":95,"character":2},"arguments":[{"__symbolic":"reference","module":"./tab.component","name":"Tab","line":95,"character":18},{"descendants":false}]}]}],"tabHeaders":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":99,"character":2},"arguments":[{"__symbolic":"reference","module":"./tab-headers.component","name":"TabHeaders","line":99,"character":15}]}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"hasTabHeaders":[{"__symbolic":"method"}]}}}}]
1	+ [{"__symbolic":"module","version":4,"metadata":{"Tabs":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":42,"character":1},"arguments":[{"selector":"ibm-tabs","template":"\n\t\t\t<ibm-tab-headers\n\t\t\t\tngIf=\"hasTabHeaders() && position === 'top'\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[tabs]=\"tabs\"\n\t\t\t\t[followFocus]=\"followFocus\"\n\t\t\t\t[cacheActive]=\"cacheActive\"\n\t\t\t\t[contentBefore]=\"before\"\n\t\t\t\t[contentAfter]=\"after\"\n\t\t\t\t[ariaLabel]=\"ariaLabel\"\n\t\t\t\t[ariaLabelledby]=\"ariaLabelledby\">\n\t\t\t</ibm-tab-headers>\n\t\t\t<ng-content></ng-content>\n\t\t\t<ng-template #before>\n\t\t\t\t<ng-content select=\"[before]\"></ng-content>\n\t\t\t</ng-template>\n\t\t\t<ng-template #after>\n\t\t\t\t<ng-content select=\"[after]\"></ng-content>\n\t\t\t</ng-template>\n\t\t\t<ibm-tab-headers\n\t\t\t\tngIf=\"hasTabHeaders() && position === 'bottom'\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[tabs]=\"tabs\"\n\t\t\t\t[cacheActive]=\"cacheActive\">\n\t\t\t</ibm-tab-headers>\n\t "}]}],"members":{"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":2}}]}],"cacheActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":2}}]}],"followFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":84,"character":2}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":88,"character":2}}]}],"isNavigation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":92,"character":2}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":96,"character":2}}]}],"ariaLabelledby":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":100,"character":2}}]}],"tabs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChildren","line":105,"character":2},"arguments":[{"__symbolic":"reference","module":"./tab.component","name":"Tab","line":105,"character":18},{"descendants":false}]}]}],"tabHeaders":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":109,"character":2},"arguments":[{"__symbolic":"reference","module":"./tab-headers.component","name":"TabHeaders","line":109,"character":15}]}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"hasTabHeaders":[{"__symbolic":"method"}]}}}}]

package/tabs/tabs.component.ngfactory.js CHANGED Viewed

@@ -32,18 +32,24 @@ import * as i4 from "./tabs.component";
 var styles_Tabs = [];
 var RenderType_Tabs = i0.ɵcrt({ encapsulation: 2, styles: styles_Tabs, data: {} });
 export { RenderType_Tabs as RenderType_Tabs };
-function View_Tabs_1(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 2, "ibm-tab-headers", [], null, [[null, "keydown"]], function (_v, en, $event) { var ad = true; if (("keydown" === en)) {
+function View_Tabs_1(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 2, "ibm-tab-headers", [], null, [[null, "keydown"], [null, "focusout"]], function (_v, en, $event) { var ad = true; if (("keydown" === en)) {
         var pd_0 = (i0.ɵnov(_v, 1).keyboardInput($event) !== false);
         ad = (pd_0 && ad);
-    } return ad; }, i1.View_TabHeaders_0, i1.RenderType_TabHeaders)), i0.ɵdid(1, 1097728, null, 1, i2.TabHeaders, [], { tabInput: [0, "tabInput"], cacheActive: [1, "cacheActive"], followFocus: [2, "followFocus"], skeleton: [3, "skeleton"], contentBefore: [4, "contentBefore"], contentAfter: [5, "contentAfter"] }, null), i0.ɵqud(603979776, 1, { tabQuery: 1 })], function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.tabs; var currVal_1 = _co.cacheActive; var currVal_2 = _co.followFocus; var currVal_3 = _co.skeleton; var currVal_4 = i0.ɵnov(_v.parent, 3); var currVal_5 = i0.ɵnov(_v.parent, 4); _ck(_v, 1, 0, currVal_0, currVal_1, currVal_2, currVal_3, currVal_4, currVal_5); }, null); }
+    } if (("focusout" === en)) {
+        var pd_1 = (i0.ɵnov(_v, 1).focusOut($event) !== false);
+        ad = (pd_1 && ad);
+    } return ad; }, i1.View_TabHeaders_0, i1.RenderType_TabHeaders)), i0.ɵdid(1, 1097728, null, 1, i2.TabHeaders, [], { tabInput: [0, "tabInput"], cacheActive: [1, "cacheActive"], followFocus: [2, "followFocus"], skeleton: [3, "skeleton"], ariaLabel: [4, "ariaLabel"], ariaLabelledby: [5, "ariaLabelledby"], contentBefore: [6, "contentBefore"], contentAfter: [7, "contentAfter"] }, null), i0.ɵqud(603979776, 1, { tabQuery: 1 })], function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.tabs; var currVal_1 = _co.cacheActive; var currVal_2 = _co.followFocus; var currVal_3 = _co.skeleton; var currVal_4 = _co.ariaLabel; var currVal_5 = _co.ariaLabelledby; var currVal_6 = i0.ɵnov(_v.parent, 3); var currVal_7 = i0.ɵnov(_v.parent, 4); _ck(_v, 1, 0, currVal_0, currVal_1, currVal_2, currVal_3, currVal_4, currVal_5, currVal_6, currVal_7); }, null); }
 function View_Tabs_2(_l) { return i0.ɵvid(0, [i0.ɵncd(null, 1), (_l()(), i0.ɵand(0, null, null, 0))], null, null); }
 function View_Tabs_3(_l) { return i0.ɵvid(0, [i0.ɵncd(null, 2), (_l()(), i0.ɵand(0, null, null, 0))], null, null); }
-function View_Tabs_4(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 2, "ibm-tab-headers", [], null, [[null, "keydown"]], function (_v, en, $event) { var ad = true; if (("keydown" === en)) {
+function View_Tabs_4(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 2, "ibm-tab-headers", [], null, [[null, "keydown"], [null, "focusout"]], function (_v, en, $event) { var ad = true; if (("keydown" === en)) {
         var pd_0 = (i0.ɵnov(_v, 1).keyboardInput($event) !== false);
         ad = (pd_0 && ad);
+    } if (("focusout" === en)) {
+        var pd_1 = (i0.ɵnov(_v, 1).focusOut($event) !== false);
+        ad = (pd_1 && ad);
     } return ad; }, i1.View_TabHeaders_0, i1.RenderType_TabHeaders)), i0.ɵdid(1, 1097728, null, 1, i2.TabHeaders, [], { tabInput: [0, "tabInput"], cacheActive: [1, "cacheActive"], skeleton: [2, "skeleton"] }, null), i0.ɵqud(603979776, 2, { tabQuery: 1 })], function (_ck, _v) { var _co = _v.component; var currVal_0 = _co.tabs; var currVal_1 = _co.cacheActive; var currVal_2 = _co.skeleton; _ck(_v, 1, 0, currVal_0, currVal_1, currVal_2); }, null); }
 export function View_Tabs_0(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵand(16777216, null, null, 1, null, View_Tabs_1)), i0.ɵdid(1, 16384, null, 0, i3.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null), i0.ɵncd(null, 0), (_l()(), i0.ɵand(0, [["before", 2]], null, 0, null, View_Tabs_2)), (_l()(), i0.ɵand(0, [["after", 2]], null, 0, null, View_Tabs_3)), (_l()(), i0.ɵand(16777216, null, null, 1, null, View_Tabs_4)), i0.ɵdid(6, 16384, null, 0, i3.NgIf, [i0.ViewContainerRef, i0.TemplateRef], { ngIf: [0, "ngIf"] }, null)], function (_ck, _v) { var _co = _v.component; var currVal_0 = (_co.hasTabHeaders() && (_co.position === "top")); _ck(_v, 1, 0, currVal_0); var currVal_1 = (_co.hasTabHeaders() && (_co.position === "bottom")); _ck(_v, 6, 0, currVal_1); }, null); }
 export function View_Tabs_Host_0(_l) { return i0.ɵvid(0, [(_l()(), i0.ɵeld(0, 0, null, null, 3, "ibm-tabs", [], null, null, null, View_Tabs_0, RenderType_Tabs)), i0.ɵdid(1, 1097728, null, 2, i4.Tabs, [], null, null), i0.ɵqud(603979776, 1, { tabs: 1 }), i0.ɵqud(335544320, 2, { tabHeaders: 0 })], null, null); }
-var TabsNgFactory = i0.ɵccf("ibm-tabs", i4.Tabs, View_Tabs_Host_0, { position: "position", cacheActive: "cacheActive", followFocus: "followFocus", skeleton: "skeleton", isNavigation: "isNavigation" }, {}, ["*", "[before]", "[after]"]);
+var TabsNgFactory = i0.ɵccf("ibm-tabs", i4.Tabs, View_Tabs_Host_0, { position: "position", cacheActive: "cacheActive", followFocus: "followFocus", skeleton: "skeleton", isNavigation: "isNavigation", ariaLabel: "ariaLabel", ariaLabelledby: "ariaLabelledby" }, {}, ["*", "[before]", "[after]"]);
 export { TabsNgFactory as TabsNgFactory };
 //# sourceMappingURL=tabs.component.ngfactory.js.map

package/tabs/tabs.component.ngfactory.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.component.ngfactory.js","sourceRoot":"","sources":["../src/tabs/tabs.component.ngfactory.ts","../src/tabs/tabs.component.ts.Tabs.html"],"names":[],"mappings":";;;;;;;;;;;;;;+CCCG~~;;;oWAOwB~~,~~mDAJvB~~,mBAAa,OAEb,mBAA2B,cAD3B,mBAA2B,cAF3B,mBAAqB,~~WAIrB~~,oCAAwB,GACxB,oCAAsB,GAPvB,~~YAOwB~~,~~EAJvB~~,SAAa,EAEb,SAA2B,EAD3B,SAA2B,EAF3B,SAAqB,~~EAIrB~~,SAAwB,EACxB,SAAsB;~~8CAItB~~,eAA8B;8CAG9B,eAA6B;+CAE9B~~;;;~~2PAI6B,mDAD5B,mBAAa,OACb,mBAA2B,cAF3B,mBAAqB,WAFtB,YAI6B,EAD5B,SAAa,EACb,SAA2B,EAF3B,SAAqB;~~sDAlBtB~~,~~oKAOwB~~,~~GAExB~~,eAAY,IACZ,8DAAqB,KAGrB,6DAAoB,KAGpB,oKAI6B,~~iDAnB5B~~,+DAA6C,IAD9C,~~YAOwB~~,~~EANvB~~,SAA6C,~~GAgB7C~~,kEAAgD,IADjD,YAI6B,EAH5B,SAAgD","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n","\n\t\t\t<ibm-tab-headers\n\t\t\t\tngIf=\"hasTabHeaders() && position === 'top'\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[tabs]=\"tabs\"\n\t\t\t\t[followFocus]=\"followFocus\"\n\t\t\t\t[cacheActive]=\"cacheActive\"\n\t\t\t\t[contentBefore]=\"before\"\n\t\t\t\t[contentAfter]=\"after\">\n\t\t\t</ibm-tab-headers>\n\t\t\t<ng-content></ng-content>\n\t\t\t<ng-template #before>\n\t\t\t\t<ng-content select=\"[before]\"></ng-content>\n\t\t\t</ng-template>\n\t\t\t<ng-template #after>\n\t\t\t\t<ng-content select=\"[after]\"></ng-content>\n\t\t\t</ng-template>\n\t\t\t<ibm-tab-headers\n\t\t\t\tngIf=\"hasTabHeaders() && position === 'bottom'\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[tabs]=\"tabs\"\n\t\t\t\t[cacheActive]=\"cacheActive\">\n\t\t\t</ibm-tab-headers>\n\t "]}
1	+ {"version":3,"file":"tabs.component.ngfactory.js","sourceRoot":"","sources":["../src/tabs/tabs.component.ngfactory.ts","../src/tabs/tabs.component.ts.Tabs.html"],"names":[],"mappings":";;;;;;;;;;;;;;+CCCG;;;;;;waASmC,mDANlC,mBAAa,OAEb,mBAA2B,cAD3B,mBAA2B,cAF3B,mBAAqB,WAMrB,mBAAuB,YACvB,mBAAiC,iBAHjC,oCAAwB,GACxB,oCAAsB,GAPvB,YASmC,EANlC,SAAa,EAEb,SAA2B,EAD3B,SAA2B,EAF3B,SAAqB,EAMrB,SAAuB,EACvB,SAAiC,EAHjC,SAAwB,EACxB,SAAsB;8CAMtB,eAA8B;8CAG9B,eAA6B;+CAE9B;;;;;;2PAI6B,mDAD5B,mBAAa,OACb,mBAA2B,cAF3B,mBAAqB,WAFtB,YAI6B,EAD5B,SAAa,EACb,SAA2B,EAF3B,SAAqB;sDApBtB,oKASmC,GAEnC,eAAY,IACZ,8DAAqB,KAGrB,6DAAoB,KAGpB,oKAI6B,iDArB5B,+DAA6C,IAD9C,YASmC,EARlC,SAA6C,GAkB7C,kEAAgD,IADjD,YAI6B,EAH5B,SAAgD","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n","\n\t\t\t<ibm-tab-headers\n\t\t\t\tngIf=\"hasTabHeaders() && position === 'top'\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[tabs]=\"tabs\"\n\t\t\t\t[followFocus]=\"followFocus\"\n\t\t\t\t[cacheActive]=\"cacheActive\"\n\t\t\t\t[contentBefore]=\"before\"\n\t\t\t\t[contentAfter]=\"after\"\n\t\t\t\t[ariaLabel]=\"ariaLabel\"\n\t\t\t\t[ariaLabelledby]=\"ariaLabelledby\">\n\t\t\t</ibm-tab-headers>\n\t\t\t<ng-content></ng-content>\n\t\t\t<ng-template #before>\n\t\t\t\t<ng-content select=\"[before]\"></ng-content>\n\t\t\t</ng-template>\n\t\t\t<ng-template #after>\n\t\t\t\t<ng-content select=\"[after]\"></ng-content>\n\t\t\t</ng-template>\n\t\t\t<ibm-tab-headers\n\t\t\t\tngIf=\"hasTabHeaders() && position === 'bottom'\"\n\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t[tabs]=\"tabs\"\n\t\t\t\t[cacheActive]=\"cacheActive\">\n\t\t\t</ibm-tab-headers>\n\t "]}

package/tabs/tabs.component.ngsummary.json CHANGED Viewed

	@@ -1 +1 @@
1	- {"moduleName":null,"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"class","members":{"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"cacheActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"followFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"isNavigation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"tabs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":2,"members":[]},"arguments":[{"__symbol":3,"members":[]},{"descendants":false}]}]}],"tabHeaders":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":4,"members":[]},"arguments":[{"__symbol":5,"members":[]}]}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"hasTabHeaders":[{"__symbolic":"method"}]}},"type":{"summaryKind":1,"type":{"reference":{"__symbol":0,"members":[]},"diDeps":[],"lifecycleHooks":[4]},"isComponent":true,"selector":"ibm-tabs","exportAs":null,"inputs":{"position":"position","cacheActive":"cacheActive","followFocus":"followFocus","skeleton":"skeleton","isNavigation":"isNavigation"},"outputs":{},"hostListeners":{},"hostProperties":{},"hostAttributes":{},"providers":[],"viewProviders":[],"queries":[{"selectors":[{"identifier":{"reference":{"__symbol":3,"members":[]}}}],"first":false,"descendants":false,"propertyName":"tabs","read":null},{"selectors":[{"identifier":{"reference":{"__symbol":5,"members":[]}}}],"first":true,"descendants":true,"propertyName":"tabHeaders","read":null}],"guards":{},"viewQueries":[],"entryComponents":[],"changeDetection":1,"template":{"ngContentSelectors":["*","[before]","[after]"],"encapsulation":2},"componentViewType":{"__symbol":6,"members":[]},"rendererType":{"__symbol":7,"members":[]},"componentFactory":{"__symbol":8,"members":[]}}}],"symbols":[{"__symbol":0,"name":"Tabs","filePath":"./tabs.component"},{"__symbol":1,"name":"Input","filePath":"@angular/core"},{"__symbol":2,"name":"ContentChildren","filePath":"@angular/core"},{"__symbol":3,"name":"Tab","filePath":"./tab.component"},{"__symbol":4,"name":"ContentChild","filePath":"@angular/core"},{"__symbol":5,"name":"TabHeaders","filePath":"./tab-headers.component"},{"__symbol":6,"name":"View_Tabs_0","filePath":"./tabs.component.ngfactory"},{"__symbol":7,"name":"RenderType_Tabs","filePath":"./tabs.component.ngfactory"},{"__symbol":8,"name":"TabsNgFactory","filePath":"./tabs.component.ngfactory"}]}
1	+ {"moduleName":null,"summaries":[{"symbol":{"__symbol":0,"members":[]},"metadata":{"__symbolic":"class","members":{"position":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"cacheActive":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"followFocus":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"skeleton":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"isNavigation":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"ariaLabel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"ariaLabelledby":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":1,"members":[]}}]}],"tabs":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":2,"members":[]},"arguments":[{"__symbol":3,"members":[]},{"descendants":false}]}]}],"tabHeaders":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbol":4,"members":[]},"arguments":[{"__symbol":5,"members":[]}]}]}],"ngAfterContentInit":[{"__symbolic":"method"}],"hasTabHeaders":[{"__symbolic":"method"}]}},"type":{"summaryKind":1,"type":{"reference":{"__symbol":0,"members":[]},"diDeps":[],"lifecycleHooks":[4]},"isComponent":true,"selector":"ibm-tabs","exportAs":null,"inputs":{"position":"position","cacheActive":"cacheActive","followFocus":"followFocus","skeleton":"skeleton","isNavigation":"isNavigation","ariaLabel":"ariaLabel","ariaLabelledby":"ariaLabelledby"},"outputs":{},"hostListeners":{},"hostProperties":{},"hostAttributes":{},"providers":[],"viewProviders":[],"queries":[{"selectors":[{"identifier":{"reference":{"__symbol":3,"members":[]}}}],"first":false,"descendants":false,"propertyName":"tabs","read":null},{"selectors":[{"identifier":{"reference":{"__symbol":5,"members":[]}}}],"first":true,"descendants":true,"propertyName":"tabHeaders","read":null}],"guards":{},"viewQueries":[],"entryComponents":[],"changeDetection":1,"template":{"ngContentSelectors":["*","[before]","[after]"],"encapsulation":2},"componentViewType":{"__symbol":6,"members":[]},"rendererType":{"__symbol":7,"members":[]},"componentFactory":{"__symbol":8,"members":[]}}}],"symbols":[{"__symbol":0,"name":"Tabs","filePath":"./tabs.component"},{"__symbol":1,"name":"Input","filePath":"@angular/core"},{"__symbol":2,"name":"ContentChildren","filePath":"@angular/core"},{"__symbol":3,"name":"Tab","filePath":"./tab.component"},{"__symbol":4,"name":"ContentChild","filePath":"@angular/core"},{"__symbol":5,"name":"TabHeaders","filePath":"./tab-headers.component"},{"__symbol":6,"name":"View_Tabs_0","filePath":"./tabs.component.ngfactory"},{"__symbol":7,"name":"RenderType_Tabs","filePath":"./tabs.component.ngfactory"},{"__symbol":8,"name":"TabsNgFactory","filePath":"./tabs.component.ngfactory"}]}

package/tabs/tabs.module.ngfactory.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tabs.module.ngfactory.js","sourceRoot":"","sources":["../src/tabs/tabs.module.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\nimport * as i1 from './tabs.module';\nimport * as i2 from '@angular/common';\nimport * as i3 from './tabs.component';\nimport * as i4 from './tab.component';\nimport * as i5 from './tab-headers.component';\nexport const TabsModuleNgFactory:i0.NgModuleFactory<i1.TabsModule> = (null as any);\nvar _decl0_0:i2.NgClass = (<any>(null as any));\nvar _decl0_1:i2.NgComponentOutlet = (<any>(null as any));\nvar _decl0_2:i2.NgForOf<any> = (<any>(null as any));\nvar _decl0_3:i2.NgIf = (<any>(null as any));\nvar _decl0_4:i2.NgTemplateOutlet = (<any>(null as any));\nvar _decl0_5:i2.NgStyle = (<any>(null as any));\nvar _decl0_6:i2.NgSwitch = (<any>(null as any));\nvar _decl0_7:i2.NgSwitchCase = (<any>(null as any));\nvar _decl0_8:i2.NgSwitchDefault = (<any>(null as any));\nvar _decl0_9:i2.NgPlural = (<any>(null as any));\nvar _decl0_10:i2.NgPluralCase = (<any>(null as any));\nvar _decl0_11:i3.Tabs = (<any>(null as any));\nvar _decl0_12:i4.Tab = (<any>(null as any));\nvar _decl0_13:i5.TabHeaders = (<any>(null as any));\nvar _decl0_14:i2.AsyncPipe = (<any>(null as any));\nvar _decl0_15:i2.UpperCasePipe = (<any>(null as any));\nvar _decl0_16:i2.LowerCasePipe = (<any>(null as any));\nvar _decl0_17:i2.JsonPipe = (<any>(null as any));\nvar _decl0_18:i2.SlicePipe = (<any>(null as any));\nvar _decl0_19:i2.DecimalPipe = (<any>(null as any));\nvar _decl0_20:i2.PercentPipe = (<any>(null as any));\nvar _decl0_21:i2.TitleCasePipe = (<any>(null as any));\nvar _decl0_22:i2.CurrencyPipe = (<any>(null as any));\nvar _decl0_23:i2.DatePipe = (<any>(null as any));\nvar _decl0_24:i2.I18nPluralPipe = (<any>(null as any));\nvar _decl0_25:i2.I18nSelectPipe = (<any>(null as any));\nvar _decl0_26:i2.KeyValuePipe = (<any>(null as any));\nvar _decl0_27:i2.CommonModule = (<any>(null as any));\nvar _decl0_28:i0.TemplateRef<any> = (<any>(null as any));\nvar _decl0_29:i0.ElementRef<any> = (<any>(null as any));\nfunction _View_Tabs_Host_1_0():void {\n var _any:any = (null as any);\n}\nfunction _View_Tabs_1_0():void {\n var _any:any = (null as any);\n const currVal_0:any = (_decl0_11.hasTabHeaders() && (_decl0_11.position === 'top'));\n currVal_0;\n const currVal_1:any = (_decl0_11.hasTabHeaders() && (_decl0_11.position === 'bottom'));\n currVal_1;\n}\nfunction _View_Tab_Host_2_0():void {\n var _any:any = (null as any);\n}\nfunction _View_Tab_2_0():void {\n var _any:any = (null as any);\n const currVal_0:any = _decl0_12.shouldRender();\n currVal_0;\n}\nfunction _View_TabHeaders_Host_3_0():void {\n var _any:any = (null as any);\n}\nfunction _View_TabHeaders_3_0():void {\n var _any:any = (null as any);\n const currVal_0:any = 'bx--tabs';\n currVal_0;\n const currVal_1:any = (<any>{'bx--skeleton':_decl0_13.skeleton});\n currVal_1;\n const currVal_2:any = !_decl0_13.getSelectedTab().headingIsTemplate;\n ~~currVal_2~~;\n const ~~currVal_3~~:any = _decl0_13.getSelectedTab().headingIsTemplate;\n ~~currVal_3~~;\n const ~~currVal_4~~:any = 'bx--tabs__nav';\n ~~currVal_4~~;\n const ~~currVal_5~~:any = (<any>{'bx--tabs__nav--hidden':!_decl0_13.tabListVisible});\n ~~currVal_5~~;\n const ~~currVal_6~~:any = _decl0_13.contentBefore;\n ~~currVal_6~~;\n const ~~currVal_7~~:any = _decl0_13.tabs;\n ~~currVal_7~~;\n const ~~currVal_8~~:any = _decl0_13.contentAfter;\n ~~currVal_8~~;\n const ~~pd_9~~:any = ((<any>_decl0_13.showTabList()) !== false);\n}\n"]}
1	+ {"version":3,"file":"tabs.module.ngfactory.js","sourceRoot":"","sources":["../src/tabs/tabs.module.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\nimport * as i1 from './tabs.module';\nimport * as i2 from '@angular/common';\nimport * as i3 from './tabs.component';\nimport * as i4 from './tab.component';\nimport * as i5 from './tab-headers.component';\nexport const TabsModuleNgFactory:i0.NgModuleFactory<i1.TabsModule> = (null as any);\nvar _decl0_0:i2.NgClass = (<any>(null as any));\nvar _decl0_1:i2.NgComponentOutlet = (<any>(null as any));\nvar _decl0_2:i2.NgForOf<any> = (<any>(null as any));\nvar _decl0_3:i2.NgIf = (<any>(null as any));\nvar _decl0_4:i2.NgTemplateOutlet = (<any>(null as any));\nvar _decl0_5:i2.NgStyle = (<any>(null as any));\nvar _decl0_6:i2.NgSwitch = (<any>(null as any));\nvar _decl0_7:i2.NgSwitchCase = (<any>(null as any));\nvar _decl0_8:i2.NgSwitchDefault = (<any>(null as any));\nvar _decl0_9:i2.NgPlural = (<any>(null as any));\nvar _decl0_10:i2.NgPluralCase = (<any>(null as any));\nvar _decl0_11:i3.Tabs = (<any>(null as any));\nvar _decl0_12:i4.Tab = (<any>(null as any));\nvar _decl0_13:i5.TabHeaders = (<any>(null as any));\nvar _decl0_14:i2.AsyncPipe = (<any>(null as any));\nvar _decl0_15:i2.UpperCasePipe = (<any>(null as any));\nvar _decl0_16:i2.LowerCasePipe = (<any>(null as any));\nvar _decl0_17:i2.JsonPipe = (<any>(null as any));\nvar _decl0_18:i2.SlicePipe = (<any>(null as any));\nvar _decl0_19:i2.DecimalPipe = (<any>(null as any));\nvar _decl0_20:i2.PercentPipe = (<any>(null as any));\nvar _decl0_21:i2.TitleCasePipe = (<any>(null as any));\nvar _decl0_22:i2.CurrencyPipe = (<any>(null as any));\nvar _decl0_23:i2.DatePipe = (<any>(null as any));\nvar _decl0_24:i2.I18nPluralPipe = (<any>(null as any));\nvar _decl0_25:i2.I18nSelectPipe = (<any>(null as any));\nvar _decl0_26:i2.KeyValuePipe = (<any>(null as any));\nvar _decl0_27:i2.CommonModule = (<any>(null as any));\nvar _decl0_28:i0.TemplateRef<any> = (<any>(null as any));\nvar _decl0_29:i0.ElementRef<any> = (<any>(null as any));\nfunction _View_Tabs_Host_1_0():void {\n var _any:any = (null as any);\n}\nfunction _View_Tabs_1_0():void {\n var _any:any = (null as any);\n const currVal_0:any = (_decl0_11.hasTabHeaders() && (_decl0_11.position === 'top'));\n currVal_0;\n const currVal_1:any = (_decl0_11.hasTabHeaders() && (_decl0_11.position === 'bottom'));\n currVal_1;\n}\nfunction _View_Tab_Host_2_0():void {\n var _any:any = (null as any);\n}\nfunction _View_Tab_2_0():void {\n var _any:any = (null as any);\n const currVal_0:any = _decl0_12.shouldRender();\n currVal_0;\n}\nfunction _View_TabHeaders_Host_3_0():void {\n var _any:any = (null as any);\n}\nfunction _View_TabHeaders_3_0():void {\n var _any:any = (null as any);\n const currVal_0:any = 'bx--tabs';\n currVal_0;\n const currVal_1:any = (<any>{'bx--skeleton':_decl0_13.skeleton});\n currVal_1;\n const currVal_2:any = _decl0_13.ariaLabel;\n currVal_2;\n const currVal_3:any = _decl0_13.ariaLabelledby;\n currVal_3;\n const currVal_4:any = !_decl0_13.getSelectedTab().headingIsTemplate;\n currVal_4;\n const currVal_5:any = _decl0_13.getSelectedTab().headingIsTemplate;\n currVal_5;\n const currVal_6:any = 'bx--tabs__nav';\n currVal_6;\n const currVal_7:any = (<any>{'bx--tabs__nav--hidden':!_decl0_13.tabListVisible});\n currVal_7;\n const currVal_8:any = _decl0_13.contentBefore;\n currVal_8;\n const currVal_9:any = _decl0_13.tabs;\n currVal_9;\n const currVal_10:any = _decl0_13.contentAfter;\n currVal_10;\n const pd_11:any = ((<any>_decl0_13.showTabList()) !== false);\n}\n"]}