carbon-components-angular 3.13.1 → 3.13.2

package/docs/storybook/iframe.html

@@ -114,11 +114,11 @@
 
 
 
-  <script src="runtime~main.af986e1c1a23f0d31b49.bundle.js"></script>
+  <script src="runtime~main.a309b5fd3379fd894c7e.bundle.js"></script>
 
-  <script src="vendors~main.af986e1c1a23f0d31b49.bundle.js"></script>
+  <script src="vendors~main.a309b5fd3379fd894c7e.bundle.js"></script>
 
-  <script src="main.af986e1c1a23f0d31b49.bundle.js"></script>
+  <script src="main.a309b5fd3379fd894c7e.bundle.js"></script>
 
 
 </body>

package/docs/storybook/{main.af986e1c1a23f0d31b49.bundle.js → main.a309b5fd3379fd894c7e.bundle.js}

@@ -5884,6 +5884,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _angular_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @angular/core */ "./node_modules/@angular/core/fesm5/core.js");
 /* harmony import */ var _common_tab_service__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./../../common/tab.service */ "./src/common/tab.service.ts");
 /* harmony import */ var _dialog_component__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./../dialog.component */ "./src/dialog/dialog.component.ts");
+/* harmony import */ var _carbon_utils_position__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @carbon/utils-position */ "./node_modules/@carbon/utils-position/index.js");
 var __extends = (undefined && undefined.__extends) || (function () {
     var extendStatics = Object.setPrototypeOf ||
         ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
@@ -5906,6 +5907,7 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
 
 
 
+
 /**
  * Extend the `Dialog` component to create a tooltip for exposing content.
  */
@@ -5929,6 +5931,18 @@ var Tooltip = /** @class */ (function (_super) {
      * Check whether there is a template for the `Tooltip` content.
      */
     Tooltip.prototype.onDialogInit = function () {
+        this.addGap["bottom"] = function (pos) {
+            return _carbon_utils_position__WEBPACK_IMPORTED_MODULE_3__["position"].addOffset(pos, 3, 0);
+        };
+        this.addGap["top"] = function (pos) {
+            return _carbon_utils_position__WEBPACK_IMPORTED_MODULE_3__["position"].addOffset(pos, -10, 0);
+        };
+        this.addGap["left"] = function (pos) {
+            return _carbon_utils_position__WEBPACK_IMPORTED_MODULE_3__["position"].addOffset(pos, -3, -6);
+        };
+        this.addGap["right"] = function (pos) {
+            return _carbon_utils_position__WEBPACK_IMPORTED_MODULE_3__["position"].addOffset(pos, -3, 6);
+        };
         this.hasContentTemplate = this.dialogConfig.content instanceof _angular_core__WEBPACK_IMPORTED_MODULE_0__["TemplateRef"];
     };
     Tooltip.prototype.afterDialogViewInit = function () {
@@ -5945,7 +5959,7 @@ var Tooltip = /** @class */ (function (_super) {
     Tooltip = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-tooltip",
-            template: "\n\t\t<div\n\t\t\t#dialog\n\t\t\t[id]=\"dialogConfig.compID\"\n\t\t\t[attr.role]=\"role\"\n\t\t\tclass=\"bx--tooltip bx--tooltip--shown\">\n\t\t\t<span class=\"bx--tooltip__caret\" aria-hidden=\"true\"></span>\n\t\t\t<ng-template\n\t\t\t\t\t*ngIf=\"hasContentTemplate\"\n\t\t\t\t\t[ngTemplateOutlet]=\"dialogConfig.content\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"{tooltip: this}\">\n\t\t\t</ng-template>\n\t\t\t<p\n\t\t\t\t*ngIf=\"!hasContentTemplate\">\n\t\t\t\t{{dialogConfig.content}}\n\t\t\t</p>\n\t\t</div>\n\t\t"
+            template: "\n\t\t<div\n\t\t\t#dialog\n\t\t\t[id]=\"dialogConfig.compID\"\n\t\t\t[attr.role]=\"role\"\n\t\t\t[attr.data-floating-menu-direction]=\"placement\"\n\t\t\tclass=\"bx--tooltip bx--tooltip--shown\">\n\t\t\t<span class=\"bx--tooltip__caret\" aria-hidden=\"true\"></span>\n\t\t\t<ng-template\n\t\t\t\t\t*ngIf=\"hasContentTemplate\"\n\t\t\t\t\t[ngTemplateOutlet]=\"dialogConfig.content\"\n\t\t\t\t\t[ngTemplateOutletContext]=\"{tooltip: this}\">\n\t\t\t</ng-template>\n\t\t\t<p\n\t\t\t\t*ngIf=\"!hasContentTemplate\">\n\t\t\t\t{{dialogConfig.content}}\n\t\t\t</p>\n\t\t</div>\n\t\t"
         })
     ], Tooltip);
     return Tooltip;
@@ -20542,6 +20556,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) {
@@ -20621,6 +20640,14 @@ var TabHeaders = /** @class */ (function () {
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
     ], TabHeaders.prototype, "skeleton", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", String)
+    ], TabHeaders.prototype, "ariaLabel", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", String)
+    ], TabHeaders.prototype, "ariaLabelledby", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
@@ -20647,10 +20674,16 @@ var TabHeaders = /** @class */ (function () {
         __metadata("design:paramtypes", [Object]),
         __metadata("design:returntype", void 0)
     ], TabHeaders.prototype, "keyboardInput", null);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostListener"])("focusout", ["$event"]),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], TabHeaders.prototype, "focusOut", null);
     TabHeaders = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             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);
     return TabHeaders;
@@ -20958,6 +20991,14 @@ var Tabs = /** @class */ (function () {
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
     ], Tabs.prototype, "isNavigation", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", String)
+    ], Tabs.prototype, "ariaLabel", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", String)
+    ], Tabs.prototype, "ariaLabelledby", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ContentChildren"])(_tab_component__WEBPACK_IMPORTED_MODULE_1__["Tab"], { descendants: false }),
         __metadata("design:type", typeof (_a = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["QueryList"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["QueryList"]) === "function" && _a || Object)
@@ -20969,7 +21010,7 @@ var Tabs = /** @class */ (function () {
     Tabs = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             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);
     return Tabs;
@@ -24125,4 +24166,4 @@ module.exports = __webpack_require__(/*! /home/travis/build/IBM/carbon-component
 /***/ })
 
 },[[0,"runtime~main","vendors~main"]]]);
-//# sourceMappingURL=main.af986e1c1a23f0d31b49.bundle.js.map
+//# sourceMappingURL=main.a309b5fd3379fd894c7e.bundle.js.map