carbon-components-angular 5.60.0 → 5.61.1

package/docs/documentation.json

@@ -27337,7 +27337,7 @@
         },
         {
             "name": "DatePicker",
-            "id": "component-DatePicker-1c8fbc0995cbbd6a94d00855b7555a2f327a0f38cc18fdad013b6a64e005d83e5baccd6126ff931487f4a26715f9de55d2d3d481680f0e7abea12884df50ad09",
+            "id": "component-DatePicker-ff293c0c2be8fdf9f555fef4cc23b2d966c09514751aa2b5096d1048e9e522081e4eea33b5742cb1b40faa6f6419aee019237c2a4d2a430c52e0455c939f3877",
             "file": "src/datepicker/datepicker.component.ts",
             "encapsulation": [
                 "ViewEncapsulation.None"
@@ -28018,7 +28018,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.\n\t\t\t// 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",
+            "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.\n\t\t\t// 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\t\t\t\t\tconst selectedDateElem = calendarContainer && calendarContainer.querySelector('.selected');\n\t\t\t\t\tconst todayDateElem = calendarContainer && calendarContainer.querySelector('.today');\n\n\t\t\t\t\tif (dayElement) {\n\t\t\t\t\t\t(todayDateElem || selectedDateElem || dayElement).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.setAttribute('role', 'button');\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\", \"application\");\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": "",
@@ -32307,7 +32307,7 @@
         },
         {
             "name": "FileComponent",
-            "id": "component-FileComponent-98d2d2905e5064dca3650e1cf863203986cc01d0988be17bd8eb2a88affdb4350e6c25dff8b12833d3ee534057028fd5a8fb09ecfe35b5687e60fab00e0c8b69",
+            "id": "component-FileComponent-440115d0b6a1699c9f9ba3afba9480f35137ac947fc32748424cfe59df7a65bb98ffb9040c93924b474f4baeb50d2d3ec7e350407e2c17583347548f24dfcac6",
             "file": "src/file-uploader/file.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -32317,7 +32317,7 @@
             "selector": "cds-file, ibm-file",
             "styleUrls": [],
             "styles": [],
-            "template": "<p class=\"cds--file-filename\" [title]=\"fileItem.file.name\">\n\t<ng-template\n\t\t*ngIf=\"isTemplate(nameTpl); else defaultName\"\n\t\t[ngTemplateOutlet]=\"nameTpl\"\n\t\t[ngTemplateOutletContext]=\"{ $implicit: fileItem }\">\n\t</ng-template>\n\t<ng-template #defaultName>{{ fileItem.file.name }}</ng-template>\n</p>\n<span *ngIf=\"fileItem.state === 'edit'\" class=\"cds--file__state-container\">\n\t<svg\n\t\t*ngIf=\"isInvalidText\"\n\t\tcdsIcon=\"warning--filled\"\n\t\tclass=\"cds--file--invalid\"\n\t\tsize=\"16\">\n\t</svg>\n\t<ng-template\n\t\t*ngIf=\"isTemplate(actionsTpl); else defaultActions\"\n\t\t[ngTemplateOutlet]=\"actionsTpl\">\n\t</ng-template>\n\t<ng-template #defaultActions>\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tcdsButton=\"ghost\"\n\t\t\ticonOnly=\"true\"\n\t\t\t[size]=\"size\"\n\t\t\t[attr.aria-label]=\"translations.REMOVE_BUTTON\"\n\t\t\t(click)=\"remove.emit()\"\n\t\t\t(keyup.enter)=\"remove.emit()\"\n\t\t\t(keyup.space)=\"remove.emit()\">\n\t\t\t<svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n\t\t</button>\n\t</ng-template>\n</span>\n<span *ngIf=\"fileItem.state === 'upload'\">\n\t<div class=\"cds--inline-loading__animation\">\n\t\t<cds-loading size=\"sm\"></cds-loading>\n\t</div>\n</span>\n<span\n\t*ngIf=\"fileItem.state === 'complete'\"\n\tclass=\"cds--file__state-container\">\n\t<svg\n\t\tcdsIcon=\"checkmark--filled\"\n\t\tsize=\"16\"\n\t\tclass=\"cds--file-complete\"\n\t\t[ariaLabel]=\"translations.CHECKMARK\">\n\t</svg>\n</span>\n<div\n\tclass=\"cds--form-requirement\"\n\trole=\"alert\"\n\t*ngIf=\"fileItem.invalid\">\n\t<div class=\"cds--form-requirement__title\">\n\t\t{{ fileItem.invalidTitle }}\n\t</div>\n\t<p class=\"cds--form-requirement__supplement\">\n\t\t{{ fileItem.invalidText }}\n\t</p>\n</div>\n\t",
+            "template": "<p class=\"cds--file-filename\" [title]=\"fileItem.file.name\">\n\t<ng-template\n\t\t*ngIf=\"isTemplate(nameTpl); else defaultName\"\n\t\t[ngTemplateOutlet]=\"nameTpl\"\n\t\t[ngTemplateOutletContext]=\"{ $implicit: fileItem }\">\n\t</ng-template>\n\t<ng-template #defaultName>{{ fileItem.file.name }}</ng-template>\n</p>\n<span *ngIf=\"fileItem.state === 'edit'\" class=\"cds--file__state-container\">\n\t<svg\n\t\t*ngIf=\"isInvalidText\"\n\t\tcdsIcon=\"warning--filled\"\n\t\tclass=\"cds--file--invalid\"\n\t\tsize=\"16\">\n\t</svg>\n\t<ng-template\n\t\t*ngIf=\"isTemplate(actionsTpl); else defaultActions\"\n\t\t[ngTemplateOutlet]=\"actionsTpl\"\n\t\t[ngTemplateOutletContext]=\"{ $implicit: fileItem }\">\n\t</ng-template>\n\t<ng-template #defaultActions>\n\t\t<button\n\t\t\ttype=\"button\"\n\t\t\tcdsButton=\"ghost\"\n\t\t\ticonOnly=\"true\"\n\t\t\t[size]=\"size\"\n\t\t\t[attr.aria-label]=\"translations.REMOVE_BUTTON\"\n\t\t\t(click)=\"remove.emit()\"\n\t\t\t(keyup.enter)=\"remove.emit()\"\n\t\t\t(keyup.space)=\"remove.emit()\">\n\t\t\t<svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n\t\t</button>\n\t</ng-template>\n</span>\n<span *ngIf=\"fileItem.state === 'upload'\">\n\t<div class=\"cds--inline-loading__animation\">\n\t\t<cds-loading size=\"sm\"></cds-loading>\n\t</div>\n</span>\n<span\n\t*ngIf=\"fileItem.state === 'complete'\"\n\tclass=\"cds--file__state-container\">\n\t<svg\n\t\tcdsIcon=\"checkmark--filled\"\n\t\tsize=\"16\"\n\t\tclass=\"cds--file-complete\"\n\t\t[ariaLabel]=\"translations.CHECKMARK\">\n\t</svg>\n</span>\n<div\n\tclass=\"cds--form-requirement\"\n\trole=\"alert\"\n\t*ngIf=\"fileItem.invalid\">\n\t<div class=\"cds--form-requirement__title\">\n\t\t{{ fileItem.invalidTitle }}\n\t</div>\n\t<p class=\"cds--form-requirement__supplement\">\n\t\t{{ fileItem.invalidText }}\n\t</p>\n</div>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -32328,7 +32328,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nA custom template for the available file actions\n",
                     "description": "<p>A custom template for the available file actions</p>\n",
-                    "line": 98,
+                    "line": 99,
                     "type": "TemplateRef<>",
                     "decorators": []
                 },
@@ -32338,7 +32338,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nA single `FileItem` from the set of `FileItem`s\n",
                     "description": "<p>A single <code>FileItem</code> from the set of <code>FileItem</code>s</p>\n",
-                    "line": 86,
+                    "line": 87,
                     "type": "FileItem",
                     "decorators": []
                 },
