carbon-components-angular 3.0.2 → 3.2.0

package/docs/storybook/iframe.html

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

package/docs/storybook/{main.30b13c55e055554fdaac.bundle.js → main.cc3329d0f31a1601a8eb.bundle.js}

@@ -2710,7 +2710,7 @@ var ContentSwitcherOption = /** @class */ (function () {
         this.active = true;
     };
     ContentSwitcherOption.prototype.onBlur = function (event) {
-        if (event.relatedTarget) {
+        if (event.relatedTarget && event.relatedTarget.classList.contains("bx--content-switcher-btn")) {
             this.active = false;
         }
     };
@@ -12365,7 +12365,7 @@ var Number = /** @class */ (function () {
     Number = Number_1 = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-number",
-            template: "\n\t\t<label *ngIf=\"skeleton && label\" class=\"bx--label bx--skeleton\"></label>\n\t\t<label *ngIf=\"!skeleton && label\" [for]=\"id\" class=\"bx--label\">{{label}}</label>\n\t\t<div *ngIf=\"helperText\" class=\"bx--form__helper-text\">{{helperText}}</div>\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? '' : null)\"\n\t\t\tclass=\"bx--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--number--light': theme === 'light',\n\t\t\t\t'bx--number--nolabel': !label,\n\t\t\t\t'bx--number--helpertext': helperText,\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<input\n\t\t\t\ttype=\"number\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[value]=\"value\"\n\t\t\t\t[min]=\"min\"\n\t\t\t\t[max]=\"max\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[required]=\"required\"\n\t\t\t\t(input)=\"onNumberInputChange($event)\"/>\n\t\t\t<div *ngIf=\"!skeleton\" class=\"bx--number__controls\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"bx--number__control-btn up-icon\"\n\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t<ibm-icon-caret-up16></ibm-icon-caret-up16>\n\t\t\t\t</button>\n\t\t\t\t<button\n\t\t\t\t\tclass=\"bx--number__control-btn down-icon\"\n\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t<ibm-icon-caret-down16></ibm-icon-caret-down16>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t{{invalidText}}\n\t\t\t</div>\n\t\t</div>\n\t",
+            template: "\n\t\t<label *ngIf=\"skeleton && label\" class=\"bx--label bx--skeleton\"></label>\n\t\t<label *ngIf=\"!skeleton && label\" [for]=\"id\" class=\"bx--label\">{{label}}</label>\n\t\t<div *ngIf=\"helperText\" class=\"bx--form__helper-text\">{{helperText}}</div>\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? '' : null)\"\n\t\t\tclass=\"bx--number\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--number--light': theme === 'light',\n\t\t\t\t'bx--number--nolabel': !label,\n\t\t\t\t'bx--number--helpertext': helperText,\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<input\n\t\t\t\ttype=\"number\"\n\t\t\t\t[id]=\"id\"\n\t\t\t\t[value]=\"value\"\n\t\t\t\t[min]=\"min\"\n\t\t\t\t[max]=\"max\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[required]=\"required\"\n\t\t\t\t(input)=\"onNumberInputChange($event)\"/>\n\t\t\t<div *ngIf=\"!skeleton\" class=\"bx--number__controls\">\n\t\t\t\t<button\n\t\t\t\t\tclass=\"bx--number__control-btn up-icon\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t<ibm-icon-caret-up16></ibm-icon-caret-up16>\n\t\t\t\t</button>\n\t\t\t\t<button\n\t\t\t\t\tclass=\"bx--number__control-btn down-icon\"\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t<ibm-icon-caret-down16></ibm-icon-caret-down16>\n\t\t\t\t</button>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t{{invalidText}}\n\t\t\t</div>\n\t\t</div>\n\t",
             providers: [
                 {
                     provide: _angular_forms__WEBPACK_IMPORTED_MODULE_1__["NG_VALUE_ACCESSOR"],
@@ -12745,7 +12745,7 @@ var Pagination = /** @class */ (function () {
     Pagination = Pagination_1 = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Component"])({
             selector: "ibm-pagination",
-            template: "\n\t<div\n\t\tclass=\"bx--pagination\"\n\t\t[ngClass]=\"{\n\t\t\t'bx--skeleton': skeleton\n\t\t}\">\n\t\t<!-- left skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"bx--pagination__left\">\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 70px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 35px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 105px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"bx--pagination__left\">\n\t\t\t<label class=\"bx--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t{{itemsPerPageText | async}}\n\t\t\t</label>\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<div class=\"bx--select bx--select--inline\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'bx--select__item-count': isExperimental\n\t\t\t\t\t}\">\n\t\t\t\t\t<label\n\t\t\t\t\t\t[for]=\"itemsPerPageSelectId\"\n\t\t\t\t\t\tclass=\"bx--label bx--visually-hidden\">\n\t\t\t\t\t\t{{itemsPerPageText | async}}\n\t\t\t\t\t</label>\n\t\t\t\t\t<select\n\t\t\t\t\t\t[id]=\"itemsPerPageSelectId\"\n\t\t\t\t\t\t[(ngModel)]=\"itemsPerPage\"\n\t\t\t\t\t\tclass=\"bx--select-input\"\n\t\t\t\t\t\taria-describedby=\"false\">\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"10\">10</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"20\">20</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"30\">30</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"40\">40</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"50\">50</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-chevron-down16\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tinnerClass=\"bx--select__arrow\"\n\t\t\t\t\t\t[ariaLabel]=\"optionsListText | async\">\n\t\t\t\t\t</ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<span class=\"bx--pagination__text\">\n\t\t\t\t<span *ngIf=\"!isExperimental\">|&nbsp;</span>\n\t\t\t\t{{totalItemsText | i18nReplace:{start: startItemIndex, end: endItemIndex, total: model.totalDataLength } | async}}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- right skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"bx--pagination__right bx--pagination--inline\">\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 70px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"bx--pagination__right\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--pagination--inline': !isExperimental\n\t\t\t}\">\n\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<div class=\"bx--select bx--select--inline\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--select__page-number' : isExperimental\n\t\t\t\t}\">\n\t\t\t\t\t<label [for]=\"currentPageSelectId\" class=\"bx--label bx--visually-hidden\">{{itemsPerPageText | async}}</label>\n\t\t\t\t\t<select [id]=\"currentPageSelectId\" class=\"bx--select-input\" aria-describedby=\"false\" [(ngModel)]=\"currentPage\">\n\t\t\t\t\t\t<option *ngFor=\"let i of range(lastPage + 1, 1)\" class=\"bx--select-option\" [value]=\"i\">{{i}}</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-chevron-down16\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tinnerClass=\"bx--select__arrow\"\n\t\t\t\t\t\t[ariaLabel]=\"optionsListText | async\">\n\t\t\t\t\t</ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<span class=\"bx--pagination__text\">\n\t\t\t\t{{ofLastPagesText | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<button\n\t\t\t\tclass=\"bx--pagination__button bx--pagination__button--backward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--pagination__button--no-index': currentPage <= 1\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"backwardText | async\"\n\t\t\t\t(click)=\"selectPage.emit(previousPage)\"\n\t\t\t\t[disabled]=\"(currentPage <= 1 ? true : null)\">\n\t\t\t\t<ibm-icon-caret-left16></ibm-icon-caret-left16>\n\t\t\t</button>\n\n\t\t\t<button\n\t\t\t\tclass=\"bx--pagination__button bx--pagination__button--forward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--pagination__button--no-index': currentPage >= lastPage\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"forwardText | async\"\n\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t[disabled]=\"(currentPage >= lastPage ? true : null)\">\n\t\t\t\t<ibm-icon-caret-right16></ibm-icon-caret-right16>\n\t\t\t</button>\n\t\t</div>\n\t</div>\n\t"
+            template: "\n\t<div\n\t\tclass=\"bx--pagination\"\n\t\t[ngClass]=\"{\n\t\t\t'bx--skeleton': skeleton\n\t\t}\">\n\t\t<!-- left skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"bx--pagination__left\">\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 70px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 35px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 105px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"bx--pagination__left\">\n\t\t\t<label class=\"bx--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t{{itemsPerPageText | async}}\n\t\t\t</label>\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<div class=\"bx--select bx--select--inline\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'bx--select__item-count': isExperimental\n\t\t\t\t\t}\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t[id]=\"itemsPerPageSelectId\"\n\t\t\t\t\t\t[(ngModel)]=\"itemsPerPage\"\n\t\t\t\t\t\tclass=\"bx--select-input\">\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"10\">10</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"20\">20</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"30\">30</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"40\">40</option>\n\t\t\t\t\t\t<option class=\"bx--select-option\" value=\"50\">50</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-chevron-down16\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tinnerClass=\"bx--select__arrow\"\n\t\t\t\t\t\t[ariaLabel]=\"optionsListText | async\">\n\t\t\t\t\t</ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<span class=\"bx--pagination__text\">\n\t\t\t\t<span *ngIf=\"!isExperimental\">|&nbsp;</span>\n\t\t\t\t{{totalItemsText | i18nReplace:{start: startItemIndex, end: endItemIndex, total: model.totalDataLength } | async}}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- right skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"bx--pagination__right bx--pagination--inline\">\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 70px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"bx--pagination__right\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--pagination--inline': !isExperimental\n\t\t\t}\">\n\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<div class=\"bx--select bx--select--inline\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--select__page-number' : isExperimental\n\t\t\t\t}\">\n\t\t\t\t\t<label [for]=\"currentPageSelectId\" class=\"bx--label bx--visually-hidden\">{{itemsPerPageText | async}}</label>\n\t\t\t\t\t<select [id]=\"currentPageSelectId\" class=\"bx--select-input\" [(ngModel)]=\"currentPage\">\n\t\t\t\t\t\t<option *ngFor=\"let i of range(lastPage + 1, 1)\" class=\"bx--select-option\" [value]=\"i\">{{i}}</option>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-chevron-down16\n\t\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\t\tinnerClass=\"bx--select__arrow\"\n\t\t\t\t\t\t[ariaLabel]=\"optionsListText | async\">\n\t\t\t\t\t</ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t</div>\n\n\t\t\t<span class=\"bx--pagination__text\">\n\t\t\t\t{{ofLastPagesText | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<button\n\t\t\t\tclass=\"bx--pagination__button bx--pagination__button--backward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--pagination__button--no-index': currentPage <= 1\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"backwardText | async\"\n\t\t\t\t(click)=\"selectPage.emit(previousPage)\"\n\t\t\t\t[disabled]=\"(currentPage <= 1 ? true : null)\">\n\t\t\t\t<ibm-icon-caret-left16></ibm-icon-caret-left16>\n\t\t\t</button>\n\n\t\t\t<button\n\t\t\t\tclass=\"bx--pagination__button bx--pagination__button--forward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--pagination__button--no-index': currentPage >= lastPage\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"forwardText | async\"\n\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t[disabled]=\"(currentPage >= lastPage ? true : null)\">\n\t\t\t\t<ibm-icon-caret-right16></ibm-icon-caret-right16>\n\t\t\t</button>\n\t\t</div>\n\t</div>\n\t"
         }),
         __metadata("design:paramtypes", [typeof (_b = typeof _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_3__["I18n"] !== "undefined" && _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_3__["I18n"]) === "function" && _b || Object, typeof (_c = typeof _experimental_module__WEBPACK_IMPORTED_MODULE_5__["ExperimentalService"] !== "undefined" && _experimental_module__WEBPACK_IMPORTED_MODULE_5__["ExperimentalService"]) === "function" && _c || Object])
     ], Pagination);
@@ -18878,6 +18878,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", Object)
+    ], TabHeaders.prototype, "contentBefore", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], TabHeaders.prototype, "contentAfter", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ViewChild"])("tabList"),
         __metadata("design:type", Object)
