Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular into update-10-1

Author: kdinev

CHANGELOG.md

@@ -2,19 +2,21 @@
 
 All notable changes for each version of this project will be documented in this file.
 ## 10.2.0
-- IgxInputGroup
+
+### General
+- `IgxInputGroup`
     - **Breaking Chage** - Removed `fluent`, `fluent_search`, `bootstrap`, and `indigo` as possible values for the `type` input property. 
     - **Behavioral Change** - The styling of the input group is now dictated by the theme being used. The remaining `types` - `line`, `border`, and `box` will only have effect on the styling when used with the `material` theme. The `search` type will affect styling when used with all themes. Changing the theme at runtime will not change the styling of the input group, a page refresh is required.
 
-## 10.2.0
-
 ### New Features
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - When triggering an export of the grid via the toolbar and the export takes more than 500 milliseconds, the export button becomes disabled and an indeterminate progress bar is shown at the bottom of the toolbar until the export is finished.
 - ` IGX_INPUT_GROUP_TYPE` injection token
     - Allows for setting an input group `type` on a global level, so all input-group instances, including components using such an instance as a template will have their input group type set to the one specified by the token. It can be overridden on a component level by explicitly setting a `type`.
 - ` IgxExcelExporterService`
     - Added `worksheetName` property to the `IgxExcelExporterOptions`, that allows setting the name of the worksheet.
+- `IgxTimePicker`
+    - Added a custom label functionality.
 
 ## 10.1.0
 

projects/igniteui-angular/src/lib/calendar/calendar-helper-utils.ts

