Merge branch 'NG-ZORRO:master' into master

components/core/testing/component-bed.ts

@@ -5,12 +5,12 @@
 
 import { CommonModule } from '@angular/common';
 import { DebugElement, NgModule, NO_ERRORS_SCHEMA, Type } from '@angular/core';
-import { ComponentFixture, TestBed, TestBedStatic } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 type ComponentBedOptions = Pick<NgModule, 'providers' | 'declarations' | 'imports'>;
 export interface ComponentBed<T> {
-  bed: TestBedStatic;
+  bed: TestBed;
   fixture: ComponentFixture<T>;
   nativeElement: HTMLElement;
   debugElement: DebugElement;

components/date-picker/date-picker.component.spec.ts

@@ -573,6 +573,18 @@ describe('NzDatePickerComponent', () => {
       expect(element.classList.contains('ant-picker-dropdown-placement-bottomRight')).toBe(false);
       expect(element.classList.contains('ant-picker-dropdown-placement-topRight')).toBe(true);
     }));
+
+    it('should support nzShowWeekNumber', fakeAsync(() => {
+      fixtureInstance.nzShowWeekNumber = true;
+      fixture.detectChanges();
+      openPickerByClickTrigger();
+      expect(queryFromOverlay('.ant-picker-week-panel-row .ant-picker-cell-week')).toBeDefined();
+      fixtureInstance.nzShowWeekNumber = false;
+      fixture.detectChanges();
+      tick(500);
+      openPickerByClickTrigger();
+      expect(queryFromOverlay('.ant-picker-week-panel-row .ant-picker-cell-week')).toBeNull();
+    }));
   });
 
   describe('panel switch and move forward/afterward', () => {
@@ -1138,7 +1150,7 @@ describe('NzDatePickerComponent', () => {
     return queryFromOverlay(`.${PREFIX_CLASS}-header-super-next-btn`);
   }
 
-  describe('ngModel value accesors', () => {
+  describe('ngModel value accessors', () => {
     beforeEach(() => (fixtureInstance.useSuite = 3));
 
     it('should specified date provide by "modelValue" be chosen', fakeAsync(() => {
@@ -1356,14 +1368,15 @@ describe('in form', () => {
         [nzInline]="nzInline"
         [nzBackdrop]="nzBackdrop"
         [nzPlacement]="nzPlacement"
+        [nzShowWeekNumber]="nzShowWeekNumber"
       ></nz-date-picker>
       <ng-template #tplDateRender let-current>
         <div [class.test-first-day]="current.getDate() === 1">{{ current.getDate() }}</div>
       </ng-template>
       <ng-template #tplExtraFooter>TEST_EXTRA_FOOTER</ng-template>
 
       <!-- Suite 2 -->
-      <!-- use another picker to avoid nzOpen's side-effects beacuse nzOpen act as "true" if used -->
+      <!-- use another picker to avoid nzOpen's side-effects because nzOpen acts as "true" if used -->
       <nz-date-picker *ngSwitchCase="2" [nzOpen]="nzOpen" (nzOnOpenChange)="nzOnOpenChange($event)"></nz-date-picker>
 
       <!-- Suite 3 -->
@@ -1416,6 +1429,7 @@ class NzTestDatePickerComponent {
   nzInline = false;
   nzBackdrop = false;
   nzPlacement = 'bottomLeft';
+  nzShowWeekNumber = false;
 
   // nzRanges;
   nzOnPanelChange(_: string): void {}

components/date-picker/date-picker.component.ts

@@ -185,7 +185,7 @@ export type NzPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
           [isRange]="isRange"
           [inline]="nzInline"
           [defaultPickerValue]="nzDefaultPickerValue"
-          [showWeek]="nzMode === 'week'"
+          [showWeek]="nzShowWeekNumber || nzMode === 'week'"
           [panelMode]="panelMode"
           (panelModeChange)="onPanelModeChange($event)"
           (calendarChange)="onCalendarChange($event)"
@@ -306,6 +306,7 @@ export class NzDatePickerComponent implements OnInit, OnChanges, OnDestroy, Afte
   @Input() @WithConfig() nzBackdrop = false;
   @Input() nzId: string | null = null;
   @Input() nzPlacement: NzPlacement = 'bottomLeft';
+  @Input() @InputBoolean() nzShowWeekNumber: boolean = false;
 
   // TODO(@wenqi73) The PanelMode need named for each pickers and export
   @Output() readonly nzOnPanelChange = new EventEmitter<NzDateMode | NzDateMode[] | string | string[]>();

components/date-picker/date-range-popup.component.ts

@@ -57,7 +57,7 @@ import { getTimeConfig, isAllowedDate, PREFIX_CLASS } from './util';
     <ng-container *ngIf="isRange; else singlePanel">
       <div class="{{ prefixCls }}-range-wrapper {{ prefixCls }}-date-range-wrapper">
         <div class="{{ prefixCls }}-range-arrow" [style.left.px]="datePickerService?.arrowLeft"></div>
-        <div class="{{ prefixCls }}-panel-container">
+        <div class="{{ prefixCls }}-panel-container {{ showWeek ? prefixCls + '-week-number' : '' }}">
           <div class="{{ prefixCls }}-panels">
             <ng-container *ngIf="hasTimePicker; else noTimePicker">
               <ng-container

components/date-picker/demo/week-number.md

@@ -0,0 +1,14 @@
+---
+order: 16
+title:
+  zh-CN: 显示周数
+  en-US: Week Number
+---
+
+## zh-CN
+
+使用 `nzShowWeekNumber` 显示周数
+
+## en-US
+
+Display week numbers with `nzShowWeekNumber`.

components/date-picker/demo/week-number.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-date-picker-week-number',
+  template: `
+    <nz-radio-group [(ngModel)]="showWeekNumber">
+      <label nz-radio-button [nzValue]="true">true</label>
+      <label nz-radio-button [nzValue]="false">false</label>
+    </nz-radio-group>
+    <br />
+    <br />
+    <nz-date-picker [nzShowWeekNumber]="showWeekNumber"></nz-date-picker>
+    <br />
+    <nz-range-picker [nzShowWeekNumber]="showWeekNumber"></nz-range-picker>
+  `,
+  styles: [
+    `
+      nz-date-picker,
+      nz-range-picker {
+        margin: 0 8px 12px 0;
+      }
+    `
+  ]
+})
+export class NzDemoDatePickerWeekNumberComponent {
+  showWeekNumber: boolean = false;
+}

components/date-picker/doc/index.en-US.md

@@ -78,6 +78,7 @@ The following APIs are shared by nz-date-picker, nz-range-picker.
 | `[nzShowTime]` | to provide an additional time selection | `object \| boolean` | [TimePicker Options](/components/time-picker/en#api) |
 | `[nzShowToday]` | whether to show 'Today' button | `boolean` | `true` |
 | `[nzShowNow]` | whether to show 'Now' button on panel when `nzShowTime` is set | `boolean` | `true` |
+| `[nzShowWeekNumber]` | whether to show the week number on each row (Only supported by date picker. Week picker always shows week numbers) | `boolean` | `false` |
 | `(nzOnOk)` | callback when click ok button | `EventEmitter<Date>` | - |
 
 ### nz-range-picker
@@ -95,6 +96,7 @@ The following APIs are shared by nz-date-picker, nz-range-picker.
 | -------- | ----------- | ---- | ------- |
 | `[nzShowTime]` | to provide an additional time selection | `object \| boolean` | [TimePicker Options](/components/time-picker/en#api) |
 | `[nzDisabledTime]` | to specify the time that cannot be selected | `(current: Date, partial: 'start' \| 'end') => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds }` | - |
+| `[nzShowWeekNumber]` | whether to show the week number on each row (Only supported by date picker. Week picker always shows week numbers) | `boolean` | `false` |
 | `(nzOnOk)` | click ok callback | `EventEmitter<Date[]>` | - |
 
 > Currently, supported `nz-time-picker` parameters in `nzShowTime` are: `nzFormat`, `nzHourStep`, `nzMinuteStep`, `nzSecondStep`, `nzDisabledHours`, `nzDisabledMinutes`, `nzDisabledSeconds`, `nzHideDisabledOptions`, `nzDefaultOpenValue`, `nzAddOn`

components/date-picker/doc/index.zh-CN.md

@@ -79,6 +79,7 @@ registerLocaleData(zh);
 | `[nzShowTime]` | 增加时间选择功能 | `object \| boolean` | [TimePicker Options](/components/time-picker/zh#api) |
 | `[nzShowToday]` | 是否展示“今天”按钮 | `boolean` | `true` |
 | `[nzShowNow]` | 当设定了`nzShowTime`的时候，面板是否显示“此刻”按钮 | `boolean` | `true` |
+| `[nzShowWeekNumber]` | 是否在每一行显示周数（仅日期选择器支持。周选择器始终显示周数） | `boolean` | `false` |
 | `(nzOnOk)` | 点击确定按钮的回调 | `EventEmitter<Date>` | - |
 
 
@@ -96,6 +97,7 @@ registerLocaleData(zh);
 | --- | --- | --- | --- |
 | `[nzShowTime]` | 增加时间选择功能 | `object \| boolean` | [TimePicker Options](/components/time-picker/zh#api) |
 | `[nzDisabledTime]` | 不可选择的时间 | `(current: Date, partial: 'start' \| 'end') => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds }` | - |
+| `[nzShowWeekNumber]` | 是否在每一行显示周数（仅日期选择器支持。周选择器始终显示周数） | `boolean` | `false` |
 | `(nzOnOk)` | 点击确定按钮的回调 | `EventEmitter<Date[]>` | - |
 
 > `nzShowTime` 中当前支持的 `nz-time-picker` 参数有：`nzFormat`, `nzHourStep`, `nzMinuteStep`, `nzSecondStep`, `nzDisabledHours`, `nzDisabledMinutes`, `nzDisabledSeconds`, `nzHideDisabledOptions`, `nzDefaultOpenValue`, `nzAddOn`

components/date-picker/inner-popup.component.ts

@@ -106,10 +106,12 @@ import { PREFIX_CLASS } from './util';
             <date-header
               [(value)]="activeDate"
               [locale]="locale"
-              [showSuperPreBtn]="showWeek ? enablePrevNext('prev', 'week') : enablePrevNext('prev', 'date')"
-              [showSuperNextBtn]="showWeek ? enablePrevNext('next', 'week') : enablePrevNext('next', 'date')"
-              [showPreBtn]="showWeek ? enablePrevNext('prev', 'week') : enablePrevNext('prev', 'date')"
-              [showNextBtn]="showWeek ? enablePrevNext('next', 'week') : enablePrevNext('next', 'date')"
+              [showSuperPreBtn]="panelMode === 'week' ? enablePrevNext('prev', 'week') : enablePrevNext('prev', 'date')"
+              [showSuperNextBtn]="
+                panelMode === 'week' ? enablePrevNext('next', 'week') : enablePrevNext('next', 'date')
+              "
+              [showPreBtn]="panelMode === 'week' ? enablePrevNext('prev', 'week') : enablePrevNext('prev', 'date')"
+              [showNextBtn]="panelMode === 'week' ? enablePrevNext('next', 'week') : enablePrevNext('next', 'date')"
               (panelModeChange)="panelModeChange.emit($event)"
               (valueChange)="headerChange.emit($event)"
             ></date-header>
@@ -123,6 +125,7 @@ import { PREFIX_CLASS } from './util';
                 [cellRender]="dateRender"
                 [selectedValue]="selectedValue"
                 [hoverValue]="hoverValue"
+                [canSelectWeek]="panelMode === 'week'"
                 (valueChange)="onSelectDate($event)"
                 (cellHover)="cellHover.emit($event)"
               ></date-table>

components/date-picker/lib/abstract-table.ts

@@ -30,6 +30,7 @@ export abstract class AbstractTable implements OnInit, OnChanges {
   @Input() disabledDate?: (d: Date) => boolean;
   @Input() cellRender?: string | TemplateRef<Date> | FunctionProp<TemplateRef<Date> | string>;
   @Input() fullCellRender?: string | TemplateRef<Date> | FunctionProp<TemplateRef<Date> | string>;
+  @Input() canSelectWeek: boolean = false;
 
   @Output() readonly valueChange = new EventEmitter<CandyDate>();
   @Output() readonly cellHover = new EventEmitter<CandyDate>(); // Emitted when hover on a day by mouse enter
@@ -90,6 +91,7 @@ export abstract class AbstractTable implements OnInit, OnChanges {
       changes.disabledDate ||
       changes.locale ||
       changes.showWeek ||
+      changes.selectWeek ||
       this.isDateRealChange(changes.activeDate) ||
       this.isDateRealChange(changes.value) ||
       this.isDateRealChange(changes.selectedValue) ||

components/date-picker/lib/date-table.component.ts

@@ -103,16 +103,16 @@ export class DateTableComponent extends AbstractTable implements OnChanges, OnIn
         row.dateCells.push(cell);
       }
       row.classMap = {
-        [`ant-picker-week-panel-row`]: this.showWeek,
-        [`ant-picker-week-panel-row-selected`]: this.showWeek && row.isActive
+        [`ant-picker-week-panel-row`]: this.canSelectWeek,
+        [`ant-picker-week-panel-row-selected`]: this.canSelectWeek && row.isActive
       };
       weekRows.push(row);
     }
     return weekRows;
   }
 
   addCellProperty(cell: DateCell, date: CandyDate): void {
-    if (this.hasRangeValue() && !this.showWeek) {
+    if (this.hasRangeValue() && !this.canSelectWeek) {
       const [startHover, endHover] = this.hoverValue;
       const [startSelected, endSelected] = this.selectedValue;
       // Selected

components/date-picker/style/patch.less

@@ -17,3 +17,12 @@
   top: unset;
   left: unset;
 }
+
+// ensure table is correct width to display week numbers in date mode
+.@{picker-prefix-cls}-panel-container.@{picker-prefix-cls}-week-number .@{picker-prefix-cls}-date-panel .@{picker-prefix-cls}-content {
+  width: 100%;
+
+  th {
+    width: inherit;
+  }
+}

components/i18n/languages/it_IT.ts

@@ -21,7 +21,14 @@ export default {
   DatePicker: {
     lang: {
       placeholder: 'Selezionare la data',
+      yearPlaceholder: "Selezionare l'anno",
+      quarterPlaceholder: 'Selezionare il trimestre',
+      monthPlaceholder: 'Selezionare il mese',
+      weekPlaceholder: 'Selezionare la settimana',
       rangePlaceholder: ["Data d'inizio", 'Data di fine'],
+      rangeYearPlaceholder: ["Anno d'inizio", 'Anno di fine'],
+      rangeMonthPlaceholder: ["Mese d'inizio ", 'Mese di fine'],
+      rangeWeekPlaceholder: ["Settimana d'inizio", 'Settimana di fine'],
       locale: 'it_IT',
       today: 'Oggi',
       now: 'Adesso',
@@ -32,6 +39,7 @@ export default {
       year: 'Anno',
       timeSelect: "Seleziona l'ora",
       dateSelect: 'Seleziona la data',
+      weekSelect: 'Seleziona la settimana',
       monthSelect: 'Seleziona il mese',
       yearSelect: "Seleziona l'anno",
       decadeSelect: 'Seleziona il decennio',
@@ -50,16 +58,25 @@ export default {
       nextCentury: 'Prossimo secolo'
     },
     timePickerLocale: {
-      placeholder: "Selezionare l'orario"
+      placeholder: "Selezionare l'orario",
+      rangePlaceholder: ["Ora d'inizio", 'Ora di fine']
     }
   },
   TimePicker: {
-    placeholder: "Selezionare l'orario"
+    placeholder: "Selezionare l'orario",
+    rangePlaceholder: ["Ora d'inizio", 'Ora di fine']
   },
   Calendar: {
     lang: {
       placeholder: 'Selezionare la data',
+      yearPlaceholder: "Selezionare l'anno",
+      quarterPlaceholder: 'Selezionare il trimestre',
+      monthPlaceholder: 'Selezionare il mese',
+      weekPlaceholder: 'Selezionare la settimana',
       rangePlaceholder: ["Data d'inizio", 'Data di fine'],
+      rangeYearPlaceholder: ["Anno d'inizio", 'Anno di fine'],
+      rangeMonthPlaceholder: ["Mese d'inizio ", 'Mese di fine'],
+      rangeWeekPlaceholder: ["Settimana d'inizio", 'Settimana di fine'],
       locale: 'it_IT',
       today: 'Oggi',
       now: 'Adesso',
@@ -69,6 +86,7 @@ export default {
       month: 'Mese',
       year: 'Anno',
       timeSelect: "Seleziona l'ora",
+      weekSelect: 'Seleziona la settimana',
       dateSelect: 'Seleziona la data',
       monthSelect: 'Seleziona il mese',
       yearSelect: "Seleziona l'anno",
@@ -88,7 +106,8 @@ export default {
       nextCentury: 'Prossimo secolo'
     },
     timePickerLocale: {
-      placeholder: "Selezionare l'orario"
+      placeholder: "Selezionare l'orario",
+      rangePlaceholder: ["Ora d'inizio", 'Ora di fine']
     }
   },
   global: {
@@ -98,12 +117,20 @@ export default {
     filterTitle: 'Menù Filtro',
     filterConfirm: 'OK',
     filterReset: 'Reset',
+    filterEmptyText: 'Nessun filtro',
+    emptyText: 'Nessun dato',
     selectAll: 'Seleziona pagina corrente',
     selectInvert: 'Inverti selezione nella pagina corrente',
+    selectionAll: 'Seleziona tutti i dati',
     sortTitle: 'Ordina',
+    expand: 'Esapandi riga',
+    collapse: 'Chiudi riga',
     triggerDesc: 'Clicca per ordinare in modo discendente',
-    triggerAsc: 'Clicca per ordinare in modo ascendente',
-    cancelSort: 'Clicca per eliminare i filtri'
+    triggerAsc: 'Clicca per ordinare in modo ascendente',
+    cancelSort: 'Clicca per eliminare i filtri',
+    filterCheckall: 'Seleziona tutto',
+    filterSearchPlaceholder: 'Cerca nei filtri',
+    selectNone: 'Pulisci tutti i dati'
   },
   Modal: {
     okText: 'OK',
@@ -115,9 +142,16 @@ export default {
     cancelText: 'Annulla'
   },
   Transfer: {
+    titles: ['', ''],
     searchPlaceholder: 'Cerca qui',
     itemUnit: 'elemento',
-    itemsUnit: 'elementi'
+    itemsUnit: 'elementi',
+    remove: 'Rimuovi',
+    selectCurrent: 'Seleziona pagina corrente',
+    removeCurrent: 'Rimuovi pagina corrente',
+    selectAll: 'Selezione tutti i dati',
+    removeAll: 'Rimuovi tutti i dati',
+    selectInvert: 'Inverti selezione nella pagina corrente'
   },
   Upload: {
     uploading: 'Caricamento...',
@@ -137,5 +171,11 @@ export default {
     copy: 'copia',
     copied: 'copia effettuata',
     expand: 'espandi'
+  },
+  PageHeader: {
+    back: 'Indietro'
+  },
+  Image: {
+    preview: 'Anteprima'
   }
 };

package.json

@@ -33,9 +33,9 @@
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "^14.0.0",
-    "@angular-devkit/build-angular": "^14.1.0",
-    "@angular-devkit/core": "^14.1.0",
-    "@angular-devkit/schematics": "^14.1.0",
+    "@angular-devkit/build-angular": "~14.1.0",
+    "@angular-devkit/core": "~14.1.0",
+    "@angular-devkit/schematics": "~14.1.0",
     "@angular-eslint/builder": "^14.0.2",
     "@angular-eslint/eslint-plugin": "^14.0.2",
     "@angular-eslint/eslint-plugin-template": "^14.0.2",
@@ -57,9 +57,9 @@
     "@ant-design/dark-theme": "^2.0.2",
     "@commitlint/cli": "^13.0.0",
     "@commitlint/config-angular": "^13.0.0",
-    "@nguniversal/builders": "^14.0.3",
-    "@nguniversal/express-engine": "^14.0.3",
-    "@schematics/angular": "^14.1.0",
+    "@nguniversal/builders": "~14.1.0",
+    "@nguniversal/express-engine": "~14.1.0",
+    "@schematics/angular": "~14.1.0",
     "@stackblitz/sdk": "^1.5.2",
     "@types/d3": "^6.2.0",
     "@types/fs-extra": "^9.0.5",