diff --git a/src/datepicker/datepicker.component.ts b/src/datepicker/datepicker.component.ts index fcbc2ccf71..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"; @@ -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 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: {