carbon-components-angular 3.53.8 → 3.54.2

package/docs/storybook/iframe.html

@@ -125,11 +125,11 @@
     
     
     
-      <script src="runtime~main.293b4966d65e38f1c80c.bundle.js"></script>
+      <script src="runtime~main.1ccde517361f3d1a057c.bundle.js"></script>
     
-      <script src="vendors~main.293b4966d65e38f1c80c.bundle.js"></script>
+      <script src="vendors~main.1ccde517361f3d1a057c.bundle.js"></script>
     
-      <script src="main.293b4966d65e38f1c80c.bundle.js"></script>
+      <script src="main.1ccde517361f3d1a057c.bundle.js"></script>
     
   </body>
 </html>

package/docs/storybook/{main.293b4966d65e38f1c80c.bundle.js → main.1ccde517361f3d1a057c.bundle.js}

@@ -2664,13 +2664,7 @@ var ComboBox = /** @class */ (function () {
             var matches = this.view.getListItems().some(function (item) { return item.content.toLowerCase().includes(searchString.toLowerCase()); });
             if (!matches) {
                 var selected = this.view.getSelected();
-                if (selected && selected[0]) {
-                    selected[0].selected = false;
-                    // notify that the selection has changed
-                    this.view.select.emit({ item: selected[0] });
-                    this.propagateChangeCallback(null);
-                }
-                else {
+                if (!selected || !selected[0]) {
                     this.view.filterBy("");
                 }
             }
@@ -2971,9 +2965,9 @@ var addSourceDecorator = __webpack_require__(/*! @storybook/source-loader/previe
 // @ts-ignore
 var __SOURCE_PREFIX__ = "/home/travis/build/IBM/carbon-components-angular/src/combobox";
 // @ts-ignore
-var __STORY__ = "import { storiesOf, moduleMetadata } from \"@storybook/angular\";\nimport { action } from \"@storybook/addon-actions\";\nimport { withKnobs, text, boolean, number } from \"@storybook/addon-knobs/angular\";\n\nimport { ComboBoxModule } from \"./combobox.module\";\nimport { LoadingModule } from \"../loading/loading.module\";\nimport { ButtonModule } from \"../button/button.module\";\nimport { DocumentationModule } from \"./../documentation-component/documentation.module\";\nimport {\n\tReactiveFormsModule,\n\tFormGroup,\n\tFormBuilder,\n\tFormControl\n} from \"@angular/forms\";\nimport {\n\tComponent,\n\tOnInit,\n\tInput,\n\tAfterViewInit\n} from \"@angular/core\";\n\nconst getOptions = (override = {}) => {\n\tconst options = {\n\t\tdisabled: boolean(\"disabled\", false),\n\t\tinvalid: boolean(\"Invalid\", false),\n\t\tinvalidText: text(\"Invalid text\", \"A valid value is required\"),\n\t\tlabel: text(\"Label\", \"ComboBox label\"),\n\t\thelperText: text(\"Helper text\", \"Optional helper text.\"),\n\t\titems: [\n\t\t\t{\n\t\t\t\tcontent: \"one\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tcontent: \"two\",\n\t\t\t\tselected: true\n\t\t\t},\n\t\t\t{\n\t\t\t\tcontent: \"three\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tcontent: \"four\"\n\t\t\t}\n\t\t],\n\t\tselected: action(\"selection changed\"),\n\t\tsubmit: action(\"submit\"),\n\t\tsearch: action(\"search\")\n\t};\n\n\treturn Object.assign({}, options, override);\n};\n\n@Component({\n\tselector: \"app-dynamic-list-combobox\",\n\ttemplate: `\n\t\t<ibm-combo-box\n\t\t\t[(items)]=\"items\"\n\t\t\ttype=\"multi\"\n\t\t\t(selected)=\"updateSelected($event)\">\n\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t</ibm-combo-box>\n\t`\n})\nclass DynamicListComboBox implements AfterViewInit {\n\titems = [\n\t\t{\n\t\t\tcontent: \"one\"\n\t\t},\n\t\t{\n\t\t\tcontent: \"two\"\n\t\t},\n\t\t{\n\t\t\tcontent: \"three\"\n\t\t},\n\t\t{\n\t\t\tcontent: \"four\"\n\t\t}\n\t];\n\n\tupdateSelected(event) {\n\t\tthis.items.forEach((item: any) => {\n\t\t\tif (event.some(selectedItem => selectedItem.content === item.content)) {\n\t\t\t\titem.selected = true;\n\t\t\t} else {\n\t\t\t\titem.selected = false;\n\t\t\t}\n\t\t});\n\t}\n\n\tngAfterViewInit() {\n\t\tsetInterval(() => {\n\t\t\tconst newItems = JSON.parse(JSON.stringify(this.items));\n\t\t\tnewItems.push({ content: `New ${newItems.length}` });\n\t\t\tthis.items = newItems;\n\t\t}, 4000);\n\t}\n}\n\n@Component({\n\tselector: \"app-reactive-combobox\",\n\ttemplate: `\n\t\t<form [formGroup]=\"sampleForm\" (ngSubmit)=\"onSubmit(sampleForm)\">\n\t\t\t<ibm-combo-box\n\t\t\t\tformControlName=\"combobox\"\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<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t\tselected: {{ sampleForm.get(\"combobox\").value | json }}\n\t\t\t<ibm-combo-box\n\t\t\t\tstyle=\"margin-top: 40px\"\n\t\t\t\tformControlName=\"multibox\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\ttype=\"multi\"\n\t\t\t\t[items]=\"items\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t\tselected: {{ sampleForm.get(\"multibox\").value | json }}\n\t\t</form>\n\t`\n})\nclass ReactiveFormsCombobox implements OnInit {\n\tpublic sampleForm: FormGroup;\n\t@Input() items = [];\n\t@Input() label = \"\";\n\t@Input() helperText = \"\";\n\n\tconstructor(private fb: FormBuilder) {}\n\n\tngOnInit() {\n\t\tthis.sampleForm = this.fb.group({\n\t\t\tcombobox: new FormControl,\n\t\t\tmultibox: new FormControl\n\t\t});\n\n\t\tthis.sampleForm.get(\"combobox\").setValue({ content: \"four\", selected: true });\n\t\tthis.sampleForm.get(\"multibox\").setValue(\n\t\t\t[\n\t\t\t\t{ content: \"four\", selected: true },\n\t\t\t\t{ content: \"two\", selected: true }\n\t\t\t]\n\t\t);\n\t}\n}\n\n@Component({\n\tselector: \"app-mock-query-search\",\n\ttemplate: `\n\t\t<ibm-loading [isActive]=\"loading\" size=\"sm\"></ibm-loading>\n\t\t<ibm-combo-box\n\t\t\tappendInline=\"true\"\n\t\t\t[items]=\"filterItems\"\n\t\t\t(search)=\"onSearch($event)\">\n\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t</ibm-combo-box>\n\t`\n})\nclass TestComponent {\n\tfilterItems = [];\n\n\tloading = false;\n\n\tonSearch() {\n\t\tthis.loading = true;\n\t\tsetTimeout(() => {\n\t\t\tthis.filterItems = [\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` }\n\t\t\t];\n\t\t\tthis.loading = false;\n\t\t}, 1000);\n\t}\n}\n\nstoriesOf(\"Components|Combobox\", module)\n\t.addDecorator(\n\t\tmoduleMetadata({\n\t\t\tdeclarations: [\n\t\t\t\tDynamicListComboBox,\n\t\t\t\tReactiveFormsCombobox,\n\t\t\t\tTestComponent\n\t\t\t],\n\t\t\timports: [\n\t\t\t\tComboBoxModule,\n\t\t\t\tButtonModule,\n\t\t\t\tReactiveFormsModule,\n\t\t\t\tDocumentationModule,\n\t\t\t\tLoadingModule\n\t\t\t]\n\t\t})\n\t)\n\t.addDecorator(withKnobs)\n\t.add(\"Basic\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\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[items]=\"items\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(submit)=\"submit($event)\"\n\t\t\t\t(search)=\"search($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n\t\tprops: getOptions()\n\t}))\n\t.add(\"Dynamically added list items\", () => ({\n\t\ttemplate: `\n\t\t\t<app-dynamic-list-combobox></app-dynamic-list-combobox>\n\t\t`\n\t}))\n\t.add(\"Basic with max length\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\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[items]=\"items\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(submit)=\"submit($event)\"\n\t\t\t\t[maxLength]=\"maxLength\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n\t\tprops: {\n\t\t\t...getOptions(),\n\t\t\tmaxLength: number(\"Max length\", 5)\n\t\t}\n\t}))\n\t.add(\"With dynamic search\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\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[items]=\"items\"\n\t\t\t\t(selected)=\"onSelected()\"\n\t\t\t\t(search)=\"onSearch($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n\t\tprops: {\n\t\t\tdisabled: boolean(\"disabled\", false),\n\t\t\tinvalid: boolean(\"Invalid\", false),\n\t\t\tinvalidText: text(\"Invalid text\", \"A valid value is required\"),\n\t\t\tlabel: text(\"Label\", \"ComboBox label\"),\n\t\t\thelperText: text(\"Helper text\", \"Optional helper text.\"),\n\t\t\titems: [\n\t\t\t\t{\n\t\t\t\t\tcontent: \"one\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tcontent: \"two\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tcontent: \"three\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tcontent: \"four\"\n\t\t\t\t}\n\t\t\t],\n\t\t\tonSelected: function() {\n\t\t\t\tthis.invalid = false;\n\t\t\t},\n\t\t\tonSearch: function(event) {\n\t\t\t\tconst selected = this.items.find(\n\t\t\t\t\t({ content }) => content.toLowerCase().includes(event.toLowerCase())\n\t\t\t\t);\n\n\t\t\t\tif (!selected) {\n\t\t\t\t\tthis.invalid = true;\n\t\t\t\t} else {\n\t\t\t\t\tthis.invalid = false;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}))\n\t.add(\"With template\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\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[items]=\"items\"\n\t\t\t\t(selected)=\"onSelected()\"\n\t\t\t\t(search)=\"onSearch($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\n\t\t\t<ng-template #invalidText>\n\t\t\t\t<div class=\"bx--form-requirement\">This is a template</div>\n\t\t\t</ng-template>\n\t\t`,\n\t\tprops: getOptions({\n\t\t\tonSelected: function() {\n\t\t\t\tthis.invalid = false;\n\t\t\t},\n\t\t\tonSearch: function(event) {\n\t\t\t\tconst selected = this.items.find(\n\t\t\t\t\t({ content }) => content.toLowerCase().includes(event.toLowerCase())\n\t\t\t\t);\n\n\t\t\t\tif (!selected) {\n\t\t\t\t\tthis.invalid = true;\n\t\t\t\t} else {\n\t\t\t\t\tthis.invalid = false;\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}))\n\t.add(\"Multi-select\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\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[items]=\"items\"\n\t\t\t\ttype=\"multi\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(submit)=\"submit($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n\t\tprops: getOptions()\n\t}))\n\t.add(\"With reactive forms\", () => ({\n\t\ttemplate: `\n\t\t\t<app-reactive-combobox\n\t\t\t\t[items]=\"items\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\">\n\t\t\t</app-reactive-combobox>\n\t\t`,\n\t\tprops: getOptions()\n\t}))\n\t.add(\"With submit\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\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[items]=\"items\"\n\t\t\t\ttype=\"multi\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(submit)=\"submit($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n\t\tprops: getOptions({\n\t\t\tsubmit: function(event) {\n\t\t\t\t// so the action still shows up in the \"actions\" panel\n\t\t\t\taction(\"submit\")(event);\n\t\t\t\tif (event.value.content) {\n\t\t\t\t\tthis.items = [\n\t\t\t\t\t\t...event.items,\n\t\t\t\t\t\tObject.assign({}, event.value, { selected: true })\n\t\t\t\t\t];\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}))\n\t.add(\"With ngModel\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\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[items]=\"items\"\n\t\t\t\t[(ngModel)]=\"model\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(submit)=\"submit($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\n\t\t\t<p>model: {{model | json}}</p>\n\t\t`,\n\t\tprops: getOptions({\n\t\t\tmodel:  { \"content\": \"three\", \"selected\": true }\n\t\t})\n\t}))\n\t.add(\"Mock query search\", () => ({\n\t\ttemplate: `\n\t\t\t<app-mock-query-search></app-mock-query-search>\n\t\t`\n\t}))\n\t.add(\"Documentation\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-documentation src=\"documentation/components/ComboBox.html\"></ibm-documentation>\n\t\t`\n\t}));\n";
+var __STORY__ = "import { storiesOf, moduleMetadata } from \"@storybook/angular\";\nimport { action } from \"@storybook/addon-actions\";\nimport { withKnobs, text, boolean, number } from \"@storybook/addon-knobs/angular\";\n\nimport { ComboBoxModule } from \"./combobox.module\";\nimport { LoadingModule } from \"../loading/loading.module\";\nimport { ButtonModule } from \"../button/button.module\";\nimport { DocumentationModule } from \"./../documentation-component/documentation.module\";\nimport {\n\tReactiveFormsModule,\n\tFormGroup,\n\tFormBuilder,\n\tFormControl\n} from \"@angular/forms\";\nimport {\n\tComponent,\n\tOnInit,\n\tInput,\n\tAfterViewInit\n} from \"@angular/core\";\n\nconst getOptions = (override = {}) => {\n\tconst options = {\n\t\tdisabled: boolean(\"disabled\", false),\n\t\tinvalid: boolean(\"Invalid\", false),\n\t\tinvalidText: text(\"Invalid text\", \"A valid value is required\"),\n\t\tlabel: text(\"Label\", \"ComboBox label\"),\n\t\thelperText: text(\"Helper text\", \"Optional helper text.\"),\n\t\titems: [\n\t\t\t{\n\t\t\t\tcontent: \"one\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tcontent: \"two\",\n\t\t\t\tselected: true\n\t\t\t},\n\t\t\t{\n\t\t\t\tcontent: \"three\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tcontent: \"four\"\n\t\t\t}\n\t\t],\n\t\tselected: action(\"selection changed\"),\n\t\tsubmit: action(\"submit\"),\n\t\tsearch: function(event) {\n\t\t\tconsole.log(\"search string:\", event);\n\t\t}\n\t};\n\n\treturn Object.assign({}, options, override);\n};\n\n@Component({\n\tselector: \"app-dynamic-list-combobox\",\n\ttemplate: `\n\t\t<ibm-combo-box\n\t\t\t[(items)]=\"items\"\n\t\t\ttype=\"multi\"\n\t\t\t(selected)=\"updateSelected($event)\">\n\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t</ibm-combo-box>\n\t`\n})\nclass DynamicListComboBox implements AfterViewInit {\n\titems = [\n\t\t{\n\t\t\tcontent: \"one\"\n\t\t},\n\t\t{\n\t\t\tcontent: \"two\"\n\t\t},\n\t\t{\n\t\t\tcontent: \"three\"\n\t\t},\n\t\t{\n\t\t\tcontent: \"four\"\n\t\t}\n\t];\n\n\tupdateSelected(event) {\n\t\tthis.items.forEach((item: any) => {\n\t\t\tif (event.some(selectedItem => selectedItem.content === item.content)) {\n\t\t\t\titem.selected = true;\n\t\t\t} else {\n\t\t\t\titem.selected = false;\n\t\t\t}\n\t\t});\n\t}\n\n\tngAfterViewInit() {\n\t\tsetInterval(() => {\n\t\t\tconst newItems = JSON.parse(JSON.stringify(this.items));\n\t\t\tnewItems.push({ content: `New ${newItems.length}` });\n\t\t\tthis.items = newItems;\n\t\t}, 4000);\n\t}\n}\n\n@Component({\n\tselector: \"app-reactive-combobox\",\n\ttemplate: `\n\t\t<form [formGroup]=\"sampleForm\" (ngSubmit)=\"onSubmit(sampleForm)\">\n\t\t\t<ibm-combo-box\n\t\t\t\tformControlName=\"combobox\"\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<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t\tselected: {{ sampleForm.get(\"combobox\").value | json }}\n\t\t\t<ibm-combo-box\n\t\t\t\tstyle=\"margin-top: 40px\"\n\t\t\t\tformControlName=\"multibox\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\ttype=\"multi\"\n\t\t\t\t[items]=\"items\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t\tselected: {{ sampleForm.get(\"multibox\").value | json }}\n\t\t</form>\n\t`\n})\nclass ReactiveFormsCombobox implements OnInit {\n\tpublic sampleForm: FormGroup;\n\t@Input() items = [];\n\t@Input() label = \"\";\n\t@Input() helperText = \"\";\n\n\tconstructor(private fb: FormBuilder) {}\n\n\tngOnInit() {\n\t\tthis.sampleForm = this.fb.group({\n\t\t\tcombobox: new FormControl,\n\t\t\tmultibox: new FormControl\n\t\t});\n\n\t\tthis.sampleForm.get(\"combobox\").setValue({ content: \"four\", selected: true });\n\t\tthis.sampleForm.get(\"multibox\").setValue(\n\t\t\t[\n\t\t\t\t{ content: \"four\", selected: true },\n\t\t\t\t{ content: \"two\", selected: true }\n\t\t\t]\n\t\t);\n\t}\n}\n\n@Component({\n\tselector: \"app-mock-query-search\",\n\ttemplate: `\n\t\t<ibm-loading [isActive]=\"loading\" size=\"sm\"></ibm-loading>\n\t\t<ibm-combo-box\n\t\t\tappendInline=\"true\"\n\t\t\t[items]=\"filterItems\"\n\t\t\t(search)=\"onSearch($event)\">\n\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t</ibm-combo-box>\n\t`\n})\nclass TestComponent {\n\tfilterItems = [];\n\n\tloading = false;\n\n\tonSearch() {\n\t\tthis.loading = true;\n\t\tsetTimeout(() => {\n\t\t\tthis.filterItems = [\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` },\n\t\t\t\t{ content: `Random ${Math.random()}` }\n\t\t\t];\n\t\t\tthis.loading = false;\n\t\t}, 1000);\n\t}\n}\n\nstoriesOf(\"Components|Combobox\", module)\n\t.addDecorator(\n\t\tmoduleMetadata({\n\t\t\tdeclarations: [\n\t\t\t\tDynamicListComboBox,\n\t\t\t\tReactiveFormsCombobox,\n\t\t\t\tTestComponent\n\t\t\t],\n\t\t\timports: [\n\t\t\t\tComboBoxModule,\n\t\t\t\tButtonModule,\n\t\t\t\tReactiveFormsModule,\n\t\t\t\tDocumentationModule,\n\t\t\t\tLoadingModule\n\t\t\t]\n\t\t})\n\t)\n\t.addDecorator(withKnobs)\n\t.add(\"Basic\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\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[items]=\"items\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(submit)=\"submit($event)\"\n\t\t\t\t(search)=\"search($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n\t\tprops: getOptions()\n\t}))\n\t.add(\"Dynamically added list items\", () => ({\n\t\ttemplate: `\n\t\t\t<app-dynamic-list-combobox></app-dynamic-list-combobox>\n\t\t`\n\t}))\n\t.add(\"Basic with max length\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\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[items]=\"items\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(submit)=\"submit($event)\"\n\t\t\t\t[maxLength]=\"maxLength\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n\t\tprops: {\n\t\t\t...getOptions(),\n\t\t\tmaxLength: number(\"Max length\", 5)\n\t\t}\n\t}))\n\t.add(\"With dynamic search\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\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[items]=\"items\"\n\t\t\t\t(selected)=\"onSelected()\"\n\t\t\t\t(search)=\"onSearch($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n\t\tprops: {\n\t\t\tdisabled: boolean(\"disabled\", false),\n\t\t\tinvalid: boolean(\"Invalid\", false),\n\t\t\tinvalidText: text(\"Invalid text\", \"A valid value is required\"),\n\t\t\tlabel: text(\"Label\", \"ComboBox label\"),\n\t\t\thelperText: text(\"Helper text\", \"Optional helper text.\"),\n\t\t\titems: [\n\t\t\t\t{\n\t\t\t\t\tcontent: \"one\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tcontent: \"two\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tcontent: \"three\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tcontent: \"four\"\n\t\t\t\t}\n\t\t\t],\n\t\t\tonSelected: function() {\n\t\t\t\tthis.invalid = false;\n\t\t\t},\n\t\t\tonSearch: function(event) {\n\t\t\t\tconst selected = this.items.find(\n\t\t\t\t\t({ content }) => content.toLowerCase().includes(event.toLowerCase())\n\t\t\t\t);\n\n\t\t\t\tif (!selected) {\n\t\t\t\t\tthis.invalid = true;\n\t\t\t\t} else {\n\t\t\t\t\tthis.invalid = false;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}))\n\t.add(\"With template\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\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[items]=\"items\"\n\t\t\t\t(selected)=\"onSelected()\"\n\t\t\t\t(search)=\"onSearch($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\n\t\t\t<ng-template #invalidText>\n\t\t\t\t<div class=\"bx--form-requirement\">This is a template</div>\n\t\t\t</ng-template>\n\t\t`,\n\t\tprops: getOptions({\n\t\t\tonSelected: function() {\n\t\t\t\tthis.invalid = false;\n\t\t\t},\n\t\t\tonSearch: function(event) {\n\t\t\t\tconst selected = this.items.find(\n\t\t\t\t\t({ content }) => content.toLowerCase().includes(event.toLowerCase())\n\t\t\t\t);\n\n\t\t\t\tif (!selected) {\n\t\t\t\t\tthis.invalid = true;\n\t\t\t\t} else {\n\t\t\t\t\tthis.invalid = false;\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}))\n\t.add(\"Multi-select\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\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[items]=\"items\"\n\t\t\t\ttype=\"multi\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(submit)=\"submit($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n\t\tprops: getOptions()\n\t}))\n\t.add(\"With reactive forms\", () => ({\n\t\ttemplate: `\n\t\t\t<app-reactive-combobox\n\t\t\t\t[items]=\"items\"\n\t\t\t\t[label]=\"label\"\n\t\t\t\t[helperText]=\"helperText\">\n\t\t\t</app-reactive-combobox>\n\t\t`,\n\t\tprops: getOptions()\n\t}))\n\t.add(\"With submit\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\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[items]=\"items\"\n\t\t\t\ttype=\"multi\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(submit)=\"submit($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\t\t`,\n\t\tprops: getOptions({\n\t\t\tsubmit: function(event) {\n\t\t\t\t// so the action still shows up in the \"actions\" panel\n\t\t\t\taction(\"submit\")(event);\n\t\t\t\tif (event.value.content) {\n\t\t\t\t\tthis.items = [\n\t\t\t\t\t\t...event.items,\n\t\t\t\t\t\tObject.assign({}, event.value, { selected: true })\n\t\t\t\t\t];\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t}))\n\t.add(\"With ngModel\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-combo-box\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[items]=\"items\"\n\t\t\t\t[(ngModel)]=\"model\"\n\t\t\t\t(selected)=\"selected($event)\"\n\t\t\t\t(submit)=\"submit($event)\">\n\t\t\t\t<ibm-dropdown-list></ibm-dropdown-list>\n\t\t\t</ibm-combo-box>\n\n\t\t\t<p>model: {{model | json}}</p>\n\t\t`,\n\t\tprops: getOptions({\n\t\t\tmodel:  { \"content\": \"three\", \"selected\": true }\n\t\t})\n\t}))\n\t.add(\"Mock query search\", () => ({\n\t\ttemplate: `\n\t\t\t<app-mock-query-search></app-mock-query-search>\n\t\t`\n\t}))\n\t.add(\"Documentation\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-documentation src=\"documentation/components/ComboBox.html\"></ibm-documentation>\n\t\t`\n\t}));\n";
 // @ts-ignore
-var __ADDS_MAP__ = { "components-combobox--documentation": { "startLoc": { "col": 6, "line": 401 }, "endLoc": { "col": 3, "line": 405 }, "startBody": { "col": 23, "line": 401 }, "endBody": { "col": 3, "line": 405 } }, "components-combobox--mock-query-search": { "startLoc": { "col": 6, "line": 396 }, "endLoc": { "col": 3, "line": 400 }, "startBody": { "col": 27, "line": 396 }, "endBody": { "col": 3, "line": 400 } }, "components-combobox--with-ngmodel": { "startLoc": { "col": 6, "line": 376 }, "endLoc": { "col": 3, "line": 395 }, "startBody": { "col": 22, "line": 376 }, "endBody": { "col": 3, "line": 395 } }, "components-combobox--with-submit": { "startLoc": { "col": 6, "line": 349 }, "endLoc": { "col": 3, "line": 375 }, "startBody": { "col": 21, "line": 349 }, "endBody": { "col": 3, "line": 375 } }, "components-combobox--with-reactive-forms": { "startLoc": { "col": 6, "line": 339 }, "endLoc": { "col": 3, "line": 348 }, "startBody": { "col": 29, "line": 339 }, "endBody": { "col": 3, "line": 348 } }, "components-combobox--multi-select": { "startLoc": { "col": 6, "line": 323 }, "endLoc": { "col": 3, "line": 338 }, "startBody": { "col": 22, "line": 323 }, "endBody": { "col": 3, "line": 338 } }, "components-combobox--with-template": { "startLoc": { "col": 6, "line": 288 }, "endLoc": { "col": 3, "line": 322 }, "startBody": { "col": 23, "line": 288 }, "endBody": { "col": 3, "line": 322 } }, "components-combobox--with-dynamic-search": { "startLoc": { "col": 6, "line": 238 }, "endLoc": { "col": 3, "line": 287 }, "startBody": { "col": 29, "line": 238 }, "endBody": { "col": 3, "line": 287 } }, "components-combobox--basic-with-max-length": { "startLoc": { "col": 6, "line": 218 }, "endLoc": { "col": 3, "line": 237 }, "startBody": { "col": 31, "line": 218 }, "endBody": { "col": 3, "line": 237 } }, "components-combobox--dynamically-added-list-items": { "startLoc": { "col": 6, "line": 213 }, "endLoc": { "col": 3, "line": 217 }, "startBody": { "col": 38, "line": 213 }, "endBody": { "col": 3, "line": 217 } }, "components-combobox--basic": { "startLoc": { "col": 6, "line": 196 }, "endLoc": { "col": 3, "line": 212 }, "startBody": { "col": 15, "line": 196 }, "endBody": { "col": 3, "line": 212 } } };
+var __ADDS_MAP__ = { "components-combobox--documentation": { "startLoc": { "col": 6, "line": 403 }, "endLoc": { "col": 3, "line": 407 }, "startBody": { "col": 23, "line": 403 }, "endBody": { "col": 3, "line": 407 } }, "components-combobox--mock-query-search": { "startLoc": { "col": 6, "line": 398 }, "endLoc": { "col": 3, "line": 402 }, "startBody": { "col": 27, "line": 398 }, "endBody": { "col": 3, "line": 402 } }, "components-combobox--with-ngmodel": { "startLoc": { "col": 6, "line": 378 }, "endLoc": { "col": 3, "line": 397 }, "startBody": { "col": 22, "line": 378 }, "endBody": { "col": 3, "line": 397 } }, "components-combobox--with-submit": { "startLoc": { "col": 6, "line": 351 }, "endLoc": { "col": 3, "line": 377 }, "startBody": { "col": 21, "line": 351 }, "endBody": { "col": 3, "line": 377 } }, "components-combobox--with-reactive-forms": { "startLoc": { "col": 6, "line": 341 }, "endLoc": { "col": 3, "line": 350 }, "startBody": { "col": 29, "line": 341 }, "endBody": { "col": 3, "line": 350 } }, "components-combobox--multi-select": { "startLoc": { "col": 6, "line": 325 }, "endLoc": { "col": 3, "line": 340 }, "startBody": { "col": 22, "line": 325 }, "endBody": { "col": 3, "line": 340 } }, "components-combobox--with-template": { "startLoc": { "col": 6, "line": 290 }, "endLoc": { "col": 3, "line": 324 }, "startBody": { "col": 23, "line": 290 }, "endBody": { "col": 3, "line": 324 } }, "components-combobox--with-dynamic-search": { "startLoc": { "col": 6, "line": 240 }, "endLoc": { "col": 3, "line": 289 }, "startBody": { "col": 29, "line": 240 }, "endBody": { "col": 3, "line": 289 } }, "components-combobox--basic-with-max-length": { "startLoc": { "col": 6, "line": 220 }, "endLoc": { "col": 3, "line": 239 }, "startBody": { "col": 31, "line": 220 }, "endBody": { "col": 3, "line": 239 } }, "components-combobox--dynamically-added-list-items": { "startLoc": { "col": 6, "line": 215 }, "endLoc": { "col": 3, "line": 219 }, "startBody": { "col": 38, "line": 215 }, "endBody": { "col": 3, "line": 219 } }, "components-combobox--basic": { "startLoc": { "col": 6, "line": 198 }, "endLoc": { "col": 3, "line": 214 }, "startBody": { "col": 15, "line": 198 }, "endBody": { "col": 3, "line": 214 } } };
 // @ts-ignore
 var __MAIN_FILE_LOCATION__ = "/combobox.stories.ts";
 // @ts-ignore
@@ -3016,7 +3010,9 @@ var getOptions = function (override) {
         ],
         selected: Object(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__["action"])("selection changed"),
         submit: Object(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__["action"])("submit"),
-        search: Object(_storybook_addon_actions__WEBPACK_IMPORTED_MODULE_1__["action"])("search")
+        search: function (event) {
+            console.log("search string:", event);
+        }
     };
     return Object.assign({}, options, override);
 };
@@ -7183,6 +7179,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 _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");
+/* harmony import */ var _tag_tag_module__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../tag/tag.module */ "./src/tag/tag.module.ts");
 /* eslint-disable */
 // @ts-nocheck
 // @ts-ignore
@@ -7192,9 +7189,9 @@ var addSourceDecorator = __webpack_require__(/*! @storybook/source-loader/previe
 // @ts-ignore
 var __SOURCE_PREFIX__ = "/home/travis/build/IBM/carbon-components-angular/src/dialog/tooltip";
 // @ts-ignore
-var __STORY__ = "import { storiesOf, moduleMetadata } from \"@storybook/angular\";\nimport { action } from \"@storybook/addon-actions\";\nimport {\n\twithKnobs,\n\ttext,\n\tselect,\n\tobject,\n\tboolean\n} from \"@storybook/addon-knobs/angular\";\n\nimport { InformationFilled16Module } from \"@carbon/icons-angular/lib/information--filled/16\";\nimport { DialogModule, PlaceholderModule, DocumentationModule } from \"../../\";\n\nstoriesOf(\"Components|Tooltip\", module)\n\t.addDecorator(\n\t\tmoduleMetadata({\n\t\t\timports: [\n\t\t\t\tDialogModule,\n\t\t\t\tPlaceholderModule,\n\t\t\t\tInformationFilled16Module,\n\t\t\t\tDocumentationModule\n\t\t\t]\n\t\t})\n\t)\n\t.addDecorator(withKnobs)\n\t.add(\"Basic\", () => ({\n\ttemplate: `\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\t\tprops: {\n\t\t\tplacement: select(\"Tooltip direction\", [\"bottom\", \"top\", \"left\", \"right\"], \"bottom\"),\n\t\t\ttriggerText: text(\"Trigger text\", \"Tooltip label\")\n\t\t}\n\t}))\n\t.add(\"No icon\", () => ({\n\t\ttemplate: `\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[offset]=\"offset\"\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\t\t\tprops: {\n\t\t\t\tplacement: select(\"Tooltip direction\", [\"bottom\", \"top\", \"left\", \"right\"], \"bottom\"),\n\t\t\t\ttriggerText: text(\"Trigger text\", \"Tooltip label\"),\n\t\t\t\toffset: object(\"Horizontal and vertical offset\", { x: 0, y: 0 })\n\t\t\t}\n\t}))\n\t.add(\"Only icon\", () => ({\n\t\ttemplate: `\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<div role=\"button\" class=\"bx--tooltip__trigger\">\n\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<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</svg>\n\t\t\t\t\t\t</div>\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\t\t\tprops: {\n\t\t\t\tplacement: select(\"Tooltip direction\", [\"bottom\", \"top\", \"left\", \"right\"], \"bottom\")\n\t\t\t}\n\t}))\n\t.add(\"Multiple tooltips\", () => ({\n\t\ttemplate: `\n\t\t\t<div style=\"display: flex\">\n\t\t\t\t<div style=\"margin-right:30px\">\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</div>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<span\n\t\t\t\t\t\t[ibmTooltip]=\"template\"\n\t\t\t\t\t\ttrigger=\"hover\"\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\t<div>\n\t\t\t\t\t<ng-template #template2 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</div>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<span\n\t\t\t\t\t\t[ibmTooltip]=\"template2\"\n\t\t\t\t\t\ttrigger=\"hover\"\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</div>\n\t\t\t`,\n\t\t\tprops: {\n\t\t\t\tplacement: select(\"Tooltip direction\", [\"bottom\", \"top\", \"left\", \"right\"], \"bottom\"),\n\t\t\t\ttriggerText: text(\"Trigger text\", \"Tooltip label\")\n\t\t\t}\n\t}))\n\t.add(\"Ellipsis tooltip\", () => ({\n\t\tstyles: [`\n\t\t\t.fullText {\n\t\t\t\twhite-space: nowrap;\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t\t.overflowText {\n\t\t\t\twhite-space: nowrap;\n\t\t\t\toverflow: hidden;\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\twidth: 100px;\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t`],\n\t\ttemplate: `\n\t\t\t<span\n\t\t\t\tclass=\"ellipsis\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'fullText': showFullText,\n\t\t\t\t\t'overflowText': !showFullText\n\t\t\t\t}\"\n\t\t\t\ttrigger=\"hover\"\n\t\t\t\t[offset]=\"offset\"\n\t\t\t\t[placement]=\"placement\"\n\t\t\t\tibmEllipsisTooltip>\n\t\t\t\t\tTooltip for ellipsis because I can and I am really really long\n\t\t\t</span>\n\t\t\t<ibm-placeholder></ibm-placeholder>\n\t\t`,\n\t\tprops: {\n\t\t\tshowFullText: boolean(\"Show full text\", false),\n\t\t\tplacement: select(\"Tooltip direction\", [\"bottom\", \"top\", \"left\", \"right\"], \"bottom\"),\n\t\t\toffset: object(\"Horizontal and vertical offset\", { x: 0, y: 0 })\n\t\t}\n\t}))\n\t.add(\"Documentation\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-documentation src=\"documentation/directives/TooltipDirective.html\"></ibm-documentation>\n\t\t`\n\t}));\n";
+var __STORY__ = "import { storiesOf, moduleMetadata } from \"@storybook/angular\";\nimport { action } from \"@storybook/addon-actions\";\nimport {\n\twithKnobs,\n\ttext,\n\tselect,\n\tobject,\n\tboolean\n} from \"@storybook/addon-knobs/angular\";\n\nimport { InformationFilled16Module } from \"@carbon/icons-angular/lib/information--filled/16\";\nimport { DialogModule, PlaceholderModule, DocumentationModule } from \"../../\";\nimport { TagModule } from \"../../tag/tag.module\";\n\nstoriesOf(\"Components|Tooltip\", module)\n\t.addDecorator(\n\t\tmoduleMetadata({\n\t\t\timports: [\n\t\t\t\tDialogModule,\n\t\t\t\tTagModule,\n\t\t\t\tPlaceholderModule,\n\t\t\t\tInformationFilled16Module,\n\t\t\t\tDocumentationModule\n\t\t\t]\n\t\t})\n\t)\n\t.addDecorator(withKnobs)\n\t.add(\"Basic\", () => ({\n\t\ttemplate: `\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<div class=\"bx--tooltip__label\">\n\t\t\t\t\t\t{{triggerText}}\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\">\n\t\t\t\t\t\t\t\t<ibm-icon-information-filled16></ibm-icon-information-filled16>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ibm-placeholder></ibm-placeholder>\n\t\t\t\t</div>\n\t\t\t`,\n\t\t\tprops: {\n\t\t\t\tplacement: select(\"Tooltip direction\", [\"bottom\", \"top\", \"left\", \"right\"], \"bottom\"),\n\t\t\t\ttriggerText: text(\"Trigger text\", \"Tooltip label\")\n\t\t\t}\n\t\t}))\n\t.add(\"With dynamic content\", () => ({\n\t\ttemplate: `\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<ibm-tag-filter\n\t\t\t\t\t\t\t*ngFor=\"let tag of tags; let i of index\"\n\t\t\t\t\t\t\t(close)=\"removeTag(i)\">\n\t\t\t\t\t\t\t{{ tag.content }}\n\t\t\t\t\t\t</ibm-tag-filter>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<div class=\"bx--tooltip__label\">\n\t\t\t\t\t\t{{triggerText}}\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\">\n\t\t\t\t\t\t\t\t<ibm-icon-information-filled16></ibm-icon-information-filled16>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ibm-placeholder></ibm-placeholder>\n\t\t\t\t</div>\n\t\t\t`,\n\t\t\tprops: {\n\t\t\t\tplacement: select(\"Tooltip direction\", [\"bottom\", \"top\", \"left\", \"right\"], \"bottom\"),\n\t\t\t\ttriggerText: text(\"Trigger text\", \"Tooltip label\"),\n\t\t\t\ttags: [{ content: \"One\" }, { content: \"Two\" }, { content: \"Three\" }, { content: \"Four\" }],\n\t\t\t\tremoveTag: function(index: number) {\n\t\t\t\t\tthis.tags.splice(index, 1);\n\t\t\t\t}\n\t\t\t}\n\t\t}))\n\t.add(\"No icon\", () => ({\n\t\ttemplate: `\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[offset]=\"offset\"\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\t\t\tprops: {\n\t\t\t\tplacement: select(\"Tooltip direction\", [\"bottom\", \"top\", \"left\", \"right\"], \"bottom\"),\n\t\t\t\ttriggerText: text(\"Trigger text\", \"Tooltip label\"),\n\t\t\t\toffset: object(\"Horizontal and vertical offset\", { x: 0, y: 0 })\n\t\t\t}\n\t}))\n\t.add(\"Only icon\", () => ({\n\t\ttemplate: `\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<div role=\"button\" class=\"bx--tooltip__trigger\">\n\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<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</svg>\n\t\t\t\t\t\t</div>\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\t\t\tprops: {\n\t\t\t\tplacement: select(\"Tooltip direction\", [\"bottom\", \"top\", \"left\", \"right\"], \"bottom\")\n\t\t\t}\n\t}))\n\t.add(\"Multiple tooltips\", () => ({\n\t\ttemplate: `\n\t\t\t<div style=\"display: flex\">\n\t\t\t\t<div style=\"margin-right:30px\">\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</div>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<span\n\t\t\t\t\t\t[ibmTooltip]=\"template\"\n\t\t\t\t\t\ttrigger=\"hover\"\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\t<div>\n\t\t\t\t\t<ng-template #template2 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</div>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<span\n\t\t\t\t\t\t[ibmTooltip]=\"template2\"\n\t\t\t\t\t\ttrigger=\"hover\"\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</div>\n\t\t\t`,\n\t\t\tprops: {\n\t\t\t\tplacement: select(\"Tooltip direction\", [\"bottom\", \"top\", \"left\", \"right\"], \"bottom\"),\n\t\t\t\ttriggerText: text(\"Trigger text\", \"Tooltip label\")\n\t\t\t}\n\t}))\n\t.add(\"Ellipsis tooltip\", () => ({\n\t\tstyles: [`\n\t\t\t.fullText {\n\t\t\t\twhite-space: nowrap;\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t\t.overflowText {\n\t\t\t\twhite-space: nowrap;\n\t\t\t\toverflow: hidden;\n\t\t\t\ttext-overflow: ellipsis;\n\t\t\t\twidth: 100px;\n\t\t\t\tdisplay: inline-block;\n\t\t\t}\n\t\t`],\n\t\ttemplate: `\n\t\t\t<span\n\t\t\t\tclass=\"ellipsis\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'fullText': showFullText,\n\t\t\t\t\t'overflowText': !showFullText\n\t\t\t\t}\"\n\t\t\t\ttrigger=\"hover\"\n\t\t\t\t[offset]=\"offset\"\n\t\t\t\t[placement]=\"placement\"\n\t\t\t\tibmEllipsisTooltip>\n\t\t\t\t\tTooltip for ellipsis because I can and I am really really long\n\t\t\t</span>\n\t\t\t<ibm-placeholder></ibm-placeholder>\n\t\t`,\n\t\tprops: {\n\t\t\tshowFullText: boolean(\"Show full text\", false),\n\t\t\tplacement: select(\"Tooltip direction\", [\"bottom\", \"top\", \"left\", \"right\"], \"bottom\"),\n\t\t\toffset: object(\"Horizontal and vertical offset\", { x: 0, y: 0 })\n\t\t}\n\t}))\n\t.add(\"Documentation\", () => ({\n\t\ttemplate: `\n\t\t\t<ibm-documentation src=\"documentation/directives/TooltipDirective.html\"></ibm-documentation>\n\t\t`\n\t}));\n";
 // @ts-ignore
-var __ADDS_MAP__ = { "components-tooltip--documentation": { "startLoc": { "col": 6, "line": 189 }, "endLoc": { "col": 3, "line": 193 }, "startBody": { "col": 23, "line": 189 }, "endBody": { "col": 3, "line": 193 } }, "components-tooltip--ellipsis-tooltip": { "startLoc": { "col": 6, "line": 154 }, "endLoc": { "col": 3, "line": 188 }, "startBody": { "col": 26, "line": 154 }, "endBody": { "col": 3, "line": 188 } }, "components-tooltip--multiple-tooltips": { "startLoc": { "col": 6, "line": 114 }, "endLoc": { "col": 3, "line": 153 }, "startBody": { "col": 27, "line": 114 }, "endBody": { "col": 3, "line": 153 } }, "components-tooltip--only-icon": { "startLoc": { "col": 6, "line": 85 }, "endLoc": { "col": 3, "line": 113 }, "startBody": { "col": 19, "line": 85 }, "endBody": { "col": 3, "line": 113 } }, "components-tooltip--no-icon": { "startLoc": { "col": 6, "line": 57 }, "endLoc": { "col": 3, "line": 84 }, "startBody": { "col": 17, "line": 57 }, "endBody": { "col": 3, "line": 84 } }, "components-tooltip--basic": { "startLoc": { "col": 6, "line": 26 }, "endLoc": { "col": 3, "line": 56 }, "startBody": { "col": 15, "line": 26 }, "endBody": { "col": 3, "line": 56 } } };
+var __ADDS_MAP__ = { "components-tooltip--documentation": { "startLoc": { "col": 6, "line": 224 }, "endLoc": { "col": 3, "line": 228 }, "startBody": { "col": 23, "line": 224 }, "endBody": { "col": 3, "line": 228 } }, "components-tooltip--ellipsis-tooltip": { "startLoc": { "col": 6, "line": 189 }, "endLoc": { "col": 3, "line": 223 }, "startBody": { "col": 26, "line": 189 }, "endBody": { "col": 3, "line": 223 } }, "components-tooltip--multiple-tooltips": { "startLoc": { "col": 6, "line": 149 }, "endLoc": { "col": 3, "line": 188 }, "startBody": { "col": 27, "line": 149 }, "endBody": { "col": 3, "line": 188 } }, "components-tooltip--only-icon": { "startLoc": { "col": 6, "line": 120 }, "endLoc": { "col": 3, "line": 148 }, "startBody": { "col": 19, "line": 120 }, "endBody": { "col": 3, "line": 148 } }, "components-tooltip--no-icon": { "startLoc": { "col": 6, "line": 92 }, "endLoc": { "col": 3, "line": 119 }, "startBody": { "col": 17, "line": 92 }, "endBody": { "col": 3, "line": 119 } }, "components-tooltip--with-dynamic-content": { "startLoc": { "col": 6, "line": 59 }, "endLoc": { "col": 4, "line": 91 }, "startBody": { "col": 30, "line": 59 }, "endBody": { "col": 4, "line": 91 } }, "components-tooltip--basic": { "startLoc": { "col": 6, "line": 28 }, "endLoc": { "col": 4, "line": 58 }, "startBody": { "col": 15, "line": 28 }, "endBody": { "col": 4, "line": 58 } } };
 // @ts-ignore
 var __MAIN_FILE_LOCATION__ = "/tooltip.stories.ts";
 // @ts-ignore
@@ -7207,10 +7204,12 @@ var __IDS_TO_FRAMEWORKS__ = {};
 
 
 
+
 Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Components|Tooltip", module).addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } }).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__, __MAIN_FILE_LOCATION__, __MODULE_DEPENDENCIES__, __LOCAL_DEPENDENCIES__, __SOURCE_PREFIX__, __IDS_TO_FRAMEWORKS__))
     .addDecorator(Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["moduleMetadata"])({
     imports: [
         ___WEBPACK_IMPORTED_MODULE_3__["DialogModule"],
+        _tag_tag_module__WEBPACK_IMPORTED_MODULE_4__["TagModule"],
         ___WEBPACK_IMPORTED_MODULE_3__["PlaceholderModule"],
         _carbon_icons_angular_lib_information_filled_16__WEBPACK_IMPORTED_MODULE_2__["InformationFilled16Module"],
         ___WEBPACK_IMPORTED_MODULE_3__["DocumentationModule"]
@@ -7218,11 +7217,22 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Components
 }))
     .addDecorator(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["withKnobs"])
     .add("Basic", function () { return ({
-    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",
+    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<div class=\"bx--tooltip__label\">\n\t\t\t\t\t\t{{triggerText}}\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\">\n\t\t\t\t\t\t\t\t<ibm-icon-information-filled16></ibm-icon-information-filled16>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ibm-placeholder></ibm-placeholder>\n\t\t\t\t</div>\n\t\t\t",
     props: {
         placement: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["select"])("Tooltip direction", ["bottom", "top", "left", "right"], "bottom"),
         triggerText: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["text"])("Trigger text", "Tooltip label")
     }
+}); })
+    .add("With dynamic content", function () { return ({
+    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<ibm-tag-filter\n\t\t\t\t\t\t\t*ngFor=\"let tag of tags; let i of index\"\n\t\t\t\t\t\t\t(close)=\"removeTag(i)\">\n\t\t\t\t\t\t\t{{ tag.content }}\n\t\t\t\t\t\t</ibm-tag-filter>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<div class=\"bx--tooltip__label\">\n\t\t\t\t\t\t{{triggerText}}\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\">\n\t\t\t\t\t\t\t\t<ibm-icon-information-filled16></ibm-icon-information-filled16>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t\t<ibm-placeholder></ibm-placeholder>\n\t\t\t\t</div>\n\t\t\t",
+    props: {
+        placement: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["select"])("Tooltip direction", ["bottom", "top", "left", "right"], "bottom"),
+        triggerText: Object(_storybook_addon_knobs_angular__WEBPACK_IMPORTED_MODULE_1__["text"])("Trigger text", "Tooltip label"),
+        tags: [{ content: "One" }, { content: "Two" }, { content: "Three" }, { content: "Four" }],
+        removeTag: function (index) {
+            this.tags.splice(index, 1);
+        }
+    }
 }); })
     .add("No icon", function () { return ({
     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[offset]=\"offset\"\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",
@@ -8940,7 +8950,11 @@ var DropdownList = /** @class */ (function () {
      * Additionally, any Observables for the `DropdownList` are initialized.
      */
     DropdownList.prototype.ngAfterViewInit = function () {
+        var _this = this;
         this.index = this.getListItems().findIndex(function (item) { return item.selected; });
+        setTimeout(function () {
+            _this.doEmitSelect();
+        });
         this.setupFocusObservable();
     };
     /**
@@ -8954,6 +8968,18 @@ var DropdownList = /** @class */ (function () {
             this._itemsSubscription.unsubscribe();
         }
     };
+    DropdownList.prototype.doEmitSelect = function () {
+        if (this.type === "single") {
+            this.select.emit({ item: this._items.find(function (item) { return item.selected; }), isUpdate: true });
+        }
+        else {
+            // abuse javascripts object mutability until we can break the API and switch to
+            // { items: [], isUpdate: true }
+            var selected = this.getSelected() || [];
+            selected["isUpdate"] = true;
+            this.select.emit(selected);
+        }
+    };
     /**
      * Updates the displayed list of items and then retrieves the most current properties for the `DropdownList` from the DOM.
      */
@@ -8967,16 +8993,7 @@ var DropdownList = /** @class */ (function () {
             if (_this.getSelected() !== []) {
                 return;
             }
-            if (_this.type === "single") {
-                _this.select.emit({ item: _this._items.find(function (item) { return item.selected; }), isUpdate: true });
-            }
-            else {
-                // abuse javascripts object mutability until we can break the API and switch to
-                // { items: [], isUpdate: true }
-                var selected = _this.getSelected() || [];
-                selected["isUpdate"] = true;
-                _this.select.emit(selected);
-            }
+            _this.doEmitSelect();
         });
     };
     /**
@@ -11059,9 +11076,10 @@ __webpack_require__.r(__webpack_exports__);
         "FORWARD": "Forward",
         "TOTAL_ITEMS_UNKNOWN": "{{start}}-{{end}} items",
         "TOTAL_ITEMS": "{{start}}-{{end}} of {{total}} items",
-        "TOTAL_PAGES": "{{current}} of {{last}} pages",
+        "TOTAL_ITEM": "{{start}}-{{end}} of {{total}} item",
         "PAGE": "page",
-        "OF_LAST_PAGES": "of {{last}} pages"
+        "OF_LAST_PAGES": "of {{last}} pages",
+        "OF_LAST_PAGE": "of {{last}} page"
     },
     "TABLE": {
         "GO_TO_PAGE": "Go to page",
@@ -16609,10 +16627,11 @@ var Pagination = /** @class */ (function () {
         this.backwardText = this.i18n.getOverridable("PAGINATION.BACKWARD");
         this.forwardText = this.i18n.getOverridable("PAGINATION.FORWARD");
         this.totalItemsText = this.i18n.getOverridable("PAGINATION.TOTAL_ITEMS");
+        this.totalItemText = this.i18n.getOverridable("PAGINATION.TOTAL_ITEM");
         this.totalItemsUnknownText = this.i18n.getOverridable("PAGINATION.TOTAL_ITEMS_UNKNOWN");
-        this.totalPagesText = this.i18n.getOverridable("PAGINATION.TOTAL_PAGES");
         this.pageText = this.i18n.getOverridable("PAGINATION.PAGE");
         this.ofLastPagesText = this.i18n.getOverridable("PAGINATION.OF_LAST_PAGES");
+        this.ofLastPageText = this.i18n.getOverridable("PAGINATION.OF_LAST_PAGE");
         this._pageOptions = [];
         Pagination_1.paginationCounter++;
     }
@@ -16626,9 +16645,11 @@ var Pagination = /** @class */ (function () {
          *		"OPEN_LIST_OF_OPTIONS": "Open list of options",
          *		"BACKWARD": "Backward",
          *		"FORWARD": "Forward",
+         *		"TOTAL_ITEMS_UNKNOWN": "{{start}}-{{end}} items",
          *		"TOTAL_ITEMS": "{{start}}-{{end}} of {{total}} items",
-         *		"TOTAL_PAGES": "{{current}} of {{last}} pages",
-         *		"OF_LAST_PAGES": "of {{last}} pages"
+         *		"TOTAL_ITEM": "{{start}}-{{end}} of {{total}} item",
+         *		"OF_LAST_PAGES": "of {{last}} pages",
+         *		"OF_LAST_PAGE": "of {{last}} page",
          * }
          * ```
          */
@@ -16639,10 +16660,11 @@ var Pagination = /** @class */ (function () {
             this.backwardText.override(valueWithDefaults.BACKWARD);
             this.forwardText.override(valueWithDefaults.FORWARD);
             this.totalItemsText.override(valueWithDefaults.TOTAL_ITEMS);
+            this.totalItemText.override(valueWithDefaults.TOTAL_ITEM);
             this.totalItemsUnknownText.override(valueWithDefaults.TOTAL_ITEMS_UNKNOWN);
-            this.totalPagesText.override(valueWithDefaults.TOTAL_PAGES);
             this.pageText.override(valueWithDefaults.PAGE);
             this.ofLastPagesText.override(valueWithDefaults.OF_LAST_PAGES);
+            this.ofLastPageText.override(valueWithDefaults.OF_LAST_PAGE);
         },
         enumerable: true,
         configurable: true
@@ -16784,7 +16806,7 @@ var Pagination = /** @class */ (function () {
     Pagination = Pagination_1 = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_1__["Component"])({
             selector: "ibm-pagination",
-            template: "\n\t<div\n\t\tclass=\"bx--pagination\"\n\t\t[ngClass]=\"{\n\t\t\t'bx--skeleton': skeleton\n\t\t}\">\n\t\t<!-- left skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"bx--pagination__left\">\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 70px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 35px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 105px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"bx--pagination__left\">\n\t\t\t<label class=\"bx--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t{{itemsPerPageText.subject | async}}\n\t\t\t</label>\n\t\t\t<div class=\"bx--select bx--select--inline\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--select__item-count': isExperimental,\n\t\t\t\t\t'bx--select--disabled': pageInputDisabled\n\t\t\t\t}\">\n\t\t\t\t<select\n\t\t\t\t\t[id]=\"itemsPerPageSelectId\"\n\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\t[(ngModel)]=\"itemsPerPage\"\n\t\t\t\t\tclass=\"bx--select-input\">\n\t\t\t\t\t<option\n\t\t\t\t\t\tclass=\"bx--select-option\"\n\t\t\t\t\t\t*ngFor=\"let option of itemsPerPageOptions\"\n\t\t\t\t\t\t[value]=\"option\">\n\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t</option>\n\t\t\t\t</select>\n\t\t\t\t<svg\n\t\t\t\t\tibmIconChevronDown16\n\t\t\t\t\tstyle=\"display: inherit\"\n\t\t\t\t\tclass=\"bx--select__arrow\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<span *ngIf=\"!pagesUnknown\" class=\"bx--pagination__text\">\n\t\t\t\t<span *ngIf=\"!isExperimental\">|&nbsp;</span>\n\t\t\t\t{{totalItemsText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"pagesUnknown\" class=\"bx--pagination__text\">\n\t\t\t\t<span *ngIf=\"!isExperimental\">|&nbsp;</span>\n\t\t\t\t{{totalItemsUnknownText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex } | async}}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- right skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"bx--pagination__right\">\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 70px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"bx--pagination__right\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--pagination--inline': !isExperimental\n\t\t\t}\">\n\t\t\t<div\n\t\t\t\tclass=\"bx--select bx--select--inline\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--select__page-number' : isExperimental,\n\t\t\t\t\t'bx--select--disabled': pageInputDisabled\n\t\t\t\t}\">\n\t\t\t\t<label [for]=\"currentPageSelectId\" class=\"bx--label bx--visually-hidden\">{{itemsPerPageText.subject | async}}</label>\n\t\t\t\t<input\n\t\t\t\t\t*ngIf=\"pageOptions.length > pageSelectThreshold\"\n\t\t\t\t\tstyle=\"padding-right: 1rem; margin-right: 1rem;\"\n\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\tmin=\"1\"\n\t\t\t\t\t[max]=\"pageOptions.length\"\n\t\t\t\t\tclass=\"bx--select-input\"\n\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t<select\n\t\t\t\t\t*ngIf=\"pageOptions.length <= pageSelectThreshold\"\n\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\tclass=\"bx--select-input\"\n\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t<option *ngFor=\"let page of pageOptions; let i = index;\" class=\"bx--select-option\" [value]=\"i + 1\">{{i + 1}}</option>\n\t\t\t\t</select>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"pageOptions.length <= 1000\"\n\t\t\t\t\tibmIconChevronDown16\n\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\tclass=\"bx--select__arrow\"\n\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t</svg>\n\t\t\t</div>\n\n\t\t\t<span *ngIf=\"!pagesUnknown\" class=\"bx--pagination__text\">\n\t\t\t\t{{ofLastPagesText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"pagesUnknown\" class=\"bx--pagination__text\">\n\t\t\t\t{{pageText.subject | async}} {{currentPage}}\n\t\t\t</span>\n\t\t\t<button\n\t\t\t\tclass=\"bx--pagination__button bx--pagination__button--backward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--pagination__button--no-index': currentPage <= 1 || disabled\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"backwardText.subject | async\"\n\t\t\t\t(click)=\"selectPage.emit(previousPage)\"\n\t\t\t\t[disabled]=\"(currentPage <= 1 || disabled ? true : null)\">\n\t\t\t\t<ibm-icon-caret-left16></ibm-icon-caret-left16>\n\t\t\t</button>\n\n\t\t\t<button\n\t\t\t\tclass=\"bx--pagination__button bx--pagination__button--forward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--pagination__button--no-index': currentPage >= lastPage || disabled\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"forwardText.subject | async\"\n\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t[disabled]=\"(currentPage >= lastPage || disabled ? true : null)\">\n\t\t\t\t<ibm-icon-caret-right16></ibm-icon-caret-right16>\n\t\t\t</button>\n\t\t</div>\n\t</div>\n\t"
+            template: "\n\t<div\n\t\tclass=\"bx--pagination\"\n\t\t[ngClass]=\"{\n\t\t\t'bx--skeleton': skeleton\n\t\t}\">\n\t\t<!-- left skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"bx--pagination__left\">\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 70px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 35px\"></p>\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 105px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"bx--pagination__left\">\n\t\t\t<label class=\"bx--pagination__text\" [for]=\"itemsPerPageSelectId\">\n\t\t\t\t{{itemsPerPageText.subject | async}}\n\t\t\t</label>\n\t\t\t<div class=\"bx--select bx--select--inline\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--select__item-count': isExperimental,\n\t\t\t\t\t'bx--select--disabled': pageInputDisabled\n\t\t\t\t}\">\n\t\t\t\t<select\n\t\t\t\t\t[id]=\"itemsPerPageSelectId\"\n\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\t[(ngModel)]=\"itemsPerPage\"\n\t\t\t\t\tclass=\"bx--select-input\">\n\t\t\t\t\t<option\n\t\t\t\t\t\tclass=\"bx--select-option\"\n\t\t\t\t\t\t*ngFor=\"let option of itemsPerPageOptions\"\n\t\t\t\t\t\t[value]=\"option\">\n\t\t\t\t\t\t\t{{ option }}\n\t\t\t\t\t</option>\n\t\t\t\t</select>\n\t\t\t\t<svg\n\t\t\t\t\tibmIconChevronDown16\n\t\t\t\t\tstyle=\"display: inherit\"\n\t\t\t\t\tclass=\"bx--select__arrow\"\n\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t</svg>\n\t\t\t</div>\n\t\t\t<span *ngIf=\"!pagesUnknown && totalDataLength <= 1\" class=\"bx--pagination__text\">\n\t\t\t\t{{totalItemText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!pagesUnknown && totalDataLength > 1\" class=\"bx--pagination__text\">\n\t\t\t\t<span *ngIf=\"!isExperimental\">|&nbsp;</span>\n\t\t\t\t{{totalItemsText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex, total: totalDataLength } | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"pagesUnknown\" class=\"bx--pagination__text\">\n\t\t\t\t<span *ngIf=\"!isExperimental\">|&nbsp;</span>\n\t\t\t\t{{totalItemsUnknownText.subject | i18nReplace:{start: startItemIndex, end: endItemIndex } | async}}\n\t\t\t</span>\n\t\t</div>\n\n\t\t<!-- right skeleton div -->\n\t\t<div *ngIf=\"skeleton\" class=\"bx--pagination__right\">\n\t\t\t<p class=\"bx--skeleton__text\" style=\"width: 70px\"></p>\n\t\t</div>\n\n\t\t<div *ngIf=\"!skeleton\" class=\"bx--pagination__right\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'bx--pagination--inline': !isExperimental\n\t\t\t}\">\n\t\t\t<div\n\t\t\t\tclass=\"bx--select bx--select--inline\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--select__page-number' : isExperimental,\n\t\t\t\t\t'bx--select--disabled': pageInputDisabled\n\t\t\t\t}\">\n\t\t\t\t<label [for]=\"currentPageSelectId\" class=\"bx--label bx--visually-hidden\">{{itemsPerPageText.subject | async}}</label>\n\t\t\t\t<input\n\t\t\t\t\t*ngIf=\"pageOptions.length > pageSelectThreshold\"\n\t\t\t\t\tstyle=\"padding-right: 1rem; margin-right: 1rem;\"\n\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\ttype=\"number\"\n\t\t\t\t\tmin=\"1\"\n\t\t\t\t\t[max]=\"pageOptions.length\"\n\t\t\t\t\tclass=\"bx--select-input\"\n\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t<select\n\t\t\t\t\t*ngIf=\"pageOptions.length <= pageSelectThreshold\"\n\t\t\t\t\t[id]=\"currentPageSelectId\"\n\t\t\t\t\t[disabled]=\"pageInputDisabled\"\n\t\t\t\t\tclass=\"bx--select-input\"\n\t\t\t\t\t[(ngModel)]=\"currentPage\">\n\t\t\t\t\t<option *ngFor=\"let page of pageOptions; let i = index;\" class=\"bx--select-option\" [value]=\"i + 1\">{{i + 1}}</option>\n\t\t\t\t</select>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"pageOptions.length <= 1000\"\n\t\t\t\t\tibmIconChevronDown16\n\t\t\t\t\tstyle=\"display: inherit;\"\n\t\t\t\t\tclass=\"bx--select__arrow\"\n\t\t\t\t\t[attr.ariaLabel]=\"optionsListText.subject | async\">\n\t\t\t\t</svg>\n\t\t\t</div>\n\n\t\t\t<span *ngIf=\"!pagesUnknown && lastPage <= 1\" class=\"bx--pagination__text\">\n\t\t\t\t{{ofLastPageText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"!pagesUnknown && lastPage > 1\" class=\"bx--pagination__text\">\n\t\t\t\t{{ofLastPagesText.subject | i18nReplace: {last: lastPage} | async}}\n\t\t\t</span>\n\t\t\t<span *ngIf=\"pagesUnknown\" class=\"bx--pagination__text\">\n\t\t\t\t{{pageText.subject | async}} {{currentPage}}\n\t\t\t</span>\n\t\t\t<button\n\t\t\t\tclass=\"bx--pagination__button bx--pagination__button--backward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--pagination__button--no-index': currentPage <= 1 || disabled\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"backwardText.subject | async\"\n\t\t\t\t(click)=\"selectPage.emit(previousPage)\"\n\t\t\t\t[disabled]=\"(currentPage <= 1 || disabled ? true : null)\">\n\t\t\t\t<ibm-icon-caret-left16></ibm-icon-caret-left16>\n\t\t\t</button>\n\n\t\t\t<button\n\t\t\t\tclass=\"bx--pagination__button bx--pagination__button--forward\"\n\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t'bx--pagination__button--no-index': currentPage >= lastPage || disabled\n\t\t\t\t}\"\n\t\t\t\ttabindex=\"0\"\n\t\t\t\t[attr.aria-label]=\"forwardText.subject | async\"\n\t\t\t\t(click)=\"selectPage.emit(nextPage)\"\n\t\t\t\t[disabled]=\"(currentPage >= lastPage || disabled ? true : null)\">\n\t\t\t\t<ibm-icon-caret-right16></ibm-icon-caret-right16>\n\t\t\t</button>\n\t\t</div>\n\t</div>\n\t"
         }),
         __metadata("design:paramtypes", [typeof (_b = typeof _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_2__["I18n"] !== "undefined" && _i18n_i18n_module__WEBPACK_IMPORTED_MODULE_2__["I18n"]) === "function" && _b || Object, typeof (_c = typeof _experimental_module__WEBPACK_IMPORTED_MODULE_3__["ExperimentalService"] !== "undefined" && _experimental_module__WEBPACK_IMPORTED_MODULE_3__["ExperimentalService"]) === "function" && _c || Object])
     ], Pagination);
@@ -19053,7 +19075,7 @@ Object(_storybook_angular__WEBPACK_IMPORTED_MODULE_0__["storiesOf"])("Components
 /*! no static exports found */
 /***/ (function(module, exports) {
 
-module.exports = "<div\n\tclass=\"bx--search\"\n\t[ngClass]=\"{\n\t\t'bx--search--sm': size === 'sm',\n\t\t'bx--search--xl': size === 'xl',\n\t\t'bx--search--light': theme === 'light',\n\t\t'bx--skeleton': skeleton,\n\t\t'bx--toolbar-search': toolbar,\n\t\t'bx--toolbar-search--active': toolbar && active\n\t}\"\n\trole=\"search\">\n\t<label class=\"bx--label\" [for]=\"id\">{{label}}</label>\n\n\t<div *ngIf=\"skeleton; else enableInput\" class=\"bx--search-input\"></div>\n\t<ng-template #enableInput>\n\t\t<input\n\t\t\t#input\n\t\t\t*ngIf=\"!toolbar || active || value !== ''\"\n\t\t\tclass=\"bx--search-input\"\n\t\t\t[type]=\"tableSearch || !toolbar ? 'text' : 'search'\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[autocomplete]=\"autocomplete\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[required]=\"required\"\n\t\t\t(input)=\"onSearch($event.target.value)\"/>\n\t\t<button *ngIf=\"!tableSearch && toolbar\" class=\"bx--toolbar-search__btn\" (click)=\"openSearch()\">\n\t\t\t<ibm-icon-search16 class=\"bx--search-magnifier\"></ibm-icon-search16>\n\t\t</button>\n\t\t<ibm-icon-search16 *ngIf=\"tableSearch || !toolbar\" (click)=\"openSearch()\" class=\"bx--search-magnifier\"></ibm-icon-search16>\n\t</ng-template>\n\n\t<button\n\t\t*ngIf=\"tableSearch || !toolbar\"\n\t\tclass=\"bx--search-close\"\n\t\t[ngClass]=\"{\n\t\t\t'bx--search-close--hidden': !value || value.length === 0\n\t\t}\"\n\t\t[title]=\"clearButtonTitle\"\n\t\t[attr.aria-label]=\"clearButtonTitle\"\n\t\t(click)=\"clearSearch()\">\n\t\t<ibm-icon-close16></ibm-icon-close16>\n\t</button>\n</div>\n"
+module.exports = "<div\n\tclass=\"bx--search\"\n\t[ngClass]=\"{\n\t\t'bx--search--sm': size === 'sm',\n\t\t'bx--search--xl': size === 'xl',\n\t\t'bx--search--light': theme === 'light',\n\t\t'bx--skeleton': skeleton,\n\t\t'bx--toolbar-search': toolbar,\n\t\t'bx--toolbar-search--active': toolbar && active\n\t}\"\n\trole=\"search\">\n\t<label class=\"bx--label\" [for]=\"id\">{{label}}</label>\n\n\t<div *ngIf=\"skeleton; else enableInput\" class=\"bx--search-input\"></div>\n\t<ng-template #enableInput>\n\t\t<input\n\t\t\t#input\n\t\t\t*ngIf=\"!toolbar || active || value !== ''\"\n\t\t\tclass=\"bx--search-input\"\n\t\t\t[type]=\"tableSearch || !toolbar ? 'text' : 'search'\"\n\t\t\t[id]=\"id\"\n\t\t\t[value]=\"value\"\n\t\t\t[autocomplete]=\"autocomplete\"\n\t\t\t[placeholder]=\"placeholder\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[required]=\"required\"\n\t\t\t(keyup.enter)=\"onEnter()\"\n\t\t\t(input)=\"onSearch($event.target.value)\"/>\n\t\t<button *ngIf=\"!tableSearch && toolbar\" class=\"bx--toolbar-search__btn\" (click)=\"openSearch()\">\n\t\t\t<ibm-icon-search16 class=\"bx--search-magnifier\"></ibm-icon-search16>\n\t\t</button>\n\t\t<ibm-icon-search16 *ngIf=\"tableSearch || !toolbar\" (click)=\"openSearch()\" class=\"bx--search-magnifier\"></ibm-icon-search16>\n\t</ng-template>\n\n\t<button\n\t\t*ngIf=\"tableSearch || !toolbar\"\n\t\tclass=\"bx--search-close\"\n\t\t[ngClass]=\"{\n\t\t\t'bx--search-close--hidden': !value || value.length === 0\n\t\t}\"\n\t\t[title]=\"clearButtonTitle\"\n\t\t[attr.aria-label]=\"clearButtonTitle\"\n\t\t(click)=\"clearSearch()\">\n\t\t<ibm-icon-close16></ibm-icon-close16>\n\t</button>\n</div>\n"
 
 /***/ }),
 
@@ -19164,6 +19186,10 @@ var Search = /** @class */ (function () {
          * Emits an event when value is changed.
          */
         this.valueChange = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
+        /**
+         * Emits an event on enter.
+         */
+        this.search = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
         this.open = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
         /**
          * Emits an event when the clear button is clicked.
@@ -19231,6 +19257,12 @@ var Search = /** @class */ (function () {
         this.value = search;
         this.doValueChange();
     };
+    /**
+     * Called on enter.
+     */
+    Search.prototype.onEnter = function () {
+        this.search.emit(this.value);
+    };
     /**
      * Called when clear button is clicked.
      */
@@ -19351,6 +19383,10 @@ var Search = /** @class */ (function () {
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])(),
         __metadata("design:type", Object)
     ], Search.prototype, "valueChange", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])(),
+        __metadata("design:type", Object)
+    ], Search.prototype, "search", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])(),
         __metadata("design:type", Object)
@@ -28552,8 +28588,21 @@ var TagFilter = /** @class */ (function (_super) {
          * Function for close/delete the tag
          */
         _this.close = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
+        /**
+         * We need to stop the immedate propagation of click on the close button
+         * to prevent undesired effects when used within dialogs.
+         *
+         * We need to emit a click event on close to allow for clicks to be listened
+         * to on the immediate close button element.
+         */
+        _this.click = new _angular_core__WEBPACK_IMPORTED_MODULE_0__["EventEmitter"]();
         return _this;
     }
+    TagFilter.prototype.onClose = function (event) {
+        event.stopImmediatePropagation();
+        this.click.emit();
+        this.close.emit();
+    };
     Object.defineProperty(TagFilter.prototype, "attrClass", {
         get: function () {
             return "bx--tag bx--tag--filter bx--tag--" + this.type + " " + this.class;
@@ -28565,6 +28614,10 @@ var TagFilter = /** @class */ (function (_super) {
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])(),
         __metadata("design:type", Object)
     ], TagFilter.prototype, "close", void 0);
+    __decorate([
+        Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Output"])(),
+        __metadata("design:type", Object)
+    ], TagFilter.prototype, "click", void 0);
     __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["HostBinding"])("attr.class"),
         __metadata("design:type", Object),
@@ -28573,7 +28626,7 @@ var TagFilter = /** @class */ (function (_super) {
     TagFilter = __decorate([
         Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["Component"])({
             selector: "ibm-tag-filter",
-            template: "\n\t\t<ng-content></ng-content>\n\t\t<svg\n\t\t\t(click)=\"close.emit()\"\n\t\t\tfocusable=\"false\"\n\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\tstyle=\"will-change: transform;\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\taria-label=\"Clear filter\"\n\t\t\twidth=\"16\"\n\t\t\theight=\"16\"\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\trole=\"img\">\n\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t</svg>\n\t"
+            template: "\n\t\t<ng-content></ng-content>\n\t\t<svg\n\t\t\t(click)=\"onClose($event)\"\n\t\t\tfocusable=\"false\"\n\t\t\tpreserveAspectRatio=\"xMidYMid meet\"\n\t\t\tstyle=\"will-change: transform;\"\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\taria-label=\"Clear filter\"\n\t\t\twidth=\"16\"\n\t\t\theight=\"16\"\n\t\t\tviewBox=\"0 0 16 16\"\n\t\t\trole=\"img\">\n\t\t\t<path d=\"M12 4.7l-.7-.7L8 7.3 4.7 4l-.7.7L7.3 8 4 11.3l.7.7L8 8.7l3.3 3.3.7-.7L8.7 8z\"></path>\n\t\t</svg>\n\t"
         })
     ], TagFilter);
     return TagFilter;
@@ -32981,4 +33034,4 @@ module.exports = __webpack_require__(/*! /home/travis/build/IBM/carbon-component
 /***/ })
 
 },[[0,"runtime~main","vendors~main"]]]);
-//# sourceMappingURL=main.293b4966d65e38f1c80c.bundle.js.map
+//# sourceMappingURL=main.1ccde517361f3d1a057c.bundle.js.map