@@ -32348,7 +32348,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nA custom template for the file name\n",
                     "description": "<p>A custom template for the file name</p>\n",
-                    "line": 93,
+                    "line": 94,
                     "type": "TemplateRef<>",
                     "decorators": []
                 },
@@ -32357,7 +32357,7 @@
                     "defaultValue": "\"lg\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 88,
+                    "line": 89,
                     "type": "\"sm\" | \"md\" | \"lg\"",
                     "decorators": []
                 },
@@ -32368,7 +32368,7 @@
                     "deprecationMessage": "",
                     "rawdescription": "\n\nAccessible translations for the close and complete icons\n",
                     "description": "<p>Accessible translations for the close and complete icons</p>\n",
-                    "line": 82,
+                    "line": 83,
                     "type": "any",
                     "decorators": []
                 }
@@ -32379,7 +32379,7 @@
                     "defaultValue": "new EventEmitter()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 100,
+                    "line": 101,
                     "type": "EventEmitter"
                 }
             ],
@@ -32392,7 +32392,7 @@
                     "type": "",
                     "optional": false,
                     "description": "",
-                    "line": 102,
+                    "line": 103,
                     "decorators": [
                         {
                             "name": "HostBinding",
@@ -32418,7 +32418,7 @@
                     "optional": false,
                     "returnType": "boolean",
                     "typeParameters": [],
-                    "line": 122,
+                    "line": 123,
                     "deprecated": false,
                     "deprecationMessage": "",
                     "modifierKind": [
@@ -32445,7 +32445,7 @@
                     "defaultValue": "true",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 102,
+                    "line": 103,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -32453,7 +32453,7 @@
                     "name": "class.cds--file__selected-file--invalid",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 104,
+                    "line": 105,
                     "type": "any",
                     "decorators": []
                 },
@@ -32461,7 +32461,7 @@
                     "name": "class.cds--file__selected-file--lg",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 116,
+                    "line": 117,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -32469,7 +32469,7 @@
                     "name": "class.cds--file__selected-file--md",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 112,
+                    "line": 113,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -32477,7 +32477,7 @@
                     "name": "class.cds--file__selected-file--sm",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 108,
+                    "line": 109,
                     "type": "boolean",
                     "decorators": []
                 }
@@ -32488,7 +32488,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import {\n\tComponent,\n\tEventEmitter,\n\tHostBinding,\n\tInput,\n\tOnDestroy,\n\tOutput,\n\tTemplateRef\n} from \"@angular/core\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { FileItem } from \"./file-item.interface\";\n\n@Component({\n\tselector: \"cds-file, ibm-file\",\n\ttemplate: `\n\t\t<p class=\"cds--file-filename\" [title]=\"fileItem.file.name\">\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"isTemplate(nameTpl); else defaultName\"\n\t\t\t\t[ngTemplateOutlet]=\"nameTpl\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: fileItem }\">\n\t\t\t</ng-template>\n\t\t\t<ng-template #defaultName>{{ fileItem.file.name }}</ng-template>\n\t\t</p>\n\t\t<span *ngIf=\"fileItem.state === 'edit'\" class=\"cds--file__state-container\">\n\t\t\t<svg\n\t\t\t\t*ngIf=\"isInvalidText\"\n\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\tclass=\"cds--file--invalid\"\n\t\t\t\tsize=\"16\">\n\t\t\t</svg>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"isTemplate(actionsTpl); else defaultActions\"\n\t\t\t\t[ngTemplateOutlet]=\"actionsTpl\">\n\t\t\t</ng-template>\n\t\t\t<ng-template #defaultActions>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[attr.aria-label]=\"translations.REMOVE_BUTTON\"\n\t\t\t\t\t(click)=\"remove.emit()\"\n\t\t\t\t\t(keyup.enter)=\"remove.emit()\"\n\t\t\t\t\t(keyup.space)=\"remove.emit()\">\n\t\t\t\t\t<svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n\t\t\t\t</button>\n\t\t\t</ng-template>\n\t\t</span>\n\t\t<span *ngIf=\"fileItem.state === 'upload'\">\n\t\t\t<div class=\"cds--inline-loading__animation\">\n\t\t\t\t<cds-loading size=\"sm\"></cds-loading>\n\t\t\t</div>\n\t\t</span>\n\t\t<span\n\t\t\t*ngIf=\"fileItem.state === 'complete'\"\n\t\t\tclass=\"cds--file__state-container\">\n\t\t\t<svg\n\t\t\t\tcdsIcon=\"checkmark--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--file-complete\"\n\t\t\t\t[ariaLabel]=\"translations.CHECKMARK\">\n\t\t\t</svg>\n\t\t</span>\n\t\t<div\n\t\t\tclass=\"cds--form-requirement\"\n\t\t\trole=\"alert\"\n\t\t\t*ngIf=\"fileItem.invalid\">\n\t\t\t<div class=\"cds--form-requirement__title\">\n\t\t\t\t{{ fileItem.invalidTitle }}\n\t\t\t</div>\n\t\t\t<p class=\"cds--form-requirement__supplement\">\n\t\t\t\t{{ fileItem.invalidText }}\n\t\t\t</p>\n\t\t</div>\n\t`\n})\nexport class FileComponent implements OnDestroy {\n\t/**\n\t * Accessible translations for the close and complete icons\n\t */\n\t@Input() translations = this.i18n.get().FILE_UPLOADER;\n\t/**\n\t * A single `FileItem` from the set of `FileItem`s\n\t */\n\t@Input() fileItem: FileItem;\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\n\t/**\n\t * A custom template for the file name\n\t */\n\t@Input() nameTpl: TemplateRef<unknown>;\n\n\t/**\n\t * A custom template for the available file actions\n\t */\n\t@Input() actionsTpl: TemplateRef<unknown>;\n\n\t@Output() remove = new EventEmitter();\n\n\t@HostBinding(\"class.cds--file__selected-file\") selectedFile = true;\n\n\t@HostBinding(\"class.cds--file__selected-file--invalid\") get isInvalidText() {\n\t\treturn this.fileItem.invalidText;\n\t}\n\n\t@HostBinding(\"class.cds--file__selected-file--sm\") get fileSizeSmall() {\n\t\treturn this.size === \"sm\";\n\t}\n\n\t@HostBinding(\"class.cds--file__selected-file--md\") get fileSizeMedium() {\n\t\treturn this.size === \"md\";\n\t}\n\n\t@HostBinding(\"class.cds--file__selected-file--lg\") get fileSizeLarge() {\n\t\treturn this.size === \"lg\";\n\t}\n\n\tconstructor(protected i18n: I18n) {}\n\n\tpublic isTemplate(value: unknown): boolean {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tngOnDestroy() {\n\t\tthis.remove.emit();\n\t}\n}\n",
+            "sourceCode": "import {\n\tComponent,\n\tEventEmitter,\n\tHostBinding,\n\tInput,\n\tOnDestroy,\n\tOutput,\n\tTemplateRef\n} from \"@angular/core\";\n\nimport { I18n } from \"carbon-components-angular/i18n\";\nimport { FileItem } from \"./file-item.interface\";\n\n@Component({\n\tselector: \"cds-file, ibm-file\",\n\ttemplate: `\n\t\t<p class=\"cds--file-filename\" [title]=\"fileItem.file.name\">\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"isTemplate(nameTpl); else defaultName\"\n\t\t\t\t[ngTemplateOutlet]=\"nameTpl\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: fileItem }\">\n\t\t\t</ng-template>\n\t\t\t<ng-template #defaultName>{{ fileItem.file.name }}</ng-template>\n\t\t</p>\n\t\t<span *ngIf=\"fileItem.state === 'edit'\" class=\"cds--file__state-container\">\n\t\t\t<svg\n\t\t\t\t*ngIf=\"isInvalidText\"\n\t\t\t\tcdsIcon=\"warning--filled\"\n\t\t\t\tclass=\"cds--file--invalid\"\n\t\t\t\tsize=\"16\">\n\t\t\t</svg>\n\t\t\t<ng-template\n\t\t\t\t*ngIf=\"isTemplate(actionsTpl); else defaultActions\"\n\t\t\t\t[ngTemplateOutlet]=\"actionsTpl\"\n\t\t\t\t[ngTemplateOutletContext]=\"{ $implicit: fileItem }\">\n\t\t\t</ng-template>\n\t\t\t<ng-template #defaultActions>\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tcdsButton=\"ghost\"\n\t\t\t\t\ticonOnly=\"true\"\n\t\t\t\t\t[size]=\"size\"\n\t\t\t\t\t[attr.aria-label]=\"translations.REMOVE_BUTTON\"\n\t\t\t\t\t(click)=\"remove.emit()\"\n\t\t\t\t\t(keyup.enter)=\"remove.emit()\"\n\t\t\t\t\t(keyup.space)=\"remove.emit()\">\n\t\t\t\t\t<svg cdsIcon=\"trash-can\" size=\"16\"></svg>\n\t\t\t\t</button>\n\t\t\t</ng-template>\n\t\t</span>\n\t\t<span *ngIf=\"fileItem.state === 'upload'\">\n\t\t\t<div class=\"cds--inline-loading__animation\">\n\t\t\t\t<cds-loading size=\"sm\"></cds-loading>\n\t\t\t</div>\n\t\t</span>\n\t\t<span\n\t\t\t*ngIf=\"fileItem.state === 'complete'\"\n\t\t\tclass=\"cds--file__state-container\">\n\t\t\t<svg\n\t\t\t\tcdsIcon=\"checkmark--filled\"\n\t\t\t\tsize=\"16\"\n\t\t\t\tclass=\"cds--file-complete\"\n\t\t\t\t[ariaLabel]=\"translations.CHECKMARK\">\n\t\t\t</svg>\n\t\t</span>\n\t\t<div\n\t\t\tclass=\"cds--form-requirement\"\n\t\t\trole=\"alert\"\n\t\t\t*ngIf=\"fileItem.invalid\">\n\t\t\t<div class=\"cds--form-requirement__title\">\n\t\t\t\t{{ fileItem.invalidTitle }}\n\t\t\t</div>\n\t\t\t<p class=\"cds--form-requirement__supplement\">\n\t\t\t\t{{ fileItem.invalidText }}\n\t\t\t</p>\n\t\t</div>\n\t`\n})\nexport class FileComponent implements OnDestroy {\n\t/**\n\t * Accessible translations for the close and complete icons\n\t */\n\t@Input() translations = this.i18n.get().FILE_UPLOADER;\n\t/**\n\t * A single `FileItem` from the set of `FileItem`s\n\t */\n\t@Input() fileItem: FileItem;\n\n\t@Input() size: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\n\t/**\n\t * A custom template for the file name\n\t */\n\t@Input() nameTpl: TemplateRef<unknown>;\n\n\t/**\n\t * A custom template for the available file actions\n\t */\n\t@Input() actionsTpl: TemplateRef<unknown>;\n\n\t@Output() remove = new EventEmitter();\n\n\t@HostBinding(\"class.cds--file__selected-file\") selectedFile = true;\n\n\t@HostBinding(\"class.cds--file__selected-file--invalid\") get isInvalidText() {\n\t\treturn this.fileItem.invalidText;\n\t}\n\n\t@HostBinding(\"class.cds--file__selected-file--sm\") get fileSizeSmall() {\n\t\treturn this.size === \"sm\";\n\t}\n\n\t@HostBinding(\"class.cds--file__selected-file--md\") get fileSizeMedium() {\n\t\treturn this.size === \"md\";\n\t}\n\n\t@HostBinding(\"class.cds--file__selected-file--lg\") get fileSizeLarge() {\n\t\treturn this.size === \"lg\";\n\t}\n\n\tconstructor(protected i18n: I18n) {}\n\n\tpublic isTemplate(value: unknown): boolean {\n\t\treturn value instanceof TemplateRef;\n\t}\n\n\tngOnDestroy() {\n\t\tthis.remove.emit();\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -32505,7 +32505,7 @@
                         "deprecationMessage": ""
                     }
                 ],