@@ -9,6 +9,9 @@ export class HelperTestFunctions {
     public static MODAL_OVERLAY_CSSCLASS = 'igx-overlay__wrapper--modal';
 
     public static CALENDAR_CSSCLASS = '.igx-calendar';
+    public static CALENDAR_WEEK_NUMBER_CLASS = '.igx-calendar__date--week-number';
+    public static CALENDAR_WEEK_NUMBER_ITEM_CLASS = '.igx-calendar__date-content--week-number';
+    public static CALENDAR_WEEK_NUMBER_LABEL_CLASS = '.igx-calendar__label--week-number';
     public static CALENDAR_HEADER_CSSCLASS = '.igx-calendar__header';
     public static CALENDAR_HEADER_YEAR_CSSCLASS = '.igx-calendar__header-year';
     public static CALENDAR_HEADER_DATE_CSSCLASS = '.igx-calendar__header-date';

projects/igniteui-angular/src/lib/calendar/calendar.component.html

@@ -57,6 +57,7 @@ <h2 class="igx-calendar__header-date">
                 [disabledDates]="disabledDates"
                 [specialDates]="specialDates"
                 [hideOutsideDays]="hideOutsideDays"
+                [showWeekNumbers]="showWeekNumbers"
                 (onViewChanging)="viewChanging($event)"
                 (onDateSelection)="childClicked($event)">
         </igx-days-view>

projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts

@@ -337,7 +337,7 @@ describe('IgxCalendar - ', () => {
                 // 6 weeks + week header
                 expect(calendarRows.length).toEqual(7);
 
-                // 7 calendar rows * 7 elements in each
+                // 6 calendar rows * 7 elements in each
                 expect(
                     dom.queryAll(By.css(`${HelperTestFunctions.CALENDAR_ROW_CSSCLASS} > igx-day-item`)).length
                 ).toEqual(42);
@@ -360,6 +360,45 @@ describe('IgxCalendar - ', () => {
                 expect(calendarHeader).toBeFalsy();
             });
 
+            it('Should properly render calendar DOM with week numbers enabled', () => {
+                const today = new Date(Date.now());
+                calendar.viewDate = today;
+                calendar.showWeekNumbers = true;
+                fixture.detectChanges();
+
+                const calendarRows = dom.queryAll(By.css(HelperTestFunctions.CALENDAR_ROW_CSSCLASS));
+                expect(calendarRows.length).toEqual(7);
+
+                // 6 calendar rows * 8 elements in each
+                expect(
+                    dom.queryAll(By.css(`${HelperTestFunctions.CALENDAR_ROW_CSSCLASS} > igx-day-item`)).length +
+                    dom.queryAll(By.css(`${HelperTestFunctions.CALENDAR_ROW_CSSCLASS} >
+                        ${HelperTestFunctions.CALENDAR_WEEK_NUMBER_CLASS}`)).length
+                ).toEqual(48);
+                expect(
+                    dom.queryAll(By.css(`${HelperTestFunctions.CALENDAR_ROW_CSSCLASS} > span`)).length +
+                    dom.queryAll(By.css(`${HelperTestFunctions.CALENDAR_ROW_CSSCLASS} > ${HelperTestFunctions.CALENDAR_WEEK_NUMBER_LABEL_CLASS}`)).length
+                ).toEqual(8);
+
+            });
+
+            it('Week numbers should appear as first column', () => {
+                const firstWeekOfTheYear = new Date(2020, 0, 5);
+                calendar.viewDate = firstWeekOfTheYear;
+                calendar.showWeekNumbers = true;
+                fixture.detectChanges();
+
+                const calendarRows = dom.queryAll(By.css(`${HelperTestFunctions.CALENDAR_ROW_CSSCLASS}`));
+
+                const maxWeeks = 52;
+                calendarRows.forEach((row, idx) => {
+                    const firstRowItem = row.nativeElement.children[0];
+                    idx === 0 ?
+                        expect(firstRowItem.firstChild.innerText).toEqual('Wk') :
+                        expect(firstRowItem.firstChild.innerText).toEqual((idx === 1 ? maxWeeks : idx - 1).toString());
+                });
+            });
+
             it('Calendar DOM structure - year view | month view', () => {
                 dom.queryAll(By.css(HelperTestFunctions.CALENDAR_DATE_CSSCLASS))[0].nativeElement.click();
                 fixture.detectChanges();

projects/igniteui-angular/src/lib/calendar/calendar.component.ts

@@ -150,6 +150,17 @@ export class IgxCalendarComponent extends IgxMonthPickerBaseDirective implements
         this._monthsViewNumber = val;
     }
 
+    /**
+     * Show/hide week numbers
+     *
+     * @example
+     * ```html
+     * <igx-calendar [showWeekNumbers]="true"></igx-calendar>
+     * ``
+     */
+    @Input()
+    public showWeekNumbers = false;
+
     /**
      * Apply the different states for the transitions of animateChange
      * @hidden

projects/igniteui-angular/src/lib/calendar/calendar.ts

@@ -354,6 +354,14 @@ export class Calendar {
         return this.timedelta(date, TimeDeltaInterval.Year, -1);
     }
 
+    public getWeekNumber(date: Date) {
+        const firstJan = new Date(date.getFullYear(), 0, 1).getTime();
+        const today = new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime();
+        const dayInMilSeconds = 86400000;
+        const dayOfYear = ((today - firstJan + 1) / dayInMilSeconds);
+        return Math.ceil(dayOfYear / 7);
+    }
+
     private generateICalendarDate(date: Date, year: number, month: number): ICalendarDate {
         return {
             date,

projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.html

@@ -1,11 +1,20 @@
 <div class="igx-calendar__body-row">
+    <div *ngIf="showWeekNumbers" class="igx-calendar__label igx-calendar__label--week-number">
+        <span>Wk</span>
+    </div>
     <span *ngFor="let dayName of generateWeekHeader()" class="igx-calendar__label">
         {{ dayName | titlecase }}
     </span>
 </div>
 
 <div *ngFor="let week of getCalendarMonth; last as isLast; index as i; trackBy: rowTracker"
     class="igx-calendar__body-row">
+    <div class="igx-calendar__date igx-calendar__date--week-number" *ngIf="showWeekNumbers">
+        <span class="igx-calendar__date-content igx-calendar__date-content--week-number">
+            {{getWeekNumber(week[0].date)}}
+        </span>
+    </div>
+    <!-- <igx-week-number-item *ngIf="showWeekNumbers">{{getWeekNumber(week[0].date)}}</igx-week-number-item> -->
     <igx-day-item
         *ngFor="let day of week; trackBy: dateTracker"
         [date]="day"

projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts

@@ -54,6 +54,17 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
     @Input()
     public changeDaysView = false;
 
+    /**
+     * Show/hide week numbers
+     *
+     * @example
+     * ```html
+     * <igx-days-view [showWeekNumbers]="true"></igx-days-view>
+     * ``
+     */
+    @Input()
+    public showWeekNumbers: boolean;
+
     /**
      * @hidden
      */
@@ -125,6 +136,15 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements Do
         }
     }
 
+    /**
+     * Returns the week number by date
+     *
+     * @hidden
+     */
+    public getWeekNumber(date): number {
+        return this.calendarModel.getWeekNumber(date);
+    }
+
     /**
      * Returns the locale representation of the date in the days view.
      *

projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-component.scss

@@ -45,6 +45,10 @@
         @extend %cal-value--label !optional;
     }
 
+    @include e(label, 'week-number') {
+        @extend %label--week-number !optional;
+    }
+
     @include e(date) {
         @extend %cal-value !optional;
 
@@ -54,6 +58,10 @@
         }
     }
 
+    @include e(date, 'week-number') {
+        @extend %cal-value-date--week-number !optional;
+    }
+
     @include e(date, 'inactive') {
         @extend %cal-value !optional;
         @extend %cal-value--inactive !optional;
@@ -143,6 +151,10 @@
         @extend %cal-value-content !optional;
     }
 
+    @include e(date-content, 'week-number') {
+        @extend %cal-value-content--week-number !optional;
+    }
+
     @include e(year) {
         @extend %cal-value !optional;
         @extend %cal-value--year !optional;