feat(datepicker): add week number i18n label

demo/src/app/components/datepicker/demos/i18n/datepicker-i18n.html

@@ -8,5 +8,4 @@
 
 <p>Datepicker in French</p>
 
-<ngb-datepicker [(ngModel)]="model"></ngb-datepicker>
-
+<ngb-datepicker [(ngModel)]="model" [showWeekNumbers]="true"></ngb-datepicker>

demo/src/app/components/datepicker/demos/i18n/datepicker-i18n.ts

@@ -5,6 +5,7 @@ const I18N_VALUES = {
   'fr': {
     weekdays: ['Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa', 'Di'],
     months: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin', 'Juil', 'Aou', 'Sep', 'Oct', 'Nov', 'Déc'],
+    weekLabel: 'sem'
   }
   // other languages you would support
 };
@@ -19,30 +20,22 @@ export class I18n {
 // Define custom service providing the months and weekdays translations
 @Injectable()
 export class CustomDatepickerI18n extends NgbDatepickerI18n {
+  constructor(private _i18n: I18n) { super(); }
 
-  constructor(private _i18n: I18n) {
-    super();
-  }
+  getWeekdayShortName(weekday: number): string { return I18N_VALUES[this._i18n.language].weekdays[weekday - 1]; }
+  getMonthShortName(month: number): string { return I18N_VALUES[this._i18n.language].months[month - 1]; }
+  getMonthFullName(month: number): string { return this.getMonthShortName(month); }
 
-  getWeekdayShortName(weekday: number): string {
-    return I18N_VALUES[this._i18n.language].weekdays[weekday - 1];
-  }
-  getMonthShortName(month: number): string {
-    return I18N_VALUES[this._i18n.language].months[month - 1];
-  }
-  getMonthFullName(month: number): string {
-    return this.getMonthShortName(month);
-  }
+  getDayAriaLabel(date: NgbDateStruct): string { return `${date.day}-${date.month}-${date.year}`; }
 
-  getDayAriaLabel(date: NgbDateStruct): string {
-    return `${date.day}-${date.month}-${date.year}`;
-  }
+  get weekShortLabel(): string { return I18N_VALUES[this._i18n.language].weekLabel; }
 }
 
 @Component({
   selector: 'ngbd-datepicker-i18n',
   templateUrl: './datepicker-i18n.html',
-  providers: [I18n, {provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n}] // define custom NgbDatepickerI18n provider
+  providers:
+      [I18n, {provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n}]  // define custom NgbDatepickerI18n provider
 })
 export class NgbdDatepickerI18n {
   model: NgbDateStruct;

src/datepicker/datepicker-i18n.spec.ts

@@ -56,4 +56,6 @@ describe('ngb-datepicker-i18n-default', () => {
     expect(i18n.getYearNumerals(0)).toBe('0');
     expect(i18n.getYearNumerals(2000)).toBe('2000');
   });
+
+  it('should generate week short label', () => { expect(i18n.weekShortLabel).toBe(''); });
 });

src/datepicker/datepicker-i18n.ts

@@ -87,6 +87,13 @@ export abstract class NgbDatepickerI18n {
    * @since 3.0.0
    */
   getYearNumerals(year: number): string { return `${year}`; }
+
+  /**
+   * Returns the week label to display in the heading of the month view.
+   *
+   * @since 6.1.0
+   */
+  get weekShortLabel(): string { return ''; }
 }
 
 /**

src/datepicker/datepicker-integration.spec.ts

@@ -56,6 +56,9 @@ describe('ngb-datepicker integration', () => {
 
       // reversed years: 1998 -> 9881
       getYearNumerals(year: number) { return `${year}`.split('').reverse().join(''); }
+
+      // alphabetic week short name
+      get weekShortLabel() { return ALPHABET.substring(0, 2); }
     }
 
     let fixture: ComponentFixture<TestComponent>;
@@ -111,6 +114,12 @@ describe('ngb-datepicker integration', () => {
       const monthNames = Array.from(monthNameElements).map((o: HTMLElement) => o.innerText.trim());
       expect(monthNames).toEqual(['A 8102', 'B 8102']);
     });
+
+    it('should allow overriding week label', () => {
+      const weekLabelElement = (fixture.nativeElement as HTMLElement).querySelector('.ngb-dp-showweek') as HTMLElement;
+      const weekLabel = weekLabelElement.innerText.trim();
+      expect(weekLabel).toEqual(ALPHABET.substring(0, 2));
+    });
   });
 
   describe('i18n-month-label', () => {

src/datepicker/datepicker-month.spec.ts

@@ -33,6 +33,10 @@ function getDates(element: HTMLElement): HTMLElement[] {
   return <HTMLElement[]>Array.from(element.querySelectorAll('.ngb-dp-day'));
 }
 
+function getWeekLabel(element: HTMLElement): HTMLElement | null {
+  return element.querySelector('.ngb-dp-showweek');
+}
+
 function expectWeekNumbers(element: HTMLElement, weeknumbers: string[]) {
   const result = getWeekNumbers(element).map(td => td.innerText.trim());
   expect(result).toEqual(weeknumbers);
@@ -43,6 +47,12 @@ function expectDates(element: HTMLElement, dates: string[]) {
   expect(result).toEqual(dates);
 }
 
+function expectWeekLabel(element: HTMLElement, weekLabel: string) {
+  const weekLabelElement = getWeekLabel(element);
+  const result = weekLabelElement ? weekLabelElement.innerText.trim() : '';
+  expect(result).toEqual(weekLabel);
+}
+
 @Injectable()
 class MockDatepickerService extends NgbDatepickerService {
   getMonth(struct: NgbDateStruct) {
@@ -236,10 +246,13 @@ describe('ngb-datepicker-month', () => {
     const fixture = createTestComponent();
 
     expectWeekNumbers(fixture.nativeElement, ['1', '2', '3']);
+    expectWeekLabel(fixture.nativeElement, '');
 
     fixture.componentInstance.showWeekNumbers = false;
     fixture.detectChanges();
+
     expectWeekNumbers(fixture.nativeElement, []);
+    expectWeekLabel(fixture.nativeElement, '');
   });
 
   it('should use custom template to display dates', () => {

src/datepicker/datepicker-month.ts

@@ -21,7 +21,7 @@ import {NgbDateStruct} from './ngb-date-struct';
   styleUrls: ['./datepicker-month.scss'],
   template: `
     <div *ngIf="viewModel.weekdays.length > 0" class="ngb-dp-week ngb-dp-weekdays" role="row">
-      <div *ngIf="datepicker.showWeekNumbers" class="ngb-dp-weekday ngb-dp-showweek"></div>
+      <div *ngIf="datepicker.showWeekNumbers" class="ngb-dp-weekday ngb-dp-showweek small">{{ i18n.weekShortLabel }}</div>
       <div *ngFor="let weekday of viewModel.weekdays" class="ngb-dp-weekday small" role="columnheader">{{ weekday }}</div>
     </div>
     <ng-template ngFor let-week [ngForOf]="viewModel.weeks">