carbon-components-angular 5.38.0 → 5.38.2

package/docs/documentation.json

@@ -26045,7 +26045,7 @@
         },
         {
             "name": "DatePicker",
-            "id": "component-DatePicker-a9892d8a02464586f07b4c2b78c2482ae7fe6d9db953c263c2f379ab12c68c16c76ee8f303712657ca74313707b1e06a6cd1787fae617ab5ac2b67a09e1ada08",
+            "id": "component-DatePicker-1f0b9e935ec897e4d099c9ca3d8fc393d0c402c52c032f9f96bd9f1b3252f3a61d5c50defda466e553041dd584c327b583c5fa50edf4dce0a34339dc4d9ce386",
             "file": "src/datepicker/datepicker.component.ts",
             "encapsulation": [
                 "ViewEncapsulation.None"
@@ -26726,7 +26726,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { DatePickerModule } from &#39;carbon-components-angular&#39;;</code></pre></div><p><a href=\"../../?path=/story/components-date-picker--single\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { DatePickerModule } from 'carbon-components-angular';\n```\n\n[See demo](../../?path=/story/components-date-picker--single)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tViewEncapsulation,\n\tElementRef,\n\tOnDestroy,\n\tHostListener,\n\tTemplateRef,\n\tOnChanges,\n\tSimpleChanges,\n\tAfterViewChecked,\n\tAfterViewInit,\n\tViewChild,\n\tOnInit,\n\tSimpleChange\n} from \"@angular/core\";\nimport rangePlugin from \"flatpickr/dist/plugins/rangePlugin\";\nimport flatpickr from \"flatpickr\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { carbonFlatpickrMonthSelectPlugin } from \"./carbon-flatpickr-month-select\";\nimport * as languages from \"flatpickr/dist/l10n/index\";\nimport { Options } from \"flatpickr/dist/types/options\";\nimport { DatePickerInput } from \"carbon-components-angular/datepicker-input\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * Due to type error, we have to use square brackets property accessor\n * There is a webpack issue when attempting to access exported languages from flatpickr l10n Angular 14+ apps\n * languages.default[locale] fails in app consuming CCA library but passes in test\n * languages.default.default[locale] fails in test but works in app consuming CCA library.\n *\n * To please both scenarios, we are adding a condition to prevent tests from failing\n */\nif (languages.default?.default[\"en\"]?.weekdays) {\n\t(languages.default.default[\"en\"].weekdays.shorthand as string[]) = languages.default.default[\"en\"].weekdays.longhand.map(day => {\n\t\tif (day === \"Thursday\") {\n\t\t\treturn \"Th\";\n\t\t}\n\t\treturn day.charAt(0);\n\t});\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { DatePickerModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-date-picker--single)\n */\n@Component({\n\tselector: \"cds-date-picker, ibm-date-picker\",\n\ttemplate: `\n\t<div class=\"cds--form-item\">\n\t\t<div\n\t\t\tclass=\"cds--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--date-picker--range' : range,\n\t\t\t\t'cds--date-picker--single' : !range,\n\t\t\t\t'cds--date-picker--light' : theme === 'light',\n\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#input\n\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t[id]=\"id + '-input'\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t[hasIcon]=\"(range ? false : true)\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t[warn]=\"warn\"\n\t\t\t\t\t[warnText]=\"warnText\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t\t(valueChange)=\"onValueChange($event)\"\n\t\t\t\t\t(click)=\"openCalendar(input)\">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\n\t\t\t<div *ngIf=\"range\" class=\"cds--date-picker-container\">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#rangeInput\n\t\t\t\t\t[label]=\"rangeLabel\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t[id]=\"id + '-rangeInput'\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t[hasIcon]=\"(range ? true : null)\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t[invalid]=\"rangeInvalid\"\n\t\t\t\t\t[invalidText]=\"rangeInvalidText\"\n\t\t\t\t\t[warn]=\"rangeWarn\"\n\t\t\t\t\t[warnText]=\"rangeWarnText\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"rangeHelperText\"\n\t\t\t\t\t(valueChange)=\"onRangeValueChange($event)\"\n\t\t\t\t\t(click)=\"openCalendar(rangeInput)\">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: DatePicker,\n\t\t\tmulti: true\n\t\t}\n\t],\n\tencapsulation: ViewEncapsulation.None\n})\nexport class DatePicker implements\n\tOnInit,\n\tOnDestroy,\n\tOnChanges,\n\tAfterViewChecked,\n\tAfterViewInit {\n\tprivate static datePickerCount = 0;\n\n\t/**\n\t * Select calendar range mode\n\t */\n\t@Input() range = false;\n\n\t/**\n\t * Format of date\n\t *\n\t * For reference: https://flatpickr.js.org/formatting/\n\t */\n\t@Input() dateFormat = \"m/d/Y\";\n\n\t/**\n\t * Language of the flatpickr calendar.\n\t *\n\t * For reference of the possible locales:\n\t * https://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts\n\t */\n\t@Input() language = \"en\";\n\n\t@Input() label: string | TemplateRef<any>;\n\t@Input() helperText: string | TemplateRef<any>;\n\t@Input() rangeHelperText: string | TemplateRef<any>;\n\t@Input() rangeLabel: string;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t/**\n\t * Aria label added to datepicker's calendar container.\n\t */\n\t@Input() ariaLabel = \"calendar container\";\n\n\t/**\n\t * The pattern for the underlying input element\n\t */\n\t@Input() inputPattern = \"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\";\n\n\t@Input() id = `datepicker-${DatePicker.datePickerCount++}`;\n\n\t@Input() set value(v: (Date | string)[]) {\n\t\tif (!v) {\n\t\t\tv = [];\n\t\t}\n\t\tthis._value = v;\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\n\t@Input() readonly = false;\n\t/**\n\t * Set to `true` to display the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if datepicker is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t  * Set to `true` to show a warning (contents set by warningText)\n\t  */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Set to `true` to display the invalid state for the second datepicker input.\n\t */\n\t@Input() rangeInvalid = false;\n\t/**\n\t * Value displayed if the second datepicker input is in an invalid state.\n\t */\n\t@Input() rangeInvalidText: string | TemplateRef<any>;\n\t/**\n\t  * Set to `true` to show a warning in the second datepicker input (contents set by rangeWarningText)\n\t  */\n\t@Input() rangeWarn = false;\n\t/**\n\t * Sets the warning text for the second datepicker input\n\t */\n\t@Input() rangeWarnText: string | TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\t@Input() plugins = [];\n\n\t@Input()\n\tset flatpickrOptions(options: Partial<Options>) {\n\t\tthis._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options);\n\t}\n\tget flatpickrOptions(): Partial<Options> {\n\t\tconst plugins = [...this.plugins, carbonFlatpickrMonthSelectPlugin];\n\t\tif (this.range) {\n\t\t\tplugins.push(rangePlugin({ input: `#${this.id}-rangeInput`, position: \"left\" }));\n\t\t}\n\t\treturn Object.assign({}, this._flatpickrOptions, this.flatpickrBaseOptions, {\n\t\t\tmode: this.range ? \"range\" : \"single\",\n\t\t\tplugins,\n\t\t\tdateFormat: this.dateFormat,\n\t\t\tlocale: languages.default?.default[this.language] || languages.default[this.language],\n\t\t\t// Little trick force \"readonly mode\" on datepicker input.\n\t\t\t// Docs: Whether clicking on the input should open the picker. You could disable this if you wish to open the calendar manually with.open().\n\t\t\tclickOpens: !this.readonly\n\t\t});\n\t}\n\n\t@ViewChild(\"input\", { static: true }) input: DatePickerInput;\n\t@ViewChild(\"rangeInput\") rangeInput: DatePickerInput;\n\n\t@Output() valueChange: EventEmitter<any> = new EventEmitter();\n\n\t/**\n\t * We are overriding onClose event even if users pass it via flatpickr options\n\t * Emits an event when date picker closes\n\t */\n\t@Output() onClose: EventEmitter<any> = new EventEmitter();\n\n\tprotected _value = [];\n\n\tprotected _flatpickrOptions: Partial<Options> = {\n\t\tallowInput: true\n\t};\n\n\tprotected flatpickrBaseOptions = {\n\t\tmode: \"single\",\n\t\tdateFormat: \"m/d/Y\",\n\t\tplugins: this.plugins,\n\t\tonOpen: () => {\n\t\t\tthis.updateClassNames();\n\t\t\tthis.updateAttributes();\n\t\t\tthis.updateCalendarListeners();\n\t\t},\n\t\tonClose: (date) => {\n\t\t\t// This makes sure that the `flatpickrInstance selectedDates` are in sync with the values of\n\t\t\t// the inputs when the calendar closes.\n\t\t\tif (this.range && this.flatpickrInstance) {\n\t\t\t\tconst inputValue = this.input.input.nativeElement.value;\n\t\t\t\tconst rangeInputValue = this.rangeInput.input.nativeElement.value;\n\t\t\t\tif (inputValue || rangeInputValue) {\n\t\t\t\t\tconst parseDate = (date: string) => this.flatpickrInstance.parseDate(date, this.dateFormat);\n\t\t\t\t\tthis.setDateValues([parseDate(inputValue), parseDate(rangeInputValue || inputValue)]);\n\t\t\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.onClose.emit(date);\n\t\t},\n\t\tonDayCreate: (_dObj, _dStr, _fp, dayElem) => {\n\t\t\tdayElem.classList.add(\"cds--date-picker__day\");\n\t\t},\n\t\tnextArrow: this.rightArrowHTML(),\n\t\tprevArrow: this.leftArrowHTML(),\n\t\tvalue: this.value\n\t};\n\n\tprotected flatpickrInstance = null;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected i18n: I18n\n\t) { }\n\n\tngOnInit() {\n\t\t// if i18n is set to anything other than en we'll want to change the language\n\t\t// otherwise we'll just use the local setting\n\t\tif (this.i18n.getLocale() !== \"en\") {\n\t\t\tthis.i18n.getLocaleObservable().subscribe(locale => {\n\t\t\t\tthis.language = locale;\n\t\t\t\tthis.resetFlatpickrInstance();\n\t\t\t});\n\t\t}\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\t// Reset the flatpickr instance on input changes that affect flatpickr.\n\t\tconst flatpickrChangeKeys = [\n\t\t\t\"range\",\n\t\t\t\"dateFormat\",\n\t\t\t\"language\",\n\t\t\t\"id\",\n\t\t\t\"value\",\n\t\t\t\"plugins\",\n\t\t\t\"flatpickrOptions\",\n\t\t\t\"readonly\"\n\t\t];\n\t\tconst changeKeys = Object.keys(changes);\n\t\tif (changeKeys.some(key => flatpickrChangeKeys.includes(key))) {\n\t\t\tthis.resetFlatpickrInstance(changes.value);\n\t\t}\n\t}\n\n\tngAfterViewInit() {\n\t\tif (!this.skeleton) {\n\t\t\tthis.input.input.nativeElement.value = this._value[0] ?? \"\";\n\t\t\tif (this.range) {\n\t\t\t\tthis.rangeInput.input.nativeElement.value = this._value[1] ?? \"\";\n\t\t\t}\n\t\t}\n\t\tsetTimeout(() => {\n\t\t\tthis.addInputListeners();\n\t\t}, 0);\n\t}\n\n\t// because the actual view may be delayed in loading (think projection into a tab pane)\n\t// and because we rely on a library that operates outside the Angular view of the world\n\t// we need to keep trying to load the library, until the relevant DOM is actually live\n\tngAfterViewChecked() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\t// if (and only if) the initialization succeeded, we can set the date values\n\t\t\tif (this.isFlatpickrLoaded()) {\n\t\t\t\tif (this.value.length > 0) {\n\t\t\t\t\tthis.setDateValues(this.value);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusin\")\n\tonFocus() {\n\t\t// Updates the month manually when calendar mode is range because month\n\t\t// will not update properly without manually updating them on focus.\n\t\tif (this.range) {\n\t\t\tif (this.rangeInput.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[1].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t} else if (this.input.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusout\")\n\tonFocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Writes a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`\n\t * @param value value received from the model\n\t */\n\twriteValue(value: (Date | string)[]) {\n\t\tthis.value = value;\n\t\tsetTimeout(() => {\n\t\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.config) {\n\t\t\t\tthis.setDateValues(this.value);\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the DatePicker.\n\t *\n\t * ex: `this.formGroup.get(\"myDatePicker\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the DatePicker\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tonTouched: () => any = () => { };\n\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Cleans up our flatpickr instance\n\t */\n\tngOnDestroy() {\n\t\tif (!this.isFlatpickrLoaded()) { return; }\n\t\tthis.flatpickrInstance.destroy();\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the primary/single input\n\t */\n\tonValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tif (this.range) {\n\t\t\t\tthis.setDateValues([date, this.flatpickrInstance.selectedDates[1]]);\n\t\t\t} else {\n\t\t\t\tthis.setDateValues([date]);\n\t\t\t}\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the range input\n\t */\n\tonRangeValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.isOpen) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tthis.setDateValues([this.flatpickrInstance.selectedDates[0], date]);\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles opening the calendar \"properly\" when the calendar icon is clicked.\n\t */\n\topenCalendar(datepickerInput: DatePickerInput) {\n\t\tif (this.readonly) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.range) {\n\t\t\tdatepickerInput.input.nativeElement.click();\n\n\t\t\t// If the first input's calendar icon is clicked when calendar is in range mode, then\n\t\t\t// the month and year needs to be manually changed to the current selected month and\n\t\t\t// year otherwise the calendar view will not be updated upon opening.\n\t\t\tif (datepickerInput === this.input && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t\tthis.flatpickrInstance.currentYear = this.flatpickrInstance.selectedDates[0].getFullYear();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t} else {\n\t\t\t// Single-mode flatpickr handles mousedown but not click, so nativeElement.click() won't\n\t\t\t// work when the calendar icon is clicked. In this case we simply use flatpickr.open().\n\t\t\tthis.flatpickrInstance.open();\n\t\t}\n\t}\n\n\tprotected updateCalendarListeners() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.removeEventListener(\"click\", this.preventCalendarClose);\n\t\t\tcalendar.addEventListener(\"click\", this.preventCalendarClose);\n\t\t});\n\t}\n\n\t/**\n\t * Handles the initialization of event listeners for the datepicker input and range input fields.\n\t */\n\tprotected addInputListeners() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Allows focus transition from the datepicker input or range input field to\n\t\t// flatpickr calendar using a keyboard.\n\t\tconst addFocusCalendarListener = (element: HTMLInputElement) => {\n\t\t\telement.addEventListener(\"keydown\", (event: KeyboardEvent) => {\n\t\t\t\t// Listeners are added just once, so a check is needed here.\n\t\t\t\tif (this.readonly) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (event.key === \"Escape\") {\n\t\t\t\t\tthis.flatpickrInstance.close();\n\t\t\t\t}\n\t\t\t\tif (event.key === \"ArrowDown\") {\n\t\t\t\t\tif (!this.flatpickrInstance.isOpen) {\n\t\t\t\t\t\tthis.flatpickrInstance.open();\n\t\t\t\t\t}\n\n\t\t\t\t\tconst calendarContainer = this.flatpickrInstance.calendarContainer;\n\t\t\t\t\tconst dayElement = calendarContainer && calendarContainer.querySelector(\".flatpickr-day[tabindex]\");\n\n\t\t\t\t\tif (dayElement) {\n\t\t\t\t\t\tdayElement.focus();\n\n\t\t\t\t\t\t// If the user manually inputs a value into the date field and presses arrow down,\n\t\t\t\t\t\t// datepicker input onchange will be triggered when focus is removed from it and\n\t\t\t\t\t\t// `flatpickrInstance.setDate` and `flatpickrInstance.changeMonth` will be invoked\n\t\t\t\t\t\t// which will automatically change focus to the beginning of the document.\n\t\t\t\t\t\tif (document.activeElement !== dayElement && this.flatpickrInstance.selectedDateElem) {\n\t\t\t\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\tif (this.input && this.input.input) {\n\t\t\taddFocusCalendarListener(this.input.input.nativeElement);\n\t\t}\n\n\t\tif (this.rangeInput && this.rangeInput.input) {\n\t\t\taddFocusCalendarListener(this.rangeInput.input.nativeElement);\n\t\t}\n\t}\n\n\t/**\n\t * Resets the flatpickr instance while keeping the date values (or updating them if newDates is provided)\n\t *\n\t * Used to pick up input changes or locale changes.\n\t *\n\t * @param newDates An optional SimpleChange of date values\n\t */\n\tprotected resetFlatpickrInstance(newDates?: SimpleChange) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tlet dates = this.flatpickrInstance.selectedDates;\n\t\t\tif (newDates && this.didDateValueChange(newDates.currentValue, newDates.previousValue)) {\n\t\t\t\tdates = newDates.currentValue;\n\t\t\t}\n\t\t\t// only reset the flatpickr instance on Input changes\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\tthis.setDateValues(dates);\n\t\t}\n\t}\n\n\t/**\n\t * Carbon uses a number of specific classnames for parts of the flatpickr - this idempotent method applies them if needed.\n\t */\n\tprotected updateClassNames() {\n\t\tif (!this.elementRef) { return; }\n\t\t// get all the possible flatpickrs in the document - we need to add classes to (potentially) all of them\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tconst monthContainer = document.querySelectorAll(\".flatpickr-month\");\n\t\tconst weekdaysContainer = document.querySelectorAll(\".flatpickr-weekdays\");\n\t\tconst weekdayContainer = document.querySelectorAll(\".flatpickr-weekday\");\n\t\tconst daysContainer = document.querySelectorAll(\".flatpickr-days\");\n\t\tconst dayContainer = document.querySelectorAll(\".flatpickr-day\");\n\n\t\t// add classes to lists of elements\n\t\tconst addClassIfNotExists = (classname: string, elementList: NodeListOf<Element>) => {\n\t\t\tArray.from(elementList).forEach(element => {\n\t\t\t\tif (!element.classList.contains(classname)) {\n\t\t\t\t\telement.classList.add(classname);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\t// add classes (but only if they don't exist, small perf win)\n\t\taddClassIfNotExists(\"cds--date-picker__calendar\", calendarContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__month\", monthContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__weekdays\", weekdaysContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__days\", daysContainer);\n\n\t\t// add weekday classes and format the text\n\t\tArray.from(weekdayContainer).forEach(element => {\n\t\t\telement.innerHTML = element.innerHTML.replace(/\\s+/g, \"\");\n\t\t\telement.classList.add(\"cds--date-picker__weekday\");\n\t\t});\n\n\t\t// add day classes and special case the \"today\" element based on `this.value`\n\t\tArray.from(dayContainer).forEach(element => {\n\t\t\telement.classList.add(\"cds--date-picker__day\");\n\t\t\tif (!this.value) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (element.classList.contains(\"today\") && this.value.length > 0) {\n\t\t\t\telement.classList.add(\"no-border\");\n\t\t\t} else if (element.classList.contains(\"today\") && this.value.length === 0) {\n\t\t\t\telement.classList.remove(\"no-border\");\n\t\t\t}\n\t\t});\n\t}\n\n\tprotected updateAttributes() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.setAttribute(\"role\", \"region\");\n\t\t\tcalendar.setAttribute(\"aria-label\", this.ariaLabel);\n\t\t});\n\t}\n\n\t/**\n\t * Applies the given date value array to both the flatpickr instance and the `input`(s)\n\t * @param dates the date values to apply\n\t */\n\tprotected setDateValues(dates: (Date | string)[]) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst singleInput = this.elementRef.nativeElement.querySelector(`#${this.id}-input`);\n\t\t\tconst rangeInput = this.elementRef.nativeElement.querySelector(`#${this.id}-rangeInput`);\n\n\t\t\t// `flatpickrInstance.setDate` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.setDate` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\t// set the date on the instance\n\t\t\tthis.flatpickrInstance.setDate(dates);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\tlet singleDate = \"\";\n\t\t\t// if date is a string, parse and format\n\t\t\tif (typeof this.flatpickrInstance.selectedDates[0] === \"string\") {\n\t\t\t\tsingleDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(singleDate, this.dateFormat);\n\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t} else if (!!this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t}\n\n\t\t\tif (rangeInput) {\n\t\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\t\tlet rangeDate = \"\";\n\t\t\t\t// if date is a string, parse and format\n\t\t\t\tif (typeof this.flatpickrInstance.selectedDates[1] === \"string\") {\n\t\t\t\t\trangeDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[1].toString(), this.dateFormat);\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(rangeDate, this.dateFormat);\n\t\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t\t} else if (!!this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[1], this.dateFormat);\n\t\t\t\t}\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t// apply the values\n\t\t\t\t\trangeInput.value = rangeDate;\n\t\t\t\t\tsingleInput.value = singleDate;\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected preventCalendarClose = event => event.stopPropagation();\n\n\tprotected doSelect(selectedValue: (Date | string)[]) {\n\t\t// In range mode, if a date is selected from the first calendar that is from the previous month,\n\t\t// the month will not be updated on the calendar until the calendar is re-opened.\n\t\t// This will make sure the calendar is updated with the correct month.\n\t\tif (this.range && this.flatpickrInstance.selectedDates[0]) {\n\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t// `flatpickrInstance.changeMonth` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.changeMonth` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t}\n\t\tthis.valueChange.emit(selectedValue);\n\t\tthis.propagateChange(selectedValue);\n\t}\n\n\tprotected didDateValueChange(currentValue, previousValue) {\n\t\treturn currentValue[0] !== previousValue[0] || currentValue[1] !== previousValue[1];\n\t}\n\n\t/**\n\t * More advanced checking of the loaded state of flatpickr\n\t */\n\tprotected isFlatpickrLoaded() {\n\t\t// cast the instance to a boolean, and some method that has to exist for the library to be loaded in this case `setDate`\n\t\treturn !!this.flatpickrInstance && !!this.flatpickrInstance.setDate;\n\t}\n\n\t/**\n\t * Right arrow HTML passed to flatpickr\n\t */\n\tprotected rightArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n\n\t/**\n\t * Left arrow HTML passed to flatpickr\n\t */\n\tprotected leftArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tViewEncapsulation,\n\tElementRef,\n\tOnDestroy,\n\tHostListener,\n\tTemplateRef,\n\tOnChanges,\n\tSimpleChanges,\n\tAfterViewChecked,\n\tAfterViewInit,\n\tViewChild,\n\tOnInit,\n\tSimpleChange\n} from \"@angular/core\";\nimport rangePlugin from \"flatpickr/dist/plugins/rangePlugin\";\nimport flatpickr from \"flatpickr\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\nimport { carbonFlatpickrMonthSelectPlugin } from \"./carbon-flatpickr-month-select\";\nimport * as languages from \"flatpickr/dist/l10n/index\";\nimport { Options } from \"flatpickr/dist/types/options\";\nimport { DatePickerInput } from \"carbon-components-angular/datepicker-input\";\nimport { I18n } from \"carbon-components-angular/i18n\";\n\n/**\n * Due to type error, we have to use square brackets property accessor\n * There is a webpack issue when attempting to access exported languages from flatpickr l10n Angular 14+ apps\n * languages.default[locale] fails in app consuming CCA library but passes in test\n * languages.default.default[locale] fails in test but works in app consuming CCA library.\n *\n * To please both scenarios, we are adding a condition to prevent tests from failing\n */\nif (languages.default?.default[\"en\"]?.weekdays) {\n\t(languages.default.default[\"en\"].weekdays.shorthand as string[]) = languages.default.default[\"en\"].weekdays.longhand.map(day => {\n\t\tif (day === \"Thursday\") {\n\t\t\treturn \"Th\";\n\t\t}\n\t\treturn day.charAt(0);\n\t});\n}\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { DatePickerModule } from 'carbon-components-angular';\n * ```\n *\n * [See demo](../../?path=/story/components-date-picker--single)\n */\n@Component({\n\tselector: \"cds-date-picker, ibm-date-picker\",\n\ttemplate: `\n\t<div class=\"cds--form-item\">\n\t\t<div\n\t\t\tclass=\"cds--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--date-picker--range' : range,\n\t\t\t\t'cds--date-picker--single' : !range,\n\t\t\t\t'cds--date-picker--light' : theme === 'light',\n\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#input\n\t\t\t\t\t[label]=\"label\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t[id]=\"id + '-input'\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t[hasIcon]=\"(range ? false : true)\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t[invalid]=\"invalid\"\n\t\t\t\t\t[invalidText]=\"invalidText\"\n\t\t\t\t\t[warn]=\"warn\"\n\t\t\t\t\t[warnText]=\"warnText\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"helperText\"\n\t\t\t\t\t(valueChange)=\"onValueChange($event)\"\n\t\t\t\t\t(click)=\"openCalendar(input)\">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\n\t\t\t<div *ngIf=\"range\" class=\"cds--date-picker-container\">\n\t\t\t\t<cds-date-picker-input\n\t\t\t\t\t#rangeInput\n\t\t\t\t\t[label]=\"rangeLabel\"\n\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t[pattern]=\"inputPattern\"\n\t\t\t\t\t[id]=\"id + '-rangeInput'\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[type]=\"(range ? 'range' : 'single')\"\n\t\t\t\t\t[hasIcon]=\"(range ? true : null)\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t[invalid]=\"rangeInvalid\"\n\t\t\t\t\t[invalidText]=\"rangeInvalidText\"\n\t\t\t\t\t[warn]=\"rangeWarn\"\n\t\t\t\t\t[warnText]=\"rangeWarnText\"\n\t\t\t\t\t[skeleton]=\"skeleton\"\n\t\t\t\t\t[helperText]=\"rangeHelperText\"\n\t\t\t\t\t(valueChange)=\"onRangeValueChange($event)\"\n\t\t\t\t\t(click)=\"openCalendar(rangeInput)\">\n\t\t\t\t</cds-date-picker-input>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: DatePicker,\n\t\t\tmulti: true\n\t\t}\n\t],\n\tencapsulation: ViewEncapsulation.None\n})\nexport class DatePicker implements\n\tOnInit,\n\tOnDestroy,\n\tOnChanges,\n\tAfterViewChecked,\n\tAfterViewInit {\n\tprivate static datePickerCount = 0;\n\n\t/**\n\t * Select calendar range mode\n\t */\n\t@Input() range = false;\n\n\t/**\n\t * Format of date\n\t *\n\t * For reference: https://flatpickr.js.org/formatting/\n\t */\n\t@Input() dateFormat = \"m/d/Y\";\n\n\t/**\n\t * Language of the flatpickr calendar.\n\t *\n\t * For reference of the possible locales:\n\t * https://github.com/flatpickr/flatpickr/blob/master/src/l10n/index.ts\n\t */\n\t@Input() language = \"en\";\n\n\t@Input() label: string | TemplateRef<any>;\n\t@Input() helperText: string | TemplateRef<any>;\n\t@Input() rangeHelperText: string | TemplateRef<any>;\n\t@Input() rangeLabel: string;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t/**\n\t * Aria label added to datepicker's calendar container.\n\t */\n\t@Input() ariaLabel = \"calendar container\";\n\n\t/**\n\t * The pattern for the underlying input element\n\t */\n\t@Input() inputPattern = \"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\";\n\n\t@Input() id = `datepicker-${DatePicker.datePickerCount++}`;\n\n\t@Input() set value(v: (Date | string)[]) {\n\t\tif (!v) {\n\t\t\tv = [];\n\t\t}\n\t\tthis._value = v;\n\t}\n\n\tget value() {\n\t\treturn this._value;\n\t}\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\n\t@Input() readonly = false;\n\t/**\n\t * Set to `true` to display the invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if datepicker is in an invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t  * Set to `true` to show a warning (contents set by warningText)\n\t  */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\t/**\n\t * Set to `true` to display the invalid state for the second datepicker input.\n\t */\n\t@Input() rangeInvalid = false;\n\t/**\n\t * Value displayed if the second datepicker input is in an invalid state.\n\t */\n\t@Input() rangeInvalidText: string | TemplateRef<any>;\n\t/**\n\t  * Set to `true` to show a warning in the second datepicker input (contents set by rangeWarningText)\n\t  */\n\t@Input() rangeWarn = false;\n\t/**\n\t * Sets the warning text for the second datepicker input\n\t */\n\t@Input() rangeWarnText: string | TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\t@Input() plugins = [];\n\n\t@Input()\n\tset flatpickrOptions(options: Partial<Options>) {\n\t\tthis._flatpickrOptions = Object.assign({}, this._flatpickrOptions, options);\n\t}\n\tget flatpickrOptions(): Partial<Options> {\n\t\tconst plugins = [...this.plugins, carbonFlatpickrMonthSelectPlugin];\n\t\tif (this.range) {\n\t\t\tplugins.push(rangePlugin({ input: `#${this.id}-rangeInput`, position: \"left\" }));\n\t\t}\n\t\treturn Object.assign({}, this._flatpickrOptions, this.flatpickrBaseOptions, {\n\t\t\tmode: this.range ? \"range\" : \"single\",\n\t\t\tplugins,\n\t\t\tdateFormat: this.dateFormat,\n\t\t\tlocale: languages.default?.default[this.language] || languages.default[this.language],\n\t\t\t// Little trick force \"readonly mode\" on datepicker input.\n\t\t\t// Docs: Whether clicking on the input should open the picker. You could disable this if you wish to open the calendar manually with.open().\n\t\t\tclickOpens: !this.readonly\n\t\t});\n\t}\n\n\t@ViewChild(\"input\", { static: true }) input: DatePickerInput;\n\t@ViewChild(\"rangeInput\") rangeInput: DatePickerInput;\n\n\t@Output() valueChange: EventEmitter<any> = new EventEmitter();\n\n\t/**\n\t * We are overriding onClose event even if users pass it via flatpickr options\n\t * Emits an event when date picker closes\n\t */\n\t@Output() onClose: EventEmitter<any> = new EventEmitter();\n\n\tprotected _value = [];\n\n\tprotected _flatpickrOptions: Partial<Options> = {\n\t\tallowInput: true\n\t};\n\n\tprotected flatpickrBaseOptions = {\n\t\tmode: \"single\",\n\t\tdateFormat: \"m/d/Y\",\n\t\tplugins: this.plugins,\n\t\tonOpen: () => {\n\t\t\tthis.updateClassNames();\n\t\t\tthis.updateAttributes();\n\t\t\tthis.updateCalendarListeners();\n\t\t},\n\t\tonClose: (date) => {\n\t\t\t// This makes sure that the `flatpickrInstance selectedDates` are in sync with the values of\n\t\t\t// the inputs when the calendar closes.\n\t\t\tif (this.range && this.flatpickrInstance) {\n\t\t\t\tconst inputValue = this.input.input.nativeElement.value;\n\t\t\t\tconst rangeInputValue = this.rangeInput.input.nativeElement.value;\n\t\t\t\tif (inputValue || rangeInputValue) {\n\t\t\t\t\tconst parseDate = (date: string) => this.flatpickrInstance.parseDate(date, this.dateFormat);\n\t\t\t\t\tthis.setDateValues([parseDate(inputValue), parseDate(rangeInputValue || inputValue)]);\n\t\t\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t\t\t}\n\t\t\t}\n\t\t\tthis.onClose.emit(date);\n\t\t},\n\t\tonDayCreate: (_dObj, _dStr, _fp, dayElem) => {\n\t\t\tdayElem.classList.add(\"cds--date-picker__day\");\n\t\t},\n\t\tnextArrow: this.rightArrowHTML(),\n\t\tprevArrow: this.leftArrowHTML(),\n\t\tvalue: this.value\n\t};\n\n\tprotected flatpickrInstance = null;\n\n\tconstructor(\n\t\tprotected elementRef: ElementRef,\n\t\tprotected i18n: I18n\n\t) { }\n\n\tngOnInit() {\n\t\t// if i18n is set to anything other than en we'll want to change the language\n\t\t// otherwise we'll just use the local setting\n\t\tif (this.i18n.getLocale() !== \"en\") {\n\t\t\tthis.i18n.getLocaleObservable().subscribe(locale => {\n\t\t\t\tthis.language = locale;\n\t\t\t\tthis.resetFlatpickrInstance();\n\t\t\t});\n\t\t}\n\t}\n\n\tngOnChanges(changes: SimpleChanges) {\n\t\t// Reset the flatpickr instance on input changes that affect flatpickr.\n\t\tconst flatpickrChangeKeys = [\n\t\t\t\"range\",\n\t\t\t\"dateFormat\",\n\t\t\t\"language\",\n\t\t\t\"id\",\n\t\t\t\"value\",\n\t\t\t\"plugins\",\n\t\t\t\"flatpickrOptions\",\n\t\t\t\"readonly\"\n\t\t];\n\t\tconst changeKeys = Object.keys(changes);\n\t\tif (changeKeys.some(key => flatpickrChangeKeys.includes(key))) {\n\t\t\tthis.resetFlatpickrInstance(changes.value);\n\t\t}\n\t}\n\n\tngAfterViewInit() {\n\t\tif (!this.skeleton) {\n\t\t\tthis.input.input.nativeElement.value = this._value[0] ?? \"\";\n\t\t\tif (this.range) {\n\t\t\t\tthis.rangeInput.input.nativeElement.value = this._value[1] ?? \"\";\n\t\t\t}\n\t\t}\n\t\tsetTimeout(() => {\n\t\t\tthis.addInputListeners();\n\t\t}, 0);\n\t}\n\n\t// because the actual view may be delayed in loading (think projection into a tab pane)\n\t// and because we rely on a library that operates outside the Angular view of the world\n\t// we need to keep trying to load the library, until the relevant DOM is actually live\n\tngAfterViewChecked() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\t// if (and only if) the initialization succeeded, we can set the date values\n\t\t\tif (this.isFlatpickrLoaded()) {\n\t\t\t\tif (this.value.length > 0) {\n\t\t\t\t\tthis.setDateValues(this.value);\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusin\")\n\tonFocus() {\n\t\t// Updates the month manually when calendar mode is range because month\n\t\t// will not update properly without manually updating them on focus.\n\t\tif (this.range) {\n\t\t\tif (this.rangeInput.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[1].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t} else if (this.input.input.nativeElement === document.activeElement && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t}\n\t}\n\n\t@HostListener(\"focusout\")\n\tonFocusOut() {\n\t\tthis.onTouched();\n\t}\n\n\t/**\n\t * Writes a value from the model to the component. Expects the value to be `null` or `(Date | string)[]`\n\t * @param value value received from the model\n\t */\n\twriteValue(value: (Date | string)[]) {\n\t\tthis.value = value;\n\t\tsetTimeout(() => {\n\t\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.config) {\n\t\t\t\tthis.setDateValues(this.value);\n\t\t\t}\n\t\t});\n\t}\n\n\t/**\n\t * `ControlValueAccessor` method to programmatically disable the DatePicker.\n\t *\n\t * ex: `this.formGroup.get(\"myDatePicker\").disable();`\n\t *\n\t * @param isDisabled `true` to disable the DatePicker\n\t */\n\tsetDisabledState(isDisabled: boolean) {\n\t\tthis.disabled = isDisabled;\n\t}\n\n\tregisterOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\tregisterOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tonTouched: () => any = () => { };\n\n\tpropagateChange = (_: any) => { };\n\n\t/**\n\t * Cleans up our flatpickr instance\n\t */\n\tngOnDestroy() {\n\t\tif (!this.isFlatpickrLoaded()) { return; }\n\t\tthis.flatpickrInstance.destroy();\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the primary/single input\n\t */\n\tonValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tif (this.range) {\n\t\t\t\tthis.setDateValues([date, this.flatpickrInstance.selectedDates[1]]);\n\t\t\t} else {\n\t\t\t\tthis.setDateValues([date]);\n\t\t\t}\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles the `valueChange` event from the range input\n\t */\n\tonRangeValueChange(event: string) {\n\t\tif (this.isFlatpickrLoaded() && this.flatpickrInstance.isOpen) {\n\t\t\tconst date = this.flatpickrInstance.parseDate(event, this.dateFormat);\n\t\t\tthis.setDateValues([this.flatpickrInstance.selectedDates[0], date]);\n\t\t\tthis.doSelect(this.flatpickrInstance.selectedDates);\n\t\t}\n\t}\n\n\t/**\n\t * Handles opening the calendar \"properly\" when the calendar icon is clicked.\n\t */\n\topenCalendar(datepickerInput: DatePickerInput) {\n\t\tif (this.readonly || this.skeleton) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (this.range) {\n\t\t\tdatepickerInput.input.nativeElement.click();\n\n\t\t\t// If the first input's calendar icon is clicked when calendar is in range mode, then\n\t\t\t// the month and year needs to be manually changed to the current selected month and\n\t\t\t// year otherwise the calendar view will not be updated upon opening.\n\t\t\tif (datepickerInput === this.input && this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t\tthis.flatpickrInstance.currentYear = this.flatpickrInstance.selectedDates[0].getFullYear();\n\t\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\t\t\t}\n\t\t} else {\n\t\t\t// Single-mode flatpickr handles mousedown but not click, so nativeElement.click() won't\n\t\t\t// work when the calendar icon is clicked. In this case we simply use flatpickr.open().\n\t\t\tthis.flatpickrInstance.open();\n\t\t}\n\t}\n\n\tprotected updateCalendarListeners() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.removeEventListener(\"click\", this.preventCalendarClose);\n\t\t\tcalendar.addEventListener(\"click\", this.preventCalendarClose);\n\t\t});\n\t}\n\n\t/**\n\t * Handles the initialization of event listeners for the datepicker input and range input fields.\n\t */\n\tprotected addInputListeners() {\n\t\tif (!this.isFlatpickrLoaded()) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Allows focus transition from the datepicker input or range input field to\n\t\t// flatpickr calendar using a keyboard.\n\t\tconst addFocusCalendarListener = (element: HTMLInputElement) => {\n\t\t\telement.addEventListener(\"keydown\", (event: KeyboardEvent) => {\n\t\t\t\t// Listeners are added just once, so a check is needed here.\n\t\t\t\tif (this.readonly) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (event.key === \"Escape\") {\n\t\t\t\t\tthis.flatpickrInstance.close();\n\t\t\t\t}\n\t\t\t\tif (event.key === \"ArrowDown\") {\n\t\t\t\t\tif (!this.flatpickrInstance.isOpen) {\n\t\t\t\t\t\tthis.flatpickrInstance.open();\n\t\t\t\t\t}\n\n\t\t\t\t\tconst calendarContainer = this.flatpickrInstance.calendarContainer;\n\t\t\t\t\tconst dayElement = calendarContainer && calendarContainer.querySelector(\".flatpickr-day[tabindex]\");\n\n\t\t\t\t\tif (dayElement) {\n\t\t\t\t\t\tdayElement.focus();\n\n\t\t\t\t\t\t// If the user manually inputs a value into the date field and presses arrow down,\n\t\t\t\t\t\t// datepicker input onchange will be triggered when focus is removed from it and\n\t\t\t\t\t\t// `flatpickrInstance.setDate` and `flatpickrInstance.changeMonth` will be invoked\n\t\t\t\t\t\t// which will automatically change focus to the beginning of the document.\n\t\t\t\t\t\tif (document.activeElement !== dayElement && this.flatpickrInstance.selectedDateElem) {\n\t\t\t\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\tif (this.input && this.input.input) {\n\t\t\taddFocusCalendarListener(this.input.input.nativeElement);\n\t\t}\n\n\t\tif (this.rangeInput && this.rangeInput.input) {\n\t\t\taddFocusCalendarListener(this.rangeInput.input.nativeElement);\n\t\t}\n\t}\n\n\t/**\n\t * Resets the flatpickr instance while keeping the date values (or updating them if newDates is provided)\n\t *\n\t * Used to pick up input changes or locale changes.\n\t *\n\t * @param newDates An optional SimpleChange of date values\n\t */\n\tprotected resetFlatpickrInstance(newDates?: SimpleChange) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tlet dates = this.flatpickrInstance.selectedDates;\n\t\t\tif (newDates && this.didDateValueChange(newDates.currentValue, newDates.previousValue)) {\n\t\t\t\tdates = newDates.currentValue;\n\t\t\t}\n\t\t\t// only reset the flatpickr instance on Input changes\n\t\t\t// @ts-ignore ts is unhappy with the below call to `flatpickr`\n\t\t\tthis.flatpickrInstance = flatpickr(`#${this.id}-input`, this.flatpickrOptions);\n\t\t\tthis.setDateValues(dates);\n\t\t}\n\t}\n\n\t/**\n\t * Carbon uses a number of specific classnames for parts of the flatpickr - this idempotent method applies them if needed.\n\t */\n\tprotected updateClassNames() {\n\t\tif (!this.elementRef) { return; }\n\t\t// get all the possible flatpickrs in the document - we need to add classes to (potentially) all of them\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tconst monthContainer = document.querySelectorAll(\".flatpickr-month\");\n\t\tconst weekdaysContainer = document.querySelectorAll(\".flatpickr-weekdays\");\n\t\tconst weekdayContainer = document.querySelectorAll(\".flatpickr-weekday\");\n\t\tconst daysContainer = document.querySelectorAll(\".flatpickr-days\");\n\t\tconst dayContainer = document.querySelectorAll(\".flatpickr-day\");\n\n\t\t// add classes to lists of elements\n\t\tconst addClassIfNotExists = (classname: string, elementList: NodeListOf<Element>) => {\n\t\t\tArray.from(elementList).forEach(element => {\n\t\t\t\tif (!element.classList.contains(classname)) {\n\t\t\t\t\telement.classList.add(classname);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\t// add classes (but only if they don't exist, small perf win)\n\t\taddClassIfNotExists(\"cds--date-picker__calendar\", calendarContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__month\", monthContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__weekdays\", weekdaysContainer);\n\t\taddClassIfNotExists(\"cds--date-picker__days\", daysContainer);\n\n\t\t// add weekday classes and format the text\n\t\tArray.from(weekdayContainer).forEach(element => {\n\t\t\telement.innerHTML = element.innerHTML.replace(/\\s+/g, \"\");\n\t\t\telement.classList.add(\"cds--date-picker__weekday\");\n\t\t});\n\n\t\t// add day classes and special case the \"today\" element based on `this.value`\n\t\tArray.from(dayContainer).forEach(element => {\n\t\t\telement.classList.add(\"cds--date-picker__day\");\n\t\t\tif (!this.value) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif (element.classList.contains(\"today\") && this.value.length > 0) {\n\t\t\t\telement.classList.add(\"no-border\");\n\t\t\t} else if (element.classList.contains(\"today\") && this.value.length === 0) {\n\t\t\t\telement.classList.remove(\"no-border\");\n\t\t\t}\n\t\t});\n\t}\n\n\tprotected updateAttributes() {\n\t\tconst calendarContainer = document.querySelectorAll(\".flatpickr-calendar\");\n\t\tArray.from(calendarContainer).forEach(calendar => {\n\t\t\tcalendar.setAttribute(\"role\", \"region\");\n\t\t\tcalendar.setAttribute(\"aria-label\", this.ariaLabel);\n\t\t});\n\t}\n\n\t/**\n\t * Applies the given date value array to both the flatpickr instance and the `input`(s)\n\t * @param dates the date values to apply\n\t */\n\tprotected setDateValues(dates: (Date | string)[]) {\n\t\tif (this.isFlatpickrLoaded()) {\n\t\t\tconst singleInput = this.elementRef.nativeElement.querySelector(`#${this.id}-input`);\n\t\t\tconst rangeInput = this.elementRef.nativeElement.querySelector(`#${this.id}-rangeInput`);\n\n\t\t\t// `flatpickrInstance.setDate` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.setDate` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\t// set the date on the instance\n\t\t\tthis.flatpickrInstance.setDate(dates);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\tlet singleDate = \"\";\n\t\t\t// if date is a string, parse and format\n\t\t\tif (typeof this.flatpickrInstance.selectedDates[0] === \"string\") {\n\t\t\t\tsingleDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(singleDate, this.dateFormat);\n\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t} else if (!!this.flatpickrInstance.selectedDates[0]) {\n\t\t\t\tsingleDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[0], this.dateFormat);\n\t\t\t}\n\n\t\t\tif (rangeInput) {\n\t\t\t\t// we can either set a date value or an empty string, so we start with an empty string\n\t\t\t\tlet rangeDate = \"\";\n\t\t\t\t// if date is a string, parse and format\n\t\t\t\tif (typeof this.flatpickrInstance.selectedDates[1] === \"string\") {\n\t\t\t\t\trangeDate = this.flatpickrInstance.parseDate(this.flatpickrInstance.selectedDates[1].toString(), this.dateFormat);\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(rangeDate, this.dateFormat);\n\t\t\t\t// if date is not a string we can assume it's a Date and we should format\n\t\t\t\t} else if (!!this.flatpickrInstance.selectedDates[1]) {\n\t\t\t\t\trangeDate = this.flatpickrInstance.formatDate(this.flatpickrInstance.selectedDates[1], this.dateFormat);\n\t\t\t\t}\n\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t// apply the values\n\t\t\t\t\trangeInput.value = rangeDate;\n\t\t\t\t\tsingleInput.value = singleDate;\n\t\t\t\t});\n\t\t\t}\n\t\t}\n\t}\n\n\tprotected preventCalendarClose = event => event.stopPropagation();\n\n\tprotected doSelect(selectedValue: (Date | string)[]) {\n\t\t// In range mode, if a date is selected from the first calendar that is from the previous month,\n\t\t// the month will not be updated on the calendar until the calendar is re-opened.\n\t\t// This will make sure the calendar is updated with the correct month.\n\t\tif (this.range && this.flatpickrInstance.selectedDates[0]) {\n\t\t\tconst currentMonth = this.flatpickrInstance.selectedDates[0].getMonth();\n\n\t\t\t// `flatpickrInstance.changeMonth` removes the focus on the selected date element and will\n\t\t\t// automatically change focus to the beginning of the document. If a selected date is\n\t\t\t// focused before `flatpickrInstance.changeMonth` is invoked then it should remain focused.\n\t\t\tlet shouldRefocusDateElement = this.flatpickrInstance.selectedDateElem === document.activeElement;\n\n\t\t\tthis.flatpickrInstance.changeMonth(currentMonth, false);\n\n\t\t\tif (shouldRefocusDateElement) {\n\t\t\t\tthis.flatpickrInstance.selectedDateElem.focus();\n\t\t\t}\n\n\t\t}\n\t\tthis.valueChange.emit(selectedValue);\n\t\tthis.propagateChange(selectedValue);\n\t}\n\n\tprotected didDateValueChange(currentValue, previousValue) {\n\t\treturn currentValue[0] !== previousValue[0] || currentValue[1] !== previousValue[1];\n\t}\n\n\t/**\n\t * More advanced checking of the loaded state of flatpickr\n\t */\n\tprotected isFlatpickrLoaded() {\n\t\t// cast the instance to a boolean, and some method that has to exist for the library to be loaded in this case `setDate`\n\t\treturn !!this.flatpickrInstance && !!this.flatpickrInstance.setDate;\n\t}\n\n\t/**\n\t * Right arrow HTML passed to flatpickr\n\t */\n\tprotected rightArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n\n\t/**\n\t * Left arrow HTML passed to flatpickr\n\t */\n\tprotected leftArrowHTML() {\n\t\treturn `\n\t\t\t<svg width=\"16px\" height=\"16px\" viewBox=\"0 0 16 16\">\n\t\t\t\t<polygon points=\"5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 \"/>\n\t\t\t\t<rect width=\"16\" height=\"16\" style=\"fill:none\" />\n\t\t\t</svg>`;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -26856,7 +26856,7 @@
         },
         {
             "name": "DatePickerInput",
-            "id": "component-DatePickerInput-3a48d21e0039648f1b99f5ad5a3cd64f15f09e2656dd2bca5c3b5318467036c5fa88a6d885535f00f6478bbd2891e3c97531850c7abeb79b75339a532f6b0cc3",
+            "id": "component-DatePickerInput-bec03ed7095aa2b07d47458bb551fab7e6736a64529f457cdc52a6613ee9c0deb34f9a320037c5840bc9fecd9ecd08adae1bfaa465926fd6af13a899a1f1363e",
             "file": "src/datepicker-input/datepicker-input.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -26870,7 +26870,7 @@
             "selector": "cds-date-picker-input, ibm-date-picker-input",
             "styleUrls": [],
             "styles": [],
-            "template": "\t<div class=\"cds--form-item\">\n\t\t<div class=\"cds--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--date-picker--simple' : type === 'simple',\n\t\t\t\t'cds--date-picker--single' : type === 'single',\n\t\t\t\t'cds--date-picker--range' : type === 'range',\n\t\t\t\t'cds--date-picker--light' : theme === 'light',\n\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t<label\n\t\t\t\t\t*ngIf=\"label\"\n\t\t\t\t\t[for]=\"id\"\n\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\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 class=\"cds--date-picker-input__wrapper\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--date-picker-input__wrapper--invalid': invalid,\n\t\t\t\t\t\t'cds--date-picker-input__wrapper--warn': warn\n\t\t\t\t\t}\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t#input\n\t\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"cds--date-picker__input\"\n\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t\t'cds--date-picker__input--sm': size === 'sm',\n\t\t\t\t\t\t\t'cds--date-picker__input--md': size === 'md',\n\t\t\t\t\t\t\t'cds--date-picker__input--lg': size === 'lg'\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\t[attr.data-invalid]=\"invalid ? true : undefined\"\n\t\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t\t\t(change)=\"onChange($event)\"/>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"type !== 'simple' && !warn && !invalid\"\n\t\t\t\t\t\t\t\tcdsIcon=\"calendar\"\n\t\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon cds--date-picker__icon--invalid\"\n\t\t\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon cds--date-picker__icon--warn\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\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 *ngIf=\"invalid\" class=\"cds--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\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n</div>\n\t",
+            "template": "\t<div class=\"cds--form-item\">\n\t\t<div class=\"cds--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--date-picker--simple' : type === 'simple',\n\t\t\t\t'cds--date-picker--single' : type === 'single',\n\t\t\t\t'cds--date-picker--range' : type === 'range',\n\t\t\t\t'cds--date-picker--light' : theme === 'light',\n\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t<!-- Skeleton structure -->\n\t\t\t\t<ng-container *ngIf=\"skeleton\">\n\t\t\t\t\t<span class=\"cds--label cds--skeleton\"></span>\n\t\t\t\t\t<div class=\"cds--date-picker__input cds--skeleton\"></div>\n\t\t\t\t</ng-container>\n\t\t\t\t<label\n\t\t\t\t\t*ngIf=\"label && !skeleton\"\n\t\t\t\t\t[for]=\"id\"\n\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\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 class=\"cds--date-picker-input__wrapper\"\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--date-picker-input__wrapper--invalid': invalid,\n\t\t\t\t\t\t'cds--date-picker-input__wrapper--warn': warn\n\t\t\t\t\t}\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t#input\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"cds--date-picker__input\"\n\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t\t'cds--date-picker__input--sm': size === 'sm',\n\t\t\t\t\t\t\t'cds--date-picker__input--md': size === 'md',\n\t\t\t\t\t\t\t'cds--date-picker__input--lg': size === 'lg'\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\t[attr.data-invalid]=\"invalid ? true : undefined\"\n\t\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t\t\t(change)=\"onChange($event)\"/>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"type !== 'simple' && !warn && !invalid\"\n\t\t\t\t\t\t\t\tcdsIcon=\"calendar\"\n\t\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon cds--date-picker__icon--invalid\"\n\t\t\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon cds--date-picker__icon--warn\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\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 *ngIf=\"invalid\" class=\"cds--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\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n</div>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -26880,7 +26880,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 131,
+                    "line": 136,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -26889,7 +26889,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 115,
+                    "line": 120,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -26899,7 +26899,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the optional helper text.\n",
                     "description": "<p>Sets the optional helper text.</p>\n",
-                    "line": 154,
+                    "line": 159,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -26908,7 +26908,7 @@
                     "defaultValue": "`datepicker-${DatePickerInput.datePickerCount++}`",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 113,
+                    "line": 118,
                     "type": "string",
                     "decorators": []
                 },
@@ -26919,7 +26919,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` for invalid state.\n",
                     "description": "<p>Set to <code>true</code> for invalid state.</p>\n",
-                    "line": 137,
+                    "line": 142,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -26929,7 +26929,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nValue displayed if dropdown is in invalid state.\n",
                     "description": "<p>Value displayed if dropdown is in invalid state.</p>\n",
-                    "line": 141,
+                    "line": 146,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -26937,7 +26937,7 @@
                     "name": "label",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 117,
+                    "line": 122,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 },
@@ -26946,7 +26946,7 @@
                     "defaultValue": "\"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 121,
+                    "line": 126,
                     "type": "string",
                     "decorators": []
                 },
@@ -26955,7 +26955,7 @@
                     "defaultValue": "\"mm/dd/yyyy\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 119,
+                    "line": 124,
                     "type": "string",
                     "decorators": []
                 },
@@ -26964,7 +26964,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 133,
+                    "line": 138,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -26973,7 +26973,7 @@
                     "defaultValue": "\"md\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 160,
+                    "line": 165,
                     "type": "\"sm\" | \"md\" | \"lg\"",
                     "decorators": []
                 },
@@ -26982,7 +26982,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 156,
+                    "line": 161,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -26993,15 +26993,15 @@
                     "deprecationMessage": "since v5 - Use `cdsLayer` directive instead\nSet to `\"light\"` to apply the light style",
                     "jsdoctags": [
                         {
-                            "pos": 3712,
-                            "end": 3816,
+                            "pos": 3927,
+                            "end": 4031,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
                             "kind": 338,
                             "tagName": {
-                                "pos": 3713,
-                                "end": 3723,
+                                "pos": 3928,
+                                "end": 3938,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -27011,7 +27011,7 @@
                             "comment": "<p>since v5 - Use <code>cdsLayer</code> directive instead\nSet to <code>&quot;light&quot;</code> to apply the light style</p>\n"
                         }
                     ],
-                    "line": 129,
+                    "line": 134,
                     "type": "\"light\" | \"dark\"",
                     "decorators": []
                 },
@@ -27022,7 +27022,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSelect a calendar type for the `model`.\nInternal purposes only.\n",
                     "description": "<p>Select a calendar type for the <code>model</code>.\nInternal purposes only.</p>\n",
-                    "line": 111,
+                    "line": 116,
                     "type": "\"simple\" | \"single\" | \"range\"",
                     "decorators": []
                 },
