carbon-components-angular 3.8.0 → 3.9.3

package/docs/storybook/{main.56858f6c72e70f546e4c.bundle.js → main.e71ec014aa45dc1d6679.bundle.js}

@@ -1185,6 +1185,10 @@ var Checkbox = /** @class */ (function () {
          * Set to `true` for a loading checkbox.
          */
         this.skeleton = false;
+        /**
+         * Set to `true` to hide the checkbox labels.
+         */
+        this.hideLabel = false;
         /**
          * The unique id for the checkbox component.
          */
@@ -1404,6 +1408,10 @@ var Checkbox = /** @class */ (function () {
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
     ], Checkbox.prototype, "skeleton", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], Checkbox.prototype, "hideLabel", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", String)
@@ -1463,7 +1471,7 @@ var Checkbox = /** @class */ (function () {
     Checkbox = Checkbox_1 = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-checkbox",
-            template: "\n\t\t<input\n\t\t\t#inputCheckbox\n\t\t\tclass=\"bx--checkbox\"\n\t\t\ttype=\"checkbox\"\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[indeterminate]=\"indeterminate\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t[attr.aria-checked]=\"(indeterminate ? 'mixed' : checked)\"\n\t\t\t(change)=\"onChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"bx--checkbox-label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<ng-content></ng-content>\n\t\t</label>\n\t",
+            template: "\n\t\t<input\n\t\t\t#inputCheckbox\n\t\t\tclass=\"bx--checkbox\"\n\t\t\ttype=\"checkbox\"\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[indeterminate]=\"indeterminate\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\t[attr.aria-labelledby]=\"ariaLabelledby\"\n\t\t\t[attr.aria-checked]=\"(indeterminate ? 'mixed' : checked)\"\n\t\t\t(change)=\"onChange($event)\"\n\t\t\t(click)=\"onClick($event)\">\n\t\t<label\n\t\t\t[for]=\"id\"\n\t\t\tclass=\"bx--checkbox-label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<span [ngClass]=\"{'bx--visually-hidden' : hideLabel}\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</span>\n\t\t</label>\n\t",
             providers: [
                 {
                     provide: _angular_forms__WEBPACK_IMPORTED_MODULE_1__["NG_VALUE_ACCESSOR"],
@@ -1556,8 +1564,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var ___WEBPACK_IMPORTED_MODULE_3__ = __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 { action } from '@storybook/addon-actions';\nimport { withKnobs, boolean } from '@storybook/addon-knobs/angular';\n\nimport { CheckboxModule, DocumentationModule } from '../';\n\nstoriesOf('Checkbox', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [CheckboxModule, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t<fieldset class=\"bx--fieldset\">\n\t\t\t<legend class=\"bx--label\">Checkbox</legend>\n\t\t\t<ibm-checkbox\n\t\t\t\tchecked=\"true\"\n\t\t\t\t(change)=\"onChange($event)\">\n\t\t\t\tCheckbox\n\t\t\t</ibm-checkbox>\n\t\t\t<ibm-checkbox\n\t\t\t\tindeterminate=\"true\"\n\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t(indeterminateChange)=\"onIndeterminateChange($event)\">\n\t\t\t\tIndeterminate checkbox\n\t\t\t</ibm-checkbox>\n\t\t\t<ibm-checkbox\n\t\t\t\tdisabled=\"true\"\n\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t(indeterminateChange)=\"onIndeterminateChange($event)\">\n\t\t\t\tDisabled checkbox\n\t\t\t</ibm-checkbox>\n\t\t</fieldset>\n\t`,\n    props: {\n      onChange: action('Change fired!'),\n      onIndeterminateChange: action('Indeterminate change fired!'),\n    },\n  }))\n  .add('Skeleton', () => ({\n    template: `<ibm-checkbox skeleton=\"true\"></ibm-checkbox>`,\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t<ibm-documentation src=\"documentation/components/Checkbox.html\"></ibm-documentation>\n\t`,\n  }));\n";
-var __ADDS_MAP__ = { "checkbox--documentation": { "startLoc": { "col": 7, "line": 45 }, "endLoc": { "col": 4, "line": 49 } }, "checkbox--skeleton": { "startLoc": { "col": 7, "line": 42 }, "endLoc": { "col": 4, "line": 44 } }, "checkbox--basic": { "startLoc": { "col": 7, "line": 14 }, "endLoc": { "col": 4, "line": 41 } } };
+var __STORY__ = "import { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { action } from '@storybook/addon-actions';\nimport { withKnobs, boolean, text } from '@storybook/addon-knobs/angular';\n\nimport { CheckboxModule, DocumentationModule } from '../';\n\nstoriesOf('Checkbox', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [CheckboxModule, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t<fieldset class=\"bx--fieldset\">\n\t\t\t<legend class=\"bx--label\">{{label}}</legend>\n\t\t\t<ibm-checkbox\n\t\t\t\tchecked=\"true\"\n\t\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t\t(change)=\"onChange($event)\">\n\t\t\t\tCheckbox\n\t\t\t</ibm-checkbox>\n\t\t\t<ibm-checkbox\n\t\t\t\tindeterminate=\"true\"\n\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t\t(indeterminateChange)=\"onIndeterminateChange($event)\">\n\t\t\t\tIndeterminate checkbox\n\t\t\t</ibm-checkbox>\n\t\t\t<ibm-checkbox\n\t\t\t\tdisabled=\"true\"\n\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t\t(indeterminateChange)=\"onIndeterminateChange($event)\">\n\t\t\t\tDisabled checkbox\n\t\t\t</ibm-checkbox>\n\t\t</fieldset>\n\t`,\n    props: {\n      onChange: action('Change fired!'),\n      onIndeterminateChange: action('Indeterminate change fired!'),\n      label: text('Label text', 'Checkbox'),\n      hideLabel: boolean('Hide labels', false),\n    },\n  }))\n  .add('Skeleton', () => ({\n    template: `<ibm-checkbox skeleton=\"true\"></ibm-checkbox>`,\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t<ibm-documentation src=\"documentation/components/Checkbox.html\"></ibm-documentation>\n\t`,\n  }));\n";
+var __ADDS_MAP__ = { "checkbox--documentation": { "startLoc": { "col": 7, "line": 50 }, "endLoc": { "col": 4, "line": 54 } }, "checkbox--skeleton": { "startLoc": { "col": 7, "line": 47 }, "endLoc": { "col": 4, "line": 49 } }, "checkbox--basic": { "startLoc": { "col": 7, "line": 14 }, "endLoc": { "col": 4, "line": 46 } } };
 
 
 
@@ -1567,10 +1575,12 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Checkbox",
 }))
     .addDecorator(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["withKnobs"])
     .add("Basic", function () { return ({
-    template: "\n\t\t<fieldset class=\"bx--fieldset\">\n\t\t\t<legend class=\"bx--label\">Checkbox</legend>\n\t\t\t<ibm-checkbox\n\t\t\t\tchecked=\"true\"\n\t\t\t\t(change)=\"onChange($event)\">\n\t\t\t\tCheckbox\n\t\t\t</ibm-checkbox>\n\t\t\t<ibm-checkbox\n\t\t\t\tindeterminate=\"true\"\n\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t(indeterminateChange)=\"onIndeterminateChange($event)\">\n\t\t\t\tIndeterminate checkbox\n\t\t\t</ibm-checkbox>\n\t\t\t<ibm-checkbox\n\t\t\t\tdisabled=\"true\"\n\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t(indeterminateChange)=\"onIndeterminateChange($event)\">\n\t\t\t\tDisabled checkbox\n\t\t\t</ibm-checkbox>\n\t\t</fieldset>\n\t",
+    template: "\n\t\t<fieldset class=\"bx--fieldset\">\n\t\t\t<legend class=\"bx--label\">{{label}}</legend>\n\t\t\t<ibm-checkbox\n\t\t\t\tchecked=\"true\"\n\t\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t\t(change)=\"onChange($event)\">\n\t\t\t\tCheckbox\n\t\t\t</ibm-checkbox>\n\t\t\t<ibm-checkbox\n\t\t\t\tindeterminate=\"true\"\n\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t\t(indeterminateChange)=\"onIndeterminateChange($event)\">\n\t\t\t\tIndeterminate checkbox\n\t\t\t</ibm-checkbox>\n\t\t\t<ibm-checkbox\n\t\t\t\tdisabled=\"true\"\n\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t\t(indeterminateChange)=\"onIndeterminateChange($event)\">\n\t\t\t\tDisabled checkbox\n\t\t\t</ibm-checkbox>\n\t\t</fieldset>\n\t",
     props: {
         onChange: Object(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__["action"])("Change fired!"),
-        onIndeterminateChange: Object(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__["action"])("Indeterminate change fired!")
+        onIndeterminateChange: Object(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__["action"])("Indeterminate change fired!"),
+        label: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Label text", "Checkbox"),
+        hideLabel: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("Hide labels", false)
     }
 }); })
     .add("Skeleton", function () { return ({
@@ -2046,6 +2056,7 @@ var ComboBox = /** @class */ (function () {
      */
     function ComboBox(elementRef) {
         this.elementRef = elementRef;
+        this.id = "dropdown-" + ComboBox_1.comboBoxCount++;
         /**
          * List of items to fill the content with.
          *
@@ -2130,7 +2141,7 @@ var ComboBox = /** @class */ (function () {
         this.submit = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
         /** emits an empty event when the menu is closed */
         this.close = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
-        this.class = "bx--combo-box bx--list-box";
+        this.hostClass = true;
         this.role = "combobox";
         this.display = "block";
         this.open = false;
@@ -2154,11 +2165,6 @@ var ComboBox = /** @class */ (function () {
             this.updateSelected();
         }
     };
-    ComboBox.prototype.ngOnInit = function () {
-        if (this.type === "multi") {
-            this.class = "bx--multi-select bx--combo-box bx--list-box";
-        }
-    };
     /**
      * Sets initial state that depends on child components
      * Subscribes to select events and handles focus/filtering/initial list updates
@@ -2354,6 +2360,9 @@ var ComboBox = /** @class */ (function () {
             }
         });
     };
+    ComboBox.prototype.isTemplate = function (value) {
+        return value instanceof _angular_core__WEBPACK_IMPORTED_MODULE_0__["TemplateRef"];
+    };
     ComboBox.prototype.updateSelected = function () {
         var selected = this.view.getSelected();
         if (selected) {
@@ -2366,7 +2375,12 @@ var ComboBox = /** @class */ (function () {
             }
         }
     };
-    var ComboBox_1, _a, _b, _c, _d, _e, _f;
+    var ComboBox_1, _a, _b, _c, _d, _e, _f, _g, _h;
+    ComboBox.comboBoxCount = 0;
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], ComboBox.prototype, "id", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", typeof (_a = typeof Array !== "undefined" && Array) === "function" && _a || Object)
@@ -2383,6 +2397,14 @@ var ComboBox = /** @class */ (function () {
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", String)
     ], ComboBox.prototype, "size", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], ComboBox.prototype, "label", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], ComboBox.prototype, "helperText", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostBinding"])("attr.aria-disabled"), Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
@@ -2393,24 +2415,24 @@ var ComboBox = /** @class */ (function () {
     ], ComboBox.prototype, "selected", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])(),
-        __metadata("design:type", typeof (_b = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]) === "function" && _b || Object)
+        __metadata("design:type", typeof (_d = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]) === "function" && _d || Object)
     ], ComboBox.prototype, "submit", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])(),
-        __metadata("design:type", typeof (_c = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]) === "function" && _c || Object)
+        __metadata("design:type", typeof (_e = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]) === "function" && _e || Object)
     ], ComboBox.prototype, "close", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ContentChild"])(_dropdown_abstract_dropdown_view_class__WEBPACK_IMPORTED_MODULE_1__["AbstractDropdownView"]),
-        __metadata("design:type", typeof (_d = typeof _dropdown_abstract_dropdown_view_class__WEBPACK_IMPORTED_MODULE_1__["AbstractDropdownView"] !== "undefined" && _dropdown_abstract_dropdown_view_class__WEBPACK_IMPORTED_MODULE_1__["AbstractDropdownView"]) === "function" && _d || Object)
+        __metadata("design:type", typeof (_f = typeof _dropdown_abstract_dropdown_view_class__WEBPACK_IMPORTED_MODULE_1__["AbstractDropdownView"] !== "undefined" && _dropdown_abstract_dropdown_view_class__WEBPACK_IMPORTED_MODULE_1__["AbstractDropdownView"]) === "function" && _f || Object)
     ], ComboBox.prototype, "view", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ViewChild"])("dropdownMenu"),
         __metadata("design:type", Object)
     ], ComboBox.prototype, "dropdownMenu", void 0);
     __decorate([
-        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostBinding"])("class"),
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostBinding"])("class.bx--list-box__wrapper"),
         __metadata("design:type", Object)
-    ], ComboBox.prototype, "class", void 0);
+    ], ComboBox.prototype, "hostClass", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostBinding"])("attr.role"),
         __metadata("design:type", Object)
@@ -2422,13 +2444,13 @@ var ComboBox = /** @class */ (function () {
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostListener"])("keydown", ["$event"]),
         __metadata("design:type", Function),
-        __metadata("design:paramtypes", [typeof (_e = typeof KeyboardEvent !== "undefined" && KeyboardEvent) === "function" && _e || Object]),
+        __metadata("design:paramtypes", [typeof (_g = typeof KeyboardEvent !== "undefined" && KeyboardEvent) === "function" && _g || Object]),
         __metadata("design:returntype", void 0)
     ], ComboBox.prototype, "hostkeys", null);
     ComboBox = ComboBox_1 = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-combo-box",
-            template: "\n\t\t<div\n\t\t\t[attr.aria-expanded]=\"open\"\n\t\t\trole=\"button\"\n\t\t\tclass=\"bx--list-box__field\"\n\t\t\ttabindex=\"0\"\n\t\t\ttype=\"button\"\n\t\t\taria-label=\"close menu\"\n\t\t\taria-haspopup=\"true\"\n\t\t\t(click)=\"toggleDropdown()\">\n\t\t\t<div\n\t\t\t\t*ngIf=\"type === 'multi' && pills.length > 0\"\n\t\t\t\t(click)=\"clearSelected()\"\n\t\t\t\trole=\"button\"\n\t\t\t\tclass=\"bx--list-box__selection bx--list-box__selection--multi\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\ttitle=\"Clear all selected items\">\n\t\t\t\t{{ pills.length }}\n\t\t\t\t<svg\n\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\twidth=\"16\"\n\t\t\t\t\theight=\"16\"\n\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\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\t\t</svg>\n\t\t\t</div>\n\t\t\t<input\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(keyup)=\"onSearch($event.target.value)\"\n\t\t\t\t[value]=\"selectedValue\"\n\t\t\t\tclass=\"bx--text-input\"\n\t\t\t\trole=\"combobox\"\n\t\t\t\taria-label=\"ListBox input field\"\n\t\t\t\tautocomplete=\"off\"\n\t\t\t\t[placeholder]=\"placeholder\"/>\n\t\t\t\t<ibm-icon-chevron-down16\n\t\t\t\t\t[ngClass]=\"{'bx--list-box__menu-icon--open': open}\"\n\t\t\t\t\tclass=\"bx--list-box__menu-icon\"\n\t\t\t\t\tariaLabel=\"Close menu\">\n\t\t\t\t</ibm-icon-chevron-down16>\n\t\t</div>\n\t\t<div\n\t\t\t#dropdownMenu\n\t\t\t*ngIf=\"open\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t",
+            template: "\n\t\t<label [for]=\"id\" class=\"bx--label\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t</label>\n\t\t<div *ngIf=\"helperText\" class=\"bx--form__helper-text\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\t\t<div\n\t\t\tclass=\"bx--combo-box bx--list-box\"\n\t\t\t[ngClass]=\"{'bx--multi-select' : type === 'multi'}\">\n\t\t\t<div\n\t\t\t\t[attr.aria-expanded]=\"open\"\n\t\t\t\trole=\"button\"\n\t\t\t\tclass=\"bx--list-box__field\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\ttype=\"button\"\n\t\t\t\taria-label=\"close menu\"\n\t\t\t\taria-haspopup=\"true\"\n\t\t\t\t(click)=\"toggleDropdown()\">\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"type === 'multi' && pills.length > 0\"\n\t\t\t\t\t(click)=\"clearSelected()\"\n\t\t\t\t\trole=\"button\"\n\t\t\t\t\tclass=\"bx--list-box__selection bx--list-box__selection--multi\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\ttitle=\"Clear all selected items\">\n\t\t\t\t\t{{ pills.length }}\n\t\t\t\t\t<svg\n\t\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\twidth=\"16\"\n\t\t\t\t\t\theight=\"16\"\n\t\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\t\taria-hidden=\"true\">\n\t\t\t\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\t\t\t</svg>\n\t\t\t\t</div>\n\t\t\t\t<input\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t(keyup)=\"onSearch($event.target.value)\"\n\t\t\t\t\t[value]=\"selectedValue\"\n\t\t\t\t\tclass=\"bx--text-input\"\n\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\taria-label=\"ListBox input field\"\n\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t[placeholder]=\"placeholder\"/>\n\t\t\t\t\t<ibm-icon-chevron-down16\n\t\t\t\t\t\t[ngClass]=\"{'bx--list-box__menu-icon--open': open}\"\n\t\t\t\t\t\tclass=\"bx--list-box__menu-icon\"\n\t\t\t\t\t\tariaLabel=\"Close menu\">\n\t\t\t\t\t</ibm-icon-chevron-down16>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t#dropdownMenu\n\t\t\t\t*ngIf=\"open\">\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</div>\n\t\t</div>\n\t",
             providers: [
                 {
                     provide: _angular_forms__WEBPACK_IMPORTED_MODULE_2__["NG_VALUE_ACCESSOR"],
@@ -2437,7 +2459,7 @@ var ComboBox = /** @class */ (function () {
                 }
             ]
         }),
-        __metadata("design:paramtypes", [typeof (_f = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _f || Object])
+        __metadata("design:paramtypes", [typeof (_h = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _h || Object])
     ], ComboBox);
     return ComboBox;
 }());