-                "line": 118,
+                "line": 119,
                 "jsdoctags": [
                     {
                         "name": "i18n",
@@ -32529,7 +32529,7 @@
                         "name": "isInvalidText",
                         "type": "",
                         "returnType": "",
-                        "line": 104
+                        "line": 105
                     }
                 },
                 "fileSizeSmall": {
@@ -32538,7 +32538,7 @@
                         "name": "fileSizeSmall",
                         "type": "",
                         "returnType": "",
-                        "line": 108
+                        "line": 109
                     }
                 },
                 "fileSizeMedium": {
@@ -32547,7 +32547,7 @@
                         "name": "fileSizeMedium",
                         "type": "",
                         "returnType": "",
-                        "line": 112
+                        "line": 113
                     }
                 },
                 "fileSizeLarge": {
@@ -32556,7 +32556,7 @@
                         "name": "fileSizeLarge",
                         "type": "",
                         "returnType": "",
-                        "line": 116
+                        "line": 117
                     }
                 }
             }
@@ -33377,7 +33377,7 @@
         },
         {
             "name": "FileUploaderWithCustomFileStory",
-            "id": "component-FileUploaderWithCustomFileStory-1fa4b8c6e0e98dcc543f4986430b04b5a50cc6874b999d586f9da615e70b80754f49907c842dc7e41227d80e526d070f647fe88dd40563dd714249062154805d",
+            "id": "component-FileUploaderWithCustomFileStory-0847324b80e43514c99f8d3049887fd5a8bab42e124aa234f95fb03e851093db1cfe78bce857276e36f3abc13f15e0f9488b20345b9ba859884e165ab9389f39",
             "file": "src/file-uploader/stories/uploader-custom-file.component.ts",
             "encapsulation": [],
             "entryComponents": [],
@@ -33387,7 +33387,7 @@
             "selector": "app-file-uploader-with-custom-file",
             "styleUrls": [],
             "styles": [],
-            "template": "<cds-file-uploader\n\t[title]=\"title\"\n\t[description]=\"description\"\n\t[buttonText]=\"buttonText\"\n\t[buttonType]=\"buttonType\"\n\t[accept]=\"accept\"\n\t[multiple]=\"multiple\"\n\t[skeleton]=\"skeleton\"\n\t[(files)]=\"files\"\n\t[size]=\"size\"\n\t[fileItemSize]=\"fileItemSize\"\n\t[disabled]=\"disabled\"\n\t[fileNameTpl]=\"nameTpl\"\n\t[fileActionsTpl]=\"actionsTpl\">\n</cds-file-uploader>\n<button\n\tcdsButton\n\t*ngIf=\"files && files.size > 0\"\n\t(click)=\"onUpload()\"\n\tstyle=\"margin-top:20px\">\n\tUpload\n</button>\n\n<ng-template #nameTpl let-fileItem>\n\t<a href=\"#\" cdsLink>{{ fileItem.file.name }}</a>\n</ng-template>\n\n<ng-template #actionsTpl>\n\t<button\n\t\tibmButton=\"ghost\"\n\t\ticonOnly=\"true\"\n\t\taria-label=\"View\"\n\t\t[size]=\"fileItemSize\">\n\t\t<svg ibmIcon=\"view\" size=\"16\"></svg>\n\t</button>\n\t<button\n\t\tibmButton=\"ghost\"\n\t\ticonOnly=\"true\"\n\t\taria-label=\"Download\"\n\t\t[size]=\"fileItemSize\">\n\t\t<svg ibmIcon=\"download\" size=\"16\"></svg>\n\t</button>\n</ng-template>\n\t",
+            "template": "<p *ngIf=\"lastViewedFile\">Last viewed file: {{ lastViewedFile | json }}</p>\n<p *ngIf=\"lastDownloadedFile\">Last downloaded file: {{ lastDownloadedFile | json }}</p>\n<cds-file-uploader\n\t[title]=\"title\"\n\t[description]=\"description\"\n\t[buttonText]=\"buttonText\"\n\t[buttonType]=\"buttonType\"\n\t[accept]=\"accept\"\n\t[multiple]=\"multiple\"\n\t[skeleton]=\"skeleton\"\n\t[(files)]=\"files\"\n\t[size]=\"size\"\n\t[fileItemSize]=\"fileItemSize\"\n\t[disabled]=\"disabled\"\n\t[fileNameTpl]=\"nameTpl\"\n\t[fileActionsTpl]=\"actionsTpl\">\n</cds-file-uploader>\n<button\n\tcdsButton\n\t*ngIf=\"files && files.size > 0\"\n\t(click)=\"onUpload()\"\n\tstyle=\"margin-top:20px\">\n\tUpload\n</button>\n\n<ng-template #nameTpl let-fileItem>\n\t<a href=\"#\" cdsLink>{{ fileItem.file.name }}</a>\n</ng-template>\n\n<ng-template #actionsTpl let-fileItem>\n\t<button\n\t\tibmButton=\"ghost\"\n\t\ticonOnly=\"true\"\n\t\taria-label=\"View\"\n\t\t[size]=\"fileItemSize\"\n\t\t(click)=\"onViewClick(fileItem)\">\n\t\t<svg ibmIcon=\"view\" size=\"16\"></svg>\n\t</button>\n\t<button\n\t\tibmButton=\"ghost\"\n\t\ticonOnly=\"true\"\n\t\taria-label=\"Download\"\n\t\t[size]=\"fileItemSize\"\n\t\t(click)=\"onDownloadClick(fileItem)\">\n\t\t<svg ibmIcon=\"download\" size=\"16\"></svg>\n\t</button>\n</ng-template>\n\t",
             "templateUrl": [],
             "viewProviders": [],
             "hostDirectives": [],
@@ -33397,7 +33397,7 @@
                     "defaultValue": "[\".jpg\", \".png\"]",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 59,
+                    "line": 66,
                     "type": "{}",
                     "decorators": []
                 },