@@ -27031,7 +27031,7 @@
                     "defaultValue": "\"\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 158,
+                    "line": 163,
                     "type": "string",
                     "decorators": []
                 },
@@ -27042,7 +27042,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSet to `true` to show a warning (contents set by warnText)\n",
                     "description": "<p>Set to <code>true</code> to show a warning (contents set by warnText)</p>\n",
-                    "line": 145,
+                    "line": 150,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -27052,7 +27052,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nSets the warning text\n",
                     "description": "<p>Sets the warning text</p>\n",
-                    "line": 149,
+                    "line": 154,
                     "type": "string | TemplateRef<any>",
                     "decorators": []
                 }
@@ -27063,7 +27063,7 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 123,
+                    "line": 128,
                     "type": "EventEmitter<string>"
                 }
             ],
@@ -27075,7 +27075,7 @@
                     "type": "ElementRef",
                     "optional": false,
                     "description": "",
-                    "line": 162,
+                    "line": 167,
                     "decorators": [
                         {
                             "name": "ViewChild",
@@ -27094,7 +27094,7 @@
                     "type": "function",
                     "optional": false,
                     "description": "",
-                    "line": 185
+                    "line": 190
                 },
                 {
                     "name": "propagateChange",
@@ -27104,7 +27104,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 187
+                    "line": 192
                 }
             ],
             "methodsClass": [
@@ -27121,7 +27121,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 189,
+                    "line": 194,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -27152,7 +27152,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 166,
+                    "line": 171,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "jsdoctags": [
@@ -27180,7 +27180,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 177,
+                    "line": 182,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -27211,7 +27211,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 181,
+                    "line": 186,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -27242,7 +27242,7 @@
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 173,
+                    "line": 178,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -27270,7 +27270,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\n@Component({\n\tselector: \"cds-date-picker-input, ibm-date-picker-input\",\n\ttemplate: `\n\t<div class=\"cds--form-item\">\n\t\t<div class=\"cds--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--date-picker--simple' : type === 'simple',\n\t\t\t\t'cds--date-picker--single' : type === 'single',\n\t\t\t\t'cds--date-picker--range' : type === 'range',\n\t\t\t\t'cds--date-picker--light' : theme === 'light',\n\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t<label\n\t\t\t\t\t*ngIf=\"label\"\n\t\t\t\t\t[for]=\"id\"\n\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\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 class=\"cds--date-picker-input__wrapper\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--date-picker-input__wrapper--invalid': invalid,\n\t\t\t\t\t\t'cds--date-picker-input__wrapper--warn': warn\n\t\t\t\t\t}\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t#input\n\t\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"cds--date-picker__input\"\n\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t\t'cds--date-picker__input--sm': size === 'sm',\n\t\t\t\t\t\t\t'cds--date-picker__input--md': size === 'md',\n\t\t\t\t\t\t\t'cds--date-picker__input--lg': size === 'lg'\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\t[attr.data-invalid]=\"invalid ? true : undefined\"\n\t\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t\t\t(change)=\"onChange($event)\"/>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"type !== 'simple' && !warn && !invalid\"\n\t\t\t\t\t\t\t\tcdsIcon=\"calendar\"\n\t\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon cds--date-picker__icon--invalid\"\n\t\t\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon cds--date-picker__icon--warn\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\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 *ngIf=\"invalid\" class=\"cds--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\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: DatePickerInput,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class DatePickerInput {\n\tprivate static datePickerCount = 0;\n\t/**\n\t * Select a calendar type for the `model`.\n\t * Internal purposes only.\n\t */\n\t@Input() type: \"simple\" | \"single\" | \"range\" = \"simple\";\n\n\t@Input() id = `datepicker-${DatePickerInput.datePickerCount++}`;\n\n\t@Input() hasIcon = false;\n\n\t@Input() label: string | TemplateRef<any>;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t@Input() pattern = \"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\";\n\n\t@Output() valueChange: EventEmitter<string> = new EventEmitter();\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\n\t@Input() readonly = false;\n\t/**\n\t * Set to `true` for invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if dropdown is in invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t  * Set to `true` to show a warning (contents set by warnText)\n\t  */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\t@Input() value = \"\";\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t@ViewChild(\"input\") input: ElementRef;\n\n\tconstructor(protected elementRef: ElementRef) { }\n\n\tonChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.valueChange.emit(this.value);\n\t\tthis.propagateChange(this.value);\n\t\tthis.onTouched();\n\t}\n\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tonTouched: () => any = () => { };\n\n\tpropagateChange = (_: any) => { };\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tOutput,\n\tEventEmitter,\n\tElementRef,\n\tTemplateRef,\n\tViewChild\n} from \"@angular/core\";\nimport { NG_VALUE_ACCESSOR } from \"@angular/forms\";\n\n@Component({\n\tselector: \"cds-date-picker-input, ibm-date-picker-input\",\n\ttemplate: `\n\t<div class=\"cds--form-item\">\n\t\t<div class=\"cds--date-picker\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--date-picker--simple' : type === 'simple',\n\t\t\t\t'cds--date-picker--single' : type === 'single',\n\t\t\t\t'cds--date-picker--range' : type === 'range',\n\t\t\t\t'cds--date-picker--light' : theme === 'light',\n\t\t\t\t'cds--skeleton' : skeleton\n\t\t\t}\">\n\t\t\t<div class=\"cds--date-picker-container\">\n\t\t\t\t<!-- Skeleton structure -->\n\t\t\t\t<ng-container *ngIf=\"skeleton\">\n\t\t\t\t\t<span class=\"cds--label cds--skeleton\"></span>\n\t\t\t\t\t<div class=\"cds--date-picker__input cds--skeleton\"></div>\n\t\t\t\t</ng-container>\n\t\t\t\t<label\n\t\t\t\t\t*ngIf=\"label && !skeleton\"\n\t\t\t\t\t[for]=\"id\"\n\t\t\t\t\tclass=\"cds--label\"\n\t\t\t\t\t[ngClass]=\"{'cds--label--disabled': disabled}\">\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 class=\"cds--date-picker-input__wrapper\"\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t'cds--date-picker-input__wrapper--invalid': invalid,\n\t\t\t\t\t\t'cds--date-picker-input__wrapper--warn': warn\n\t\t\t\t\t}\">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t#input\n\t\t\t\t\t\tautocomplete=\"off\"\n\t\t\t\t\t\ttype=\"text\"\n\t\t\t\t\t\tclass=\"cds--date-picker__input\"\n\t\t\t\t\t\t[ngClass]=\"{\n\t\t\t\t\t\t\t'cds--date-picker__input--sm': size === 'sm',\n\t\t\t\t\t\t\t'cds--date-picker__input--md': size === 'md',\n\t\t\t\t\t\t\t'cds--date-picker__input--lg': size === 'lg'\n\t\t\t\t\t\t}\"\n\t\t\t\t\t\t[attr.data-invalid]=\"invalid ? true : undefined\"\n\t\t\t\t\t\t[value]=\"value\"\n\t\t\t\t\t\t[pattern]=\"pattern\"\n\t\t\t\t\t\t[placeholder]=\"placeholder\"\n\t\t\t\t\t\t[id]= \"id\"\n\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t[readonly]=\"readonly\"\n\t\t\t\t\t\t\t(change)=\"onChange($event)\"/>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"type !== 'simple' && !warn && !invalid\"\n\t\t\t\t\t\t\t\tcdsIcon=\"calendar\"\n\t\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon cds--date-picker__icon--invalid\"\n\t\t\t\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\t\t\t\tsize=\"16\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\t\t\t\tsize=\"16\"\n\t\t\t\t\t\t\t\tclass=\"cds--date-picker__icon cds--date-picker__icon--warn\">\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t<div\n\t\t\t\t\t*ngIf=\"helperText && !invalid && !warn\"\n\t\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\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 *ngIf=\"invalid\" class=\"cds--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\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n</div>\n\t`,\n\tproviders: [\n\t\t{\n\t\t\tprovide: NG_VALUE_ACCESSOR,\n\t\t\tuseExisting: DatePickerInput,\n\t\t\tmulti: true\n\t\t}\n\t]\n})\nexport class DatePickerInput {\n\tprivate static datePickerCount = 0;\n\t/**\n\t * Select a calendar type for the `model`.\n\t * Internal purposes only.\n\t */\n\t@Input() type: \"simple\" | \"single\" | \"range\" = \"simple\";\n\n\t@Input() id = `datepicker-${DatePickerInput.datePickerCount++}`;\n\n\t@Input() hasIcon = false;\n\n\t@Input() label: string | TemplateRef<any>;\n\n\t@Input() placeholder = \"mm/dd/yyyy\";\n\n\t@Input() pattern = \"^\\\\d{1,2}/\\\\d{1,2}/\\\\d{4}$\";\n\n\t@Output() valueChange: EventEmitter<string> = new EventEmitter();\n\n\t/**\n\t * @deprecated since v5 - Use `cdsLayer` directive instead\n\t * Set to `\"light\"` to apply the light style\n\t */\n\t@Input() theme: \"light\" | \"dark\" = \"dark\";\n\n\t@Input() disabled = false;\n\n\t@Input() readonly = false;\n\t/**\n\t * Set to `true` for invalid state.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t * Value displayed if dropdown is in invalid state.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t  * Set to `true` to show a warning (contents set by warnText)\n\t  */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\n\t/**\n\t * Sets the optional helper text.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\n\t@Input() skeleton = false;\n\n\t@Input() value = \"\";\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"md\";\n\n\t@ViewChild(\"input\") input: ElementRef;\n\n\tconstructor(protected elementRef: ElementRef) { }\n\n\tonChange(event) {\n\t\tthis.value = event.target.value;\n\t\tthis.valueChange.emit(this.value);\n\t\tthis.propagateChange(this.value);\n\t\tthis.onTouched();\n\t}\n\n\tpublic writeValue(value: any) {\n\t\tthis.value = value;\n\t}\n\n\tpublic registerOnChange(fn: any) {\n\t\tthis.propagateChange = fn;\n\t}\n\n\tpublic registerOnTouched(fn: any) {\n\t\tthis.onTouched = fn;\n\t}\n\n\tonTouched: () => any = () => { };\n\n\tpropagateChange = (_: any) => { };\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -27287,7 +27287,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 162,
+                "line": 167,
                 "jsdoctags": [
                     {
                         "name": "elementRef",
@@ -42393,7 +42393,7 @@
         },
         {
             "name": "PasswordInputLabelComponent",
-            "id": "component-PasswordInputLabelComponent-2a9ad0c3646dd4446f8b76c1e6d4b6d34ed3b32cfbb95056f65938b3877bac4dfd5ddb6ba80037621f1ad7facae845379cc8adfdf5f1e2973d02e122565a62c7",
+            "id": "component-PasswordInputLabelComponent-bdf59639f1e7e3881c59e6c091bbac5cd869c69dea799b0ccee5cabb9a1b1bacca79e8946a89b275174e24d1b802f6931d7ece15aa95b8f171dde4453403e6c1",
             "file": "src/input/password-input-label.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -42832,8 +42832,8 @@
                     "jsdoctags": [
                         {
                             "name": {
-                                "pos": 6415,
-                                "end": 6420,
+                                "pos": 6424,
+                                "end": 6429,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -42844,8 +42844,8 @@
                             "deprecated": false,
                             "deprecationMessage": "",
                             "tagName": {
-                                "pos": 6409,
-                                "end": 6414,
+                                "pos": 6418,
+                                "end": 6423,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -42856,8 +42856,8 @@
                         },
                         {
                             "tagName": {
-                                "pos": 6444,
-                                "end": 6451,
+                                "pos": 6453,
+                                "end": 6460,
                                 "flags": 16842752,
                                 "modifierFlagsCache": 0,
                                 "transformFlags": 0,
@@ -42916,7 +42916,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { InputModule } from &#39;carbon-components-angular&#39;;</code></pre></div><b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-password-label&gt;\n    Label\n    &lt;input cdsPassword&gt;\n&lt;/cds-password-label&gt;</code></pre></div><p><a href=\"../../?path=/story/components-input--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { InputModule } from 'carbon-components-angular';\n```\n\n```html\n<cds-password-label>\n\tLabel\n\t<input cdsPassword>\n</cds-password-label>\n```\n\n[See demo](../../?path=/story/components-input--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tChangeDetectorRef,\n\tContentChild\n} from \"@angular/core\";\nimport { PasswordInput } from \"./password.directive\";\nimport { BaseIconButton } from \"carbon-components-angular/button\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-password-label>\n * \tLabel\n *\t<input cdsPassword>\n * </cds-password-label>\n * ```\n *\n * [See demo](../../?path=/story/components-input--basic)\n */\n@Component({\n\tselector: \"cds-password-label, ibm-password-label\",\n\ttemplate: `\n\t\t<label\n\t\t\t[for]=\"labelInputID\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t'cds--skeleton': skeleton\n\t\t\t}\">\n\t\t\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t\t\t<ng-template #labelContent>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-template>\n\t\t</label>\n\n\t\t<div class=\"cds--text-input__field-outer-wrapper\">\n\t\t\t<div\n\t\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t}\"\n\t\t\t[attr.data-invalid]=\"invalid ? true : null\"\n\t\t\t#wrapper>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<ng-content select=\"[cdsPassword], [ibmPassword]\"></ng-content>\n\t\t\t\t<cds-tooltip\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\t[description]=\"passwordIsVisible ? hidePasswordLabel : showPasswordLabel\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[dropShadow]=\"dropShadow\"\n\t\t\t\t\t[highContrast]=\"highContrast\"\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"autoAlign\"\n\t\t\t\t\t[enterDelayMs]=\"enterDelayMs\"\n\t\t\t\t\t[leaveDelayMs]=\"leaveDelayMs\"\n\t\t\t\t\tclass=\"cds--toggle-password-tooltip\">\n\t\t\t\t\t\t<div class=\"cds--tooltip-trigger__wrapper\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclass=\"cds--text-input--password__visibility__toggle cds--btn cds--tooltip__trigger cds--tooltip--a11y\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t(click)=\"handleTogglePasswordVisibility($event)\">\n\t\t\t\t\t\t\t\t<svg *ngIf=\"passwordIsVisible\" cdsIcon=\"view--off\" class=\"cds--icon-visibility-off\" size=\"16\"></svg>\n\t\t\t\t\t\t\t\t<svg *ngIf=\"!passwordIsVisible\" cdsIcon=\"view\" class=\"cds--icon-visibility-on\" size=\"16\"></svg>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t</cds-tooltip>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{ 'cds--form__helper-text--disabled': disabled }\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{ helperText }}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\n\t\t\t<div *ngIf=\"!warn && invalid\" class=\"cds--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\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{ warnText }}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n    `\n})\n/**\n * Represents the Password Input Label Component.\n */\nexport class PasswordInputLabelComponent extends BaseIconButton implements AfterViewInit {\n\t/**\n\t * Counter for generating unique labelInputID.\n\t */\n\tstatic labelCounter = 0;\n\n\t@ContentChild(PasswordInput) textInput: PasswordInput;\n\n\t/**\n\t * ID for the input item associated with the label.\n\t */\n\t@Input() labelInputID = \"cds-password-input-\" + PasswordInputLabelComponent.labelCounter++;\n\n\t/**\n\t * Type for input field, either password or text.\n\t */\n\tinputType: \"password\" | \"text\" = \"password\";\n\n\t/**\n\t* Flag for checking if password is visible.\n\t*/\n\tpasswordIsVisible = false;\n\n\t/**\n\t * Flag for disabled label.\n\t */\n\t@Input() disabled = false;\n\n\t/**\n\t * Flag for loading (skeleton) label.\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Template for label content.\n\t */\n\t@Input() labelTemplate: TemplateRef<any>;\n\n\t/**\n\t * Template for password input.\n\t */\n\t@Input() passwordInputTemplate: TemplateRef<any>;\n\n\t/**\n\t * Optional helper text under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\n\t/**\n\t * Flag for an invalid label component.\n\t */\n\t@Input() invalid = false;\n\n\t/**\n\t * Flag for showing a warning.\n\t */\n\t@Input() warn = false;\n\n\t/**\n\t * Warning text.\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\n\t/**\n\t * Aria label for label.\n\t */\n\t@Input() ariaLabel: string;\n\n\t/**\n\t * Tooltip text for hiding password.\n\t */\n\t@Input() hidePasswordLabel = \"Hide password\";\n\n\t/**\n\t * Tooltip text for showing password.\n\t */\n\t@Input() showPasswordLabel = \"Show password\";\n\n\t/**\n\t * Reference to the wrapper element.\n\t */\n\t@ViewChild(\"wrapper\", { static: true }) wrapper: ElementRef<HTMLDivElement>;\n\n\t/**\n\t * Binding for applying class to host element.\n\t */\n\t@HostBinding(\"class.cds--form-item\") labelClass = true;\n\t@HostBinding(\"class.cds--password-input-wrapper\") passwordInputWrapper = true;\n\t@HostBinding(\"class.cds--text-input-wrapper\") textInputWrapper = true;\n\t@HostBinding(\"class.cds--text-input-wrapper--readonly\") get isReadonly() {\n\t\treturn this.wrapper?.nativeElement.querySelector(\"input\")?.readOnly;\n\t}\n\n\t/**\n\t * Constructor for PasswordInputLabelComponent.\n\t * @param changeDetectorRef - Reference to ChangeDetectorRef.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {\n\t\tsuper();\n\t}\n\n\t/**\n\t * Lifecycle hook called after the view has been initialized to set the ID of the input element\n\t */\n\tngAfterViewInit() {\n\t\tif (this.wrapper) {\n\t\t\tconst inputElement =\n\t\t\t\tthis.wrapper.nativeElement.querySelector(\"input\");\n\t\t\tif (inputElement) {\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Function to check if a value is a TemplateRef.\n\t * @param value - Value to check.\n\t * @returns Whether the value is a TemplateRef.\n\t */\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Handler for toggling password visibility.\n\t */\n\tpublic handleTogglePasswordVisibility() {\n\t\tthis.inputType = this.inputType === \"password\" ? \"text\" : \"password\";\n\t\tthis.textInput.type = this.inputType;\n\t\tthis.passwordIsVisible = this.inputType === \"text\";\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tChangeDetectorRef,\n\tContentChild\n} from \"@angular/core\";\nimport { PasswordInput } from \"./password.directive\";\nimport { BaseIconButton } from \"carbon-components-angular/button\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-password-label>\n * \tLabel\n *\t<input cdsPassword>\n * </cds-password-label>\n * ```\n *\n * [See demo](../../?path=/story/components-input--basic)\n */\n@Component({\n\tselector: \"cds-password-label, ibm-password-label\",\n\ttemplate: `\n\t\t<label\n\t\t\t[for]=\"labelInputID\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t'cds--skeleton': skeleton\n\t\t\t}\">\n\t\t\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t\t\t<ng-template #labelContent>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-template>\n\t\t</label>\n\n\t\t<div class=\"cds--text-input__field-outer-wrapper\">\n\t\t\t<div\n\t\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t}\"\n\t\t\t[attr.data-invalid]=\"invalid ? true : null\"\n\t\t\t#wrapper>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!warn && invalid\"\n\t\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t\t\t</svg>\n\t\t\t\t<svg\n\t\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\t\tsize=\"16\"\n\t\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t\t</svg>\n\t\t\t\t<ng-content select=\"[cdsPassword], [ibmPassword]\"></ng-content>\n\t\t\t\t<cds-tooltip\n\t\t\t\t\t*ngIf=\"!skeleton\"\n\t\t\t\t\t[description]=\"passwordIsVisible ? hidePasswordLabel : showPasswordLabel\"\n\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t[caret]=\"caret\"\n\t\t\t\t\t[dropShadow]=\"dropShadow\"\n\t\t\t\t\t[highContrast]=\"highContrast\"\n\t\t\t\t\t[isOpen]=\"isOpen\"\n\t\t\t\t\t[align]=\"align\"\n\t\t\t\t\t[autoAlign]=\"autoAlign\"\n\t\t\t\t\t[enterDelayMs]=\"enterDelayMs\"\n\t\t\t\t\t[leaveDelayMs]=\"leaveDelayMs\"\n\t\t\t\t\tclass=\"cds--toggle-password-tooltip\">\n\t\t\t\t\t\t<div class=\"cds--tooltip-trigger__wrapper\">\n\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\tclass=\"cds--text-input--password__visibility__toggle cds--btn cds--tooltip__trigger cds--tooltip--a11y\"\n\t\t\t\t\t\t\t\t[disabled]=\"disabled\"\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t(click)=\"handleTogglePasswordVisibility($event)\">\n\t\t\t\t\t\t\t\t<svg *ngIf=\"passwordIsVisible\" cdsIcon=\"view--off\" class=\"cds--icon-visibility-off\" size=\"16\"></svg>\n\t\t\t\t\t\t\t\t<svg *ngIf=\"!passwordIsVisible\" cdsIcon=\"view\" class=\"cds--icon-visibility-on\" size=\"16\"></svg>\n\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t</div>\n\t\t\t\t</cds-tooltip>\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t\t[ngClass]=\"{ 'cds--form__helper-text--disabled': disabled }\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(helperText)\">{{ helperText }}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(helperText)\" [ngTemplateOutlet]=\"helperText\"></ng-template>\n\t\t\t</div>\n\n\t\t\t<div *ngIf=\"!warn && invalid\" class=\"cds--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\n\t\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{ warnText }}</ng-container>\n\t\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t\t</div>\n\t\t</div>\n    `\n})\n/**\n * Represents the Password Input Label Component.\n */\nexport class PasswordInputLabelComponent extends BaseIconButton implements AfterViewInit {\n\t/**\n\t * Counter for generating unique labelInputID.\n\t */\n\tstatic labelCounter = 0;\n\n\t@ContentChild(PasswordInput) textInput: PasswordInput;\n\n\t/**\n\t * ID for the input item associated with the label.\n\t */\n\t@Input() labelInputID = \"cds-password-input-\" + PasswordInputLabelComponent.labelCounter++;\n\n\t/**\n\t * Type for input field, either password or text.\n\t */\n\tinputType: \"password\" | \"text\" = \"password\";\n\n\t/**\n\t* Flag for checking if password is visible.\n\t*/\n\tpasswordIsVisible = false;\n\n\t/**\n\t * Flag for disabled label.\n\t */\n\t@Input() disabled = false;\n\n\t/**\n\t * Flag for loading (skeleton) label.\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Template for label content.\n\t */\n\t@Input() labelTemplate: TemplateRef<any>;\n\n\t/**\n\t * Template for password input.\n\t */\n\t@Input() passwordInputTemplate: TemplateRef<any>;\n\n\t/**\n\t * Optional helper text under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\n\t/**\n\t * Flag for an invalid label component.\n\t */\n\t@Input() invalid = false;\n\n\t/**\n\t * Flag for showing a warning.\n\t */\n\t@Input() warn = false;\n\n\t/**\n\t * Warning text.\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\n\t/**\n\t * Aria label for label.\n\t */\n\t@Input() ariaLabel: string;\n\n\t/**\n\t * Tooltip text for hiding password.\n\t */\n\t@Input() hidePasswordLabel = \"Hide password\";\n\n\t/**\n\t * Tooltip text for showing password.\n\t */\n\t@Input() showPasswordLabel = \"Show password\";\n\n\t/**\n\t * Reference to the wrapper element.\n\t */\n\t@ViewChild(\"wrapper\", { static: true }) wrapper: ElementRef<HTMLDivElement>;\n\n\t/**\n\t * Binding for applying class to host element.\n\t */\n\t@HostBinding(\"class.cds--form-item\") labelClass = true;\n\t@HostBinding(\"class.cds--password-input-wrapper\") passwordInputWrapper = true;\n\t@HostBinding(\"class.cds--text-input-wrapper\") textInputWrapper = true;\n\t@HostBinding(\"class.cds--text-input-wrapper--readonly\") get isReadonly() {\n\t\treturn this.wrapper?.nativeElement.querySelector(\"input\")?.readOnly ?? false;\n\t}\n\n\t/**\n\t * Constructor for PasswordInputLabelComponent.\n\t * @param changeDetectorRef - Reference to ChangeDetectorRef.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {\n\t\tsuper();\n\t}\n\n\t/**\n\t * Lifecycle hook called after the view has been initialized to set the ID of the input element\n\t */\n\tngAfterViewInit() {\n\t\tif (this.wrapper) {\n\t\t\tconst inputElement =\n\t\t\t\tthis.wrapper.nativeElement.querySelector(\"input\");\n\t\t\tif (inputElement) {\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\t}\n\n\t/**\n\t * Function to check if a value is a TemplateRef.\n\t * @param value - Value to check.\n\t * @returns Whether the value is a TemplateRef.\n\t */\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\t/**\n\t * Handler for toggling password visibility.\n\t */\n\tpublic handleTogglePasswordVisibility() {\n\t\tthis.inputType = this.inputType === \"password\" ? \"text\" : \"password\";\n\t\tthis.textInput.type = this.inputType;\n\t\tthis.passwordIsVisible = this.inputType === \"text\";\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -42938,8 +42938,8 @@
                 "jsdoctags": [
                     {
                         "name": {
-                            "pos": 5760,
-                            "end": 5777,
+                            "pos": 5769,
+                            "end": 5786,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
@@ -42950,8 +42950,8 @@
                         "deprecated": false,
                         "deprecationMessage": "",
                         "tagName": {
-                            "pos": 5754,
-                            "end": 5759,
+                            "pos": 5763,
+                            "end": 5768,
                             "flags": 16842752,
                             "modifierFlagsCache": 0,
                             "transformFlags": 0,
@@ -60982,7 +60982,7 @@
         },
         {
             "name": "TextInputLabelComponent",
-            "id": "component-TextInputLabelComponent-3f7454b9585df2844ce881ad6ed8e23aee65514c17f0389c79bde0551dcb70835ab344da9191b7b657e6257d0b9764fc560f04d0ddc0d71305b1afe8ac5cb06f",
+            "id": "component-TextInputLabelComponent-40a5fa4a99975f64709f8c663f9f594f16d2aef26597ae1695aeb483431ffb3d85328e3802a0c33cf1aafce2bb9ab78987fa1a1f0c477d2c40cf6413467f0102",
             "file": "src/input/text-input-label.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -61225,7 +61225,7 @@
             "description": "<p>Get started with importing the module:</p>\n<b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-typescript\">import { InputModule } from &#39;carbon-components-angular&#39;;</code></pre></div><b>Example :</b><div><pre class=\"line-numbers\"><code class=\"language-html\">&lt;cds-text-label&gt;\n    Label\n    &lt;input cdsText type=&quot;text&quot; class=&quot;input-field&quot;&gt;\n&lt;/cds-text-label&gt;</code></pre></div><p><a href=\"../../?path=/story/components-input--basic\">See demo</a></p>\n",
             "rawdescription": "\n\nGet started with importing the module:\n\n```typescript\nimport { InputModule } from 'carbon-components-angular';\n```\n\n```html\n<cds-text-label>\n\tLabel\n\t<input cdsText type=\"text\" class=\"input-field\">\n</cds-text-label>\n```\n\n[See demo](../../?path=/story/components-input--basic)\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tChangeDetectorRef\n} from \"@angular/core\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-text-label>\n * \tLabel\n * \t<input cdsText type=\"text\" class=\"input-field\">\n * </cds-text-label>\n * ```\n *\n * [See demo](../../?path=/story/components-input--basic)\n */\n@Component({\n\tselector: \"cds-text-label, ibm-text-label\",\n\ttemplate: `\n\t\t<label\n\t\t\t[for]=\"labelInputID\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t'cds--skeleton': skeleton\n\t\t\t}\">\n\t\t\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t\t\t<ng-template #labelContent>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-template>\n\t\t</label>\n\t\t<div\n\t\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t}\"\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t#wrapper>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t</svg>\n\t\t\t<ng-template *ngIf=\"textInputTemplate; else textInputContent\" [ngTemplateOutlet]=\"textInputTemplate\"></ng-template>\n\t\t\t<ng-template #textInputContent>\n\t\t\t\t<ng-content select=\"[cdsText],[ibmText],input[type=text],div\"></ng-content>\n\t\t\t</ng-template>\n\t\t</div>\n\t\t<div\n\t\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\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 *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t</div>\n\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t</div>\n\t`\n})\nexport class TextInputLabelComponent implements AfterViewInit {\n\t/**\n\t * Used to build the id of the input item associated with the `Label`.\n\t */\n\tstatic labelCounter = 0;\n\t/**\n\t * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with\n\t * its input counterpart through the 'for' attribute.\n\t*/\n\t@Input() labelInputID = \"ibm-text-input-\" + TextInputLabelComponent.labelCounter++;\n\n\t/**\n\t * Set to `true` for a disabled label.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading label.\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Helper input property for ease of migration\n\t * Since we cannot pass ng-content down easily from label component, we will accept the templates\n\t */\n\t@Input() labelTemplate: TemplateRef<any>;\n\t@Input() textInputTemplate: TemplateRef<any>;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Set to `true` for an invalid label component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t  * Set to `true` to show a warning (contents set by warningText)\n\t  */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Set the arialabel for label\n\t */\n\t@Input() ariaLabel: string;\n\n\t// @ts-ignore\n\t@ViewChild(\"wrapper\", { static: false }) wrapper: ElementRef<HTMLDivElement>;\n\n\t@HostBinding(\"class.cds--form-item\") labelClass = true;\n\n\t@HostBinding(\"class.cds--text-input-wrapper--readonly\") get isReadonly() {\n\t\treturn this.wrapper?.nativeElement.querySelector(\"input\")?.readOnly;\n\t}\n\n\t/**\n\t * Creates an instance of Label.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {}\n\n\t/**\n\t * Sets the id on the input item associated with the `Label`.\n\t */\n\tngAfterViewInit() {\n\t\tif (this.wrapper) {\n\t\t\t// Prioritize setting id to `input` over div\n\t\t\tconst inputElement = this.wrapper.nativeElement.querySelector(\"input\");\n\t\t\tif (inputElement) {\n\t\t\t\t// avoid overriding ids already set by the user reuse it instead\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst divElement = this.wrapper.nativeElement.querySelector(\"div\");\n\t\t\tif (divElement) {\n\t\t\t\tif (divElement.id) {\n\t\t\t\t\tthis.labelInputID = divElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tdivElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tInput,\n\tAfterViewInit,\n\tElementRef,\n\tHostBinding,\n\tTemplateRef,\n\tViewChild,\n\tChangeDetectorRef\n} from \"@angular/core\";\n\n/**\n * Get started with importing the module:\n *\n * ```typescript\n * import { InputModule } from 'carbon-components-angular';\n * ```\n *\n * ```html\n * <cds-text-label>\n * \tLabel\n * \t<input cdsText type=\"text\" class=\"input-field\">\n * </cds-text-label>\n * ```\n *\n * [See demo](../../?path=/story/components-input--basic)\n */\n@Component({\n\tselector: \"cds-text-label, ibm-text-label\",\n\ttemplate: `\n\t\t<label\n\t\t\t[for]=\"labelInputID\"\n\t\t\t[attr.aria-label]=\"ariaLabel\"\n\t\t\tclass=\"cds--label\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--label--disabled': disabled,\n\t\t\t\t'cds--skeleton': skeleton\n\t\t\t}\">\n\t\t\t<ng-template *ngIf=\"labelTemplate; else labelContent\" [ngTemplateOutlet]=\"labelTemplate\"></ng-template>\n\t\t\t<ng-template #labelContent>\n\t\t\t\t<ng-content></ng-content>\n\t\t\t</ng-template>\n\t\t</label>\n\t\t<div\n\t\t\tclass=\"cds--text-input__field-wrapper\"\n\t\t\t[ngClass]=\"{\n\t\t\t\t'cds--text-input__field-wrapper--warning': warn\n\t\t\t}\"\n\t\t\t[attr.data-invalid]=\"(invalid ? true : null)\"\n\t\t\t#wrapper>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"invalid\"\n\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--text-input__invalid-icon\">\n\t\t\t</svg>\n\t\t\t<svg\n\t\t\t\t*ngIf=\"!invalid && warn\"\n\t\t\t\tcdsIcon=\"warning--alt--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--text-input__invalid-icon cds--text-input__invalid-icon--warning\">\n\t\t\t</svg>\n\t\t\t<ng-template *ngIf=\"textInputTemplate; else textInputContent\" [ngTemplateOutlet]=\"textInputTemplate\"></ng-template>\n\t\t\t<ng-template #textInputContent>\n\t\t\t\t<ng-content select=\"[cdsText],[ibmText],input[type=text],div\"></ng-content>\n\t\t\t</ng-template>\n\t\t</div>\n\t\t<div\n\t\t\t*ngIf=\"!skeleton && helperText && !invalid && !warn\"\n\t\t\tclass=\"cds--form__helper-text\"\n\t\t\t[ngClass]=\"{'cds--form__helper-text--disabled': disabled}\">\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 *ngIf=\"invalid\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(invalidText)\">{{invalidText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(invalidText)\" [ngTemplateOutlet]=\"invalidText\"></ng-template>\n\t\t</div>\n\t\t<div *ngIf=\"!invalid && warn\" class=\"cds--form-requirement\">\n\t\t\t<ng-container *ngIf=\"!isTemplate(warnText)\">{{warnText}}</ng-container>\n\t\t\t<ng-template *ngIf=\"isTemplate(warnText)\" [ngTemplateOutlet]=\"warnText\"></ng-template>\n\t\t</div>\n\t`\n})\nexport class TextInputLabelComponent implements AfterViewInit {\n\t/**\n\t * Used to build the id of the input item associated with the `Label`.\n\t */\n\tstatic labelCounter = 0;\n\t/**\n\t * The id of the input item associated with the `Label`. This value is also used to associate the `Label` with\n\t * its input counterpart through the 'for' attribute.\n\t*/\n\t@Input() labelInputID = \"ibm-text-input-\" + TextInputLabelComponent.labelCounter++;\n\n\t/**\n\t * Set to `true` for a disabled label.\n\t */\n\t@Input() disabled = false;\n\t/**\n\t * Set to `true` for a loading label.\n\t */\n\t@Input() skeleton = false;\n\n\t/**\n\t * Helper input property for ease of migration\n\t * Since we cannot pass ng-content down easily from label component, we will accept the templates\n\t */\n\t@Input() labelTemplate: TemplateRef<any>;\n\t@Input() textInputTemplate: TemplateRef<any>;\n\t/**\n\t * Optional helper text that appears under the label.\n\t */\n\t@Input() helperText: string | TemplateRef<any>;\n\t/**\n\t * Sets the invalid text.\n\t */\n\t@Input() invalidText: string | TemplateRef<any>;\n\t/**\n\t * Set to `true` for an invalid label component.\n\t */\n\t@Input() invalid = false;\n\t/**\n\t  * Set to `true` to show a warning (contents set by warningText)\n\t  */\n\t@Input() warn = false;\n\t/**\n\t * Sets the warning text\n\t */\n\t@Input() warnText: string | TemplateRef<any>;\n\t/**\n\t * Set the arialabel for label\n\t */\n\t@Input() ariaLabel: string;\n\n\t// @ts-ignore\n\t@ViewChild(\"wrapper\", { static: false }) wrapper: ElementRef<HTMLDivElement>;\n\n\t@HostBinding(\"class.cds--form-item\") labelClass = true;\n\n\t@HostBinding(\"class.cds--text-input-wrapper--readonly\") get isReadonly() {\n\t\treturn this.wrapper?.nativeElement.querySelector(\"input\")?.readOnly ?? false;\n\t}\n\n\t/**\n\t * Creates an instance of Label.\n\t */\n\tconstructor(protected changeDetectorRef: ChangeDetectorRef) {}\n\n\t/**\n\t * Sets the id on the input item associated with the `Label`.\n\t */\n\tngAfterViewInit() {\n\t\tif (this.wrapper) {\n\t\t\t// Prioritize setting id to `input` over div\n\t\t\tconst inputElement = this.wrapper.nativeElement.querySelector(\"input\");\n\t\t\tif (inputElement) {\n\t\t\t\t// avoid overriding ids already set by the user reuse it instead\n\t\t\t\tif (inputElement.id) {\n\t\t\t\t\tthis.labelInputID = inputElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tinputElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst divElement = this.wrapper.nativeElement.querySelector(\"div\");\n\t\t\tif (divElement) {\n\t\t\t\tif (divElement.id) {\n\t\t\t\t\tthis.labelInputID = divElement.id;\n\t\t\t\t\tthis.changeDetectorRef.detectChanges();\n\t\t\t\t}\n\t\t\t\tdivElement.setAttribute(\"id\", this.labelInputID);\n\t\t\t}\n\t\t}\n\t}\n\n\tpublic isTemplate(value) {\n\t\treturn value instanceof TemplateRef;\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -71408,7 +71408,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/button-set.stories.ts",
+                "file": "src/breadcrumb/breadcrumb.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -71418,7 +71418,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/button.stories.ts",
+                "file": "src/button/button-set.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -71428,7 +71428,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/icon-button.stories.ts",
+                "file": "src/button/button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -71438,7 +71438,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/breadcrumb/breadcrumb.stories.ts",
+                "file": "src/button/icon-button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -74120,41 +74120,41 @@
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/button-set.stories.ts",
+                "file": "src/breadcrumb/breadcrumb.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-button-set>\n\t\t\t<button cdsButton=\"secondary\" [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t\t<button cdsButton [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t</cds-button-set>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/button.stories.ts",
+                "file": "src/button/button-set.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tButton\n\t\t</button>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-button-set>\n\t\t\t<button cdsButton=\"secondary\" [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t\t<button cdsButton [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t</cds-button-set>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/button/icon-button.stories.ts",
+                "file": "src/button/button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-icon-button\n\t\t\tbuttonId=\"icon-btn1\"\n\t\t\ttype=\"button\"\n\t\t\t[kind]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[align]=\"align\"\n\t\t\t[buttonNgClass]=\"buttonNgClass\"\n\t\t\t[buttonAttributes]=\"buttonAttributes\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\tdescription=\"Icon Description\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"copy\" size=\"16\"></svg>\n\t\t</cds-icon-button>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tButton\n\t\t</button>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/breadcrumb/breadcrumb.stories.ts",
+                "file": "src/button/icon-button.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-icon-button\n\t\t\tbuttonId=\"icon-btn1\"\n\t\t\ttype=\"button\"\n\t\t\t[kind]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[align]=\"align\"\n\t\t\t[buttonNgClass]=\"buttonNgClass\"\n\t\t\t[buttonAttributes]=\"buttonAttributes\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\tdescription=\"Icon Description\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"copy\" size=\"16\"></svg>\n\t\t</cds-icon-button>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -77920,199 +77920,199 @@
                     "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<div style=\"width: 500px\">\n\t\t\t<cds-accordion>\n\t\t\t\t<cds-accordion-item [title]=\"title\" (selected)=\"selected($event)\">\n\t\t\t\t\tLorem ipsum dolor sit amet, \\\n\t\t\t\t\tconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore \\\n\t\t\t\t\tet dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation \\\n\t\t\t\t\tullamco laboris nisi ut aliquip ex ea commodo consequat.\n\t\t\t\t</cds-accordion-item>\n\t\t\t\t<cds-accordion-item [title]=\"titleWithContext\" [context]=\"{ index: 2 }\" (selected)=\"selected($event)\">\n\t\t\t\t\tLorem ipsum dolor sit amet, \\\n\t\t\t\t\tconsectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore \\\n\t\t\t\t\tet dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation \\\n\t\t\t\t\tullamco laboris nisi ut aliquip ex ea commodo consequat.\n\t\t\t\t</cds-accordion-item>\n\t\t\t</cds-accordion>\n\t\t</div>\n\t\t<ng-template #title>\n\t\t\t<p class=\"cds--accordion__title\">Section 1 title</p>\n\t\t</ng-template>\n\t\t<ng-template #titleWithContext let-index=\"index\">\n\t\t\t<p class=\"cds--accordion__title\">Section {{ index }} title</p>\n\t\t</ng-template>\n\t`\n})"
                 }
             ],
-            "src/button/button-set.stories.ts": [
+            "src/breadcrumb/breadcrumb.stories.ts": [
                 {
                     "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button-set.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
                     "defaultValue": "Template.bind({})"
                 },
                 {
-                    "name": "Template",
+                    "name": "breadcrumbItems",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button-set.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-button-set>\n\t\t\t<button cdsButton=\"secondary\" [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t\t<button cdsButton [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t</cds-button-set>\n\t`\n})"
-                }
-            ],
-            "src/button/button.stories.ts": [
+                    "type": ""
+                },
                 {
-                    "name": "Basic",
+                    "name": "createBreadcrumbItems",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "Template.bind({})"
+                    "defaultValue": "(count: number, content = \"Breadcrumb\"): Array<BreadcrumbItem> => {\n\tif (breadcrumbItems && count === breadcrumbItems.length) {\n\t\treturn breadcrumbItems;\n\t}\n\tbreadcrumbItems = Array(count).fill(0).map((x, i) => ({\n\t\tcontent: `${content} ${i + 1}`,\n\t\thref: \"#\" + (i + 1)\n\t}));\n\treturn breadcrumbItems;\n}"
                 },
                 {
-                    "name": "Template",
+                    "name": "CurrentPage",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tButton\n\t\t</button>\n\t`\n})"
+                    "defaultValue": "CurrentPageTemplate.bind({})"
                 },
                 {
-                    "name": "WithIcon",
+                    "name": "CurrentPageTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "WithIconTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb>\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item current=\"true\" href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
                 },
                 {
-                    "name": "WithIconTemplate",
+                    "name": "Model",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/button/button.stories.ts",
+                    "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseleave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tWith icon\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n\t\t</button>\n\t`\n})"
-                }
-            ],
-            "src/breadcrumb/breadcrumb.stories.ts": [
+                    "defaultValue": "ModelTemplate.bind({})"
+                },
                 {
-                    "name": "Basic",
+                    "name": "ModelTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "Template.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: {\n\t\t...args,\n\t\tcreateBreadcrumbItems\n\t},\n\ttemplate: `\n\t\t<cds-breadcrumb\n\t\t\t[noTrailingSlash]=\"noTrailingSlash\"\n\t\t\t[threshold]=\"threshold\"\n\t\t\t[items]=\"createBreadcrumbItems(itemCount, content)\">\n\t\t</cds-breadcrumb>\n\t`\n})"
                 },
                 {
-                    "name": "breadcrumbItems",
+                    "name": "ModelWithTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "type": ""
+                    "type": "",
+                    "defaultValue": "ModelWTemplate.bind({})"
                 },
                 {
-                    "name": "createBreadcrumbItems",
+                    "name": "ModelWTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(count: number, content = \"Breadcrumb\"): Array<BreadcrumbItem> => {\n\tif (breadcrumbItems && count === breadcrumbItems.length) {\n\t\treturn breadcrumbItems;\n\t}\n\tbreadcrumbItems = Array(count).fill(0).map((x, i) => ({\n\t\tcontent: `${content} ${i + 1}`,\n\t\thref: \"#\" + (i + 1)\n\t}));\n\treturn breadcrumbItems;\n}"
+                    "defaultValue": "(args) => ({\n\tprops: {\n\t\t...args,\n\t\tcreateBreadcrumbItems,\n\t\twithTemplate\n\t},\n\ttemplate: `\n\t\t<ng-template #breadcrumbTemplate let-item>\n\t\t\t{{ templateContent }}{{ item.content }}\n\t\t</ng-template>\n\t\t<cds-breadcrumb\n\t\t\t[noTrailingSlash]=\"noTrailingSlash\"\n\t\t\t[threshold]=\"threshold\"\n\t\t\t[items]=\"withTemplate(breadcrumbTemplate, createBreadcrumbItems(itemCount, content))\">\n\t\t</cds-breadcrumb>\n\t`\n})"
                 },
                 {
-                    "name": "CurrentPage",
+                    "name": "Skeleton",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "CurrentPageTemplate.bind({})"
+                    "defaultValue": "WithSkeleton.bind({})"
                 },
                 {
-                    "name": "CurrentPageTemplate",
+                    "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb>\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item current=\"true\" href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
                 },
                 {
-                    "name": "Model",
+                    "name": "WithSkeleton",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "ModelTemplate.bind({})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb skeleton=\"true\" [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
                 },
                 {
-                    "name": "ModelTemplate",
+                    "name": "withTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
                     "file": "src/breadcrumb/breadcrumb.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: {\n\t\t...args,\n\t\tcreateBreadcrumbItems\n\t},\n\ttemplate: `\n\t\t<cds-breadcrumb\n\t\t\t[noTrailingSlash]=\"noTrailingSlash\"\n\t\t\t[threshold]=\"threshold\"\n\t\t\t[items]=\"createBreadcrumbItems(itemCount, content)\">\n\t\t</cds-breadcrumb>\n\t`\n})"
-                },
+                    "defaultValue": "(templateRef, items) => items.map(item => Object.assign(item, { template: templateRef }))"
+                }
+            ],
+            "src/button/button-set.stories.ts": [
                 {
-                    "name": "ModelWithTemplate",
+                    "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button-set.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "ModelWTemplate.bind({})"
+                    "defaultValue": "Template.bind({})"
                 },
                 {
-                    "name": "ModelWTemplate",
+                    "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button-set.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: {\n\t\t...args,\n\t\tcreateBreadcrumbItems,\n\t\twithTemplate\n\t},\n\ttemplate: `\n\t\t<ng-template #breadcrumbTemplate let-item>\n\t\t\t{{ templateContent }}{{ item.content }}\n\t\t</ng-template>\n\t\t<cds-breadcrumb\n\t\t\t[noTrailingSlash]=\"noTrailingSlash\"\n\t\t\t[threshold]=\"threshold\"\n\t\t\t[items]=\"withTemplate(breadcrumbTemplate, createBreadcrumbItems(itemCount, content))\">\n\t\t</cds-breadcrumb>\n\t`\n})"
-                },
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-button-set>\n\t\t\t<button cdsButton=\"secondary\" [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t\t<button cdsButton [size]=\"size\" [isExpressive]=\"isExpressive\">Button</button>\n\t\t</cds-button-set>\n\t`\n})"
+                }
+            ],
+            "src/button/button.stories.ts": [
                 {
-                    "name": "Skeleton",
+                    "name": "Basic",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "WithSkeleton.bind({})"
+                    "defaultValue": "Template.bind({})"
                 },
                 {
                     "name": "Template",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item href=\"#1\">\n\t\t\t\tBreadcrumb 1\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#2\">\n\t\t\t\tBreadcrumb 2\n\t\t\t</cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item href=\"#3\">\n\t\t\t\tBreadcrumb 3\n\t\t\t</cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseLeave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tButton\n\t\t</button>\n\t`\n})"
                 },
                 {
-                    "name": "WithSkeleton",
+                    "name": "WithIcon",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-breadcrumb skeleton=\"true\" [noTrailingSlash]=\"noTrailingSlash\">\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t\t<cds-breadcrumb-item></cds-breadcrumb-item>\n\t\t</cds-breadcrumb>\n\t`\n})"
+                    "defaultValue": "WithIconTemplate.bind({})"
                 },
                 {
-                    "name": "withTemplate",
+                    "name": "WithIconTemplate",
                     "ctype": "miscellaneous",
                     "subtype": "variable",
-                    "file": "src/breadcrumb/breadcrumb.stories.ts",
+                    "file": "src/button/button.stories.ts",
                     "deprecated": false,
                     "deprecationMessage": "",
                     "type": "",
-                    "defaultValue": "(templateRef, items) => items.map(item => Object.assign(item, { template: templateRef }))"
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<button\n\t\t\t[cdsButton]=\"kind\"\n\t\t\t[size]=\"size\"\n\t\t\t[isExpressive]=\"isExpressive\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t(click)=\"onClick($event)\"\n\t\t\t(mouseenter)=\"onMouseEnter($event)\"\n\t\t\t(mouseleave)=\"onMouseleave($event)\"\n\t\t\t(focus)=\"onFocus($event)\"\n\t\t\t(blur)=\"onBlur($event)\">\n\t\t\tWith icon\n\t\t\t<svg class=\"cds--btn__icon\" cdsIcon=\"add\" size=\"16\"></svg>\n\t\t</button>\n\t`\n})"
                 }
             ],
             "src/checkbox/checkbox.stories.ts": [