@@ -18899,7 +18907,7 @@ var TabHeaders = /** @class */ (function () {
     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\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}\"\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</ul>\n\t\t</nav>\n\t\t<div>\n\t\t\t<ng-content select=\"ibm-tab\"></ng-content>\n\t\t</div>\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<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}\"\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;
@@ -19214,7 +19222,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</ibm-tab-headers>\n\t\t\t<ng-content></ng-content>\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</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;
@@ -19304,8 +19312,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var ___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../ */ "./src/index.ts");
 var withStorySource = __webpack_require__(/*! @storybook/addon-storysource */ "./node_modules/@storybook/addon-storysource/dist/index.js").withStorySource;
-var __STORY__ = "import { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { withKnobs, boolean } from '@storybook/addon-knobs/angular';\n\nimport { TabsModule } from '../';\n\nstoriesOf('Tabs', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [TabsModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t\t<ibm-tabs [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t\t<ibm-tab heading=\"one\">foo</ibm-tab>\n\t\t\t\t<ibm-tab heading=\"two\">bar</ibm-tab>\n\t\t\t</ibm-tabs>\n\t\t`,\n    props: {\n      followFocus: boolean('followFocus', true),\n      isNavigation: boolean('isNavigation', false),\n    },\n  }))\n  .add('With template', () => ({\n    template: `\n\t\t\t<ng-template #customTabs let-item>\n\t\t\t\t{{item ? item.name : \"wait for it\"}}\n\t\t\t</ng-template>\n\t\t\t<ng-template #iconTab>\n\t\t\t\t<div style=\"height: 14px;\">\n\t\t\t\t\tSomething custom\n\t\t\t\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n\t\t\t\t\tstyle=\"height: 14px; width: 14px; fill: #3d70b2;\">\n\t\t\t\t\t\t<path d=\"M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z\"></path>\n\t\t\t\t\t\t<path d=\"M9 13H7V7h2z\"></path>\n\t\t\t\t\t\t<path d=\"M7 4a1 1 0 1 1 2 0 1 1 0 1 1-2 0\"></path>\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t\t<ibm-tabs [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t\t<ibm-tab *ngFor=\"let item of data; let i = index;\" [heading]=\"customTabs\" [context]=\"item\">Tab Content {{i + 1}}</ibm-tab>\n\t\t\t\t<ibm-tab [heading]=\"iconTab\">Tab Content Custom</ibm-tab>\n\t\t\t</ibm-tabs>\n\t\t`,\n    props: {\n      followFocus: boolean('followFocus', true),\n      isNavigation: boolean('isNavigation', false),\n      data: [{ name: 'one' }, { name: 'two' }, { name: 'three' }],\n    },\n  }))\n  .add('Skeleton', () => ({\n    template: `\n\t\t\t<ibm-tabs skeleton=\"true\">\n\t\t\t\t<ibm-tab></ibm-tab>\n\t\t\t\t<ibm-tab></ibm-tab>\n\t\t\t</ibm-tabs>\n\t\t`,\n  }));\n";
-var __ADDS_MAP__ = { "tabs--skeleton": { "startLoc": { "col": 7, "line": 52 }, "endLoc": { "col": 4, "line": 59 } }, "tabs--with-template": { "startLoc": { "col": 7, "line": 25 }, "endLoc": { "col": 4, "line": 51 } }, "tabs--basic": { "startLoc": { "col": 7, "line": 13 }, "endLoc": { "col": 4, "line": 24 } } };
+var __STORY__ = "import { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { withKnobs, boolean } from '@storybook/addon-knobs/angular';\n\nimport { TabsModule } from '../';\n\nstoriesOf('Tabs', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [TabsModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t\t<ibm-tabs [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t\t<ibm-tab heading=\"one\">foo</ibm-tab>\n\t\t\t\t<ibm-tab heading=\"two\">bar</ibm-tab>\n\t\t\t</ibm-tabs>\n\t\t`,\n    props: {\n      followFocus: boolean('followFocus', true),\n      isNavigation: boolean('isNavigation', false),\n    },\n  }))\n  .add('With template', () => ({\n    template: `\n\t\t\t<ng-template #customTabs let-item>\n\t\t\t\t{{item ? item.name : \"wait for it\"}}\n\t\t\t</ng-template>\n\t\t\t<ng-template #iconTab>\n\t\t\t\t<div style=\"height: 14px;\">\n\t\t\t\t\tSomething custom\n\t\t\t\t\t<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"\n\t\t\t\t\tstyle=\"height: 14px; width: 14px; fill: #3d70b2;\">\n\t\t\t\t\t\t<path d=\"M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z\"></path>\n\t\t\t\t\t\t<path d=\"M9 13H7V7h2z\"></path>\n\t\t\t\t\t\t<path d=\"M7 4a1 1 0 1 1 2 0 1 1 0 1 1-2 0\"></path>\n\t\t\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t\t<ibm-tabs [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t\t<ibm-tab *ngFor=\"let item of data; let i = index;\" [heading]=\"customTabs\" [context]=\"item\">Tab Content {{i + 1}}</ibm-tab>\n\t\t\t\t<ibm-tab [heading]=\"iconTab\">Tab Content Custom</ibm-tab>\n\t\t\t</ibm-tabs>\n\t\t`,\n    props: {\n      followFocus: boolean('followFocus', true),\n      isNavigation: boolean('isNavigation', false),\n      data: [{ name: 'one' }, { name: 'two' }, { name: 'three' }],\n    },\n  }))\n  .add('Width before and after content', () => ({\n    template: `\n\t\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">before</div>\n\t\t\t<ibm-tabs [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t\t<ibm-tab heading=\"one\">foo</ibm-tab>\n\t\t\t\t<ibm-tab heading=\"two\">bar</ibm-tab>\n\t\t\t\t<span before>content before</span>\n\t\t\t</ibm-tabs>\n\t\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">after</div>\n\t\t\t<ibm-tabs [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t\t<ibm-tab heading=\"one\">foo</ibm-tab>\n\t\t\t\t<ibm-tab heading=\"two\">bar</ibm-tab>\n\t\t\t\t<span after>content after</span>\n\t\t\t</ibm-tabs>\n\t\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">both</div>\n\t\t\t<ibm-tabs [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t\t<ibm-tab heading=\"one\">foo</ibm-tab>\n\t\t\t\t<ibm-tab heading=\"two\">bar</ibm-tab>\n\t\t\t\t<span before>content before</span>\n\t\t\t\t<span after>content after</span>\n\t\t\t</ibm-tabs>\n\t\t`,\n    props: {\n      followFocus: boolean('followFocus', true),\n      isNavigation: boolean('isNavigation', false),\n    },\n  }))\n  .add('Skeleton', () => ({\n    template: `\n\t\t\t<ibm-tabs skeleton=\"true\">\n\t\t\t\t<ibm-tab></ibm-tab>\n\t\t\t\t<ibm-tab></ibm-tab>\n\t\t\t</ibm-tabs>\n\t\t`,\n  }));\n";
+var __ADDS_MAP__ = { "tabs--skeleton": { "startLoc": { "col": 7, "line": 79 }, "endLoc": { "col": 4, "line": 86 } }, "tabs--width-before-and-after-content": { "startLoc": { "col": 7, "line": 52 }, "endLoc": { "col": 4, "line": 78 } }, "tabs--with-template": { "startLoc": { "col": 7, "line": 25 }, "endLoc": { "col": 4, "line": 51 } }, "tabs--basic": { "startLoc": { "col": 7, "line": 13 }, "endLoc": { "col": 4, "line": 24 } } };
 
 
 
@@ -19334,6 +19342,13 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Tabs", mod
             { name: "three" }
         ]
     }
+}); })
+    .add("Width before and after content", function () { return ({
+    template: "\n\t\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">before</div>\n\t\t\t<ibm-tabs [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t\t<ibm-tab heading=\"one\">foo</ibm-tab>\n\t\t\t\t<ibm-tab heading=\"two\">bar</ibm-tab>\n\t\t\t\t<span before>content before</span>\n\t\t\t</ibm-tabs>\n\t\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">after</div>\n\t\t\t<ibm-tabs [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t\t<ibm-tab heading=\"one\">foo</ibm-tab>\n\t\t\t\t<ibm-tab heading=\"two\">bar</ibm-tab>\n\t\t\t\t<span after>content after</span>\n\t\t\t</ibm-tabs>\n\t\t\t<div style=\"font-weight: 600; padding-bottom: 10px; padding-top: 20px;\">both</div>\n\t\t\t<ibm-tabs [followFocus]=\"followFocus\" [isNavigation]=\"isNavigation\">\n\t\t\t\t<ibm-tab heading=\"one\">foo</ibm-tab>\n\t\t\t\t<ibm-tab heading=\"two\">bar</ibm-tab>\n\t\t\t\t<span before>content before</span>\n\t\t\t\t<span after>content after</span>\n\t\t\t</ibm-tabs>\n\t\t",
+    props: {
+        followFocus: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["boolean"])("followFocus", true),
+        isNavigation: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["boolean"])("isNavigation", false)
+    }
 }); })
     .add("Skeleton", function () { return ({
     template: "\n\t\t\t<ibm-tabs skeleton=\"true\">\n\t\t\t\t<ibm-tab></ibm-tab>\n\t\t\t\t<ibm-tab></ibm-tab>\n\t\t\t</ibm-tabs>\n\t\t"
@@ -19379,7 +19394,12 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
 var TagFilter = /** @class */ (function (_super) {
     __extends(TagFilter, _super);
     function TagFilter() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        /**
+         * Function for close/delete the tag
+         */
+        _this.close = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
+        return _this;
     }
     Object.defineProperty(TagFilter.prototype, "attrClass", {
         get: function () {
@@ -19388,6 +19408,10 @@ var TagFilter = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])(),
+        __metadata("design:type", Object)
+    ], TagFilter.prototype, "close", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostBinding"])("attr.class"),
         __metadata("design:type", Object),
@@ -19396,7 +19420,7 @@ var TagFilter = /** @class */ (function (_super) {
     TagFilter = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-tag-filter",
-            template: "\n\t\t<ng-content></ng-content>\n\t\t<svg\n\t\t\tfocusable=\"false\"\n\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\tstyle=\"will-change: transform;\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\taria-label=\"Clear filter\"\n\t\t\twidth=\"16\"\n\t\t\theight=\"16\"\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\trole=\"img\">\n\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t</svg>\n\t"
+            template: "\n\t\t<ng-content></ng-content>\n\t\t<svg\n\t\t\t(click)=\"close.emit()\"\n\t\t\tfocusable=\"false\"\n\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\tstyle=\"will-change: transform;\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\taria-label=\"Clear filter\"\n\t\t\twidth=\"16\"\n\t\t\theight=\"16\"\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\trole=\"img\">\n\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t</svg>\n\t"
         })
     ], TagFilter);
     return TagFilter;
@@ -20716,6 +20740,10 @@ var Toggle = /** @class */ (function (_super) {
         __metadata("design:type", String),
         __metadata("design:paramtypes", [String])
     ], Toggle.prototype, "onText", null);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Input"])(),
+        __metadata("design:type", String)
+    ], Toggle.prototype, "label", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Input"])(),
         __metadata("design:type", String)
@@ -20731,7 +20759,7 @@ var Toggle = /** @class */ (function (_super) {
     Toggle = Toggle_1 = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Component"])({
             selector: "ibm-toggle",
-            template: "\n\t\t<input\n\t\t\tclass=\"bx--toggle\"\n\t\t\ttype=\"checkbox\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--toggle--small': size === 'sm',\n\t\t\t\t'bx--skeleton': skeleton\n\t\t\t}\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[name]=\"name\"\n\t\t\t[required]=\"required\"\n\t\t\t[checked]=\"checked\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[attr.aria-checked]=\"checked\"\n\t\t\t(change)=\"onChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t<label\n\t\t\tclass=\"bx--toggle__label\"\n\t\t\t[for]=\"id\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--skeleton': skeleton\n\t\t\t}\">\n\t\t\t<span class=\"bx--toggle__text--left\">{{(!skeleton ? offText : null) | async }}</span>\n\t\t\t<span class=\"bx--toggle__appearance\">\n\t\t\t\t<svg *ngIf=\"size === 'sm'\" class=\"bx--toggle__check\" width=\"6px\" height=\"5px\" viewBox=\"0 0 6 5\">\n\t\t\t\t\t<path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\"/>\n\t\t\t\t</svg>\n\t\t\t</span>\n\t\t\t<span class=\"bx--toggle__text--right\">{{(!skeleton ? onText : null) | async}}</span>\n\t\t</label>\n\t",
+            template: "\n\t\t<div *ngIf=\"label\" class=\"bx--label\" [id]=\"ariaLabelledby\">{{label}}</div>\n\t\t<input\n\t\t\tclass=\"bx--toggle\"\n\t\t\ttype=\"checkbox\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--toggle--small': size === 'sm',\n\t\t\t\t'bx--skeleton': skeleton\n\t\t\t}\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[name]=\"name\"\n\t\t\t[required]=\"required\"\n\t\t\t[checked]=\"checked\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t[attr.aria-checked]=\"checked\"\n\t\t\t(change)=\"onChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t<label\n\t\t\tclass=\"bx--toggle__label\"\n\t\t\t[for]=\"id\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--skeleton': skeleton\n\t\t\t}\">\n\t\t\t<span class=\"bx--toggle__text--left\">{{(!skeleton ? offText : null) | async }}</span>\n\t\t\t<span class=\"bx--toggle__appearance\">\n\t\t\t\t<svg *ngIf=\"size === 'sm'\" class=\"bx--toggle__check\" width=\"6px\" height=\"5px\" viewBox=\"0 0 6 5\">\n\t\t\t\t\t<path d=\"M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z\"/>\n\t\t\t\t</svg>\n\t\t\t</span>\n\t\t\t<span class=\"bx--toggle__text--right\">{{(!skeleton ? onText : null) | async}}</span>\n\t\t</label>\n\t",
             providers: [
                 {
                     provide: _angular_forms__WEBPACK_IMPORTED_MODULE_2__["NG_VALUE_ACCESSOR"],
@@ -20824,8 +20852,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__);
 /* harmony import */ var ___WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../ */ "./src/index.ts");
 var withStorySource = __webpack_require__(/*! @storybook/addon-storysource */ "./node_modules/@storybook/addon-storysource/dist/index.js").withStorySource;
-var __STORY__ = "import { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { withKnobs, boolean, select } from '@storybook/addon-knobs/angular';\n\nimport { ToggleModule } from '../';\n\nstoriesOf('Toggle', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [ToggleModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t\t<ibm-toggle [disabled]=\"disabled\" [checked]=\"checked\" [size]=\"size\"></ibm-toggle>\n\t\t`,\n    props: {\n      disabled: boolean('disabled', false),\n      checked: boolean('checked', false),\n      size: select('size', ['md', 'sm'], 'md'),\n    },\n  }))\n  .add('Skeleton', () => ({\n    template: `\n\t\t\t<ibm-toggle skeleton=\"true\"></ibm-toggle>\n\t\t\t&nbsp;\n\t\t\t<ibm-toggle skeleton=\"true\" size=\"sm\"></ibm-toggle>\n\t\t`,\n  }));\n";
-var __ADDS_MAP__ = { "toggle--skeleton": { "startLoc": { "col": 7, "line": 23 }, "endLoc": { "col": 4, "line": 29 } }, "toggle--basic": { "startLoc": { "col": 7, "line": 13 }, "endLoc": { "col": 4, "line": 22 } } };
+var __STORY__ = "import { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { withKnobs, boolean, select, text } from '@storybook/addon-knobs/angular';\n\nimport { ToggleModule } from '../';\n\nstoriesOf('Toggle', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [ToggleModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t\t<ibm-toggle\n\t\t\t\t[label]=\"labelText\"\n\t\t\t\t[onText]=\"onText\"\n\t\t\t\t[offText]=\"offText\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[checked]=\"checked\"\n\t\t\t\t[size]=\"size\">\n\t\t\t</ibm-toggle>\n\t\t`,\n    props: {\n      disabled: boolean('Disabled', false),\n      checked: boolean('Checked', false),\n      size: select('Size', ['md', 'sm'], 'md'),\n      labelText: text('Label text', ''),\n      onText: text('On text', 'On'),\n      offText: text('Off text', 'Off'),\n    },\n  }))\n  .add('Skeleton', () => ({\n    template: `\n\t\t\t<ibm-toggle skeleton=\"true\"></ibm-toggle>\n\t\t\t&nbsp;\n\t\t\t<ibm-toggle skeleton=\"true\" size=\"sm\"></ibm-toggle>\n\t\t`,\n  }));\n";
+var __ADDS_MAP__ = { "toggle--skeleton": { "startLoc": { "col": 7, "line": 33 }, "endLoc": { "col": 4, "line": 39 } }, "toggle--basic": { "startLoc": { "col": 7, "line": 13 }, "endLoc": { "col": 4, "line": 32 } } };
 
 
 
@@ -20834,11 +20862,14 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Toggle", m
 }))
     .addDecorator(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["withKnobs"])
     .add("Basic", function () { return ({
-    template: "\n\t\t\t<ibm-toggle [disabled]=\"disabled\" [checked]=\"checked\" [size]=\"size\"></ibm-toggle>\n\t\t",
+    template: "\n\t\t\t<ibm-toggle\n\t\t\t\t[label]=\"labelText\"\n\t\t\t\t[onText]=\"onText\"\n\t\t\t\t[offText]=\"offText\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[checked]=\"checked\"\n\t\t\t\t[size]=\"size\">\n\t\t\t</ibm-toggle>\n\t\t",
     props: {
-        disabled: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["boolean"])("disabled", false),
-        checked: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["boolean"])("checked", false),
-        size: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["select"])("size", ["md", "sm"], "md")
+        disabled: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["boolean"])("Disabled", false),
+        checked: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["boolean"])("Checked", false),
+        size: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["select"])("Size", ["md", "sm"], "md"),
+        labelText: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["text"])("Label text", ""),
+        onText: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["text"])("On text", "On"),
+        offText: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["text"])("Off text", "Off")
     }
 }); })
     .add("Skeleton", function () { return ({
@@ -21692,4 +21723,4 @@ module.exports = __webpack_require__(/*! /home/travis/build/IBM/carbon-component
 /***/ })
 
 },[[0,"runtime~main","vendors~main"]]]);
-//# sourceMappingURL=main.30b13c55e055554fdaac.bundle.js.map
+//# sourceMappingURL=main.cc3329d0f31a1601a8eb.bundle.js.map