@@ -33405,7 +33405,7 @@
                     "name": "buttonText",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 57,
+                    "line": 64,
                     "type": "any",
                     "decorators": []
                 },
@@ -33414,7 +33414,7 @@
                     "defaultValue": "\"primary\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 58,
+                    "line": 65,
                     "type": "string",
                     "decorators": []
                 },
@@ -33422,7 +33422,7 @@
                     "name": "description",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 56,
+                    "line": 63,
                     "type": "any",
                     "decorators": []
                 },
@@ -33431,7 +33431,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 63,
+                    "line": 70,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -33440,7 +33440,7 @@
                     "defaultValue": "\"lg\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 64,
+                    "line": 71,
                     "type": "\"sm\" | \"md\" | \"lg\"",
                     "decorators": []
                 },
@@ -33449,7 +33449,7 @@
                     "defaultValue": "new Set<FileItem>()",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 54,
+                    "line": 61,
                     "type": "any",
                     "decorators": []
                 },
@@ -33457,7 +33457,7 @@
                     "name": "multiple",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 60,
+                    "line": 67,
                     "type": "any",
                     "decorators": []
                 },
@@ -33466,7 +33466,7 @@
                     "defaultValue": "\"md\"",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 62,
+                    "line": 69,
                     "type": "string",
                     "decorators": []
                 },
