From 229f87dcd8c95f0bd404ba8b3a6f2aa368e6aadd Mon Sep 17 00:00:00 2001
From: Akshat Patel <akshat@live.ca>
Date: Wed, 23 Aug 2023 20:26:54 -0400
Subject: [PATCH 1/2] fix: access correct object property to resolve webpack
 import error

Signed-off-by: Akshat Patel <akshat@live.ca>
---
 src/datepicker/datepicker.component.ts | 25 +++++++++++--------------
 src/datepicker/datepicker.stories.ts   |  3 ++-
 2 files changed, 13 insertions(+), 15 deletions(-)

diff --git a/src/datepicker/datepicker.component.ts b/src/datepicker/datepicker.component.ts
index fcbc2ccf71..da96a19ff8 100644
--- a/src/datepicker/datepicker.component.ts
+++ b/src/datepicker/datepicker.component.ts
@@ -21,11 +21,19 @@ import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
 import flatpickr from "flatpickr";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { carbonFlatpickrMonthSelectPlugin } from "./carbon-flatpickr-month-select";
-import * as languages from "flatpickr/dist/l10n/index";
+import 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
+(languages.default["en"].weekdays.shorthand as string[])
+= languages.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 +109,7 @@ export class DatePicker implements
 	OnDestroy,
 	OnChanges,
 	AfterViewChecked,
-	AfterViewInit,
-	AfterContentInit {
+	AfterViewInit {
 	private static datePickerCount = 0;
 
 	/**
@@ -330,16 +337,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
diff --git a/src/datepicker/datepicker.stories.ts b/src/datepicker/datepicker.stories.ts
index ab3560be0d..f27ee196ba 100644
--- a/src/datepicker/datepicker.stories.ts
+++ b/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: {

From 6ddf745b53d55612bf3e81df6bc6e435f4551658 Mon Sep 17 00:00:00 2001
From: Akshat Patel <akshat@live.ca>
Date: Wed, 23 Aug 2023 23:02:19 -0400
Subject: [PATCH 2/2] fix: Add property check before updating shorthand for
 english locale

Signed-off-by: Akshat Patel <akshat@live.ca>
---
 src/datepicker/datepicker.component.ts | 29 ++++++++++++++++----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/datepicker/datepicker.component.ts b/src/datepicker/datepicker.component.ts
index da96a19ff8..714cbf0a1a 100644
--- a/src/datepicker/datepicker.component.ts
+++ b/src/datepicker/datepicker.component.ts
@@ -13,7 +13,6 @@ import {
 	AfterViewChecked,
 	AfterViewInit,
 	ViewChild,
-	AfterContentInit,
 	OnInit,
 	SimpleChange
 } from "@angular/core";
@@ -21,18 +20,26 @@ import rangePlugin from "flatpickr/dist/plugins/rangePlugin";
 import flatpickr from "flatpickr";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { carbonFlatpickrMonthSelectPlugin } from "./carbon-flatpickr-month-select";
-import languages from "flatpickr/dist/l10n/index";
+import * as languages from "flatpickr/dist/l10n/index";
 import { DatePickerInput } from "carbon-components-angular/datepicker-input";
 import { I18n } from "carbon-components-angular/i18n";
 
-// Due to type error, we have to use square brackets property accessor
-(languages.default["en"].weekdays.shorthand as string[])
-= languages.default["en"].weekdays.longhand.map(day => {
-	if (day === "Thursday") {
-		return "Th";
-	}
-	return day.charAt(0);
-});
+/**
+ * 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)
@@ -221,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]
 		});
 	}