@@ -2524,8 +2546,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var ___WEBPACK_IMPORTED_MODULE_3__ = __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 { action } from '@storybook/addon-actions';\nimport { withKnobs, boolean, object } from '@storybook/addon-knobs/angular';\n\nimport { ComboBoxModule, DocumentationModule } from '../';\n\nstoriesOf('Combobox', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [ComboBoxModule, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t\t<ibm-combo-box [items]=\"items\" (selected)=\"selected($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n    props: {\n      items: [\n        {\n          content: 'one',\n        },\n        {\n          content: 'two',\n        },\n        {\n          content: 'three',\n        },\n        {\n          content: 'four',\n        },\n      ],\n      selected: action('selection changed'),\n    },\n  }))\n  .add('Multi-select', () => ({\n    template: `\n\t\t\t<ibm-combo-box [items]=\"items\" type=\"multi\" (selected)=\"selected($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n    props: {\n      items: [\n        {\n          content: 'one',\n        },\n        {\n          content: 'two',\n        },\n        {\n          content: 'three',\n        },\n        {\n          content: 'four',\n        },\n      ],\n      selected: action('selection changed'),\n    },\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/ComboBox.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
-var __ADDS_MAP__ = { "combobox--documentation": { "startLoc": { "col": 7, "line": 62 }, "endLoc": { "col": 4, "line": 66 } }, "combobox--multi-select": { "startLoc": { "col": 7, "line": 38 }, "endLoc": { "col": 4, "line": 61 } }, "combobox--basic": { "startLoc": { "col": 7, "line": 14 }, "endLoc": { "col": 4, "line": 37 } } };
+var __STORY__ = "import { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { action } from '@storybook/addon-actions';\nimport { withKnobs, object, text } from '@storybook/addon-knobs/angular';\n\nimport { ComboBoxModule, DocumentationModule } from '../';\n\nstoriesOf('Combobox', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [ComboBoxModule, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t\t<ibm-combo-box\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[items]=\"items\"\n\t\t\t\t(selected)=\"selected($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n    props: {\n      label: text('Label', 'ComboBox label'),\n      helperText: text('Helper text', 'Optional helper text.'),\n      items: [\n        {\n          content: 'one',\n        },\n        {\n          content: 'two',\n        },\n        {\n          content: 'three',\n        },\n        {\n          content: 'four',\n        },\n      ],\n      selected: action('selection changed'),\n    },\n  }))\n  .add('Multi-select', () => ({\n    template: `\n\t\t\t<ibm-combo-box\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[items]=\"items\"\n\t\t\t\ttype=\"multi\"\n\t\t\t\t(selected)=\"selected($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n    props: {\n      label: text('Label', 'ComboBox label'),\n      helperText: text('Helper text', 'Optional helper text.'),\n      items: [\n        {\n          content: 'one',\n        },\n        {\n          content: 'two',\n        },\n        {\n          content: 'three',\n        },\n        {\n          content: 'four',\n        },\n      ],\n      selected: action('selection changed'),\n    },\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/ComboBox.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
+var __ADDS_MAP__ = { "combobox--documentation": { "startLoc": { "col": 7, "line": 75 }, "endLoc": { "col": 4, "line": 79 } }, "combobox--multi-select": { "startLoc": { "col": 7, "line": 44 }, "endLoc": { "col": 4, "line": 74 } }, "combobox--basic": { "startLoc": { "col": 7, "line": 14 }, "endLoc": { "col": 4, "line": 43 } } };
 
 
 
@@ -2539,8 +2561,10 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Combobox",
 }))
     .addDecorator(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["withKnobs"])
     .add("Basic", function () { return ({
-    template: "\n\t\t\t<ibm-combo-box [items]=\"items\" (selected)=\"selected($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t",
+    template: "\n\t\t\t<ibm-combo-box\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[items]=\"items\"\n\t\t\t\t(selected)=\"selected($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t",
     props: {
+        label: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Label", "ComboBox label"),
+        helperText: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Helper text", "Optional helper text."),
         items: [
             {
                 content: "one"
@@ -2559,8 +2583,10 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Combobox",
     }
 }); })
     .add("Multi-select", function () { return ({
-    template: "\n\t\t\t<ibm-combo-box [items]=\"items\" type=\"multi\" (selected)=\"selected($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t",
+    template: "\n\t\t\t<ibm-combo-box\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[items]=\"items\"\n\t\t\t\ttype=\"multi\"\n\t\t\t\t(selected)=\"selected($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t",
     props: {
+        label: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Label", "ComboBox label"),
+        helperText: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Helper text", "Optional helper text."),
         items: [
             {
                 content: "one"
@@ -2889,15 +2915,27 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
 var ContentSwitcher = /** @class */ (function () {
     function ContentSwitcher(elementRef) {
         this.elementRef = elementRef;
-        /**
-         * aria-label for the content switcher. Should be set to something descriptive
-         */
-        this.label = "content switcher";
+        this.ariaLabel = "content switcher";
         /**
          * Emits the activated `ContentSwitcherOption`
          */
         this.selected = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
     }
+    Object.defineProperty(ContentSwitcher.prototype, "label", {
+        get: function () {
+            console.warn("`label` is deprecated (to be removed in next major version). Use `ariaLabel` instead.");
+            return this.ariaLabel;
+        },
+        /**
+         * aria-label for the content switcher. Should be set to something descriptive
+         */
+        set: function (value) {
+            console.warn("`label` is deprecated (to be removed in next major version). Use `ariaLabel` instead.");
+            this.ariaLabel = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
     ContentSwitcher.prototype.ngAfterViewInit = function () {
         var _this = this;
         var firstActive = this.options.find(function (option) { return option.active; });
@@ -2954,10 +2992,15 @@ var ContentSwitcher = /** @class */ (function () {
         }
     };
     var _a, _b, _c;
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", String),
+        __metadata("design:paramtypes", [String])
+    ], ContentSwitcher.prototype, "label", null);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
-    ], ContentSwitcher.prototype, "label", void 0);
+    ], ContentSwitcher.prototype, "ariaLabel", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])(),
         __metadata("design:type", Object)
@@ -2975,7 +3018,7 @@ var ContentSwitcher = /** @class */ (function () {
     ContentSwitcher = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-content-switcher",
-            template: "\n\t\t<div\n\t\t\t[attr.aria-label]=\"label\"\n\t\t\tclass=\"bx--content-switcher\"\n\t\t\trole=\"tablist\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t"
+            template: "\n\t\t<div\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"bx--content-switcher\"\n\t\t\trole=\"tablist\">\n\t\t\t<ng-content></ng-content>\n\t\t</div>\n\t"
         }),
         __metadata("design:paramtypes", [typeof (_c = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _c || Object])
     ], ContentSwitcher);
@@ -3129,7 +3172,7 @@ var DatePickerInput = /** @class */ (function () {
     DatePickerInput.prototype.isTemplate = function (value) {
         return value instanceof _angular_core__WEBPACK_IMPORTED_MODULE_0__["TemplateRef"];
     };
-    var DatePickerInput_1, _a, _b;
+    var DatePickerInput_1, _a, _b, _c;
     DatePickerInput.datePickerCount = 0;
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
@@ -3145,7 +3188,7 @@ var DatePickerInput = /** @class */ (function () {
     ], DatePickerInput.prototype, "hasIcon", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
-        __metadata("design:type", String)
+        __metadata("design:type", Object)
     ], DatePickerInput.prototype, "label", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
@@ -3157,7 +3200,7 @@ var DatePickerInput = /** @class */ (function () {
     ], DatePickerInput.prototype, "pattern", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])(),
-        __metadata("design:type", typeof (_a = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]) === "function" && _a || Object)
+        __metadata("design:type", typeof (_b = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]) === "function" && _b || Object)
     ], DatePickerInput.prototype, "valueChange", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
@@ -3182,7 +3225,7 @@ var DatePickerInput = /** @class */ (function () {
     DatePickerInput = DatePickerInput_1 = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-date-picker-input",
-            template: "\n\t<div class=\"bx--form-item\">\n\t\t<div class=\"bx--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--date-picker--single' : type === 'single',\n\t\t\t\t'bx--date-picker--range' : type === 'range',\n\t\t\t\t'bx--date-picker--light' : theme === 'light',\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"bx--date-picker-container\">\n\t\t\t\t<label [for]=\"id\" class=\"bx--label\">\n\t\t\t\t\t{{label}}\n\t\t\t\t</label>\n\t\t\t\t<ibm-icon-calendar16\n\t\t\t\t\t*ngIf=\"type == 'single'\"\n\t\t\t\t\tdata-date-picker-icon\n\t\t\t\t\tclass=\"bx--date-picker__icon\"\n\t\t\t\t\tdata-open>\n\t\t\t\t</ibm-icon-calendar16>\n\t\t\t\t<input\n\t\t\t\t    #dateInput\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tclass=\"bx--date-picker__input\"\n\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\tdata-date-picker-input\n\t\t\t\t\t[attr.data-input] = \"type == 'single' || type == 'range' ?  '' : null\"\n\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t\t\t(change) = \"valueChange.emit(dateInput.value)\"/>\n\t\t\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<ibm-icon-calendar16\n\t\t\t\t*ngIf= \"type == 'range' && hasIcon\"\n\t\t\t\tdata-date-picker-icon\n\t\t\t\tclass=\"bx--date-picker__icon\"\n\t\t\t\tdata-open>\n\t\t\t</ibm-icon-calendar16>\n\t\t</div>\n\t</div>\n\t"
+            template: "\n\t<div class=\"bx--form-item\">\n\t\t<div class=\"bx--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--date-picker--single' : type === 'single',\n\t\t\t\t'bx--date-picker--range' : type === 'range',\n\t\t\t\t'bx--date-picker--light' : theme === 'light',\n\t\t\t\t'bx--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"bx--date-picker-container\">\n\t\t\t\t<label [for]=\"id\" class=\"bx--label\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<ibm-icon-calendar16\n\t\t\t\t\t*ngIf=\"type == 'single'\"\n\t\t\t\t\tdata-date-picker-icon\n\t\t\t\t\tclass=\"bx--date-picker__icon\"\n\t\t\t\t\tdata-open>\n\t\t\t\t</ibm-icon-calendar16>\n\t\t\t\t<input\n\t\t\t\t    #dateInput\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tclass=\"bx--date-picker__input\"\n\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\tdata-date-picker-input\n\t\t\t\t\t[attr.data-input] = \"type == 'single' || type == 'range' ?  '' : null\"\n\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t\t\t(change) = \"valueChange.emit(dateInput.value)\"/>\n\t\t\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<ibm-icon-calendar16\n\t\t\t\t*ngIf= \"type == 'range' && hasIcon\"\n\t\t\t\tdata-date-picker-icon\n\t\t\t\tclass=\"bx--date-picker__icon\"\n\t\t\t\tdata-open>\n\t\t\t</ibm-icon-calendar16>\n\t\t</div>\n\t</div>\n\t"
         })
     ], DatePickerInput);
     return DatePickerInput;
@@ -3382,7 +3425,7 @@ var DatePicker = /** @class */ (function () {
         var ng2FlatPickrElement = this.elementRef.nativeElement.querySelector(".ng2-flatpickr-input-container");
         ng2FlatPickrElement._flatpickr.destroy();
     };
-    var DatePicker_1, _a, _b, _c, _d;
+    var DatePicker_1, _a, _b, _c, _d, _e;
     DatePicker.datePickerCount = 0;
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
@@ -3394,7 +3437,7 @@ var DatePicker = /** @class */ (function () {
     ], DatePicker.prototype, "dateFormat", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
-        __metadata("design:type", String)
+        __metadata("design:type", Object)
     ], DatePicker.prototype, "label", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
@@ -3414,7 +3457,7 @@ var DatePicker = /** @class */ (function () {
     ], DatePicker.prototype, "id", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
-        __metadata("design:type", typeof (_a = typeof Array !== "undefined" && Array) === "function" && _a || Object)
+        __metadata("design:type", typeof (_b = typeof Array !== "undefined" && Array) === "function" && _b || Object)
     ], DatePicker.prototype, "value", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
@@ -3438,7 +3481,7 @@ var DatePicker = /** @class */ (function () {
     ], DatePicker.prototype, "skeleton", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])(),
-        __metadata("design:type", typeof (_c = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]) === "function" && _c || Object)
+        __metadata("design:type", typeof (_d = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]) === "function" && _d || Object)
     ], DatePicker.prototype, "valueChange", void 0);
     DatePicker = DatePicker_1 = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
@@ -3449,7 +3492,7 @@ var DatePicker = /** @class */ (function () {
             ],
             encapsulation: _angular_core__WEBPACK_IMPORTED_MODULE_0__["ViewEncapsulation"].None
         }),
-        __metadata("design:paramtypes", [typeof (_d = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _d || Object])
+        __metadata("design:paramtypes", [typeof (_e = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _e || Object])
     ], DatePicker);
     return DatePicker;
 }());
@@ -5681,7 +5724,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _carbon_icons_angular_lib_information_filled_16__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @carbon/icons-angular/lib/information--filled/16 */ "./node_modules/@carbon/icons-angular/lib/information--filled/16.js");
 /* harmony import */ var ___WEBPACK_IMPORTED_MODULE_3__ = __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 { action } from '@storybook/addon-actions';\nimport { withKnobs, text, select } from '@storybook/addon-knobs/angular';\n\nimport { InformationFilled16Module } from '@carbon/icons-angular/lib/information--filled/16';\nimport { DialogModule, PlaceholderModule, DocumentationModule } from '../../';\n\nstoriesOf('Tooltip', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [DialogModule, PlaceholderModule, InformationFilled16Module, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t\t<div>\n\t\t\t\t<ng-template #template let-tooltip=\"tooltip\">\n\t\t\t\t\t<p>This is some tooltip text. This box shows the maximum amount of text that should appear inside.\n\t\t\t\t\t\tIf more room is needed please use a modal instead.</p>\n\t\t\t\t\t<div class=\"bx--tooltip__footer\">\n\t\t\t\t\t\t<a href=\"/\" class=\"bx--link\">Learn More</a>\n\t\t\t\t\t\t<button class=\"bx--btn bx--btn--primary\" (click)=\"tooltip.doClose()\">Close</button>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-template>\n\n\t\t\t\t<div class=\"bx--tooltip__label\">\n\t\t\t\t\t{{triggerText}}\n\t\t\t\t\t<span\n\t\t\t\t\t\t[ibmTooltip]=\"template\"\n\t\t\t\t\t\ttrigger=\"click\"\n\t\t\t\t\t\t[placement]=\"placement\">\n\t\t\t\t\t\t<div role=\"button\">\n\t\t\t\t\t\t\t<ibm-icon-information-filled16></ibm-icon-information-filled16>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t<ibm-placeholder></ibm-placeholder>\n\t\t\t</div>\n\t\t`,\n    props: {\n      placement: select('Tooltip direction', ['bottom', 'top', 'left', 'right'], 'bottom'),\n      triggerText: text('Trigger text', 'Tooltip label'),\n    },\n  }))\n  .add('No icon', () => ({\n    template: `\n\t\t\t\t<div>\n\t\t\t\t\t<ng-template #template let-tooltip=\"tooltip\">\n\t\t\t\t\t\t<p>This is some tooltip text. This box shows the maximum amount of text that should appear inside.\n\t\t\t\t\t\t\tIf more room is needed please use a modal instead.</p>\n\t\t\t\t\t\t<div class=\"bx--tooltip__footer\">\n\t\t\t\t\t\t\t<a href=\"/\" class=\"bx--link\">Learn More</a>\n\t\t\t\t\t\t\t<button class=\"bx--btn bx--btn--primary\" (click)=\"tooltip.doClose()\">Close</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ng-template>\n\n\t\t\t\t\t<span\n\t\t\t\t\t\t[ibmTooltip]=\"template\"\n\t\t\t\t\t\ttrigger=\"click\"\n\t\t\t\t\t\t[placement]=\"placement\">\n\t\t\t\t\t\t{{triggerText}}\n\t\t\t\t\t</span>\n\t\t\t\t\t<ibm-placeholder></ibm-placeholder>\n\t\t\t\t</div>\n\t\t\t`,\n    props: {\n      placement: select('Tooltip direction', ['bottom', 'top', 'left', 'right'], 'bottom'),\n      triggerText: text('Trigger text', 'Tooltip label'),\n    },\n  }))\n  .add('Only icon', () => ({\n    template: `\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<ng-template #template let-tooltip=\"tooltip\">\n\t\t\t\t\t\t\t<p>This is some tooltip text. This box shows the maximum amount of text that should appear inside.\n\t\t\t\t\t\t\t\tIf more room is needed please use a modal instead.</p>\n\t\t\t\t\t\t\t<div class=\"bx--tooltip__footer\">\n\t\t\t\t\t\t\t\t<a href=\"/\" class=\"bx--link\">Learn More</a>\n\t\t\t\t\t\t\t\t<button class=\"bx--btn bx--btn--primary\" (click)=\"tooltip.doClose()\">Close</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</ng-template>\n\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t[ibmTooltip]=\"template\"\n\t\t\t\t\t\t\ttrigger=\"click\"\n\t\t\t\t\t\t\t[placement]=\"placement\">\n\t\t\t\t\t\t\t<div role=\"button\" class=\"bx--tooltip__trigger\">\n\t\t\t\t\t\t\t\t<svg focusable=\"false\" aria-label=\"tooltip\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" role=\"img\" style=\"will-change: transform;\">\n\t\t\t\t\t\t\t\t\t<circle cx=\"8\" cy=\"3\" r=\"1\"></circle><circle cx=\"8\" cy=\"8\" r=\"1\"></circle><circle cx=\"8\" cy=\"13\" r=\"1\"></circle>\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<ibm-placeholder></ibm-placeholder>\n\t\t\t\t\t</div>\n\t\t\t\t`,\n    props: {\n      placement: select('Tooltip direction', ['bottom', 'top', 'left', 'right'], 'bottom'),\n    },\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/directives/Tooltip.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
+var __STORY__ = "import { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { action } from '@storybook/addon-actions';\nimport { withKnobs, text, select } from '@storybook/addon-knobs/angular';\n\nimport { InformationFilled16Module } from '@carbon/icons-angular/lib/information--filled/16';\nimport { DialogModule, PlaceholderModule, DocumentationModule } from '../../';\n\nstoriesOf('Tooltip', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [DialogModule, PlaceholderModule, InformationFilled16Module, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t\t<div>\n\t\t\t\t<ng-template #template let-tooltip=\"tooltip\">\n\t\t\t\t\t<p>This is some tooltip text. This box shows the maximum amount of text that should appear inside.\n\t\t\t\t\t\tIf more room is needed please use a modal instead.</p>\n\t\t\t\t\t<div class=\"bx--tooltip__footer\">\n\t\t\t\t\t\t<a href=\"/\" class=\"bx--link\">Learn More</a>\n\t\t\t\t\t\t<button class=\"bx--btn bx--btn--primary\" (click)=\"tooltip.doClose()\">Close</button>\n\t\t\t\t\t</div>\n\t\t\t\t</ng-template>\n\n\t\t\t\t<div class=\"bx--tooltip__label\">\n\t\t\t\t\t{{triggerText}}\n\t\t\t\t\t<span\n\t\t\t\t\t\t[ibmTooltip]=\"template\"\n\t\t\t\t\t\ttrigger=\"click\"\n\t\t\t\t\t\t[placement]=\"placement\">\n\t\t\t\t\t\t<div role=\"button\">\n\t\t\t\t\t\t\t<ibm-icon-information-filled16></ibm-icon-information-filled16>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t<ibm-placeholder></ibm-placeholder>\n\t\t\t</div>\n\t\t`,\n    props: {\n      placement: select('Tooltip direction', ['bottom', 'top', 'left', 'right'], 'bottom'),\n      triggerText: text('Trigger text', 'Tooltip label'),\n    },\n  }))\n  .add('No icon', () => ({\n    template: `\n\t\t\t\t<div>\n\t\t\t\t\t<ng-template #template let-tooltip=\"tooltip\">\n\t\t\t\t\t\t<p>This is some tooltip text. This box shows the maximum amount of text that should appear inside.\n\t\t\t\t\t\t\tIf more room is needed please use a modal instead.</p>\n\t\t\t\t\t\t<div class=\"bx--tooltip__footer\">\n\t\t\t\t\t\t\t<a href=\"/\" class=\"bx--link\">Learn More</a>\n\t\t\t\t\t\t\t<button class=\"bx--btn bx--btn--primary\" (click)=\"tooltip.doClose()\">Close</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ng-template>\n\n\t\t\t\t\t<span\n\t\t\t\t\t\t[ibmTooltip]=\"template\"\n\t\t\t\t\t\ttrigger=\"click\"\n\t\t\t\t\t\t[placement]=\"placement\">\n\t\t\t\t\t\t{{triggerText}}\n\t\t\t\t\t</span>\n\t\t\t\t\t<ibm-placeholder></ibm-placeholder>\n\t\t\t\t</div>\n\t\t\t`,\n    props: {\n      placement: select('Tooltip direction', ['bottom', 'top', 'left', 'right'], 'bottom'),\n      triggerText: text('Trigger text', 'Tooltip label'),\n    },\n  }))\n  .add('Only icon', () => ({\n    template: `\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<ng-template #template let-tooltip=\"tooltip\">\n\t\t\t\t\t\t\t<p>This is some tooltip text. This box shows the maximum amount of text that should appear inside.\n\t\t\t\t\t\t\t\tIf more room is needed please use a modal instead.</p>\n\t\t\t\t\t\t\t<div class=\"bx--tooltip__footer\">\n\t\t\t\t\t\t\t\t<a href=\"/\" class=\"bx--link\">Learn More</a>\n\t\t\t\t\t\t\t\t<button class=\"bx--btn bx--btn--primary\" (click)=\"tooltip.doClose()\">Close</button>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</ng-template>\n\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t[ibmTooltip]=\"template\"\n\t\t\t\t\t\t\ttrigger=\"click\"\n\t\t\t\t\t\t\t[placement]=\"placement\">\n\t\t\t\t\t\t\t<div role=\"button\" class=\"bx--tooltip__trigger\">\n\t\t\t\t\t\t\t\t<svg focusable=\"false\" aria-label=\"tooltip\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" role=\"img\" style=\"will-change: transform;\">\n\t\t\t\t\t\t\t\t\t<circle cx=\"8\" cy=\"3\" r=\"1\"></circle><circle cx=\"8\" cy=\"8\" r=\"1\"></circle><circle cx=\"8\" cy=\"13\" r=\"1\"></circle>\n\t\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<ibm-placeholder></ibm-placeholder>\n\t\t\t\t\t</div>\n\t\t\t\t`,\n    props: {\n      placement: select('Tooltip direction', ['bottom', 'top', 'left', 'right'], 'bottom'),\n    },\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/directives/TooltipDirective.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
 var __ADDS_MAP__ = { "tooltip--documentation": { "startLoc": { "col": 7, "line": 101 }, "endLoc": { "col": 4, "line": 105 } }, "tooltip--only-icon": { "startLoc": { "col": 7, "line": 72 }, "endLoc": { "col": 4, "line": 100 } }, "tooltip--no-icon": { "startLoc": { "col": 7, "line": 46 }, "endLoc": { "col": 4, "line": 71 } }, "tooltip--basic": { "startLoc": { "col": 7, "line": 15 }, "endLoc": { "col": 4, "line": 45 } } };
 
 
@@ -5718,7 +5761,7 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Tooltip",
     }
 }); })
     .add("Documentation", function () { return ({
-    template: "\n\t\t\t<ibm-documentation src=\"documentation/directives/Tooltip.html\"></ibm-documentation>\n\t\t"
+    template: "\n\t\t\t<ibm-documentation src=\"documentation/directives/TooltipDirective.html\"></ibm-documentation>\n\t\t"
 }); });
 
 /* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./../../../node_modules/webpack/buildin/harmony-module.js */ "./node_modules/webpack/buildin/harmony-module.js")(module)))
@@ -6024,6 +6067,7 @@ var Dropdown = /** @class */ (function () {
         this.elementRef = elementRef;
         this.i18n = i18n;
         this.dropdownService = dropdownService;
+        this.id = "dropdown-" + Dropdown_1.dropdownCount++;
         /**
          * Value displayed if no item is selected.
          */
@@ -6087,6 +6131,7 @@ var Dropdown = /** @class */ (function () {
          * Emits event notifying to other classes that the `Dropdown` has been closed (collapsed).
          */
         this.close = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
+        this.hostClass = true;
         /**
          * Set to `true` if the dropdown is closed (not expanded).
          */
@@ -6487,7 +6532,23 @@ var Dropdown = /** @class */ (function () {
         }
         return false;
     };
-    var Dropdown_1, _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    Dropdown.prototype.isTemplate = function (value) {
+        return value instanceof _angular_core__WEBPACK_IMPORTED_MODULE_0__["TemplateRef"];
+    };
+    var Dropdown_1, _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    Dropdown.dropdownCount = 0;
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], Dropdown.prototype, "id", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], Dropdown.prototype, "label", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], Dropdown.prototype, "helperText", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
@@ -6551,19 +6612,19 @@ var Dropdown = /** @class */ (function () {
     ], Dropdown.prototype, "selectedLabel", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])(),