@@ -33475,7 +33475,7 @@
                     "defaultValue": "false",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 61,
+                    "line": 68,
                     "type": "boolean",
                     "decorators": []
                 },
@@ -33483,23 +33483,100 @@
                     "name": "title",
                     "deprecated": false,
                     "deprecationMessage": "",
-                    "line": 55,
+                    "line": 62,
                     "type": "any",
                     "decorators": []
                 }
             ],
             "outputsClass": [],
-            "propertiesClass": [],
+            "propertiesClass": [
+                {
+                    "name": "lastDownloadedFile",
+                    "defaultValue": "null",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "FileItem | null",
+                    "optional": false,
+                    "description": "",
+                    "line": 59
+                },
+                {
+                    "name": "lastViewedFile",
+                    "defaultValue": "null",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "FileItem | null",
+                    "optional": false,
+                    "description": "",
+                    "line": 58
+                }
+            ],
             "methodsClass": [
+                {
+                    "name": "onDownloadClick",
+                    "args": [
+                        {
+                            "name": "file",
+                            "type": "FileItem",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 79,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "jsdoctags": [
+                        {
+                            "name": "file",
+                            "type": "FileItem",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
+                },
                 {
                     "name": "onUpload",
                     "args": [],
                     "optional": false,
                     "returnType": "void",
                     "typeParameters": [],
-                    "line": 68,
+                    "line": 83,
                     "deprecated": false,
                     "deprecationMessage": ""
+                },
+                {
+                    "name": "onViewClick",
+                    "args": [
+                        {
+                            "name": "file",
+                            "type": "FileItem",
+                            "deprecated": false,
+                            "deprecationMessage": ""
+                        }
+                    ],
+                    "optional": false,
+                    "returnType": "void",
+                    "typeParameters": [],
+                    "line": 75,
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "jsdoctags": [
+                        {
+                            "name": "file",
+                            "type": "FileItem",
+                            "deprecated": false,
+                            "deprecationMessage": "",
+                            "tagName": {
+                                "text": "param"
+                            }
+                        }
+                    ]
                 }
             ],
             "deprecated": false,
@@ -33511,7 +33588,7 @@
             "description": "",
             "rawdescription": "\n",
             "type": "component",
-            "sourceCode": "import { Component, Input } from \"@angular/core\";\n\nimport { FileItem } from \"../\";\n\n@Component({\n\tselector: \"app-file-uploader-with-custom-file\",\n\ttemplate: `\n\t\t<cds-file-uploader\n\t\t\t[title]=\"title\"\n\t\t\t[description]=\"description\"\n\t\t\t[buttonText]=\"buttonText\"\n\t\t\t[buttonType]=\"buttonType\"\n\t\t\t[accept]=\"accept\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[(files)]=\"files\"\n\t\t\t[size]=\"size\"\n\t\t\t[fileItemSize]=\"fileItemSize\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[fileNameTpl]=\"nameTpl\"\n\t\t\t[fileActionsTpl]=\"actionsTpl\">\n\t\t</cds-file-uploader>\n\t\t<button\n\t\t\tcdsButton\n\t\t\t*ngIf=\"files && files.size > 0\"\n\t\t\t(click)=\"onUpload()\"\n\t\t\tstyle=\"margin-top:20px\">\n\t\t\tUpload\n\t\t</button>\n\n\t\t<ng-template #nameTpl let-fileItem>\n\t\t\t<a href=\"#\" cdsLink>{{ fileItem.file.name }}</a>\n\t\t</ng-template>\n\n\t\t<ng-template #actionsTpl>\n\t\t\t<button\n\t\t\t\tibmButton=\"ghost\"\n\t\t\t\ticonOnly=\"true\"\n\t\t\t\taria-label=\"View\"\n\t\t\t\t[size]=\"fileItemSize\">\n\t\t\t\t<svg ibmIcon=\"view\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\tibmButton=\"ghost\"\n\t\t\t\ticonOnly=\"true\"\n\t\t\t\taria-label=\"Download\"\n\t\t\t\t[size]=\"fileItemSize\">\n\t\t\t\t<svg ibmIcon=\"download\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t</ng-template>\n\t`\n})\nexport class FileUploaderWithCustomFileStory {\n\t@Input() files = new Set<FileItem>();\n\t@Input() title;\n\t@Input() description;\n\t@Input() buttonText;\n\t@Input() buttonType = \"primary\";\n\t@Input() accept = [\".jpg\", \".png\"];\n\t@Input() multiple;\n\t@Input() skeleton = false;\n\t@Input() size = \"md\";\n\t@Input() disabled = false;\n\t@Input() fileItemSize: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\n\tprotected maxSize = 500000;\n\n\tonUpload() {\n\t\tthis.files.forEach((fileItem) => {\n\t\t\tif (!fileItem.uploaded) {\n\t\t\t\tif (fileItem.file.size < this.maxSize) {\n\t\t\t\t\tfileItem.state = \"upload\";\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tfileItem.state = \"complete\";\n\t\t\t\t\t\tfileItem.uploaded = true;\n\t\t\t\t\t\tconsole.log(fileItem);\n\t\t\t\t\t}, 1500);\n\t\t\t\t}\n\n\t\t\t\tif (fileItem.file.size > this.maxSize) {\n\t\t\t\t\tfileItem.state = \"upload\";\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tfileItem.state = \"edit\";\n\t\t\t\t\t\tfileItem.invalid = true;\n\t\t\t\t\t\tfileItem.invalidTitle = \"File size exceeds limit\";\n\t\t\t\t\t\tfileItem.invalidText =\n\t\t\t\t\t\t\t\"500kb max file size. Select a new file and try again.\";\n\t\t\t\t\t}, 1500);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n}\n",
+            "sourceCode": "import { Component, Input } from \"@angular/core\";\n\nimport { FileItem } from \"../\";\n\n@Component({\n\tselector: \"app-file-uploader-with-custom-file\",\n\ttemplate: `\n\t\t<p *ngIf=\"lastViewedFile\">Last viewed file: {{ lastViewedFile | json }}</p>\n\t\t<p *ngIf=\"lastDownloadedFile\">Last downloaded file: {{ lastDownloadedFile | json }}</p>\n\t\t<cds-file-uploader\n\t\t\t[title]=\"title\"\n\t\t\t[description]=\"description\"\n\t\t\t[buttonText]=\"buttonText\"\n\t\t\t[buttonType]=\"buttonType\"\n\t\t\t[accept]=\"accept\"\n\t\t\t[multiple]=\"multiple\"\n\t\t\t[skeleton]=\"skeleton\"\n\t\t\t[(files)]=\"files\"\n\t\t\t[size]=\"size\"\n\t\t\t[fileItemSize]=\"fileItemSize\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[fileNameTpl]=\"nameTpl\"\n\t\t\t[fileActionsTpl]=\"actionsTpl\">\n\t\t</cds-file-uploader>\n\t\t<button\n\t\t\tcdsButton\n\t\t\t*ngIf=\"files && files.size > 0\"\n\t\t\t(click)=\"onUpload()\"\n\t\t\tstyle=\"margin-top:20px\">\n\t\t\tUpload\n\t\t</button>\n\n\t\t<ng-template #nameTpl let-fileItem>\n\t\t\t<a href=\"#\" cdsLink>{{ fileItem.file.name }}</a>\n\t\t</ng-template>\n\n\t\t<ng-template #actionsTpl let-fileItem>\n\t\t\t<button\n\t\t\t\tibmButton=\"ghost\"\n\t\t\t\ticonOnly=\"true\"\n\t\t\t\taria-label=\"View\"\n\t\t\t\t[size]=\"fileItemSize\"\n\t\t\t\t(click)=\"onViewClick(fileItem)\">\n\t\t\t\t<svg ibmIcon=\"view\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t\t<button\n\t\t\t\tibmButton=\"ghost\"\n\t\t\t\ticonOnly=\"true\"\n\t\t\t\taria-label=\"Download\"\n\t\t\t\t[size]=\"fileItemSize\"\n\t\t\t\t(click)=\"onDownloadClick(fileItem)\">\n\t\t\t\t<svg ibmIcon=\"download\" size=\"16\"></svg>\n\t\t\t</button>\n\t\t</ng-template>\n\t`\n})\nexport class FileUploaderWithCustomFileStory {\n\tlastViewedFile: FileItem | null = null;\n\tlastDownloadedFile: FileItem | null = null;\n\n\t@Input() files = new Set<FileItem>();\n\t@Input() title;\n\t@Input() description;\n\t@Input() buttonText;\n\t@Input() buttonType = \"primary\";\n\t@Input() accept = [\".jpg\", \".png\"];\n\t@Input() multiple;\n\t@Input() skeleton = false;\n\t@Input() size = \"md\";\n\t@Input() disabled = false;\n\t@Input() fileItemSize: \"sm\" | \"md\" | \"lg\" = \"lg\";\n\n\tprotected maxSize = 500000;\n\n\tonViewClick(file: FileItem) {\n\t\tthis.lastViewedFile = file;\n\t}\n\n\tonDownloadClick(file: FileItem) {\n\t\tthis.lastDownloadedFile = file;\n\t}\n\n\tonUpload() {\n\t\tthis.files.forEach((fileItem) => {\n\t\t\tif (!fileItem.uploaded) {\n\t\t\t\tif (fileItem.file.size < this.maxSize) {\n\t\t\t\t\tfileItem.state = \"upload\";\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tfileItem.state = \"complete\";\n\t\t\t\t\t\tfileItem.uploaded = true;\n\t\t\t\t\t\tconsole.log(fileItem);\n\t\t\t\t\t}, 1500);\n\t\t\t\t}\n\n\t\t\t\tif (fileItem.file.size > this.maxSize) {\n\t\t\t\t\tfileItem.state = \"upload\";\n\t\t\t\t\tsetTimeout(() => {\n\t\t\t\t\t\tfileItem.state = \"edit\";\n\t\t\t\t\t\tfileItem.invalid = true;\n\t\t\t\t\t\tfileItem.invalidTitle = \"File size exceeds limit\";\n\t\t\t\t\t\tfileItem.invalidText =\n\t\t\t\t\t\t\t\"500kb max file size. Select a new file and try again.\";\n\t\t\t\t\t}, 1500);\n\t\t\t\t}\n\t\t\t}\n\t\t});\n\t}\n}\n",
             "assetsDirs": [],
             "styleUrlsData": "",
             "stylesData": "",
@@ -75417,7 +75494,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/combobox/combobox.stories.ts",
+                "file": "src/content-switcher/content-switcher.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -75427,7 +75504,7 @@
                 "name": "Basic",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/content-switcher/content-switcher.stories.ts",
+                "file": "src/combobox/combobox.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
@@ -78329,21 +78406,21 @@
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/combobox/combobox.stories.ts",
+                "file": "src/content-switcher/content-switcher.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[size]=\"size\"\n\t\t\t[appendInline]=\"appendInline\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[items]=\"items\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[dropUp]=\"dropUp\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t(selected)=\"selected($event)\"\n\t\t\t(submit)=\"submit($event)\"\n\t\t\t(search)=\"search($event)\"\n\t\t\t(clear)=\"clear($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t\t<span>{{model | json}}</span>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-content-switcher (selected)=\"selected($event)\">\n\t\t\t<button cdsContentOption name=\"First\">First section</button>\n\t\t\t<button cdsContentOption name=\"Second\">Second section</button>\n\t\t\t<button cdsContentOption name=\"Third\">Third section</button>\n\t\t</cds-content-switcher>\n\t`\n})"
             },
             {
                 "name": "Template",
                 "ctype": "miscellaneous",
                 "subtype": "variable",
-                "file": "src/content-switcher/content-switcher.stories.ts",
+                "file": "src/combobox/combobox.stories.ts",
                 "deprecated": false,
                 "deprecationMessage": "",
                 "type": "",
-                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-content-switcher (selected)=\"selected($event)\">\n\t\t\t<button cdsContentOption name=\"First\">First section</button>\n\t\t\t<button cdsContentOption name=\"Second\">Second section</button>\n\t\t\t<button cdsContentOption name=\"Third\">Third section</button>\n\t\t</cds-content-switcher>\n\t`\n})"
+                "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[size]=\"size\"\n\t\t\t[appendInline]=\"appendInline\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[items]=\"items\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[dropUp]=\"dropUp\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t(selected)=\"selected($event)\"\n\t\t\t(submit)=\"submit($event)\"\n\t\t\t(search)=\"search($event)\"\n\t\t\t(clear)=\"clear($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t\t<span>{{model | json}}</span>\n\t`\n})"
             },
             {
                 "name": "Template",
@@ -82482,6 +82559,28 @@
                     "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-button\n\t\t\t[size]=\"size\"\n\t\t\t[menuAlignment]=\"menuAlignment\"\n\t\t\t[label]=\"label\"\n\t\t\t[description]=\"description\"\n\t\t\t[tooltipAutoAlign]=\"tooltipAutoAlign\"\n\t\t\t[tooltipPlacement]=\"tooltipPlacement\">\n\t\t\t<cds-menu-item label=\"First action with a long label description\"></cds-menu-item>\n\t\t\t<cds-menu-item label=\"Second action\" (click)=\"onClick($event)\"></cds-menu-item>\n\t\t\t<cds-menu-item label=\"Third action\" [disabled]=\"true\"></cds-menu-item>\n\t\t\t<cds-menu-divider></cds-menu-divider>\n\t\t\t<cds-menu-item label=\"Cut\" info=\"⌘X\"></cds-menu-item>\n\t\t\t<cds-menu-item label=\"Option with icon\" icon=\"calendar\"></cds-menu-item>\n\t\t\t<cds-menu-divider></cds-menu-divider>\n\t\t\t<cds-menu-item label=\"Danger action\" [danger]=\"true\"></cds-menu-item>\n\t\t</cds-combo-button>\n\t`\n})"
                 }
             ],
+            "src/content-switcher/content-switcher.stories.ts": [
+                {
+                    "name": "Basic",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/content-switcher/content-switcher.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "Template.bind({})"
+                },
+                {
+                    "name": "Template",
+                    "ctype": "miscellaneous",
+                    "subtype": "variable",
+                    "file": "src/content-switcher/content-switcher.stories.ts",
+                    "deprecated": false,
+                    "deprecationMessage": "",
+                    "type": "",
+                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-content-switcher (selected)=\"selected($event)\">\n\t\t\t<button cdsContentOption name=\"First\">First section</button>\n\t\t\t<button cdsContentOption name=\"Second\">Second section</button>\n\t\t\t<button cdsContentOption name=\"Third\">Third section</button>\n\t\t</cds-content-switcher>\n\t`\n})"
+                }
+            ],
             "src/combobox/combobox.stories.ts": [
                 {
                     "name": "Basic",
@@ -82614,28 +82713,6 @@
                     "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-combo-box\n\t\t\t[(ngModel)]=\"model\"\n\t\t\t[disabled]=\"disabled\"\n\t\t\t[readonly]=\"readonly\"\n\t\t\t[invalid]=\"invalid\"\n\t\t\t[size]=\"size\"\n\t\t\t[appendInline]=\"appendInline\"\n\t\t\t[invalidText]=\"invalidText\"\n\t\t\t[warn]=\"warn\"\n\t\t\t[warnText]=\"warnText\"\n\t\t\t[label]=\"label\"\n\t\t\t[hideLabel]=\"hideLabel\"\n\t\t\t[helperText]=\"helperText\"\n\t\t\t[items]=\"items\"\n\t\t\t[theme]=\"theme\"\n\t\t\t[dropUp]=\"dropUp\"\n\t\t\t[fluid]=\"fluid\"\n\t\t\t(selected)=\"selected($event)\"\n\t\t\t(submit)=\"submit($event)\"\n\t\t\t(search)=\"search($event)\"\n\t\t\t(clear)=\"clear($event)\">\n\t\t\t<cds-dropdown-list></cds-dropdown-list>\n\t\t</cds-combo-box>\n\t\t<span>{{model | json}}</span>\n\t`\n})"
                 }
             ],
-            "src/content-switcher/content-switcher.stories.ts": [
-                {
-                    "name": "Basic",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/content-switcher/content-switcher.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "Template.bind({})"
-                },
-                {
-                    "name": "Template",
-                    "ctype": "miscellaneous",
-                    "subtype": "variable",
-                    "file": "src/content-switcher/content-switcher.stories.ts",
-                    "deprecated": false,
-                    "deprecationMessage": "",
-                    "type": "",
-                    "defaultValue": "(args) => ({\n\tprops: args,\n\ttemplate: `\n\t\t<cds-content-switcher (selected)=\"selected($event)\">\n\t\t\t<button cdsContentOption name=\"First\">First section</button>\n\t\t\t<button cdsContentOption name=\"Second\">Second section</button>\n\t\t\t<button cdsContentOption name=\"Third\">Third section</button>\n\t\t</cds-content-switcher>\n\t`\n})"
-                }
-            ],
             "src/context-menu/context-menu.stories.ts": [
                 {
                     "name": "Basic",
@@ -89364,7 +89441,7 @@
                 "linktype": "component",
                 "name": "FileUploaderWithCustomFileStory",
                 "coveragePercent": 0,
-                "coverageCount": "0/13",
+                "coverageCount": "0/17",
                 "status": "low"
             },
             {