Merge pull request #2681 from Akshat55/webpack-flatpickr-l10n

fix: access correct object property to resolve webpack import error

Author: Akshat55

src/datepicker/datepicker.component.ts

@@ -13,7 +13,6 @@ import {
 	AfterViewChecked,
 	AfterViewInit,
 	ViewChild,
-	AfterContentInit,
 	OnInit,
 	SimpleChange
 } from "@angular/core";
@@ -23,9 +22,25 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { carbonFlatpickrMonthSelectPlugin } from "./carbon-flatpickr-month-select";
 import * as languages from "flatpickr/dist/l10n/index";
 import { DatePickerInput } from "carbon-components-angular/datepicker-input";
-import { ElementService } from "carbon-components-angular/utils";
 import { I18n } from "carbon-components-angular/i18n";
 
+/**
+ * Due to type error, we have to use square brackets property accessor
+ * There is a webpack issue when attempting to access exported languages from flatpickr l10n Angular 14+ apps
+ * languages.default[locale] fails in app consuming CCA library but passes in test
+ * languages.default.default[locale] fails in test but works in app consuming CCA library.
+ *
+ * To please both scenarios, we are adding a condition to prevent tests from failing
+ */
+if (languages.default?.default["en"]?.weekdays) {
+	(languages.default.default["en"].weekdays.shorthand as string[]) = languages.default.default["en"].weekdays.longhand.map(day => {
+		if (day === "Thursday") {
+			return "Th";
+		}
+		return day.charAt(0);
+	});
+}
+
 /**
  * [See demo](../../?path=/story/components-date-picker--single)
  */
@@ -101,8 +116,7 @@ export class DatePicker implements
 	OnDestroy,
 	OnChanges,
 	AfterViewChecked,
-	AfterViewInit,
-	AfterContentInit {
+	AfterViewInit {
 	private static datePickerCount = 0;
 
 	/**
@@ -214,7 +228,7 @@ export class DatePicker implements
 			mode: this.range ? "range" : "single",
 			plugins,
 			dateFormat: this.dateFormat,
-			locale: languages.default[this.language]
+			locale: languages.default?.default[this.language] || languages.default[this.language]
 		});
 	}
 
@@ -330,16 +344,6 @@ export class DatePicker implements
 		}
 	}
 
-	ngAfterContentInit() {
-		(languages.default.en.weekdays.shorthand as string[])
-			= languages.default.en.weekdays.longhand.map(day => {
-				if (day === "Thursday") {
-					return "Th";
-				}
-				return day.charAt(0);
-			});
-	}
-
 	@HostListener("focusin")
 	onFocus() {
 		// Updates the month manually when calendar mode is range because month

src/datepicker/datepicker.stories.ts

@@ -17,7 +17,8 @@ export default {
 		invalid: false,
 		warnText: "This is a warning",
 		warn: false,
-		disabled: false
+		disabled: false,
+		language: "en"
 	},
 	argTypes: {
 		theme: {