-        __metadata("design:type", typeof (_b = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]) === "function" && _b || Object)
+        __metadata("design:type", typeof (_d = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]) === "function" && _d || Object)
     ], Dropdown.prototype, "selected", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])(),
-        __metadata("design:type", typeof (_c = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]) === "function" && _c || Object)
+        __metadata("design:type", typeof (_e = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]) === "function" && _e || Object)
     ], Dropdown.prototype, "onClose", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])(),
-        __metadata("design:type", typeof (_d = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]) === "function" && _d || Object)
+        __metadata("design:type", typeof (_f = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]) === "function" && _f || Object)
     ], Dropdown.prototype, "close", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ContentChild"])(_abstract_dropdown_view_class__WEBPACK_IMPORTED_MODULE_3__["AbstractDropdownView"]),
-        __metadata("design:type", typeof (_e = typeof _abstract_dropdown_view_class__WEBPACK_IMPORTED_MODULE_3__["AbstractDropdownView"] !== "undefined" && _abstract_dropdown_view_class__WEBPACK_IMPORTED_MODULE_3__["AbstractDropdownView"]) === "function" && _e || Object)
+        __metadata("design:type", typeof (_g = typeof _abstract_dropdown_view_class__WEBPACK_IMPORTED_MODULE_3__["AbstractDropdownView"] !== "undefined" && _abstract_dropdown_view_class__WEBPACK_IMPORTED_MODULE_3__["AbstractDropdownView"]) === "function" && _g || Object)
     ], Dropdown.prototype, "view", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ViewChild"])("dropdownButton"),
@@ -6573,18 +6634,22 @@ var Dropdown = /** @class */ (function () {
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ViewChild"])("dropdownMenu"),
         __metadata("design:type", Object)
     ], Dropdown.prototype, "dropdownMenu", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostBinding"])("class.bx--dropdown__wrapper"),
+        __metadata("design:type", Object)
+    ], Dropdown.prototype, "hostClass", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostListener"])("keydown", ["$event"])
         // "Esc", "Spacebar", "Down", and "Up" are IE specific values
         ,
         __metadata("design:type", Function),
-        __metadata("design:paramtypes", [typeof (_f = typeof KeyboardEvent !== "undefined" && KeyboardEvent) === "function" && _f || Object]),
+        __metadata("design:paramtypes", [typeof (_h = typeof KeyboardEvent !== "undefined" && KeyboardEvent) === "function" && _h || Object]),
         __metadata("design:returntype", void 0)
     ], Dropdown.prototype, "onKeyDown", null);
     Dropdown = Dropdown_1 = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-dropdown",
-            template: "\n\t<div\n\t\tclass=\"bx--dropdown bx--list-box\"\n\t\t[ngClass]=\"{\n\t\t\t'bx--dropdown--light': theme === 'light',\n\t\t\t'bx--list-box--inline': inline,\n\t\t\t'bx--skeleton': skeleton,\n\t\t\t'bx--dropdown--disabled bx--list-box--disabled': disabled\n\t\t}\">\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\t#dropdownButton\n\t\t\tclass=\"bx--list-box__field\"\n\t\t\t[ngClass]=\"{'a': !menuIsClosed}\"\n\t\t\t[attr.aria-expanded]=\"!menuIsClosed\"\n\t\t\t[attr.aria-disabled]=\"disabled\"\n\t\t\t(click)=\"toggleMenu()\"\n\t\t\t(blur)=\"onBlur()\"\n\t\t\t[disabled]=\"disabled\">\n\t\t\t<div\n\t\t\t\t(click)=\"clearSelected()\"\n\t\t\t\t*ngIf=\"type === 'multi' && getSelectedCount() > 0\"\n\t\t\t\tclass=\"bx--list-box__selection--multi\"\n\t\t\t\ttitle=\"Clear all selected items\">\n\t\t\t\t{{getSelectedCount()}}\n\t\t\t\t<svg\n\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\twidth=\"16\"\n\t\t\t\t\theight=\"16\"\n\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\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\t\t</svg>\n\t\t\t</div>\n\t\t\t<span *ngIf=\"isRenderString()\" class=\"bx--list-box__label\">{{getDisplayStringValue() | async}}</span>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"!isRenderString()\"\n\t\t\t\t[ngTemplateOutletContext]=\"getRenderTemplateContext()\"\n\t\t\t\t[ngTemplateOutlet]=\"displayValue\">\n\t\t\t</ng-template>\n\t\t\t<ibm-icon-chevron-down16\n\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\tclass=\"bx--list-box__menu-icon\"\n\t\t\t\t[attr.aria-label]=\"menuButtonLabel\"\n\t\t\t\t[ngClass]=\"{'bx--list-box__menu-icon--open': !menuIsClosed }\">\n\t\t\t</ibm-icon-chevron-down16>\n\t\t</button>\n\t\t<div\n\t\t\t#dropdownMenu\n\t\t\t[ngClass]=\"{\n\t\t\t\t'drop-up': dropUp\n\t\t\t}\">\n\t\t\t<ng-content *ngIf=\"!menuIsClosed\"></ng-content>\n\t\t</div>\n\t</div>\n\t",
+            template: "\n\t<label [for]=\"id\" class=\"bx--label\">\n\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t</label>\n\t<div *ngIf=\"helperText\" class=\"bx--form__helper-text\">\n\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t</div>\n\t<div\n\t\t[id]=\"id\"\n\t\tclass=\"bx--dropdown bx--list-box\"\n\t\t[ngClass]=\"{\n\t\t\t'bx--dropdown--light': theme === 'light',\n\t\t\t'bx--list-box--inline': inline,\n\t\t\t'bx--skeleton': skeleton,\n\t\t\t'bx--dropdown--disabled bx--list-box--disabled': disabled\n\t\t}\">\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\t#dropdownButton\n\t\t\tclass=\"bx--list-box__field\"\n\t\t\t[ngClass]=\"{'a': !menuIsClosed}\"\n\t\t\t[attr.aria-expanded]=\"!menuIsClosed\"\n\t\t\t[attr.aria-disabled]=\"disabled\"\n\t\t\t(click)=\"toggleMenu()\"\n\t\t\t(blur)=\"onBlur()\"\n\t\t\t[disabled]=\"disabled\">\n\t\t\t<div\n\t\t\t\t(click)=\"clearSelected()\"\n\t\t\t\t*ngIf=\"type === 'multi' && getSelectedCount() > 0\"\n\t\t\t\tclass=\"bx--list-box__selection--multi\"\n\t\t\t\ttitle=\"Clear all selected items\">\n\t\t\t\t{{getSelectedCount()}}\n\t\t\t\t<svg\n\t\t\t\t\tfocusable=\"false\"\n\t\t\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\t\t\tstyle=\"will-change: transform;\"\n\t\t\t\t\trole=\"img\"\n\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\twidth=\"16\"\n\t\t\t\t\theight=\"16\"\n\t\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\t\taria-hidden=\"true\">\n\t\t\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\t\t</svg>\n\t\t\t</div>\n\t\t\t<span *ngIf=\"isRenderString()\" class=\"bx--list-box__label\">{{getDisplayStringValue() | async}}</span>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"!isRenderString()\"\n\t\t\t\t[ngTemplateOutletContext]=\"getRenderTemplateContext()\"\n\t\t\t\t[ngTemplateOutlet]=\"displayValue\">\n\t\t\t</ng-template>\n\t\t\t<ibm-icon-chevron-down16\n\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\tclass=\"bx--list-box__menu-icon\"\n\t\t\t\t[attr.aria-label]=\"menuButtonLabel\"\n\t\t\t\t[ngClass]=\"{'bx--list-box__menu-icon--open': !menuIsClosed }\">\n\t\t\t</ibm-icon-chevron-down16>\n\t\t</button>\n\t\t<div\n\t\t\t#dropdownMenu\n\t\t\t[ngClass]=\"{\n\t\t\t\t'drop-up': dropUp\n\t\t\t}\">\n\t\t\t<ng-content *ngIf=\"!menuIsClosed\"></ng-content>\n\t\t</div>\n\t</div>\n\t",
             providers: [
                 {
                     provide: _angular_forms__WEBPACK_IMPORTED_MODULE_1__["NG_VALUE_ACCESSOR"],
@@ -6593,7 +6658,7 @@ var Dropdown = /** @class */ (function () {
                 }
             ]
         }),
-        __metadata("design:paramtypes", [typeof (_g = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _g || Object, typeof (_h = typeof _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_4__["I18n"] !== "undefined" && _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_4__["I18n"]) === "function" && _h || Object, typeof (_j = typeof _dropdown_service__WEBPACK_IMPORTED_MODULE_5__["DropdownService"] !== "undefined" && _dropdown_service__WEBPACK_IMPORTED_MODULE_5__["DropdownService"]) === "function" && _j || Object])
+        __metadata("design:paramtypes", [typeof (_j = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _j || Object, typeof (_k = typeof _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_4__["I18n"] !== "undefined" && _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_4__["I18n"]) === "function" && _k || Object, typeof (_l = typeof _dropdown_service__WEBPACK_IMPORTED_MODULE_5__["DropdownService"] !== "undefined" && _dropdown_service__WEBPACK_IMPORTED_MODULE_5__["DropdownService"]) === "function" && _l || Object])
     ], Dropdown);
     return Dropdown;
 }());
@@ -6836,8 +6901,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var rxjs__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! rxjs */ "./node_modules/rxjs/_esm5/index.js");
 /* harmony import */ var _placeholder_placeholder_module__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../placeholder/placeholder.module */ "./src/placeholder/placeholder.module.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 { action } from '@storybook/addon-actions';\nimport { withKnobs, select, boolean, object, text } from '@storybook/addon-knobs/angular';\n\nimport { DropdownModule, DocumentationModule } from '../';\nimport { of } from 'rxjs';\nimport { PlaceholderModule } from '../placeholder/placeholder.module';\n\nstoriesOf('Dropdown', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [DropdownModule, PlaceholderModule, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t<div style=\"width: 300px\">\n\t\t\t<ibm-dropdown\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\tplaceholder=\"Select\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(onClose)=\"onClose($event)\">\n\t\t\t\t<ibm-dropdown-list [items]=\"items\"></ibm-dropdown-list>\n\t\t\t</ibm-dropdown>\n\t\t</div>\n\t\t<ibm-placeholder></ibm-placeholder>\n\t`,\n    props: {\n      disabled: boolean('disabled', false),\n      items: object('items', [{ content: 'one' }, { content: 'two' }, { content: 'three' }, { content: 'four' }]),\n      selected: action('Selected fired for dropdown'),\n      onClose: action('Dropdown closed'),\n      theme: select('theme', ['dark', 'light'], 'dark'),\n    },\n  }))\n  .add('Multi-select', () => ({\n    template: `\n\t\t<div style=\"width: 300px\">\n\t\t\t<ibm-dropdown\n\t\t\t\ttype=\"multi\"\n\t\t\t\tplaceholder=\"Multi-select\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(onClose)=\"onClose($event)\">\n\t\t\t\t<ibm-dropdown-list [items]=\"items\"></ibm-dropdown-list>\n\t\t\t</ibm-dropdown>\n\t\t</div>\n\t`,\n    props: {\n      disabled: boolean('disabled', false),\n      items: object('items', [{ content: 'one' }, { content: 'two' }, { content: 'three' }, { content: 'four' }]),\n      selected: action('Selected fired for multi-select dropdown'),\n      onClose: action('Multi-select dropdown closed'),\n    },\n  }))\n  .add('With ngModel', () => ({\n    template: `\n\t\t<div style=\"width: 300px\">\n\t\t\t<ibm-dropdown\n\t\t\t\tplaceholder=\"Select\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[(ngModel)]=\"model\"\n\t\t\t\tvalue=\"content\">\n\t\t\t\t<ibm-dropdown-list [items]=\"items\"></ibm-dropdown-list>\n\t\t\t</ibm-dropdown>\n\t\t\t<span>{{model | json}}</span>\n\t\t</div>\n\t\t`,\n    props: {\n      disabled: boolean('disabled', false),\n      items: [{ content: 'one' }, { content: 'two' }, { content: 'three' }, { content: 'four' }],\n      model: null,\n    },\n  }))\n  .add('With Observable items', () => ({\n    template: `\n\t\t<div style=\"width: 300px\">\n\t\t\t<ibm-dropdown\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\tplaceholder=\"Select\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(onClose)=\"onClose($event)\">\n\t\t\t\t<ibm-dropdown-list [items]=\"items\"></ibm-dropdown-list>\n\t\t\t</ibm-dropdown>\n\t\t</div>\n\t`,\n    props: {\n      disabled: boolean('disabled', false),\n      items: of([{ content: 'one' }, { content: 'two' }, { content: 'three' }, { content: 'four' }]),\n      selected: action('Selected fired for dropdown'),\n      onClose: action('Dropdown closed'),\n      theme: select('theme', ['dark', 'light'], 'dark'),\n    },\n  }))\n  .add('With Template', () => ({\n    template: `\n\t\t<div style=\"width: 300px;\">\n\t\t\t<ibm-dropdown\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\tplaceholder=\"Select\"\n\t\t\t\t[displayValue]=\"dropdownRenderer\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(onClose)=\"onClose($event)\">\n\t\t\t\t<ibm-dropdown-list [items]=\"items\" [listTpl]=\"dropdownRenderer\"></ibm-dropdown-list>\n\t\t\t</ibm-dropdown>\n\t\t\t<ng-template #dropdownRenderer let-item=\"item\">\n\t\t\t\t<div *ngIf=\"item && item.content\" style=\"font-size: 14px;\">\n\t\t\t\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\" style=\"will-change: transform;\">\n\t\t\t\t\t\t<path d=\"M9.3 3.7l3.8 3.8H1v1h12.1l-3.8 3.8.7.7 5-5-5-5z\"></path>\n\t\t\t\t\t</svg>\n\t\t\t\t\t&nbsp;{{item.content}}\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t</div>\n\t`,\n    props: {\n      disabled: boolean('disabled', false),\n      items: object('items', [\n        { content: 'one', selected: true },\n        { content: 'two' },\n        { content: 'three' },\n        { content: 'four' },\n      ]),\n      selected: action('Selected fired for dropdown'),\n      onClose: action('Dropdown closed'),\n      theme: select('theme', ['dark', 'light'], 'dark'),\n    },\n  }))\n  .add('Skeleton', () => ({\n    template: `\n\t\t<div style=\"width: 300px\">\n\t\t\t<ibm-dropdown skeleton=\"true\">\n\t\t\t\t<ibm-dropdown-list [items]=\"items\"></ibm-dropdown-list>\n\t\t\t</ibm-dropdown>\n\t\t\t&nbsp;\n\t\t\t<ibm-dropdown skeleton=\"true\" inline=\"true\">\n\t\t\t\t<ibm-dropdown-list [items]=\"items\"></ibm-dropdown-list>\n\t\t\t</ibm-dropdown>\n\t\t</div>\n\t\t`,\n    props: {\n      items: [{ content: 'one' }, { content: 'two' }, { content: 'three' }, { content: 'four' }],\n    },\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Dropdown.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
-var __ADDS_MAP__ = { "dropdown--documentation": { "startLoc": { "col": 7, "line": 150 }, "endLoc": { "col": 4, "line": 154 } }, "dropdown--skeleton": { "startLoc": { "col": 7, "line": 134 }, "endLoc": { "col": 4, "line": 149 } }, "dropdown--with-template": { "startLoc": { "col": 7, "line": 98 }, "endLoc": { "col": 4, "line": 133 } }, "dropdown--with-observable-items": { "startLoc": { "col": 7, "line": 77 }, "endLoc": { "col": 4, "line": 97 } }, "dropdown--with-ngmodel": { "startLoc": { "col": 7, "line": 58 }, "endLoc": { "col": 4, "line": 76 } }, "dropdown--multi-select": { "startLoc": { "col": 7, "line": 38 }, "endLoc": { "col": 4, "line": 57 } }, "dropdown--basic": { "startLoc": { "col": 7, "line": 16 }, "endLoc": { "col": 4, "line": 37 } } };
+var __STORY__ = "import { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { action } from '@storybook/addon-actions';\nimport { withKnobs, select, boolean, object, text } from '@storybook/addon-knobs/angular';\n\nimport { DropdownModule, DocumentationModule } from '../';\nimport { of } from 'rxjs';\nimport { PlaceholderModule } from '../placeholder/placeholder.module';\n\nstoriesOf('Dropdown', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [DropdownModule, PlaceholderModule, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t<div style=\"width: 300px\">\n\t\t\t<ibm-dropdown\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\tplaceholder=\"Select\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(onClose)=\"onClose($event)\">\n\t\t\t\t<ibm-dropdown-list [items]=\"items\"></ibm-dropdown-list>\n\t\t\t</ibm-dropdown>\n\t\t</div>\n\t\t<ibm-placeholder></ibm-placeholder>\n\t`,\n    props: {\n      disabled: boolean('disabled', false),\n      label: text('Label', 'Dropdown label'),\n      helperText: text('Helper text', 'Optional helper text.'),\n      items: object('items', [{ content: 'one' }, { content: 'two' }, { content: 'three' }, { content: 'four' }]),\n      selected: action('Selected fired for dropdown'),\n      onClose: action('Dropdown closed'),\n      theme: select('theme', ['dark', 'light'], 'dark'),\n    },\n  }))\n  .add('Multi-select', () => ({\n    template: `\n\t\t<div style=\"width: 300px\">\n\t\t\t<ibm-dropdown\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\ttype=\"multi\"\n\t\t\t\tplaceholder=\"Multi-select\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(onClose)=\"onClose($event)\">\n\t\t\t\t<ibm-dropdown-list [items]=\"items\"></ibm-dropdown-list>\n\t\t\t</ibm-dropdown>\n\t\t</div>\n\t`,\n    props: {\n      disabled: boolean('disabled', false),\n      label: text('Label', 'Dropdown label'),\n      helperText: text('Helper text', 'Optional helper text.'),\n      items: object('items', [{ content: 'one' }, { content: 'two' }, { content: 'three' }, { content: 'four' }]),\n      selected: action('Selected fired for multi-select dropdown'),\n      onClose: action('Multi-select dropdown closed'),\n    },\n  }))\n  .add('With ngModel', () => ({\n    template: `\n\t\t<div style=\"width: 300px\">\n\t\t\t<ibm-dropdown\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\tplaceholder=\"Select\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[(ngModel)]=\"model\"\n\t\t\t\tvalue=\"content\">\n\t\t\t\t<ibm-dropdown-list [items]=\"items\"></ibm-dropdown-list>\n\t\t\t</ibm-dropdown>\n\t\t\t<span>{{model | json}}</span>\n\t\t</div>\n\t\t`,\n    props: {\n      disabled: boolean('disabled', false),\n      label: text('Label', 'Dropdown label'),\n      helperText: text('Helper text', 'Optional helper text.'),\n      items: [{ content: 'one' }, { content: 'two' }, { content: 'three' }, { content: 'four' }],\n      model: null,\n    },\n  }))\n  .add('With Observable items', () => ({\n    template: `\n\t\t<div style=\"width: 300px\">\n\t\t\t<ibm-dropdown\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\tplaceholder=\"Select\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(onClose)=\"onClose($event)\">\n\t\t\t\t<ibm-dropdown-list [items]=\"items\"></ibm-dropdown-list>\n\t\t\t</ibm-dropdown>\n\t\t</div>\n\t`,\n    props: {\n      disabled: boolean('disabled', false),\n      label: text('Label', 'Dropdown label'),\n      helperText: text('Helper text', 'Optional helper text.'),\n      items: of([{ content: 'one' }, { content: 'two' }, { content: 'three' }, { content: 'four' }]),\n      selected: action('Selected fired for dropdown'),\n      onClose: action('Dropdown closed'),\n      theme: select('theme', ['dark', 'light'], 'dark'),\n    },\n  }))\n  .add('With Template', () => ({\n    template: `\n\t\t<div style=\"width: 300px;\">\n\t\t\t<ibm-dropdown\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\tplaceholder=\"Select\"\n\t\t\t\t[displayValue]=\"dropdownRenderer\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(onClose)=\"onClose($event)\">\n\t\t\t\t<ibm-dropdown-list [items]=\"items\" [listTpl]=\"dropdownRenderer\"></ibm-dropdown-list>\n\t\t\t</ibm-dropdown>\n\t\t\t<ng-template #dropdownRenderer let-item=\"item\">\n\t\t\t\t<div *ngIf=\"item && item.content\" style=\"font-size: 14px;\">\n\t\t\t\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" xmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\twidth=\"16\" height=\"16\" viewBox=\"0 0 16 16\" aria-hidden=\"true\" style=\"will-change: transform;\">\n\t\t\t\t\t\t<path d=\"M9.3 3.7l3.8 3.8H1v1h12.1l-3.8 3.8.7.7 5-5-5-5z\"></path>\n\t\t\t\t\t</svg>\n\t\t\t\t\t&nbsp;{{item.content}}\n\t\t\t\t</div>\n\t\t\t</ng-template>\n\t\t</div>\n\t`,\n    props: {\n      disabled: boolean('disabled', false),\n      items: object('items', [\n        { content: 'one', selected: true },\n        { content: 'two' },\n        { content: 'three' },\n        { content: 'four' },\n      ]),\n      selected: action('Selected fired for dropdown'),\n      onClose: action('Dropdown closed'),\n      theme: select('theme', ['dark', 'light'], 'dark'),\n    },\n  }))\n  .add('Skeleton', () => ({\n    template: `\n\t\t<div style=\"width: 300px\">\n\t\t\t<ibm-dropdown skeleton=\"true\">\n\t\t\t\t<ibm-dropdown-list [items]=\"items\"></ibm-dropdown-list>\n\t\t\t</ibm-dropdown>\n\t\t\t&nbsp;\n\t\t\t<ibm-dropdown skeleton=\"true\" inline=\"true\">\n\t\t\t\t<ibm-dropdown-list [items]=\"items\"></ibm-dropdown-list>\n\t\t\t</ibm-dropdown>\n\t\t</div>\n\t\t`,\n    props: {\n      items: [{ content: 'one' }, { content: 'two' }, { content: 'three' }, { content: 'four' }],\n    },\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Dropdown.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
+var __ADDS_MAP__ = { "dropdown--documentation": { "startLoc": { "col": 7, "line": 166 }, "endLoc": { "col": 4, "line": 170 } }, "dropdown--skeleton": { "startLoc": { "col": 7, "line": 150 }, "endLoc": { "col": 4, "line": 165 } }, "dropdown--with-template": { "startLoc": { "col": 7, "line": 114 }, "endLoc": { "col": 4, "line": 149 } }, "dropdown--with-observable-items": { "startLoc": { "col": 7, "line": 89 }, "endLoc": { "col": 4, "line": 113 } }, "dropdown--with-ngmodel": { "startLoc": { "col": 7, "line": 66 }, "endLoc": { "col": 4, "line": 88 } }, "dropdown--multi-select": { "startLoc": { "col": 7, "line": 42 }, "endLoc": { "col": 4, "line": 65 } }, "dropdown--basic": { "startLoc": { "col": 7, "line": 16 }, "endLoc": { "col": 4, "line": 41 } } };
 
 
 
