Skip to content

Commit 565b83b

Browse files
authored
Merge pull request #2681 from Akshat55/webpack-flatpickr-l10n
fix: access correct object property to resolve webpack import error
2 parents 268fbe1 + 6ddf745 commit 565b83b

File tree

2 files changed

+21
-16
lines changed

2 files changed

+21
-16
lines changed

src/datepicker/datepicker.component.ts

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import {
1313
AfterViewChecked,
1414
AfterViewInit,
1515
ViewChild,
16-
AfterContentInit,
1716
OnInit,
1817
SimpleChange
1918
} from "@angular/core";
@@ -23,9 +22,25 @@ import { NG_VALUE_ACCESSOR } from "@angular/forms";
2322
import { carbonFlatpickrMonthSelectPlugin } from "./carbon-flatpickr-month-select";
2423
import * as languages from "flatpickr/dist/l10n/index";
2524
import { DatePickerInput } from "carbon-components-angular/datepicker-input";
26-
import { ElementService } from "carbon-components-angular/utils";
2725
import { I18n } from "carbon-components-angular/i18n";
2826

27+
/**
28+
* Due to type error, we have to use square brackets property accessor
29+
* There is a webpack issue when attempting to access exported languages from flatpickr l10n Angular 14+ apps
30+
* languages.default[locale] fails in app consuming CCA library but passes in test
31+
* languages.default.default[locale] fails in test but works in app consuming CCA library.
32+
*
33+
* To please both scenarios, we are adding a condition to prevent tests from failing
34+
*/
35+
if (languages.default?.default["en"]?.weekdays) {
36+
(languages.default.default["en"].weekdays.shorthand as string[]) = languages.default.default["en"].weekdays.longhand.map(day => {
37+
if (day === "Thursday") {
38+
return "Th";
39+
}
40+
return day.charAt(0);
41+
});
42+
}
43+
2944
/**
3045
* [See demo](../../?path=/story/components-date-picker--single)
3146
*/
@@ -101,8 +116,7 @@ export class DatePicker implements
101116
OnDestroy,
102117
OnChanges,
103118
AfterViewChecked,
104-
AfterViewInit,
105-
AfterContentInit {
119+
AfterViewInit {
106120
private static datePickerCount = 0;
107121

108122
/**
@@ -214,7 +228,7 @@ export class DatePicker implements
214228
mode: this.range ? "range" : "single",
215229
plugins,
216230
dateFormat: this.dateFormat,
217-
locale: languages.default[this.language]
231+
locale: languages.default?.default[this.language] || languages.default[this.language]
218232
});
219233
}
220234

@@ -330,16 +344,6 @@ export class DatePicker implements
330344
}
331345
}
332346

333-
ngAfterContentInit() {
334-
(languages.default.en.weekdays.shorthand as string[])
335-
= languages.default.en.weekdays.longhand.map(day => {
336-
if (day === "Thursday") {
337-
return "Th";
338-
}
339-
return day.charAt(0);
340-
});
341-
}
342-
343347
@HostListener("focusin")
344348
onFocus() {
345349
// Updates the month manually when calendar mode is range because month

src/datepicker/datepicker.stories.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ export default {
1717
invalid: false,
1818
warnText: "This is a warning",
1919
warn: false,
20-
disabled: false
20+
disabled: false,
21+
language: "en"
2122
},
2223
argTypes: {
2324
theme: {

0 commit comments

Comments
 (0)