@@ -6854,9 +6919,11 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Dropdown",
 }))
     .addDecorator(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["withKnobs"])
     .add("Basic", function () { return ({
-    template: "\n\t\t<div style=\"width: 300px\">\n\t\t\t<ibm-dropdown\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\tplaceholder=\"Select\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(onClose)=\"onClose($event)\">\n\t\t\t\t<ibm-dropdown-list [items]=\"items\"></ibm-dropdown-list>\n\t\t\t</ibm-dropdown>\n\t\t</div>\n\t\t<ibm-placeholder></ibm-placeholder>\n\t",
+    template: "\n\t\t<div style=\"width: 300px\">\n\t\t\t<ibm-dropdown\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\tplaceholder=\"Select\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(onClose)=\"onClose($event)\">\n\t\t\t\t<ibm-dropdown-list [items]=\"items\"></ibm-dropdown-list>\n\t\t\t</ibm-dropdown>\n\t\t</div>\n\t\t<ibm-placeholder></ibm-placeholder>\n\t",
     props: {
         disabled: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("disabled", false),
+        label: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Label", "Dropdown label"),
+        helperText: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Helper text", "Optional helper text."),
         items: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["object"])("items", [
             { content: "one" },
             { content: "two" },
@@ -6869,9 +6936,11 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Dropdown",
     }
 }); })
     .add("Multi-select", function () { return ({
-    template: "\n\t\t<div style=\"width: 300px\">\n\t\t\t<ibm-dropdown\n\t\t\t\ttype=\"multi\"\n\t\t\t\tplaceholder=\"Multi-select\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(onClose)=\"onClose($event)\">\n\t\t\t\t<ibm-dropdown-list [items]=\"items\"></ibm-dropdown-list>\n\t\t\t</ibm-dropdown>\n\t\t</div>\n\t",
+    template: "\n\t\t<div style=\"width: 300px\">\n\t\t\t<ibm-dropdown\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\ttype=\"multi\"\n\t\t\t\tplaceholder=\"Multi-select\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(onClose)=\"onClose($event)\">\n\t\t\t\t<ibm-dropdown-list [items]=\"items\"></ibm-dropdown-list>\n\t\t\t</ibm-dropdown>\n\t\t</div>\n\t",
     props: {
         disabled: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("disabled", false),
+        label: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Label", "Dropdown label"),
+        helperText: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Helper text", "Optional helper text."),
         items: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["object"])("items", [
             { content: "one" },
             { content: "two" },
@@ -6883,9 +6952,11 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Dropdown",
     }
 }); })
     .add("With ngModel", function () { return ({
-    template: "\n\t\t<div style=\"width: 300px\">\n\t\t\t<ibm-dropdown\n\t\t\t\tplaceholder=\"Select\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[(ngModel)]=\"model\"\n\t\t\t\tvalue=\"content\">\n\t\t\t\t<ibm-dropdown-list [items]=\"items\"></ibm-dropdown-list>\n\t\t\t</ibm-dropdown>\n\t\t\t<span>{{model | json}}</span>\n\t\t</div>\n\t\t",
+    template: "\n\t\t<div style=\"width: 300px\">\n\t\t\t<ibm-dropdown\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\tplaceholder=\"Select\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[(ngModel)]=\"model\"\n\t\t\t\tvalue=\"content\">\n\t\t\t\t<ibm-dropdown-list [items]=\"items\"></ibm-dropdown-list>\n\t\t\t</ibm-dropdown>\n\t\t\t<span>{{model | json}}</span>\n\t\t</div>\n\t\t",
     props: {
         disabled: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("disabled", false),
+        label: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Label", "Dropdown label"),
+        helperText: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Helper text", "Optional helper text."),
         items: [
             { content: "one" },
             { content: "two" },
@@ -6896,9 +6967,11 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Dropdown",
     }
 }); })
     .add("With Observable items", function () { return ({
-    template: "\n\t\t<div style=\"width: 300px\">\n\t\t\t<ibm-dropdown\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\tplaceholder=\"Select\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(onClose)=\"onClose($event)\">\n\t\t\t\t<ibm-dropdown-list [items]=\"items\"></ibm-dropdown-list>\n\t\t\t</ibm-dropdown>\n\t\t</div>\n\t",
+    template: "\n\t\t<div style=\"width: 300px\">\n\t\t\t<ibm-dropdown\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\tplaceholder=\"Select\"\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(onClose)=\"onClose($event)\">\n\t\t\t\t<ibm-dropdown-list [items]=\"items\"></ibm-dropdown-list>\n\t\t\t</ibm-dropdown>\n\t\t</div>\n\t",
     props: {
         disabled: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("disabled", false),
+        label: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Label", "Dropdown label"),
+        helperText: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Helper text", "Optional helper text."),
         items: Object(rxjs__WEBPACK_IMPORTED_MODULE_4__["of"])([
             { content: "one" },
             { content: "two" },
@@ -8047,7 +8120,7 @@ var FileUploader = /** @class */ (function () {
     FileUploader = FileUploader_1 = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-file-uploader",
-            template: "\n\t\t<ng-container *ngIf=\"!skeleton; else skeletonTemplate\">\n\t\t\t<strong class=\"bx--file--label\">{{title}}</strong>\n\t\t\t<p class=\"bx--label-description\">{{description}}</p>\n\t\t\t<div class=\"bx--file\">\n\t\t\t\t<button\n\t\t\t\t\tibmButton=\"primary\"\n\t\t\t\t\t(click)=\"fileInput.click()\"\n\t\t\t\t\t[attr.for]=\"fileUploaderId\">\n\t\t\t\t\t{{buttonText}}\n\t\t\t\t</button>\n\t\t\t\t<input\n\t\t\t\t\t#fileInput\n\t\t\t\t\ttype=\"file\"\n\t\t\t\t\tclass=\"bx--file-input\"\n\t\t\t\t\t[accept]=\"accept\"\n\t\t\t\t\t[id]=\"fileUploaderId\"\n\t\t\t\t\t[multiple]=\"multiple\"\n\t\t\t\t\t(change)=\"onFilesAdded()\"/>\n\t\t\t\t<div class=\"bx--file-container\">\n\t\t\t\t\t<ibm-file *ngFor=\"let fileItem of files\" [fileItem]=\"fileItem\" (remove)=\"removeFile(fileItem)\"></ibm-file>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<div class=\"bx--skeleton__text\" style=\"width: 100px\"></div>\n\t\t\t<div class=\"bx--skeleton__text\" style=\"width: 225px\"></div>\n\t\t\t<button ibmButton skeleton=\"true\"></button>\n\t\t</ng-template>\n\t",
+            template: "\n\t\t<ng-container *ngIf=\"!skeleton; else skeletonTemplate\">\n\t\t\t<strong class=\"bx--file--label\">{{title}}</strong>\n\t\t\t<p class=\"bx--label-description\">{{description}}</p>\n\t\t\t<div class=\"bx--file\">\n\t\t\t\t<button\n\t\t\t\t\tibmButton=\"primary\"\n\t\t\t\t\t(click)=\"fileInput.click()\"\n\t\t\t\t\t[attr.for]=\"fileUploaderId\">\n\t\t\t\t\t{{buttonText}}\n\t\t\t\t</button>\n\t\t\t\t<input\n\t\t\t\t\t#fileInput\n\t\t\t\t\ttype=\"file\"\n\t\t\t\t\tclass=\"bx--file-input\"\n\t\t\t\t\t[accept]=\"accept\"\n\t\t\t\t\t[id]=\"fileUploaderId\"\n\t\t\t\t\t[multiple]=\"multiple\"\n\t\t\t\t\ttabindex=\"-1\"\n\t\t\t\t\t(change)=\"onFilesAdded()\"/>\n\t\t\t\t<div class=\"bx--file-container\">\n\t\t\t\t\t<ibm-file *ngFor=\"let fileItem of files\" [fileItem]=\"fileItem\" (remove)=\"removeFile(fileItem)\"></ibm-file>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<div class=\"bx--skeleton__text\" style=\"width: 100px\"></div>\n\t\t\t<div class=\"bx--skeleton__text\" style=\"width: 225px\"></div>\n\t\t\t<button ibmButton skeleton=\"true\"></button>\n\t\t</ng-template>\n\t",
             providers: [
                 {
                     provide: _angular_forms__WEBPACK_IMPORTED_MODULE_1__["NG_VALUE_ACCESSOR"],
@@ -8400,7 +8473,7 @@ var File = /** @class */ (function () {
     File = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-file",
-            template: "\n\t\t<p class=\"bx--file-filename\">{{fileItem.file.name}}</p>\n\t\t<span\n\t\t\t*ngIf=\"fileItem.state === 'edit'\"\n\t\t\tclass=\"bx--file__state-container\"\n\t\t\t(click)=\"remove.emit()\"\n\t\t\ttabindex=\"0\">\n\t\t\t<ibm-icon-close16\n\t\t\t\tclass=\"bx--file-close\"\n\t\t\t\t[ariaLabel]=\"translations.REMOVE_BUTTON\">\n\t\t\t</ibm-icon-close16>\n\t\t</span>\n\t\t<span *ngIf=\"fileItem.state === 'upload'\">\n\t\t\t<ibm-loading size=\"sm\"></ibm-loading>\n\t\t</span>\n\t\t<span\n\t\t\t*ngIf=\"fileItem.state === 'complete'\"\n\t\t\tclass=\"bx--file__state-container\"\n\t\t\ttabindex=\"0\">\n\t\t\t<ibm-icon-checkmark-filled16\n\t\t\t\tclass=\"bx--file-complete\"\n\t\t\t\t[ariaLabel]=\"translations.CHECKMARK\">\n\t\t\t</ibm-icon-checkmark-filled16>\n\t\t</span>\n\t"
+            template: "\n\t\t<p class=\"bx--file-filename\">{{fileItem.file.name}}</p>\n\t\t<span\n\t\t\t*ngIf=\"fileItem.state === 'edit'\"\n\t\t\tclass=\"bx--file__state-container\"\n\t\t\t(click)=\"remove.emit()\"\n\t\t\t(keyup.enter)=\"remove.emit()\"\n\t\t\t(keyup.space)=\"remove.emit()\"\n\t\t\ttabindex=\"0\">\n\t\t\t<ibm-icon-close16\n\t\t\t\tclass=\"bx--file-close\"\n\t\t\t\t[ariaLabel]=\"translations.REMOVE_BUTTON\">\n\t\t\t</ibm-icon-close16>\n\t\t</span>\n\t\t<span *ngIf=\"fileItem.state === 'upload'\">\n\t\t\t<ibm-loading size=\"sm\"></ibm-loading>\n\t\t</span>\n\t\t<span\n\t\t\t*ngIf=\"fileItem.state === 'complete'\"\n\t\t\tclass=\"bx--file__state-container\"\n\t\t\ttabindex=\"0\">\n\t\t\t<ibm-icon-checkmark-filled16\n\t\t\t\tclass=\"bx--file-complete\"\n\t\t\t\t[ariaLabel]=\"translations.CHECKMARK\">\n\t\t\t</ibm-icon-checkmark-filled16>\n\t\t</span>\n\t"
         }),
         __metadata("design:paramtypes", [typeof (_b = typeof _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_1__["I18n"] !== "undefined" && _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_1__["I18n"]) === "function" && _b || Object])
     ], File);
@@ -12867,7 +12940,7 @@ var Number = /** @class */ (function () {
     Number.prototype.isTemplate = function (value) {
         return value instanceof _angular_core__WEBPACK_IMPORTED_MODULE_0__["TemplateRef"];
     };
-    var Number_1, _a;
+    var Number_1, _a, _b, _c;
     /**
      * Variable used for creating unique ids for number input components.
      */
@@ -12931,7 +13004,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 ? true : 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<label *ngIf=\"!skeleton && label\" [for]=\"id\" class=\"bx--label\">{{label}}</label>\n\t\t\t<div *ngIf=\"helperText\" class=\"bx--form__helper-text\">{{helperText}}</div>\n\t\t\t<div class=\"bx--number__input-wrapper\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t[min]=\"min\"\n\t\t\t\t\t[max]=\"max\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[required]=\"required\"\n\t\t\t\t\t(input)=\"onNumberInputChange($event)\"/>\n\t\t\t\t<ibm-icon-warning-filled16\n\t\t\t\t\t*ngIf=\"!skeleton && invalid\"\n\t\t\t\t\tclass=\"bx--number__invalid\"\n\t\t\t\t\tstyle=\"display: inherit;\">\n\t\t\t\t</ibm-icon-warning-filled16>\n\t\t\t\t<div *ngIf=\"!skeleton\" class=\"bx--number__controls\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"bx--number__control-btn up-icon\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t\t<ibm-icon-caret-up16></ibm-icon-caret-up16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"bx--number__control-btn down-icon\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t\t<ibm-icon-caret-down16></ibm-icon-caret-down16>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\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\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t</label>\n\t\t<div *ngIf=\"helperText\" class=\"bx--form__helper-text\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t</div>\n\t\t<div\n\t\t\tdata-numberinput\n\t\t\t[attr.data-invalid]=\"(invalid ? true : 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<div class=\"bx--number__input-wrapper\">\n\t\t\t\t<input\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\t[id]=\"id\"\n\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t[min]=\"min\"\n\t\t\t\t\t[max]=\"max\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[required]=\"required\"\n\t\t\t\t\t(input)=\"onNumberInputChange($event)\"/>\n\t\t\t\t<ibm-icon-warning-filled16\n\t\t\t\t\t*ngIf=\"!skeleton && invalid\"\n\t\t\t\t\tclass=\"bx--number__invalid\"\n\t\t\t\t\tstyle=\"display: inherit;\">\n\t\t\t\t</ibm-icon-warning-filled16>\n\t\t\t\t<div *ngIf=\"!skeleton\" class=\"bx--number__controls\">\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"bx--number__control-btn up-icon\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t(click)=\"onIncrement()\">\n\t\t\t\t\t\t<ibm-icon-caret-up16></ibm-icon-caret-up16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button\n\t\t\t\t\t\tclass=\"bx--number__control-btn down-icon\"\n\t\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t\t\taria-atomic=\"true\"\n\t\t\t\t\t\t(click)=\"onDecrement()\">\n\t\t\t\t\t\t<ibm-icon-caret-down16></ibm-icon-caret-down16>\n\t\t\t\t\t</button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n\t",
             providers: [
                 {
                     provide: _angular_forms__WEBPACK_IMPORTED_MODULE_1__["NG_VALUE_ACCESSOR"],
@@ -13029,7 +13102,7 @@ __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, number, select, text } from '@storybook/addon-knobs/angular';\n\nimport { NumberModule, DocumentationModule } from '../';\n\nstoriesOf('Number', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [NumberModule, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t\t<ibm-number\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"[helperText]\"\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\t[min]=\"min\"\n\t\t\t\t[max]=\"max\"\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[disabled]=\"disabled\">\n\t\t\t</ibm-number>\n\t\t`,\n    props: {\n      label: text('label', 'Number Input Label'),\n      helperText: text('helper text', 'Optional helper text here'),\n      invalidText: text('Form validation content', 'Invalid number'),\n      theme: select('theme', ['dark', 'light'], 'dark'),\n      min: number('min', 0),\n      max: number('max', 100),\n      invalid: boolean('Show form validation', false),\n      disabled: boolean('disabled', false),\n    },\n  }))\n  .add('Skeleton', () => ({\n    template: `\n\t\t\t<ibm-number [label]=\"label\" skeleton=\"true\"></ibm-number>\n\t\t`,\n    props: {\n      label: text('label', 'Number Input Label'),\n    },\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Number.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
+var __STORY__ = "import { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { withKnobs, boolean, number, select, text } from '@storybook/addon-knobs/angular';\n\nimport { NumberModule, DocumentationModule } from '../';\n\nstoriesOf('Number', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [NumberModule, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t\t<ibm-number\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"[helperText]\"\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\t[min]=\"min\"\n\t\t\t\t[max]=\"max\"\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[disabled]=\"disabled\">\n\t\t\t</ibm-number>\n\t\t`,\n    props: {\n      label: text('label', 'Number Input Label'),\n      helperText: text('helper text', 'Optional helper text.'),\n      invalidText: text('Form validation content', 'Invalid number'),\n      theme: select('theme', ['dark', 'light'], 'dark'),\n      min: number('min', 0),\n      max: number('max', 100),\n      invalid: boolean('Show form validation', false),\n      disabled: boolean('disabled', false),\n    },\n  }))\n  .add('Skeleton', () => ({\n    template: `\n\t\t\t<ibm-number [label]=\"label\" skeleton=\"true\"></ibm-number>\n\t\t`,\n    props: {\n      label: text('label', 'Number Input Label'),\n    },\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Number.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
 var __ADDS_MAP__ = { "number--documentation": { "startLoc": { "col": 7, "line": 45 }, "endLoc": { "col": 4, "line": 49 } }, "number--skeleton": { "startLoc": { "col": 7, "line": 37 }, "endLoc": { "col": 4, "line": 44 } }, "number--basic": { "startLoc": { "col": 7, "line": 13 }, "endLoc": { "col": 4, "line": 36 } } };
 
 
@@ -13042,7 +13115,7 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Number", m
     template: "\n\t\t\t<ibm-number\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"[helperText]\"\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\t[min]=\"min\"\n\t\t\t\t[max]=\"max\"\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[disabled]=\"disabled\">\n\t\t\t</ibm-number>\n\t\t",
     props: {
         label: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["text"])("label", "Number Input Label"),
-        helperText: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["text"])("helper text", "Optional helper text here"),
+        helperText: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["text"])("helper text", "Optional helper text."),
         invalidText: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["text"])("Form validation content", "Invalid number"),
         theme: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["select"])("theme", ["dark", "light"], "dark"),
         min: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["number"])("min", 0),
@@ -14698,8 +14771,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var ___WEBPACK_IMPORTED_MODULE_3__ = __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 { action } from '@storybook/addon-actions';\nimport { withKnobs, boolean } from '@storybook/addon-knobs/angular';\n\nimport { RadioModule, DocumentationModule } from '../';\n\nstoriesOf('Radio', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [RadioModule, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t<ibm-radio-group aria-label=\"radiogroup\" [(ngModel)]=\"radio\" (change)=\"onChange($event)\">\n\t\t\t<ibm-radio\n\t\t\t\tvalue=\"radio\"\n\t\t\t\t[checked]=\"true\">\n\t\t\t\tzero\n\t\t\t</ibm-radio>\n\t\t\t<ibm-radio *ngFor=\"let radio of manyRadios\"\n\t\t\t\t[value]=\"radio.num\"\n\t\t\t\t[disabled]=\"radio.disabled\">\n\t\t\t\t{{radio.num}}\n\t\t\t</ibm-radio>\n\t\t</ibm-radio-group>\n\t\t`,\n    props: {\n      onChange: action('Radio change'),\n      manyRadios: [{ num: 'one' }, { num: 'two' }, { num: 'three' }, { num: 'four', disabled: true }],\n    },\n  }))\n  .add('Skeleton', () => ({\n    template: `\n\t\t<ibm-radio-group skeleton=\"true\">\n\t\t\t<ibm-radio></ibm-radio>\n\t\t</ibm-radio-group>\n\t\t`,\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/RadioGroup.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
-var __ADDS_MAP__ = { "radio--documentation": { "startLoc": { "col": 7, "line": 41 }, "endLoc": { "col": 4, "line": 45 } }, "radio--skeleton": { "startLoc": { "col": 7, "line": 34 }, "endLoc": { "col": 4, "line": 40 } }, "radio--basic": { "startLoc": { "col": 7, "line": 14 }, "endLoc": { "col": 4, "line": 33 } } };
+var __STORY__ = "import { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { action } from '@storybook/addon-actions';\nimport { withKnobs, text } from '@storybook/addon-knobs/angular';\n\nimport { RadioModule, DocumentationModule } from '../';\n\nstoriesOf('Radio', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [RadioModule, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t<fieldset class=\"bx--fieldset\">\n\t\t\t<legend class=\"bx--label\">{{label}}</legend>\n\t\t\t<ibm-radio-group\n\t\t\t\taria-label=\"radiogroup\"\n\t\t\t\t[(ngModel)]=\"radio\"\n\t\t\t\t(change)=\"onChange($event)\">\n\t\t\t\t<ibm-radio\n\t\t\t\t\tvalue=\"radio\"\n\t\t\t\t\t[checked]=\"true\">\n\t\t\t\t\tzero\n\t\t\t\t</ibm-radio>\n\t\t\t\t<ibm-radio *ngFor=\"let radio of manyRadios\"\n\t\t\t\t\t[value]=\"radio.num\"\n\t\t\t\t\t[disabled]=\"radio.disabled\">\n\t\t\t\t\t{{radio.num}}\n\t\t\t\t</ibm-radio>\n\t\t\t</ibm-radio-group>\n\t\t</fieldset>\n\t\t`,\n    props: {\n      onChange: action('Radio change'),\n      label: text('Label text', 'Radio Button heading'),\n      manyRadios: [{ num: 'one' }, { num: 'two' }, { num: 'three' }, { num: 'four', disabled: true }],\n    },\n  }))\n  .add('Skeleton', () => ({\n    template: `\n\t\t<ibm-radio-group skeleton=\"true\">\n\t\t\t<ibm-radio></ibm-radio>\n\t\t</ibm-radio-group>\n\t\t`,\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/RadioGroup.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
+var __ADDS_MAP__ = { "radio--documentation": { "startLoc": { "col": 7, "line": 48 }, "endLoc": { "col": 4, "line": 52 } }, "radio--skeleton": { "startLoc": { "col": 7, "line": 41 }, "endLoc": { "col": 4, "line": 47 } }, "radio--basic": { "startLoc": { "col": 7, "line": 14 }, "endLoc": { "col": 4, "line": 40 } } };
 
 
 
@@ -14709,9 +14782,10 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Radio", mo
 }))
     .addDecorator(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["withKnobs"])
     .add("Basic", function () { return ({
-    template: "\n\t\t<ibm-radio-group aria-label=\"radiogroup\" [(ngModel)]=\"radio\" (change)=\"onChange($event)\">\n\t\t\t<ibm-radio\n\t\t\t\tvalue=\"radio\"\n\t\t\t\t[checked]=\"true\">\n\t\t\t\tzero\n\t\t\t</ibm-radio>\n\t\t\t<ibm-radio *ngFor=\"let radio of manyRadios\"\n\t\t\t\t[value]=\"radio.num\"\n\t\t\t\t[disabled]=\"radio.disabled\">\n\t\t\t\t{{radio.num}}\n\t\t\t</ibm-radio>\n\t\t</ibm-radio-group>\n\t\t",
+    template: "\n\t\t<fieldset class=\"bx--fieldset\">\n\t\t\t<legend class=\"bx--label\">{{label}}</legend>\n\t\t\t<ibm-radio-group\n\t\t\t\taria-label=\"radiogroup\"\n\t\t\t\t[(ngModel)]=\"radio\"\n\t\t\t\t(change)=\"onChange($event)\">\n\t\t\t\t<ibm-radio\n\t\t\t\t\tvalue=\"radio\"\n\t\t\t\t\t[checked]=\"true\">\n\t\t\t\t\tzero\n\t\t\t\t</ibm-radio>\n\t\t\t\t<ibm-radio *ngFor=\"let radio of manyRadios\"\n\t\t\t\t\t[value]=\"radio.num\"\n\t\t\t\t\t[disabled]=\"radio.disabled\">\n\t\t\t\t\t{{radio.num}}\n\t\t\t\t</ibm-radio>\n\t\t\t</ibm-radio-group>\n\t\t</fieldset>\n\t\t",
     props: {
         onChange: Object(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__["action"])("Radio change"),
+        label: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Label text", "Radio Button heading"),
         manyRadios: [
             { num: "one" },
             { num: "two" },
@@ -15298,10 +15372,6 @@ var Select = /** @class */ (function () {
          * `inline` or `default` select displays
          */
         this.display = "default";
-        /**
-         * Label for the select. Appears above the input.
-         */
-        this.label = "Select label";
         /**
          * Sets the unique ID. Defaults to `select-${total count of selects instantiated}`
          */
@@ -15375,16 +15445,16 @@ var Select = /** @class */ (function () {
         this.onChangeHandler(event.target.value);
         this.selected.emit(event.target.value);
     };
+    Select.prototype.isTemplate = function (value) {
+        return value instanceof _angular_core__WEBPACK_IMPORTED_MODULE_0__["TemplateRef"];
+    };
     /**
      * Listens for the host blurring, and notifies the model
      */
     Select.prototype.blur = function () {
         this.onTouchedHandler();
     };
-    Select.prototype.isTemplate = function (value) {
-        return value instanceof _angular_core__WEBPACK_IMPORTED_MODULE_0__["TemplateRef"];
-    };
-    var Select_1, _a, _b;
+    var Select_1, _a, _b, _c, _d;
     /**
      * Tracks the total number of selects instantiated. Used to generate unique IDs
      */
@@ -15399,7 +15469,7 @@ var Select = /** @class */ (function () {
     ], Select.prototype, "label", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
-        __metadata("design:type", String)
+        __metadata("design:type", Object)
     ], Select.prototype, "helperText", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
@@ -15431,7 +15501,7 @@ var Select = /** @class */ (function () {
     ], Select.prototype, "selected", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ViewChild"])("select"),
-        __metadata("design:type", typeof (_b = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _b || Object)
+        __metadata("design:type", typeof (_d = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _d || Object)
     ], Select.prototype, "select", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostListener"])("blur"),
@@ -15442,7 +15512,7 @@ var Select = /** @class */ (function () {
     Select = Select_1 = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-select",
-            template: "\n\t\t<div class=\"bx--form-item\">\n\t\t\t<div\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--select--inline': display === 'inline',\n\t\t\t\t\t'bx--select--light': theme === 'light',\n\t\t\t\t\t'bx--skeleton': skeleton\n\t\t\t\t}\"\n\t\t\t\tclass=\"bx--select\"\n\t\t\t\tstyle=\"width: 100%\">\n\t\t\t\t<label *ngIf=\"skeleton\" [attr.for]=\"id\" class=\"bx--label bx--skeleton\"></label>\n\t\t\t\t<label *ngIf=\"!skeleton\" [attr.for]=\"id\" class=\"bx--label\">{{label}}</label>\n\t\t\t\t<div *ngIf=\"helperText\" class=\"bx--form__helper-text\">{{helperText}}</div>\n\t\t\t\t<div class=\"bx--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t#select\n\t\t\t\t\t\t[attr.id]=\"id\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t\t\tclass=\"bx--select-input\">\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-warning-filled16\n\t\t\t\t\t\t*ngIf=\"!skeleton && invalid\"\n\t\t\t\t\t\tclass=\"bx--select__invalid-icon\"\n\t\t\t\t\t\tstyle=\"display: inherit;\">\n\t\t\t\t\t</ibm-icon-warning-filled16>\n\t\t\t\t\t<ibm-icon-chevron-down16 *ngIf=\"!skeleton\" class=\"bx--select__arrow\" style=\"display: inherit;\"></ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t",
+            template: "\n\t\t<div class=\"bx--form-item\">\n\t\t\t<div\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--select--inline': display === 'inline',\n\t\t\t\t\t'bx--select--light': theme === 'light',\n\t\t\t\t\t'bx--skeleton': skeleton\n\t\t\t\t}\"\n\t\t\t\tclass=\"bx--select\"\n\t\t\t\tstyle=\"width: 100%\">\n\t\t\t\t<label *ngIf=\"skeleton\" [for]=\"id\" class=\"bx--label bx--skeleton\"></label>\n\t\t\t\t<label *ngIf=\"!skeleton\" [for]=\"id\" class=\"bx--label\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<div *ngIf=\"helperText\" class=\"bx--form__helper-text\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{helperText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"bx--select-input__wrapper\" [attr.data-invalid]=\"(invalid ? true : null)\">\n\t\t\t\t\t<select\n\t\t\t\t\t\t#select\n\t\t\t\t\t\t[attr.id]=\"id\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t\t\tclass=\"bx--select-input\">\n\t\t\t\t\t\t<ng-content></ng-content>\n\t\t\t\t\t</select>\n\t\t\t\t\t<ibm-icon-warning-filled16\n\t\t\t\t\t\t*ngIf=\"!skeleton && invalid\"\n\t\t\t\t\t\tclass=\"bx--select__invalid-icon\"\n\t\t\t\t\t\tstyle=\"display: inherit;\">\n\t\t\t\t\t</ibm-icon-warning-filled16>\n\t\t\t\t\t<ibm-icon-chevron-down16 *ngIf=\"!skeleton\" class=\"bx--select__arrow\" style=\"display: inherit;\"></ibm-icon-chevron-down16>\n\t\t\t\t</div>\n\t\t\t\t<div *ngIf=\"invalid\" class=\"bx--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t",
             styles: ["\n\t\t[data-invalid] ~ .bx--select__arrow {\n\t\t\tbottom: 2.25rem;\n\t\t}\n\t"],
             providers: [
                 {
@@ -15548,8 +15618,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 { action } from '@storybook/addon-actions';\nimport { withKnobs, select, boolean, text } from '@storybook/addon-knobs/angular';\n\nimport { SelectModule, DocumentationModule } from '../';\n\nstoriesOf('Select', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [SelectModule, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t\t<ibm-select\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\t[display]=\"display\">\n\t\t\t\t<option value=\"\" disabled selected hidden>Choose an option</option>\n\t\t\t\t<option value=\"solong\">A much longer option that is worth having around to check how text flows</option>\n\t\t\t\t<optgroup label=\"Category 1\">\n\t\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t\t</optgroup>\n\t\t\t\t<optgroup label=\"Category 2\">\n\t\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t\t</optgroup>\n\t\t\t</ibm-select>\n\t`,\n    props: {\n      disabled: boolean('Disabled', false),\n      invalid: boolean('Show form validation', false),\n      invalidText: text('Form validation content', 'Please select an option.'),\n      helperText: text('Helper text', 'Optional helper text.'),\n      theme: select('Theme', ['dark', 'light'], 'dark'),\n      display: select('Display', ['default', 'inline'], 'default'),\n    },\n  }))\n  .add('With ngModel', () => ({\n    template: `\n\t\t\t<div style=\"width: 165px\">\n\t\t\t\t<ibm-select [(ngModel)]=\"model\">\n\t\t\t\t\t<option value=\"default\" disabled selected hidden>Choose an option</option>\n\t\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t\t\t<option value=\"option3\">Option 3</option>\n\t\t\t\t</ibm-select>\n\t\t\t\t<br>\n\t\t\t\t<span>Selected: {{ model }}</span>\n\t\t\t</div>\n\t\t`,\n    props: {\n      model: 'default',\n    },\n  }))\n  .add('Skeleton', () => ({\n    template: `\n\t\t<div style=\"width: 300px\">\n\t\t\t<ibm-select skeleton=\"true\"></ibm-select>\n\t\t</div>\n\t\t`,\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Select.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
-var __ADDS_MAP__ = { "select--documentation": { "startLoc": { "col": 7, "line": 68 }, "endLoc": { "col": 4, "line": 72 } }, "select--skeleton": { "startLoc": { "col": 7, "line": 61 }, "endLoc": { "col": 4, "line": 67 } }, "select--with-ngmodel": { "startLoc": { "col": 7, "line": 44 }, "endLoc": { "col": 4, "line": 60 } }, "select--basic": { "startLoc": { "col": 7, "line": 14 }, "endLoc": { "col": 4, "line": 43 } } };
+var __STORY__ = "import { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { action } from '@storybook/addon-actions';\nimport { withKnobs, select, boolean, text } from '@storybook/addon-knobs/angular';\n\nimport { SelectModule, DocumentationModule } from '../';\n\nstoriesOf('Select', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [SelectModule, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t\t<ibm-select\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\t[display]=\"display\">\n\t\t\t\t<option value=\"\" disabled selected hidden>Choose an option</option>\n\t\t\t\t<option value=\"solong\">A much longer option that is worth having around to check how text flows</option>\n\t\t\t\t<optgroup label=\"Category 1\">\n\t\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t\t</optgroup>\n\t\t\t\t<optgroup label=\"Category 2\">\n\t\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t\t</optgroup>\n\t\t\t</ibm-select>\n\t`,\n    props: {\n      disabled: boolean('Disabled', false),\n      invalid: boolean('Show form validation', false),\n      invalidText: text('Form validation content', 'Please select an option.'),\n      label: text('Label text', 'Select Label'),\n      helperText: text('Helper text', 'Optional helper text.'),\n      theme: select('Theme', ['dark', 'light'], 'dark'),\n      display: select('Display', ['default', 'inline'], 'default'),\n    },\n  }))\n  .add('With ngModel', () => ({\n    template: `\n\t\t\t<div style=\"width: 165px\">\n\t\t\t\t<ibm-select [(ngModel)]=\"model\">\n\t\t\t\t\t<option value=\"default\" disabled selected hidden>Choose an option</option>\n\t\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t\t\t<option value=\"option3\">Option 3</option>\n\t\t\t\t</ibm-select>\n\t\t\t\t<br>\n\t\t\t\t<span>Selected: {{ model }}</span>\n\t\t\t</div>\n\t\t`,\n    props: {\n      model: 'default',\n    },\n  }))\n  .add('Skeleton', () => ({\n    template: `\n\t\t<div style=\"width: 300px\">\n\t\t\t<ibm-select skeleton=\"true\"></ibm-select>\n\t\t</div>\n\t\t`,\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Select.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
+var __ADDS_MAP__ = { "select--documentation": { "startLoc": { "col": 7, "line": 70 }, "endLoc": { "col": 4, "line": 74 } }, "select--skeleton": { "startLoc": { "col": 7, "line": 63 }, "endLoc": { "col": 4, "line": 69 } }, "select--with-ngmodel": { "startLoc": { "col": 7, "line": 46 }, "endLoc": { "col": 4, "line": 62 } }, "select--basic": { "startLoc": { "col": 7, "line": 14 }, "endLoc": { "col": 4, "line": 45 } } };
 
 
 
@@ -15558,11 +15628,12 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Select", m
 }))
     .addDecorator(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["withKnobs"])
     .add("Basic", function () { return ({
-    template: "\n\t\t\t<ibm-select\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\t[display]=\"display\">\n\t\t\t\t<option value=\"\" disabled selected hidden>Choose an option</option>\n\t\t\t\t<option value=\"solong\">A much longer option that is worth having around to check how text flows</option>\n\t\t\t\t<optgroup label=\"Category 1\">\n\t\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t\t</optgroup>\n\t\t\t\t<optgroup label=\"Category 2\">\n\t\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t\t</optgroup>\n\t\t\t</ibm-select>\n\t",
+    template: "\n\t\t\t<ibm-select\n\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t[theme]=\"theme\"\n\t\t\t\t[display]=\"display\">\n\t\t\t\t<option value=\"\" disabled selected hidden>Choose an option</option>\n\t\t\t\t<option value=\"solong\">A much longer option that is worth having around to check how text flows</option>\n\t\t\t\t<optgroup label=\"Category 1\">\n\t\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t\t</optgroup>\n\t\t\t\t<optgroup label=\"Category 2\">\n\t\t\t\t\t<option value=\"option1\">Option 1</option>\n\t\t\t\t\t<option value=\"option2\">Option 2</option>\n\t\t\t\t</optgroup>\n\t\t\t</ibm-select>\n\t",
     props: {
         disabled: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["boolean"])("Disabled", false),
         invalid: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["boolean"])("Show form validation", false),
         invalidText: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["text"])("Form validation content", "Please select an option."),
+        label: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["text"])("Label text", "Select Label"),
         helperText: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["text"])("Helper text", "Optional helper text."),
         theme: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["select"])("Theme", ["dark", "light"], "dark"),
         display: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["select"])("Display", ["default", "inline"], "default")
@@ -15873,7 +15944,10 @@ var Slider = /** @class */ (function () {
             this.incrementValue(multiplier);
         }
     };
-    var Slider_1, _a, _b, _c, _d, _e;
+    Slider.prototype.isTemplate = function (value) {
+        return value instanceof _angular_core__WEBPACK_IMPORTED_MODULE_0__["TemplateRef"];
+    };
+    var Slider_1, _a, _b, _c, _d, _e, _f;
     /** Used to generate unique IDs */
     Slider.count = 0;
     __decorate([
@@ -15905,6 +15979,10 @@ var Slider = /** @class */ (function () {
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
     ], Slider.prototype, "skeleton", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", Object)
+    ], Slider.prototype, "label", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", Object)
@@ -15916,28 +15994,28 @@ var Slider = /** @class */ (function () {
     ], Slider.prototype, "disabled", null);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])(),
-        __metadata("design:type", typeof (_a = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]) === "function" && _a || Object)
+        __metadata("design:type", typeof (_b = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]) === "function" && _b || Object)
     ], Slider.prototype, "valueChange", void 0);
     __decorate([
-        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostBinding"])("class.bx--slider-container"),
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostBinding"])("class.bx--form-item"),
         __metadata("design:type", Object)
     ], Slider.prototype, "hostClass", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ViewChild"])("thumb"),
-        __metadata("design:type", typeof (_b = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _b || Object)
+        __metadata("design:type", typeof (_c = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _c || Object)
     ], Slider.prototype, "thumb", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ViewChild"])("track"),
-        __metadata("design:type", typeof (_c = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _c || Object)
+        __metadata("design:type", typeof (_d = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _d || Object)
     ], Slider.prototype, "track", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["ViewChild"])("range"),
-        __metadata("design:type", typeof (_d = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _d || Object)
+        __metadata("design:type", typeof (_e = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _e || Object)
     ], Slider.prototype, "range", void 0);
     Slider = Slider_1 = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-slider",
-            template: "\n\t\t<ng-container *ngIf=\"!skeleton; else skeletonTemplate\">\n\t\t\t<label [id]=\"bottomRangeId\" class=\"bx--slider__range-label\">\n\t\t\t\t<ng-content select=\"[minLabel]\"></ng-content>\n\t\t\t</label>\n\t\t\t<div\n\t\t\t\tclass=\"bx--slider\"\n\t\t\t\t[ngClass]=\"{'bx--slider--disabled': disabled}\">\n\t\t\t\t<div\n\t\t\t\t\t#thumb\n\t\t\t\t\tclass=\"bx--slider__thumb\"\n\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t[ngStyle]=\"{'left.%': getFractionComplete() * 100}\"\n\t\t\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t\t\t(keydown)=\"onKeyDown($event)\">\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t#track\n\t\t\t\t\tclass=\"bx--slider__track\"\n\t\t\t\t\t(click)=\"onClick($event)\">\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"bx--slider__filled-track\"\n\t\t\t\t\t[ngStyle]=\"{transform: 'translate(0%, -50%)' + scaleX(getFractionComplete())}\">\n\t\t\t\t</div>\n\t\t\t\t<input\n\t\t\t\t\t#range\n\t\t\t\t\taria-label=\"slider\"\n\t\t\t\t\tclass=\"bx--slider__input\"\n\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t[step]=\"step\"\n\t\t\t\t\t[min]=\"min\"\n\t\t\t\t\t[max]=\"max\"\n\t\t\t\t\t[value]=\"value.toString()\">\n\t\t\t</div>\n\t\t\t<label [id]=\"topRangeId\" class=\"bx--slider__range-label\">\n\t\t\t\t<ng-content select=\"[maxLabel]\"></ng-content>\n\t\t\t</label>\n\t\t\t<ng-content select=\"input\"></ng-content>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<div class=\"bx--form-item\">\n\t\t\t\t<label class=\"bx--label bx--skeleton\"></label>\n\t\t\t\t<div class=\"bx--slider-container bx--skeleton\">\n\t\t\t\t\t<span class=\"bx--slider__range-label\"></span>\n\t\t\t\t\t<div class=\"bx--slider\">\n\t\t\t\t\t\t<div class=\"bx--slider__thumb\"></div>\n\t\t\t\t\t\t<div class=\"bx--slider__track\"></div>\n\t\t\t\t\t\t<div class=\"bx--slider__filled-track\"></div>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class=\"bx--slider__range-label\"></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</ng-template>\n\t",
+            template: "\n\t\t<ng-container *ngIf=\"!skeleton; else skeletonTemplate\">\n\t\t\t<label for=\"slider\" class=\"bx--label\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t</label>\n\t\t\t<div class=\"bx--slider-container\">\n\t\t\t\t<label [id]=\"bottomRangeId\" class=\"bx--slider__range-label\">\n\t\t\t\t\t<ng-content select=\"[minLabel]\"></ng-content>\n\t\t\t\t</label>\n\t\t\t\t<div\n\t\t\t\t\tclass=\"bx--slider\"\n\t\t\t\t\t[ngClass]=\"{'bx--slider--disabled': disabled}\">\n\t\t\t\t\t<div\n\t\t\t\t\t\t#thumb\n\t\t\t\t\t\tclass=\"bx--slider__thumb\"\n\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t[ngStyle]=\"{'left.%': getFractionComplete() * 100}\"\n\t\t\t\t\t\t(mousedown)=\"onMouseDown($event)\"\n\t\t\t\t\t\t(keydown)=\"onKeyDown($event)\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\t#track\n\t\t\t\t\t\tclass=\"bx--slider__track\"\n\t\t\t\t\t\t(click)=\"onClick($event)\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclass=\"bx--slider__filled-track\"\n\t\t\t\t\t\t[ngStyle]=\"{transform: 'translate(0%, -50%)' + scaleX(getFractionComplete())}\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<input\n\t\t\t\t\t\t#range\n\t\t\t\t\t\taria-label=\"slider\"\n\t\t\t\t\t\tclass=\"bx--slider__input\"\n\t\t\t\t\t\ttype=\"range\"\n\t\t\t\t\t\t[step]=\"step\"\n\t\t\t\t\t\t[min]=\"min\"\n\t\t\t\t\t\t[max]=\"max\"\n\t\t\t\t\t\t[value]=\"value.toString()\">\n\t\t\t\t</div>\n\t\t\t\t<label [id]=\"topRangeId\" class=\"bx--slider__range-label\">\n\t\t\t\t\t<ng-content select=\"[maxLabel]\"></ng-content>\n\t\t\t\t</label>\n\t\t\t\t<ng-content select=\"input\"></ng-content>\n\t\t\t</div>\n\t\t</ng-container>\n\n\t\t<ng-template #skeletonTemplate>\n\t\t\t<label class=\"bx--label bx--skeleton\"></label>\n\t\t\t<div class=\"bx--slider-container bx--skeleton\">\n\t\t\t\t<span class=\"bx--slider__range-label\"></span>\n\t\t\t\t<div class=\"bx--slider\">\n\t\t\t\t\t<div class=\"bx--slider__thumb\"></div>\n\t\t\t\t\t<div class=\"bx--slider__track\"></div>\n\t\t\t\t\t<div class=\"bx--slider__filled-track\"></div>\n\t\t\t\t</div>\n\t\t\t\t<span class=\"bx--slider__range-label\"></span>\n\t\t\t</div>\n\t\t</ng-template>\n\t",
             providers: [
                 {
                     provide: _angular_forms__WEBPACK_IMPORTED_MODULE_2__["NG_VALUE_ACCESSOR"],
@@ -15946,7 +16024,7 @@ var Slider = /** @class */ (function () {
                 }
             ]
         }),
-        __metadata("design:paramtypes", [typeof (_e = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _e || Object])
+        __metadata("design:paramtypes", [typeof (_f = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["ElementRef"]) === "function" && _f || Object])
     ], Slider);
     return Slider;
 }());
@@ -16017,8 +16095,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _slider_module__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./slider.module */ "./src/slider/slider.module.ts");
 /* harmony import */ var _documentation_component_documentation_module__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./../documentation-component/documentation.module */ "./src/documentation-component/documentation.module.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 { action } from '@storybook/addon-actions';\nimport { withKnobs, number, text, boolean } from '@storybook/addon-knobs/angular';\n\nimport { SliderModule } from './slider.module';\nimport { DocumentationModule } from './../documentation-component/documentation.module';\n\nstoriesOf('Slider', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [SliderModule, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `<ibm-slider [disabled]=\"disabled\"></ibm-slider>`,\n    props: {\n      disabled: boolean('disabled', false),\n    },\n  }))\n  .add('Advanced', () => ({\n    template: `\n\t\t<ibm-slider\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[value]=\"value\"\n\t\t\t[shiftMultiplier]=\"shiftMultiplier\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t<span minLabel>{{minLabel}}</span>\n\t\t\t<span maxLabel>{{maxLabel}}</span>\n\t\t\t<input/>\n\t\t</ibm-slider>\n\t`,\n    props: {\n      min: number('min', 0),\n      max: number('max', 100),\n      step: number('step', 1),\n      value: number('value', 0),\n      minLabel: text('minLabel', '0'),\n      maxLabel: text('maxLabel', '100'),\n      disabled: boolean('disabled', false),\n      shiftMultiplier: number('shiftMultiplier', 4),\n      valueChange: action('Value changed'),\n    },\n  }))\n  .add('With NgModel', () => ({\n    template: `\n\t\t<ibm-slider [(ngModel)]=\"model\" [disabled]=\"disabled\"></ibm-slider>\n\t\t<br>\n\t\t<span>model: {{model}}</span>\n\t`,\n    props: {\n      model: 0,\n      disabled: boolean('disabled', false),\n    },\n  }))\n  .add('Skeleton', () => ({\n    template: `\n\t\t<ibm-slider skeleton=\"true\"></ibm-slider>\n\t`,\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t<ibm-documentation src=\"documentation/components/Slider.html\"></ibm-documentation>\n\t`,\n  }));\n";
-var __ADDS_MAP__ = { "slider--documentation": { "startLoc": { "col": 7, "line": 64 }, "endLoc": { "col": 4, "line": 68 } }, "slider--skeleton": { "startLoc": { "col": 7, "line": 59 }, "endLoc": { "col": 4, "line": 63 } }, "slider--with-ngmodel": { "startLoc": { "col": 7, "line": 48 }, "endLoc": { "col": 4, "line": 58 } }, "slider--advanced": { "startLoc": { "col": 7, "line": 21 }, "endLoc": { "col": 4, "line": 47 } }, "slider--basic": { "startLoc": { "col": 7, "line": 15 }, "endLoc": { "col": 4, "line": 20 } } };
+var __STORY__ = "import { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { action } from '@storybook/addon-actions';\nimport { withKnobs, number, text, boolean, select } from '@storybook/addon-knobs/angular';\n\nimport { SliderModule } from './slider.module';\nimport { DocumentationModule } from './../documentation-component/documentation.module';\n\nstoriesOf('Slider', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [SliderModule, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `<ibm-slider [disabled]=\"disabled\"></ibm-slider>`,\n    props: {\n      disabled: boolean('disabled', false),\n    },\n  }))\n  .add('Advanced', () => ({\n    template: `\n\t\t<ibm-slider\n\t\t\t[label]=\"label\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[value]=\"value\"\n\t\t\t[shiftMultiplier]=\"shiftMultiplier\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t<span minLabel>{{minLabel}}</span>\n\t\t\t<span maxLabel>{{maxLabel}}</span>\n\t\t\t<input [ngClass]=\"{'bx--text-input--light': theme === 'light'}\"/>\n\t\t</ibm-slider>\n\t`,\n    props: {\n      min: number('min', 0),\n      max: number('max', 100),\n      step: number('step', 1),\n      value: number('value', 0),\n      label: text('Label text', 'Slider Label'),\n      minLabel: text('minLabel', '0'),\n      maxLabel: text('maxLabel', '100'),\n      theme: select('Theme', ['dark', 'light'], 'dark'),\n      disabled: boolean('disabled', false),\n      shiftMultiplier: number('shiftMultiplier', 4),\n      valueChange: action('Value changed'),\n    },\n  }))\n  .add('With NgModel', () => ({\n    template: `\n\t\t<ibm-slider [(ngModel)]=\"model\" [disabled]=\"disabled\"></ibm-slider>\n\t\t<br>\n\t\t<span>model: {{model}}</span>\n\t`,\n    props: {\n      model: 0,\n      disabled: boolean('disabled', false),\n    },\n  }))\n  .add('Skeleton', () => ({\n    template: `\n\t\t<ibm-slider skeleton=\"true\"></ibm-slider>\n\t`,\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t<ibm-documentation src=\"documentation/components/Slider.html\"></ibm-documentation>\n\t`,\n  }));\n";
+var __ADDS_MAP__ = { "slider--documentation": { "startLoc": { "col": 7, "line": 67 }, "endLoc": { "col": 4, "line": 71 } }, "slider--skeleton": { "startLoc": { "col": 7, "line": 62 }, "endLoc": { "col": 4, "line": 66 } }, "slider--with-ngmodel": { "startLoc": { "col": 7, "line": 51 }, "endLoc": { "col": 4, "line": 61 } }, "slider--advanced": { "startLoc": { "col": 7, "line": 21 }, "endLoc": { "col": 4, "line": 50 } }, "slider--basic": { "startLoc": { "col": 7, "line": 15 }, "endLoc": { "col": 4, "line": 20 } } };
 
 
 
@@ -16035,14 +16113,16 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Slider", m
     }
 }); })
     .add("Advanced", function () { return ({
-    template: "\n\t\t<ibm-slider\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[value]=\"value\"\n\t\t\t[shiftMultiplier]=\"shiftMultiplier\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t<span minLabel>{{minLabel}}</span>\n\t\t\t<span maxLabel>{{maxLabel}}</span>\n\t\t\t<input/>\n\t\t</ibm-slider>\n\t",
+    template: "\n\t\t<ibm-slider\n\t\t\t[label]=\"label\"\n\t\t\t[min]=\"min\"\n\t\t\t[max]=\"max\"\n\t\t\t[step]=\"step\"\n\t\t\t[value]=\"value\"\n\t\t\t[shiftMultiplier]=\"shiftMultiplier\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(valueChange)=\"valueChange($event)\">\n\t\t\t<span minLabel>{{minLabel}}</span>\n\t\t\t<span maxLabel>{{maxLabel}}</span>\n\t\t\t<input [ngClass]=\"{'bx--text-input--light': theme === 'light'}\"/>\n\t\t</ibm-slider>\n\t",
     props: {
         min: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["number"])("min", 0),
         max: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["number"])("max", 100),
         step: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["number"])("step", 1),
         value: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["number"])("value", 0),
+        label: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("Label text", "Slider Label"),
         minLabel: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("minLabel", "0"),
         maxLabel: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["text"])("maxLabel", "100"),
+        theme: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["select"])("Theme", ["dark", "light"], "dark"),
         disabled: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["boolean"])("disabled", false),
         shiftMultiplier: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_2__["number"])("shiftMultiplier", 4),
         valueChange: Object(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__["action"])("Value changed")
@@ -18895,7 +18975,7 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
     if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 };
 var withStorySource = __webpack_require__(/*! @storybook/addon-storysource */ "./node_modules/@storybook/addon-storysource/dist/index.js").withStorySource;
-var __STORY__ = "import { PaginationModule } from './../pagination/pagination.module';\nimport { TemplateRef, Component, ViewChild, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';\nimport { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { withKnobs, boolean, select, number, text } from '@storybook/addon-knobs/angular';\n\nimport {\n  Table,\n  TableModule,\n  TableModel,\n  TableItem,\n  TableHeaderItem,\n  NFormsModule,\n  DialogModule,\n  SearchModule,\n  ButtonModule,\n  DocumentationModule,\n} from '../';\n\nimport { Settings16Module } from '@carbon/icons-angular/lib/settings/16';\nimport { Delete16Module } from '@carbon/icons-angular/lib/delete/16';\nimport { Save16Module } from '@carbon/icons-angular/lib/save/16';\nimport { Download16Module } from '@carbon/icons-angular/lib/download/16';\nimport { Add20Module } from '@carbon/icons-angular/lib/add/20';\n\nimport { clone } from '../utils/utils';\n\n@Component({\n  selector: 'app-table',\n  template: `\n    <ibm-table\n      style=\"display: block; width: 650px;\"\n      [model]=\"model\"\n      [size]=\"size\"\n      [showSelectionColumn]=\"showSelectionColumn\"\n      [striped]=\"striped\"\n      [isDataGrid]=\"isDataGrid\"\n      (sort)=\"simpleSort($event)\"\n    >\n      <ng-content></ng-content>\n    </ibm-table>\n  `,\n})\nclass TableStory implements OnInit, OnChanges {\n  @Input() model = new TableModel();\n  @Input() size = 'md';\n  @Input() showSelectionColumn = true;\n  @Input() striped = true;\n  @Input() sortable = true;\n  @Input() isDataGrid = false;\n\n  ngOnInit() {\n    this.model.header = [\n      new TableHeaderItem({\n        data: 'Name',\n      }),\n      new TableHeaderItem({\n        data: 'hwer',\n        className: 'my-class',\n      }),\n    ];\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.sortable) {\n      for (let column of this.model.header) {\n        column.sortable = changes.sortable.currentValue;\n      }\n    }\n  }\n\n  simpleSort(index: number) {\n    sort(simpleModel, index);\n  }\n}\n\n@Component({\n  selector: 'app-custom-table',\n  template: `\n    <ibm-table-toolbar [model]=\"model\">\n      <button ibmButton=\"primary\" (click)=\"addRow()\">Add row</button>\n      <button ibmButton=\"primary\" (click)=\"addColumn()\">Add column</button>\n    </ibm-table-toolbar>\n\n    <ng-template #customTableItemTemplate let-data=\"data\">\n      <a [attr.href]=\"data.link\">{{ data.name }} {{ data.surname }}</a>\n    </ng-template>\n    <ng-template #customHeaderTemplate let-data=\"data\">\n      <i\n        ><a [attr.href]=\"data.link\">{{ data.name }}</a></i\n      >\n    </ng-template>\n\n    <ibm-table\n      style=\"display: block; width: 650px;\"\n      [model]=\"model\"\n      [size]=\"size\"\n      [showSelectionColumn]=\"showSelectionColumn\"\n      [striped]=\"striped\"\n      [isDataGrid]=\"isDataGrid\"\n      (sort)=\"customSort($event)\"\n    >\n    </ibm-table>\n  `,\n})\nclass DynamicTableStory implements OnInit {\n  @Input() model = new TableModel();\n  @Input() size = 'md';\n  @Input() showSelectionColumn = true;\n  @Input() striped = true;\n  @Input() isDataGrid = false;\n\n  @ViewChild('customHeaderTemplate')\n  protected customHeaderTemplate: TemplateRef<any>;\n  @ViewChild('customTableItemTemplate')\n  protected customTableItemTemplate: TemplateRef<any>;\n\n  ngOnInit() {\n    this.model.data = [\n      [\n        new TableItem({ data: 'Name 1' }),\n        new TableItem({ data: { name: 'Lessy', link: '/table' }, template: this.customTableItemTemplate }),\n      ],\n      [new TableItem({ data: 'Name 3' }), new TableItem({ data: 'swer' })],\n      [\n        new TableItem({ data: 'Name 2' }),\n        new TableItem({ data: { name: 'Alice', surname: 'Bob' }, template: this.customTableItemTemplate }),\n      ],\n      [new TableItem({ data: 'Name 4' }), new TableItem({ data: 'twer' })],\n    ];\n    this.model.header = [\n      new TableHeaderItem({ data: 'Very long title indeed' }),\n      new CustomHeaderItem({\n        data: { name: 'Custom header', link: '/table' },\n        template: this.customHeaderTemplate,\n        style: { width: 'auto' },\n      }),\n    ];\n  }\n\n  customSort(index: number) {\n    this.sort(this.model, index);\n  }\n\n  sort(model, index: number) {\n    if (model.header[index].sorted) {\n      // if already sorted flip sorting direction\n      model.header[index].ascending = model.header[index].descending;\n    }\n    model.sort(index);\n  }\n\n  addRow() {\n    const lastRowCopy = clone(this.model.row(this.model.data.length - 1));\n    this.model.addRow(lastRowCopy);\n  }\n\n  addColumn() {\n    let column = Array(this.model.data.length).fill(new TableItem({ data: `Column ${this.model.row(0).length}` }));\n    this.model.addColumn(column);\n  }\n}\n\n@Component({\n  selector: 'app-expansion-table',\n  template: `\n    <ng-template #customTableItemTemplate let-data=\"data\">\n      <a [attr.href]=\"data.link\">{{ data.name }} {{ data.surname }}</a>\n    </ng-template>\n    <ng-template #customHeaderTemplate let-data=\"data\">\n      <i\n        ><a [attr.href]=\"data.link\">{{ data.name }}</a></i\n      >\n    </ng-template>\n\n    <ibm-table\n      style=\"display: block; width: 650px;\"\n      [model]=\"model\"\n      [size]=\"size\"\n      [showSelectionColumn]=\"showSelectionColumn\"\n      [striped]=\"striped\"\n      (sort)=\"customSort($event)\"\n      [isDataGrid]=\"isDataGrid\"\n    >\n    </ibm-table>\n  `,\n})\nclass ExpansionTableStory implements OnInit {\n  @Input() model = new TableModel();\n  @Input() size = 'md';\n  @Input() showSelectionColumn = true;\n  @Input() striped = true;\n  @Input() isDataGrid = false;\n\n  @ViewChild('customHeaderTemplate')\n  protected customHeaderTemplate: TemplateRef<any>;\n  @ViewChild('customTableItemTemplate')\n  protected customTableItemTemplate: TemplateRef<any>;\n\n  ngOnInit() {\n    this.model.data = [\n      [\n        new TableItem({ data: 'Name 1', expandedData: 'No template' }),\n        new TableItem({ data: { name: 'Lessy', link: '#' }, template: this.customTableItemTemplate }),\n      ],\n      [\n        new TableItem({\n          data: 'Name 3',\n          expandedData: { name: 'In', surname: 'Template' },\n          expandedTemplate: this.customTableItemTemplate,\n        }),\n        new TableItem({ data: 'swer' }),\n      ],\n      [\n        new TableItem({ data: 'Name 2' }),\n        new TableItem({ data: { name: 'Alice', surname: 'Bob' }, template: this.customTableItemTemplate }),\n      ],\n      [new TableItem({ data: 'Name 4' }), new TableItem({ data: 'twer' })],\n    ];\n    this.model.header = [\n      new TableHeaderItem({ data: 'Very long title indeed' }),\n      new CustomHeaderItem({\n        data: { name: 'Custom header', link: '#' },\n        template: this.customHeaderTemplate,\n        style: { width: 'auto' },\n      }),\n    ];\n  }\n\n  customSort(index: number) {\n    this.sort(this.model, index);\n  }\n\n  sort(model, index: number) {\n    if (model.header[index].sorted) {\n      // if already sorted flip sorting direction\n      model.header[index].ascending = model.header[index].descending;\n    }\n    model.sort(index);\n  }\n}\n\n@Component({\n  selector: 'app-overflow-table',\n  template: `\n    <ng-template #overflowMenuItemTemplate let-data=\"data\">\n      <ibm-overflow-menu>\n        <ibm-overflow-menu-option>\n          First Option\n        </ibm-overflow-menu-option>\n        <ibm-overflow-menu-option>\n          Second Option\n        </ibm-overflow-menu-option>\n        <ibm-overflow-menu-option>\n          Third Option\n        </ibm-overflow-menu-option>\n      </ibm-overflow-menu>\n    </ng-template>\n\n    <ibm-table\n      style=\"display: block; width: 650px;\"\n      [model]=\"model\"\n      [size]=\"size\"\n      [showSelectionColumn]=\"showSelectionColumn\"\n      [isDataGrid]=\"isDataGrid\"\n      [striped]=\"striped\"\n    >\n    </ibm-table>\n  `,\n})\nclass OverflowTableStory implements OnInit {\n  @Input() model = new TableModel();\n  @Input() size = 'md';\n  @Input() showSelectionColumn = true;\n  @Input() striped = true;\n  @Input() isDataGrid = false;\n\n  @ViewChild('overflowMenuItemTemplate')\n  protected overflowMenuItemTemplate: TemplateRef<any>;\n\n  ngOnInit() {\n    this.model.data = [\n      [\n        new TableItem({ data: 'Name 1' }),\n        new TableItem({ data: { id: '1' }, template: this.overflowMenuItemTemplate }),\n      ],\n      [\n        new TableItem({ data: 'Name 2' }),\n        new TableItem({ data: { id: '2' }, template: this.overflowMenuItemTemplate }),\n      ],\n      [\n        new TableItem({ data: 'Name 3' }),\n        new TableItem({ data: { id: '3' }, template: this.overflowMenuItemTemplate }),\n      ],\n      [\n        new TableItem({ data: 'Name 4' }),\n        new TableItem({ data: { id: '4' }, template: this.overflowMenuItemTemplate }),\n      ],\n    ];\n    this.model.header = [new TableHeaderItem({ data: 'Name' }), new TableHeaderItem({ data: 'Actions' })];\n  }\n}\n\n@Component({\n  selector: 'app-pagination-table',\n  template: `\n    <ng-template #paginationTableItemTemplate let-data=\"data\">\n      <a [attr.href]=\"data.link\">{{ data.name }} {{ data.surname }}</a>\n    </ng-template>\n    <ng-template #filterableHeaderTemplate let-data=\"data\">\n      <i\n        ><a [attr.href]=\"data.link\">{{ data.name }}</a></i\n      >\n    </ng-template>\n    <ng-template #filter let-popover=\"popover\" let-filter=\"data\">\n      <ibm-label class=\"first-label\">\n        Value\n        <input type=\"text\" [(ngModel)]=\"filter1\" class=\"input-field\" />\n        <button class=\"btn--primary\" (click)=\"filter.data = filter1; popover.doClose()\">Apply</button>\n        <button class=\"btn--secondary\" (click)=\"popover.doClose()\">Cancel</button>\n      </ibm-label>\n    </ng-template>\n\n    <ibm-table style=\"display: block; width: 650px;\" [model]=\"model\" (sort)=\"paginationSort($event)\"></ibm-table>\n    <ibm-pagination [model]=\"model\" (selectPage)=\"selectPage($event)\"></ibm-pagination>\n  `,\n})\nclass PaginationTableStory implements OnInit {\n  @Input() model = new TableModel();\n\n  @Input() get totalDataLength() {\n    return this.model.totalDataLength;\n  }\n  set totalDataLength(value) {\n    this.model.totalDataLength = value;\n  }\n\n  @ViewChild('filter')\n  filter: TemplateRef<any>;\n  @ViewChild('filterableHeaderTemplate')\n  protected filterableHeaderTemplate: TemplateRef<any>;\n  @ViewChild('paginationTableItemTemplate')\n  protected paginationTableItemTemplate: TemplateRef<any>;\n\n  ngOnInit() {\n    this.model.data = [[]];\n    this.model.header = [\n      new TableHeaderItem({ data: 'Very long title indeed' }),\n      new TableHeaderItem({\n        data: 'Very long title indeed',\n        style: { width: 'auto' },\n      }),\n    ];\n\n    this.model.pageLength = 10;\n    this.model.totalDataLength = 105;\n    this.selectPage(1);\n  }\n\n  customSort(index: number) {\n    this.sort(this.model, index);\n  }\n\n  sort(model, index: number) {\n    if (model.header[index].sorted) {\n      // if already sorted flip sorting direction\n      model.header[index].ascending = model.header[index].descending;\n    }\n    model.sort(index);\n  }\n\n  getPage(page: number) {\n    const line = line => [`Item ${line}:1!`, { name: 'Item', surname: `${line}:2` }];\n\n    const fullPage = [];\n\n    for (\n      let i = (page - 1) * this.model.pageLength;\n      i < page * this.model.pageLength && i < this.model.totalDataLength;\n      i++\n    ) {\n      fullPage.push(line(i + 1));\n    }\n\n    return new Promise(resolve => {\n      setTimeout(() => resolve(fullPage), 150);\n    });\n  }\n\n  selectPage(page) {\n    this.getPage(page).then((data: Array<Array<any>>) => {\n      // set the data and update page\n      this.model.data = this.prepareData(data);\n      this.model.currentPage = page;\n    });\n  }\n\n  protected prepareData(data: Array<Array<any>>) {\n    // create new data from the service data\n    let newData = [];\n    data.forEach(dataRow => {\n      let row = [];\n      dataRow.forEach(dataElement => {\n        row.push(\n          new TableItem({\n            data: dataElement,\n            template: typeof dataElement === 'string' ? undefined : this.paginationTableItemTemplate,\n            // your template can handle all the data types so you don't have to conditionally set it\n            // you can also set different templates for different columns based on index\n          })\n        );\n      });\n      newData.push(row);\n    });\n    return newData;\n  }\n}\n\nclass CustomHeaderItem extends TableHeaderItem {\n  // used for custom sorting\n  compare(one: TableItem, two: TableItem) {\n    const stringOne = (one.data.name || one.data.surname || one.data).toLowerCase();\n    const stringTwo = (two.data.name || two.data.surname || two.data).toLowerCase();\n\n    if (stringOne > stringTwo) {\n      return 1;\n    } else if (stringOne < stringTwo) {\n      return -1;\n    } else {\n      return 0;\n    }\n  }\n}\n\nconst simpleModel = new TableModel();\nsimpleModel.data = [\n  [new TableItem({ data: 'Name 1' }), new TableItem({ data: 'qwer' })],\n  [new TableItem({ data: 'Name 3' }), new TableItem({ data: 'zwer' })],\n  [new TableItem({ data: 'Name 2' }), new TableItem({ data: 'swer' })],\n  [new TableItem({ data: 'Name 4' }), new TableItem({ data: 'twer' })],\n];\nsimpleModel.header = [new TableHeaderItem({ data: 'Name' }), new TableHeaderItem({ data: 'hwer' })];\n\nconst emptyModel = new TableModel();\nemptyModel.header = [\n  new TableHeaderItem({ data: 'Name' }),\n  new TableHeaderItem({ data: 'hwer', style: { width: 'auto' } }),\n];\n\nfunction sort(model, index: number) {\n  if (model.header[index].sorted) {\n    // if already sorted flip sorting direction\n    model.header[index].ascending = model.header[index].descending;\n  }\n  model.sort(index);\n}\n\n@Component({\n  selector: 'app-skeleton-table',\n  template: `\n    <ibm-table\n      style=\"display: block; width: 800px;\"\n      [model]=\"skeletonModel\"\n      [skeleton]=\"skeleton\"\n      [size]=\"size\"\n      [striped]=\"striped\"\n    >\n      <ng-content></ng-content>\n    </ibm-table>\n  `,\n})\nclass SkeletonTableStory implements OnInit, OnChanges {\n  @Input() size = 'md';\n  @Input() striped = false;\n  @Input() skeleton = true;\n  @Input() skeletonModel = new TableModel();\n\n  ngOnInit() {\n    // Creates an empty table with 5 rows and 5 columns\n    this.skeletonModel = Table.skeletonModel(5, 5);\n  }\n}\n\nstoriesOf('Table', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [\n        NFormsModule,\n        TableModule,\n        DialogModule,\n        PaginationModule,\n        SearchModule,\n        ButtonModule,\n        Settings16Module,\n        Delete16Module,\n        Save16Module,\n        Download16Module,\n        Add20Module,\n        DocumentationModule,\n      ],\n      declarations: [\n        TableStory,\n        DynamicTableStory,\n        ExpansionTableStory,\n        OverflowTableStory,\n        PaginationTableStory,\n        SkeletonTableStory,\n      ],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</ibm-table-container>\n\t`,\n    props: {\n      model: simpleModel,\n      size: select('size', { Small: 'sm', Normal: 'md', Large: 'lg' }, 'md'),\n      title: text('Title', 'Table title'),\n      description: text('Description', ''),\n      showSelectionColumn: boolean('showSelectionColumn', true),\n      striped: boolean('striped', false),\n      sortable: boolean('sortable', true),\n      isDataGrid: boolean('Data grid keyboard interactions', false),\n    },\n  }))\n  .add('With no data', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\">\n\t\t\t\t<tbody><tr><td class=\"no-data\" colspan=\"3\"><div>No data.</div></td></tr></tbody>\n\t\t\t</app-table>\n\t\t</ibm-table-container>\n\t\t`,\n    styles: [\n      `\n\t\t\t.no-data {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 150px;\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t`,\n    ],\n    props: {\n      model: emptyModel,\n      size: select('size', { Small: 'sm', Normal: 'md', Large: 'lg' }, 'md'),\n      title: text('Title', 'Table title'),\n      description: text('Description', 'With no data'),\n      showSelectionColumn: boolean('showSelectionColumn', true),\n      striped: boolean('striped', false),\n    },\n  }))\n  .add('With toolbar', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<ibm-table-toolbar [model]=\"model\">\n\t\t\t\t<ibm-table-toolbar-actions>\n\t\t\t\t\t<button ibmButton=\"primary\">\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\t<ibm-icon-delete16 class=\"bx--btn__icon\"></ibm-icon-delete16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button ibmButton=\"primary\">\n\t\t\t\t\t\tSave\n\t\t\t\t\t\t<ibm-icon-save16 class=\"bx--btn__icon\"></ibm-icon-save16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button ibmButton=\"primary\">\n\t\t\t\t\t\tDownload\n\t\t\t\t\t\t<ibm-icon-download16 class=\"bx--btn__icon\"></ibm-icon-download16>\n\t\t\t\t\t</button>\n\t\t\t\t</ibm-table-toolbar-actions>\n\t\t\t\t\t<ibm-table-toolbar-content>\n\t\t\t\t\t<ibm-table-toolbar-search [expandable]=\"true\"></ibm-table-toolbar-search>\n\t\t\t\t\t<button ibmButton=\"toolbar-action\">\n\t\t\t\t\t\t<ibm-icon-settings16 class=\"bx--toolbar-action__icon\"></ibm-icon-settings16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button ibmButton=\"primary\" size=\"sm\">\n\t\t\t\t\t\tPrimary Button\n\t\t\t\t\t\t<ibm-icon-add20 class=\"bx--btn__icon\"></ibm-icon-add20>\n\t\t\t\t\t</button>\n\t\t\t\t</ibm-table-toolbar-content>\n\t\t\t</ibm-table-toolbar>\n\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</ibm-table-container>\n\t`,\n    props: {\n      model: simpleModel,\n      size: select('size', { Small: 'sm', Normal: 'md', Large: 'lg' }, 'md'),\n      title: text('Title', 'Table title'),\n      description: text('Description', 'With toolbar'),\n      showSelectionColumn: boolean('showSelectionColumn', true),\n      striped: boolean('striped', false),\n      sortable: boolean('sortable', true),\n      isDataGrid: boolean('Data grid keyboard interactions', false),\n    },\n  }))\n  .add('With expansion', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-expansion-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-expansion-table>\n\t\t</ibm-table-container>\n\t\t`,\n    props: {\n      size: select('size', { Small: 'sm', Normal: 'md', Large: 'lg' }, 'md'),\n      title: text('Title', 'Table title'),\n      description: text('Description', 'With expansion'),\n      showSelectionColumn: boolean('showSelectionColumn', true),\n      striped: boolean('striped', false),\n      isDataGrid: boolean('Data grid keyboard interactions', false),\n    },\n  }))\n  .add('With dynamic content', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-custom-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-custom-table>\n\t\t</ibm-table-container>\n\t\t`,\n    props: {\n      size: select('size', { Small: 'sm', Normal: 'md', Large: 'lg' }, 'md'),\n      title: text('Title', 'Table title'),\n      description: text('Description', 'With dynamic content'),\n      showSelectionColumn: boolean('showSelectionColumn', true),\n      striped: boolean('striped', false),\n      isDataGrid: boolean('Data grid keyboard interactions', false),\n    },\n  }))\n  .add('With overflow menu', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-overflow-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-overflow-table>\n\t\t</ibm-table-container>\n\t\t`,\n    props: {\n      size: select('size', { Small: 'sm', Normal: 'md', Large: 'lg' }, 'md'),\n      title: text('Title', 'Table title'),\n      description: text('Description', 'With overflow menu'),\n      showSelectionColumn: boolean('showSelectionColumn', true),\n      striped: boolean('striped', false),\n      isDataGrid: boolean('Data grid keyboard interactions', false),\n    },\n  }))\n  .add('With pagination', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-pagination-table [totalDataLength]=\"totalDataLength\" [model]=\"model\"></app-pagination-table>\n\t\t</ibm-table-container>\n\t\t`,\n    props: {\n      model: simpleModel,\n      totalDataLength: number('totalDataLength', 105),\n      title: text('Title', 'Table title'),\n      description: text('Description', 'With pagination'),\n    },\n  }))\n  .add('Skeleton', () => ({\n    template: `\n\t\t\t<app-skeleton-table\n\t\t\t\t[skeletonModel]=\"skeletonModel\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[striped]=\"striped\">\n\t\t\t</app-skeleton-table>\n\t`,\n    props: {\n      size: select('size', { Small: 'sm', Normal: 'md', Large: 'lg' }, 'md'),\n      striped: boolean('striped', false),\n    },\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Table.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
+var __STORY__ = "import { PaginationModule } from './../pagination/pagination.module';\nimport { TemplateRef, Component, ViewChild, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';\nimport { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { withKnobs, boolean, select, number, text } from '@storybook/addon-knobs/angular';\n\nimport {\n  Table,\n  TableModule,\n  TableModel,\n  TableItem,\n  TableHeaderItem,\n  NFormsModule,\n  DialogModule,\n  SearchModule,\n  ButtonModule,\n  DocumentationModule,\n} from '../';\n\nimport { Settings16Module } from '@carbon/icons-angular/lib/settings/16';\nimport { Delete16Module } from '@carbon/icons-angular/lib/delete/16';\nimport { Save16Module } from '@carbon/icons-angular/lib/save/16';\nimport { Download16Module } from '@carbon/icons-angular/lib/download/16';\nimport { Add20Module } from '@carbon/icons-angular/lib/add/20';\n\nimport { clone } from '../utils/utils';\n\n@Component({\n  selector: 'app-table',\n  template: `\n    <ibm-table\n      style=\"display: block; width: 650px;\"\n      [model]=\"model\"\n      [size]=\"size\"\n      [showSelectionColumn]=\"showSelectionColumn\"\n      [striped]=\"striped\"\n      [isDataGrid]=\"isDataGrid\"\n      (sort)=\"simpleSort($event)\"\n    >\n      <ng-content></ng-content>\n    </ibm-table>\n  `,\n})\nclass TableStory implements OnInit, OnChanges {\n  @Input() model = new TableModel();\n  @Input() size = 'md';\n  @Input() showSelectionColumn = true;\n  @Input() striped = true;\n  @Input() sortable = true;\n  @Input() isDataGrid = false;\n\n  ngOnInit() {\n    this.model.header = [\n      new TableHeaderItem({\n        data: 'Name',\n      }),\n      new TableHeaderItem({\n        data: 'hwer',\n        className: 'my-class',\n      }),\n    ];\n  }\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes.sortable) {\n      for (let column of this.model.header) {\n        column.sortable = changes.sortable.currentValue;\n      }\n    }\n  }\n\n  simpleSort(index: number) {\n    sort(simpleModel, index);\n  }\n}\n\n@Component({\n  selector: 'app-custom-table',\n  template: `\n    <ibm-table-toolbar [model]=\"model\">\n      <button ibmButton=\"primary\" (click)=\"addRow()\">Add row</button>\n      <button ibmButton=\"primary\" (click)=\"addColumn()\">Add column</button>\n    </ibm-table-toolbar>\n\n    <ng-template #customTableItemTemplate let-data=\"data\">\n      <a [attr.href]=\"data.link\">{{ data.name }} {{ data.surname }}</a>\n    </ng-template>\n    <ng-template #customHeaderTemplate let-data=\"data\">\n      <i\n        ><a [attr.href]=\"data.link\">{{ data.name }}</a></i\n      >\n    </ng-template>\n\n    <ibm-table\n      style=\"display: block; width: 650px;\"\n      [model]=\"model\"\n      [size]=\"size\"\n      [showSelectionColumn]=\"showSelectionColumn\"\n      [striped]=\"striped\"\n      [isDataGrid]=\"isDataGrid\"\n      (sort)=\"customSort($event)\"\n    >\n    </ibm-table>\n  `,\n})\nclass DynamicTableStory implements OnInit {\n  @Input() model = new TableModel();\n  @Input() size = 'md';\n  @Input() showSelectionColumn = true;\n  @Input() striped = true;\n  @Input() isDataGrid = false;\n\n  @ViewChild('customHeaderTemplate')\n  protected customHeaderTemplate: TemplateRef<any>;\n  @ViewChild('customTableItemTemplate')\n  protected customTableItemTemplate: TemplateRef<any>;\n\n  ngOnInit() {\n    this.model.data = [\n      [\n        new TableItem({ data: 'Name 1' }),\n        new TableItem({ data: { name: 'Lessy', link: '#' }, template: this.customTableItemTemplate }),\n      ],\n      [new TableItem({ data: 'Name 3' }), new TableItem({ data: 'swer' })],\n      [\n        new TableItem({ data: 'Name 2' }),\n        new TableItem({ data: { name: 'Alice', surname: 'Bob' }, template: this.customTableItemTemplate }),\n      ],\n      [new TableItem({ data: 'Name 4' }), new TableItem({ data: 'twer' })],\n    ];\n    this.model.header = [\n      new TableHeaderItem({ data: 'Very long title indeed' }),\n      new CustomHeaderItem({\n        data: { name: 'Custom header', link: '#' },\n        template: this.customHeaderTemplate,\n        style: { width: 'auto' },\n      }),\n    ];\n  }\n\n  customSort(index: number) {\n    this.sort(this.model, index);\n  }\n\n  sort(model, index: number) {\n    if (model.header[index].sorted) {\n      // if already sorted flip sorting direction\n      model.header[index].ascending = model.header[index].descending;\n    }\n    model.sort(index);\n  }\n\n  addRow() {\n    const lastRowCopy = clone(this.model.row(this.model.data.length - 1));\n    this.model.addRow(lastRowCopy);\n  }\n\n  addColumn() {\n    let column = Array(this.model.data.length).fill(new TableItem({ data: `Column ${this.model.row(0).length}` }));\n    this.model.addColumn(column);\n  }\n}\n\n@Component({\n  selector: 'app-expansion-table',\n  template: `\n    <ng-template #customTableItemTemplate let-data=\"data\">\n      <a [attr.href]=\"data.link\">{{ data.name }} {{ data.surname }}</a>\n    </ng-template>\n    <ng-template #customHeaderTemplate let-data=\"data\">\n      <i\n        ><a [attr.href]=\"data.link\">{{ data.name }}</a></i\n      >\n    </ng-template>\n\n    <ibm-table\n      style=\"display: block; width: 650px;\"\n      [model]=\"model\"\n      [size]=\"size\"\n      [showSelectionColumn]=\"showSelectionColumn\"\n      [striped]=\"striped\"\n      (sort)=\"customSort($event)\"\n      [isDataGrid]=\"isDataGrid\"\n    >\n    </ibm-table>\n  `,\n})\nclass ExpansionTableStory implements OnInit {\n  @Input() model = new TableModel();\n  @Input() size = 'md';\n  @Input() showSelectionColumn = true;\n  @Input() striped = true;\n  @Input() isDataGrid = false;\n\n  @ViewChild('customHeaderTemplate')\n  protected customHeaderTemplate: TemplateRef<any>;\n  @ViewChild('customTableItemTemplate')\n  protected customTableItemTemplate: TemplateRef<any>;\n\n  ngOnInit() {\n    this.model.data = [\n      [\n        new TableItem({ data: 'Name 1', expandedData: 'No template' }),\n        new TableItem({ data: { name: 'Lessy', link: '#' }, template: this.customTableItemTemplate }),\n      ],\n      [\n        new TableItem({\n          data: 'Name 3',\n          expandedData: { name: 'In', surname: 'Template' },\n          expandedTemplate: this.customTableItemTemplate,\n        }),\n        new TableItem({ data: 'swer' }),\n      ],\n      [\n        new TableItem({ data: 'Name 2' }),\n        new TableItem({ data: { name: 'Alice', surname: 'Bob' }, template: this.customTableItemTemplate }),\n      ],\n      [new TableItem({ data: 'Name 4' }), new TableItem({ data: 'twer' })],\n    ];\n    this.model.header = [\n      new TableHeaderItem({ data: 'Very long title indeed' }),\n      new CustomHeaderItem({\n        data: { name: 'Custom header', link: '#' },\n        template: this.customHeaderTemplate,\n        style: { width: 'auto' },\n      }),\n    ];\n  }\n\n  customSort(index: number) {\n    this.sort(this.model, index);\n  }\n\n  sort(model, index: number) {\n    if (model.header[index].sorted) {\n      // if already sorted flip sorting direction\n      model.header[index].ascending = model.header[index].descending;\n    }\n    model.sort(index);\n  }\n}\n\n@Component({\n  selector: 'app-overflow-table',\n  template: `\n    <ng-template #overflowMenuItemTemplate let-data=\"data\">\n      <ibm-overflow-menu>\n        <ibm-overflow-menu-option>\n          First Option\n        </ibm-overflow-menu-option>\n        <ibm-overflow-menu-option>\n          Second Option\n        </ibm-overflow-menu-option>\n        <ibm-overflow-menu-option>\n          Third Option\n        </ibm-overflow-menu-option>\n      </ibm-overflow-menu>\n    </ng-template>\n\n    <ibm-table\n      style=\"display: block; width: 650px;\"\n      [model]=\"model\"\n      [size]=\"size\"\n      [showSelectionColumn]=\"showSelectionColumn\"\n      [isDataGrid]=\"isDataGrid\"\n      [striped]=\"striped\"\n    >\n    </ibm-table>\n  `,\n})\nclass OverflowTableStory implements OnInit {\n  @Input() model = new TableModel();\n  @Input() size = 'md';\n  @Input() showSelectionColumn = true;\n  @Input() striped = true;\n  @Input() isDataGrid = false;\n\n  @ViewChild('overflowMenuItemTemplate')\n  protected overflowMenuItemTemplate: TemplateRef<any>;\n\n  ngOnInit() {\n    this.model.data = [\n      [\n        new TableItem({ data: 'Name 1' }),\n        new TableItem({ data: { id: '1' }, template: this.overflowMenuItemTemplate }),\n      ],\n      [\n        new TableItem({ data: 'Name 2' }),\n        new TableItem({ data: { id: '2' }, template: this.overflowMenuItemTemplate }),\n      ],\n      [\n        new TableItem({ data: 'Name 3' }),\n        new TableItem({ data: { id: '3' }, template: this.overflowMenuItemTemplate }),\n      ],\n      [\n        new TableItem({ data: 'Name 4' }),\n        new TableItem({ data: { id: '4' }, template: this.overflowMenuItemTemplate }),\n      ],\n    ];\n    this.model.header = [new TableHeaderItem({ data: 'Name' }), new TableHeaderItem({ data: 'Actions' })];\n  }\n}\n\n@Component({\n  selector: 'app-pagination-table',\n  template: `\n    <ng-template #paginationTableItemTemplate let-data=\"data\">\n      <a [attr.href]=\"data.link\">{{ data.name }} {{ data.surname }}</a>\n    </ng-template>\n    <ng-template #filterableHeaderTemplate let-data=\"data\">\n      <i\n        ><a [attr.href]=\"data.link\">{{ data.name }}</a></i\n      >\n    </ng-template>\n    <ng-template #filter let-popover=\"popover\" let-filter=\"data\">\n      <ibm-label class=\"first-label\">\n        Value\n        <input type=\"text\" [(ngModel)]=\"filter1\" class=\"input-field\" />\n        <button class=\"btn--primary\" (click)=\"filter.data = filter1; popover.doClose()\">Apply</button>\n        <button class=\"btn--secondary\" (click)=\"popover.doClose()\">Cancel</button>\n      </ibm-label>\n    </ng-template>\n\n    <ibm-table style=\"display: block; width: 650px;\" [model]=\"model\" (sort)=\"paginationSort($event)\"></ibm-table>\n    <ibm-pagination [model]=\"model\" (selectPage)=\"selectPage($event)\"></ibm-pagination>\n  `,\n})\nclass PaginationTableStory implements OnInit {\n  @Input() model = new TableModel();\n\n  @Input() get totalDataLength() {\n    return this.model.totalDataLength;\n  }\n  set totalDataLength(value) {\n    this.model.totalDataLength = value;\n  }\n\n  @ViewChild('filter')\n  filter: TemplateRef<any>;\n  @ViewChild('filterableHeaderTemplate')\n  protected filterableHeaderTemplate: TemplateRef<any>;\n  @ViewChild('paginationTableItemTemplate')\n  protected paginationTableItemTemplate: TemplateRef<any>;\n\n  ngOnInit() {\n    this.model.data = [[]];\n    this.model.header = [\n      new TableHeaderItem({ data: 'Very long title indeed' }),\n      new TableHeaderItem({\n        data: 'Very long title indeed',\n        style: { width: 'auto' },\n      }),\n    ];\n\n    this.model.pageLength = 10;\n    this.model.totalDataLength = 105;\n    this.selectPage(1);\n  }\n\n  customSort(index: number) {\n    this.sort(this.model, index);\n  }\n\n  sort(model, index: number) {\n    if (model.header[index].sorted) {\n      // if already sorted flip sorting direction\n      model.header[index].ascending = model.header[index].descending;\n    }\n    model.sort(index);\n  }\n\n  getPage(page: number) {\n    const line = line => [`Item ${line}:1!`, { name: 'Item', surname: `${line}:2` }];\n\n    const fullPage = [];\n\n    for (\n      let i = (page - 1) * this.model.pageLength;\n      i < page * this.model.pageLength && i < this.model.totalDataLength;\n      i++\n    ) {\n      fullPage.push(line(i + 1));\n    }\n\n    return new Promise(resolve => {\n      setTimeout(() => resolve(fullPage), 150);\n    });\n  }\n\n  selectPage(page) {\n    this.getPage(page).then((data: Array<Array<any>>) => {\n      // set the data and update page\n      this.model.data = this.prepareData(data);\n      this.model.currentPage = page;\n    });\n  }\n\n  protected prepareData(data: Array<Array<any>>) {\n    // create new data from the service data\n    let newData = [];\n    data.forEach(dataRow => {\n      let row = [];\n      dataRow.forEach(dataElement => {\n        row.push(\n          new TableItem({\n            data: dataElement,\n            template: typeof dataElement === 'string' ? undefined : this.paginationTableItemTemplate,\n            // your template can handle all the data types so you don't have to conditionally set it\n            // you can also set different templates for different columns based on index\n          })\n        );\n      });\n      newData.push(row);\n    });\n    return newData;\n  }\n}\n\nclass CustomHeaderItem extends TableHeaderItem {\n  // used for custom sorting\n  compare(one: TableItem, two: TableItem) {\n    const stringOne = (one.data.name || one.data.surname || one.data).toLowerCase();\n    const stringTwo = (two.data.name || two.data.surname || two.data).toLowerCase();\n\n    if (stringOne > stringTwo) {\n      return 1;\n    } else if (stringOne < stringTwo) {\n      return -1;\n    } else {\n      return 0;\n    }\n  }\n}\n\nconst simpleModel = new TableModel();\nsimpleModel.data = [\n  [new TableItem({ data: 'Name 1' }), new TableItem({ data: 'qwer' })],\n  [new TableItem({ data: 'Name 3' }), new TableItem({ data: 'zwer' })],\n  [new TableItem({ data: 'Name 2' }), new TableItem({ data: 'swer' })],\n  [new TableItem({ data: 'Name 4' }), new TableItem({ data: 'twer' })],\n];\nsimpleModel.header = [new TableHeaderItem({ data: 'Name' }), new TableHeaderItem({ data: 'hwer' })];\n\nconst emptyModel = new TableModel();\nemptyModel.header = [\n  new TableHeaderItem({ data: 'Name' }),\n  new TableHeaderItem({ data: 'hwer', style: { width: 'auto' } }),\n];\n\nfunction sort(model, index: number) {\n  if (model.header[index].sorted) {\n    // if already sorted flip sorting direction\n    model.header[index].ascending = model.header[index].descending;\n  }\n  model.sort(index);\n}\n\n@Component({\n  selector: 'app-skeleton-table',\n  template: `\n    <ibm-table\n      style=\"display: block; width: 800px;\"\n      [model]=\"skeletonModel\"\n      [skeleton]=\"skeleton\"\n      [size]=\"size\"\n      [striped]=\"striped\"\n    >\n      <ng-content></ng-content>\n    </ibm-table>\n  `,\n})\nclass SkeletonTableStory implements OnInit, OnChanges {\n  @Input() size = 'md';\n  @Input() striped = false;\n  @Input() skeleton = true;\n  @Input() skeletonModel = new TableModel();\n\n  ngOnInit() {\n    // Creates an empty table with 5 rows and 5 columns\n    this.skeletonModel = Table.skeletonModel(5, 5);\n  }\n}\n\nstoriesOf('Table', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [\n        NFormsModule,\n        TableModule,\n        DialogModule,\n        PaginationModule,\n        SearchModule,\n        ButtonModule,\n        Settings16Module,\n        Delete16Module,\n        Save16Module,\n        Download16Module,\n        Add20Module,\n        DocumentationModule,\n      ],\n      declarations: [\n        TableStory,\n        DynamicTableStory,\n        ExpansionTableStory,\n        OverflowTableStory,\n        PaginationTableStory,\n        SkeletonTableStory,\n      ],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</ibm-table-container>\n\t`,\n    props: {\n      model: simpleModel,\n      size: select('size', { Small: 'sm', Normal: 'md', Large: 'lg' }, 'md'),\n      title: text('Title', 'Table title'),\n      description: text('Description', ''),\n      showSelectionColumn: boolean('showSelectionColumn', true),\n      striped: boolean('striped', false),\n      sortable: boolean('sortable', true),\n      isDataGrid: boolean('Data grid keyboard interactions', false),\n    },\n  }))\n  .add('With no data', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\">\n\t\t\t\t<tbody><tr><td class=\"no-data\" colspan=\"3\"><div>No data.</div></td></tr></tbody>\n\t\t\t</app-table>\n\t\t</ibm-table-container>\n\t\t`,\n    styles: [\n      `\n\t\t\t.no-data {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 150px;\n\t\t\t\ttext-align: center;\n\t\t\t}\n\t\t`,\n    ],\n    props: {\n      model: emptyModel,\n      size: select('size', { Small: 'sm', Normal: 'md', Large: 'lg' }, 'md'),\n      title: text('Title', 'Table title'),\n      description: text('Description', 'With no data'),\n      showSelectionColumn: boolean('showSelectionColumn', true),\n      striped: boolean('striped', false),\n    },\n  }))\n  .add('With toolbar', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<ibm-table-toolbar [model]=\"model\">\n\t\t\t\t<ibm-table-toolbar-actions>\n\t\t\t\t\t<button ibmButton=\"primary\">\n\t\t\t\t\t\tDelete\n\t\t\t\t\t\t<ibm-icon-delete16 class=\"bx--btn__icon\"></ibm-icon-delete16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button ibmButton=\"primary\">\n\t\t\t\t\t\tSave\n\t\t\t\t\t\t<ibm-icon-save16 class=\"bx--btn__icon\"></ibm-icon-save16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button ibmButton=\"primary\">\n\t\t\t\t\t\tDownload\n\t\t\t\t\t\t<ibm-icon-download16 class=\"bx--btn__icon\"></ibm-icon-download16>\n\t\t\t\t\t</button>\n\t\t\t\t</ibm-table-toolbar-actions>\n\t\t\t\t\t<ibm-table-toolbar-content>\n\t\t\t\t\t<ibm-table-toolbar-search [expandable]=\"true\"></ibm-table-toolbar-search>\n\t\t\t\t\t<button ibmButton=\"toolbar-action\">\n\t\t\t\t\t\t<ibm-icon-settings16 class=\"bx--toolbar-action__icon\"></ibm-icon-settings16>\n\t\t\t\t\t</button>\n\t\t\t\t\t<button ibmButton=\"primary\" size=\"sm\">\n\t\t\t\t\t\tPrimary Button\n\t\t\t\t\t\t<ibm-icon-add20 class=\"bx--btn__icon\"></ibm-icon-add20>\n\t\t\t\t\t</button>\n\t\t\t\t</ibm-table-toolbar-content>\n\t\t\t</ibm-table-toolbar>\n\n\t\t\t<app-table\n\t\t\t\t[model]=\"model\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[sortable]=\"sortable\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-table>\n\t\t</ibm-table-container>\n\t`,\n    props: {\n      model: simpleModel,\n      size: select('size', { Small: 'sm', Normal: 'md', Large: 'lg' }, 'md'),\n      title: text('Title', 'Table title'),\n      description: text('Description', 'With toolbar'),\n      showSelectionColumn: boolean('showSelectionColumn', true),\n      striped: boolean('striped', false),\n      sortable: boolean('sortable', true),\n      isDataGrid: boolean('Data grid keyboard interactions', false),\n    },\n  }))\n  .add('With expansion', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-expansion-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-expansion-table>\n\t\t</ibm-table-container>\n\t\t`,\n    props: {\n      size: select('size', { Small: 'sm', Normal: 'md', Large: 'lg' }, 'md'),\n      title: text('Title', 'Table title'),\n      description: text('Description', 'With expansion'),\n      showSelectionColumn: boolean('showSelectionColumn', true),\n      striped: boolean('striped', false),\n      isDataGrid: boolean('Data grid keyboard interactions', false),\n    },\n  }))\n  .add('With dynamic content', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-custom-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-custom-table>\n\t\t</ibm-table-container>\n\t\t`,\n    props: {\n      size: select('size', { Small: 'sm', Normal: 'md', Large: 'lg' }, 'md'),\n      title: text('Title', 'Table title'),\n      description: text('Description', 'With dynamic content'),\n      showSelectionColumn: boolean('showSelectionColumn', true),\n      striped: boolean('striped', false),\n      isDataGrid: boolean('Data grid keyboard interactions', false),\n    },\n  }))\n  .add('With overflow menu', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-overflow-table\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[showSelectionColumn]=\"showSelectionColumn\"\n\t\t\t\t[striped]=\"striped\"\n\t\t\t\t[isDataGrid]=\"isDataGrid\">\n\t\t\t</app-overflow-table>\n\t\t</ibm-table-container>\n\t\t`,\n    props: {\n      size: select('size', { Small: 'sm', Normal: 'md', Large: 'lg' }, 'md'),\n      title: text('Title', 'Table title'),\n      description: text('Description', 'With overflow menu'),\n      showSelectionColumn: boolean('showSelectionColumn', true),\n      striped: boolean('striped', false),\n      isDataGrid: boolean('Data grid keyboard interactions', false),\n    },\n  }))\n  .add('With pagination', () => ({\n    template: `\n\t\t<ibm-table-container>\n\t\t\t<ibm-table-header>\n\t\t\t\t<h4 ibmTableHeaderTitle>{{title}}</h4>\n\t\t\t\t<p ibmTableHeaderDescription>{{description}}</p>\n\t\t\t</ibm-table-header>\n\t\t\t<app-pagination-table [totalDataLength]=\"totalDataLength\" [model]=\"model\"></app-pagination-table>\n\t\t</ibm-table-container>\n\t\t`,\n    props: {\n      model: simpleModel,\n      totalDataLength: number('totalDataLength', 105),\n      title: text('Title', 'Table title'),\n      description: text('Description', 'With pagination'),\n    },\n  }))\n  .add('Skeleton', () => ({\n    template: `\n\t\t\t<app-skeleton-table\n\t\t\t\t[skeletonModel]=\"skeletonModel\"\n\t\t\t\t[size]=\"size\"\n\t\t\t\t[striped]=\"striped\">\n\t\t\t</app-skeleton-table>\n\t`,\n    props: {\n      size: select('size', { Small: 'sm', Normal: 'md', Large: 'lg' }, 'md'),\n      striped: boolean('striped', false),\n    },\n  }))\n  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Table.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
 var __ADDS_MAP__ = { "table--documentation": { "startLoc": { "col": 7, "line": 730 }, "endLoc": { "col": 4, "line": 734 } }, "table--skeleton": { "startLoc": { "col": 7, "line": 717 }, "endLoc": { "col": 4, "line": 729 } }, "table--with-pagination": { "startLoc": { "col": 7, "line": 700 }, "endLoc": { "col": 4, "line": 716 } }, "table--with-overflow-menu": { "startLoc": { "col": 7, "line": 676 }, "endLoc": { "col": 4, "line": 699 } }, "table--with-dynamic-content": { "startLoc": { "col": 7, "line": 652 }, "endLoc": { "col": 4, "line": 675 } }, "table--with-expansion": { "startLoc": { "col": 7, "line": 628 }, "endLoc": { "col": 4, "line": 651 } }, "table--with-toolbar": { "startLoc": { "col": 7, "line": 573 }, "endLoc": { "col": 4, "line": 627 } }, "table--with-no-data": { "startLoc": { "col": 7, "line": 539 }, "endLoc": { "col": 4, "line": 572 } }, "table--basic": { "startLoc": { "col": 7, "line": 511 }, "endLoc": { "col": 4, "line": 538 } } };
 
 
@@ -18981,7 +19061,7 @@ var DynamicTableStory = /** @class */ (function () {
     }
     DynamicTableStory.prototype.ngOnInit = function () {
         this.model.data = [
-            [new ___WEBPACK_IMPORTED_MODULE_4__["TableItem"]({ data: "Name 1" }), new ___WEBPACK_IMPORTED_MODULE_4__["TableItem"]({ data: { name: "Lessy", link: "/table" }, template: this.customTableItemTemplate })],
+            [new ___WEBPACK_IMPORTED_MODULE_4__["TableItem"]({ data: "Name 1" }), new ___WEBPACK_IMPORTED_MODULE_4__["TableItem"]({ data: { name: "Lessy", link: "#" }, template: this.customTableItemTemplate })],
             [new ___WEBPACK_IMPORTED_MODULE_4__["TableItem"]({ data: "Name 3" }), new ___WEBPACK_IMPORTED_MODULE_4__["TableItem"]({ data: "swer" })],
             [new ___WEBPACK_IMPORTED_MODULE_4__["TableItem"]({ data: "Name 2" }), new ___WEBPACK_IMPORTED_MODULE_4__["TableItem"]({ data: { name: "Alice", surname: "Bob" }, template: this.customTableItemTemplate })],
             [new ___WEBPACK_IMPORTED_MODULE_4__["TableItem"]({ data: "Name 4" }), new ___WEBPACK_IMPORTED_MODULE_4__["TableItem"]({ data: "twer" })]
@@ -18989,7 +19069,7 @@ var DynamicTableStory = /** @class */ (function () {
         this.model.header = [
             new ___WEBPACK_IMPORTED_MODULE_4__["TableHeaderItem"]({ data: "Very long title indeed" }),
             new CustomHeaderItem({
-                data: { name: "Custom header", link: "/table" },
+                data: { name: "Custom header", link: "#" },
                 template: this.customHeaderTemplate,
                 style: { "width": "auto" }
             })
@@ -21384,6 +21464,10 @@ var TimePickerSelect = /** @class */ (function (_super) {
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
         __metadata("design:type", String)
     ], TimePickerSelect.prototype, "theme", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
+        __metadata("design:type", String)
+    ], TimePickerSelect.prototype, "label", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostBinding"])("class.bx--skeleton"),
         __metadata("design:type", Object)
@@ -21556,7 +21640,10 @@ var TimePicker = /** @class */ (function () {
     TimePicker.prototype.onChange = function (event) {
         this.valueChange.emit(event.target.value);
     };
-    var TimePicker_1, _a;
+    TimePicker.prototype.isTemplate = function (value) {
+        return value instanceof _angular_core__WEBPACK_IMPORTED_MODULE_0__["TemplateRef"];
+    };
+    var TimePicker_1, _a, _b;
     /**
      * Tracks the total number of selects instantiated. Used to generate unique IDs
      */
@@ -21599,12 +21686,12 @@ var TimePicker = /** @class */ (function () {
     ], TimePicker.prototype, "theme", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])(),
-        __metadata("design:type", typeof (_a = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]) === "function" && _a || Object)
+        __metadata("design:type", typeof (_b = typeof _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]) === "function" && _b || Object)
     ], TimePicker.prototype, "valueChange", void 0);
     TimePicker = TimePicker_1 = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-timepicker",
-            template: "\n\t\t\t<div class=\"bx--time-picker__input\">\n\t\t\t\t<label *ngIf=\"!skeleton\" [attr.for]=\"id\" class=\"bx--label\">{{label}}</label>\n\t\t\t\t<input\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'bx--text-input--light': theme === 'light',\n\t\t\t\t\t\t'bx--skeleton': skeleton\n\t\t\t\t\t}\"\n\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t[attr.id]=\"id\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\tmaxlength=\"5\"\n\t\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tclass=\"bx--time-picker__input-field bx--text-input\">\n\t\t\t</div>\n\t\t\t<ng-content></ng-content>\n\t"
+            template: "\n\t\t\t<div class=\"bx--time-picker__input\">\n\t\t\t\t<label *ngIf=\"!skeleton\" [for]=\"id\" class=\"bx--label\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t\t\t</label>\n\t\t\t\t<input\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'bx--text-input--light': theme === 'light',\n\t\t\t\t\t\t'bx--skeleton': skeleton\n\t\t\t\t\t}\"\n\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t[attr.id]=\"id\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\tmaxlength=\"5\"\n\t\t\t\t\t(change)=\"onChange($event)\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tclass=\"bx--time-picker__input-field bx--text-input\">\n\t\t\t</div>\n\t\t\t<ng-content></ng-content>\n\t"
         })
     ], TimePicker);
     return TimePicker;
@@ -21860,7 +21947,10 @@ var Toggle = /** @class */ (function (_super) {
         this.propagateChange(this.checked);
         this.change.emit(event);
     };
-    var Toggle_1, _a, _b;
+    Toggle.prototype.isTemplate = function (value) {
+        return value instanceof _angular_core__WEBPACK_IMPORTED_MODULE_1__["TemplateRef"];
+    };
+    var Toggle_1, _a, _b, _c;
     /**
      * Variable used for creating unique ids for toggle components.
      */
@@ -21877,7 +21967,7 @@ var Toggle = /** @class */ (function (_super) {
     ], Toggle.prototype, "onText", null);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Input"])(),
-        __metadata("design:type", String)
+        __metadata("design:type", Object)
     ], Toggle.prototype, "label", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Input"])(),
@@ -21894,7 +21984,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<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",
+            template: "\n\t\t<label *ngIf=\"label\" [id]=\"ariaLabelledby\" class=\"bx--label\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(label)\">{{label}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(label)\" [ngTemplateOutlet]=\"label\"></ng-template>\n\t\t</label>\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"],
@@ -21903,7 +21993,7 @@ var Toggle = /** @class */ (function (_super) {
                 }
             ]
         }),
-        __metadata("design:paramtypes", [typeof (_a = typeof _angular_core__WEBPACK_IMPORTED_MODULE_1__["ChangeDetectorRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_1__["ChangeDetectorRef"]) === "function" && _a || Object, typeof (_b = typeof _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_3__["I18n"] !== "undefined" && _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_3__["I18n"]) === "function" && _b || Object])
+        __metadata("design:paramtypes", [typeof (_b = typeof _angular_core__WEBPACK_IMPORTED_MODULE_1__["ChangeDetectorRef"] !== "undefined" && _angular_core__WEBPACK_IMPORTED_MODULE_1__["ChangeDetectorRef"]) === "function" && _b || Object, typeof (_c = typeof _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_3__["I18n"] !== "undefined" && _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_3__["I18n"]) === "function" && _c || Object])
     ], Toggle);
     return Toggle;
 }(_checkbox_checkbox_component__WEBPACK_IMPORTED_MODULE_0__["Checkbox"]));
@@ -21987,7 +22077,7 @@ __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, text } from '@storybook/addon-knobs/angular';\n\nimport { ToggleModule, DocumentationModule } from '../';\n\nstoriesOf('Toggle', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [ToggleModule, DocumentationModule],\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  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Toggle.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
+var __STORY__ = "import { storiesOf, moduleMetadata } from '@storybook/angular';\nimport { withKnobs, boolean, select, text } from '@storybook/addon-knobs/angular';\n\nimport { ToggleModule, DocumentationModule } from '../';\n\nstoriesOf('Toggle', module)\n  .addDecorator(\n    moduleMetadata({\n      imports: [ToggleModule, DocumentationModule],\n    })\n  )\n  .addDecorator(withKnobs)\n  .add('Basic', () => ({\n    template: `\n\t\t\t<ibm-toggle\n\t\t\t\t[label]=\"label\"\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      label: 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  .add('Documentation', () => ({\n    template: `\n\t\t\t<ibm-documentation src=\"documentation/components/Toggle.html\"></ibm-documentation>\n\t\t`,\n  }));\n";
 var __ADDS_MAP__ = { "toggle--documentation": { "startLoc": { "col": 7, "line": 40 }, "endLoc": { "col": 4, "line": 44 } }, "toggle--skeleton": { "startLoc": { "col": 7, "line": 33 }, "endLoc": { "col": 4, "line": 39 } }, "toggle--basic": { "startLoc": { "col": 7, "line": 13 }, "endLoc": { "col": 4, "line": 32 } } };
 
 
@@ -21997,12 +22087,12 @@ 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\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",
+    template: "\n\t\t\t<ibm-toggle\n\t\t\t\t[label]=\"label\"\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"),
-        labelText: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["text"])("Label text", ""),
+        label: 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")
     }
@@ -22185,7 +22275,7 @@ var __metadata = (undefined && undefined.__metadata) || function (k, v) {
 
 var HeaderItem = /** @class */ (function () {
     function HeaderItem() {
-        this.href = "#";
+        this.href = "javascript:void(0)";
     }
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Input"])(),
@@ -23352,4 +23442,4 @@ module.exports = __webpack_require__(/*! /home/travis/build/IBM/carbon-component
 /***/ })
 
 },[[0,"runtime~main","vendors~main"]]]);
-//# sourceMappingURL=main.56858f6c72e70f546e4c.bundle.js.map
+//# sourceMappingURL=main.e71ec014aa45dc1d6679.bundle.js.map