Merge branch 'nalipiev/drop-down-shadow-9.1' of https://github.com/IgniteUI/igniteui-angular into nalipiev/drop-down-shadow-9.1

Author: Lipata

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 9.1.4
+
+### New Features
+- `IgxList`
+    - Added localization support.
+
 ## 9.1.1
 
 ### General
@@ -169,7 +175,6 @@ All notable changes for each version of this project will be documented in this
     - Added support for tabIndex attribute applied to the main chip element.
     - Added `tabIndex` input so it can support change detection as well.
 
-
 - `IgxHighlightDirective`
     - New `metadata` property was introduced, which allows adding additional, custom logic to the activation condition of a highlighted element.
 

projects/igniteui-angular/src/lib/core/i18n/list-resources.ts

@@ -0,0 +1,9 @@
+export interface IListResourceStrings {
+    igx_list_no_items?: string;
+    igx_list_loading?: string;
+}
+
+export const ListResourceStringsEN: IListResourceStrings = {
+    igx_list_no_items: 'There are no items in the list.',
+    igx_list_loading: 'Loading data from the server...'
+};

projects/igniteui-angular/src/lib/core/i18n/resources.ts

@@ -4,6 +4,7 @@ import { ITimePickerResourceStrings, TimePickerResourceStringsEN } from './time-
 import { PaginatorResourceStringsEN } from './paginator-resources';
 import { cloneValue } from '../utils';
 import { ICarouselResourceStrings, CarouselResourceStringsEN } from './carousel-resources';
+import { ListResourceStringsEN } from './list-resources';
 
 export interface IResourceStrings extends IGridResourceStrings, ITimePickerResourceStrings, ICarouselResourceStrings  {}
 
@@ -16,6 +17,7 @@ export const CurrentResourceStrings = {
     TimePickerResStrings: cloneValue(TimePickerResourceStringsEN),
     DateRangePickerResStrings: cloneValue(DateRangePickerResourceStringsEN),
     CarouselResStrings: cloneValue(CarouselResourceStringsEN),
+    ListResStrings: cloneValue(ListResourceStringsEN),
 };
 
 function updateResourceStrings(currentStrings: IResourceStrings, newStrings: IResourceStrings ) {

projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss

@@ -387,7 +387,7 @@
         align-items: center;
         padding: 0 rem(16px);
 
-        igx-input-group {
+        igx-select {
             flex-grow: 1;
             flex-basis: 40%;
             margin: rem(16px) 0;

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -889,7 +889,6 @@
         display: block;
         border: none;
         height: rem(32px, map-get($base-scale-size, 'comfortable'));
-        line-height: 0 !important; /* resets typography styles */
         width: 100%;
         min-width: 0;
         overflow: visible;
@@ -900,13 +899,18 @@
         border-top: rem(3px) solid transparent;
         padding-bottom: rem(3px);
 
+        &:not([type='date']) {
+            line-height: 0 !important; /* resets typography styles */
+        }
+
         &::-webkit-input-placeholder {
             line-height: normal;
         }
 
         &::placeholder {
             color: --var($theme, 'placeholder-color');
             opacity: 1;
+            line-height: normal; /* Fix placeholder position in Safari */
         }
     }
 

projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts

@@ -132,6 +132,22 @@ describe('IgxDatePicker', () => {
             expect(inputGroup.nativeElement.classList.contains('igx-input-group--disabled')).toBeTruthy();
         });
 
+        it('should not be able to toggle & clear when disabled', () => {
+            const date = new Date();
+            datePicker.value = date;
+            datePicker.disabled = true;
+            fixture.detectChanges();
+            expect(datePicker.collapsed).toBeTruthy();
+
+            datePicker.openDialog();
+            fixture.detectChanges();
+            expect(datePicker.collapsed).toBeTruthy();
+
+            datePicker.clear();
+            fixture.detectChanges();
+            expect(datePicker.value).toEqual(date);
+        });
+
         it('When labelVisability is set to false the label should not be visible', () => {
             let label = fixture.debugElement.query(By.directive(IgxLabelDirective));
 

projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts

@@ -34,7 +34,7 @@ import { IgxInputGroupModule, IgxInputDirective, IgxInputGroupComponent, IgxInpu
 import { Subject, fromEvent, animationFrameScheduler, interval, Subscription } from 'rxjs';
 import { filter, takeUntil, throttle } from 'rxjs/operators';
 import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
-import { IgxTextSelectionModule} from '../directives/text-selection/text-selection.directive';
+import { IgxTextSelectionModule } from '../directives/text-selection/text-selection.directive';
 import {
     OverlaySettings,
     IgxOverlayService,
@@ -144,7 +144,7 @@ const noop = () => { };
     `]
 })
 export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor,
-          EditorProvider, OnInit, AfterViewInit, OnDestroy, AfterViewChecked {
+    EditorProvider, OnInit, AfterViewInit, OnDestroy, AfterViewChecked {
     /**
      * Gets/Sets the `IgxDatePickerComponent` label.
      * @remarks
@@ -914,10 +914,10 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      * @param date passed date that has to be set to the calendar.
      */
     public selectDate(date: Date): void {
-        const oldValue =  this.value;
+        const oldValue = this.value;
         this.value = date;
 
-        this.emitValueChangeEvent(oldValue, this.value );
+        this.emitValueChangeEvent(oldValue, this.value);
         this.onSelection.emit(date);
     }
 
@@ -929,9 +929,9 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      * ```
      */
     public deselectDate(): void {
-        const oldValue =  this.value;
+        const oldValue = this.value;
         this.value = null;
-        this.emitValueChangeEvent(oldValue, this.value );
+        this.emitValueChangeEvent(oldValue, this.value);
         if (this.calendar) {
             this.calendar.deselectDate();
         }
@@ -946,7 +946,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      * ```
      */
     public openDialog(): void {
-        if (!this.collapsed) {
+        if (!this.collapsed || this.disabled) {
             return;
         }
 
@@ -987,10 +987,12 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
      * @hidden @internal
      */
     public clear(): void {
-        this.isEmpty = true;
-        this.invalidDate = '';
-        this.deselectDate();
-        this._setCursorPosition(0);
+        if (!this.disabled) {
+            this.isEmpty = true;
+            this.invalidDate = '';
+            this.deselectDate();
+            this._setCursorPosition(0);
+        }
     }
 
     /**
@@ -1008,10 +1010,10 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
             date.setSeconds(this.value.getSeconds());
             date.setMilliseconds(this.value.getMilliseconds());
         }
-        const oldValue =  this.value;
+        const oldValue = this.value;
         this.value = date;
 
-        this.emitValueChangeEvent(oldValue, this.value );
+        this.emitValueChangeEvent(oldValue, this.value);
         this.calendar.viewDate = date;
         this.closeCalendar();
         this.onSelection.emit(date);
@@ -1141,11 +1143,11 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
 
                 if (this.disabledDates === null
                     || (this.disabledDates !== null && !isDateInRanges(newValue, this.disabledDates))) {
-                        const oldValue =  this.value;
-                        this.value = newValue;
+                    const oldValue = this.value;
+                    this.value = newValue;
 
-                        this.emitValueChangeEvent(oldValue, this.value );
-                        this.invalidDate = '';
+                    this.emitValueChangeEvent(oldValue, this.value);
+                    this.invalidDate = '';
                 } else {
                     const args: IDatePickerDisabledDateEventArgs = {
                         datePicker: this,

projects/igniteui-angular/src/lib/date-picker/date-picker.utils.ts

@@ -1,5 +1,6 @@
 import { isIE } from '../core/utils';
 import { DatePart, DatePartInfo } from '../directives/date-time-editor/date-time-editor.common';
+import { formatDate, FormatWidth, getLocaleDateFormat } from '@angular/common';
 
 /**
  * This enum is used to keep the date validation result.
@@ -48,7 +49,7 @@ export abstract class DatePickerUtil {
 
 
     /**
-     *  TODO: Unit tests for all public methods.
+     *  TODO: (in issue #6483) Unit tests and docs for all public methods.
      */
 
 
@@ -147,6 +148,38 @@ export abstract class DatePickerUtil {
         return DatePickerUtil.getMask(parts);
     }
 
+    public static formatDate(value: number | Date, format: string, locale: string, timezone?: string): string {
+        let formattedDate: string;
+        try {
+            formattedDate = formatDate(value, format, locale, timezone);
+        } catch {
+            this.logMissingLocaleSettings(locale);
+            const formatter = new Intl.DateTimeFormat(locale);
+            formattedDate = formatter.format(value);
+        }
+
+        return formattedDate;
+    }
+
+    public static getLocaleDateFormat(locale: string, displayFormat?: string): string {
+        const formatKeys = Object.keys(FormatWidth) as (keyof FormatWidth)[];
+        const targetKey = formatKeys.find(k => k.toLowerCase() === displayFormat?.toLowerCase().replace('date', ''));
+        if (!targetKey) {
+            // if displayFormat is not shortDate, longDate, etc.
+            // or if it is not set by the user
+            return displayFormat;
+        }
+        let format: string;
+        try {
+            format = getLocaleDateFormat(locale, FormatWidth[targetKey]);
+        } catch {
+            this.logMissingLocaleSettings(locale);
+            format = DatePickerUtil.getDefaultInputFormat(locale);
+        }
+
+        return format;
+    }
+
     public static isDateOrTimeChar(char: string): boolean {
         return DATE_CHARS.indexOf(char) !== -1 || TIME_CHARS.indexOf(char) !== -1;
     }
@@ -303,6 +336,11 @@ export abstract class DatePickerUtil {
         return _value.getTime() < _minValue.getTime();
     }
 
+    private static logMissingLocaleSettings(locale: string): void {
+        console.warn(`Missing locale data for the locale ${locale}. Please refer to https://angular.io/guide/i18n#i18n-pipes`);
+        console.warn('Using default browser locale settings.');
+    }
+
     private static ensureLeadingZero(part: DatePartInfo) {
         switch (part.type) {
             case DatePart.Date:

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker-inputs.common.ts

@@ -1,9 +1,9 @@
 import { Component, ContentChild, Pipe, PipeTransform, Output, EventEmitter, HostListener, Directive } from '@angular/core';
-import { formatDate } from '@angular/common';
 import { NgControl } from '@angular/forms';
 import { IgxInputDirective, IgxInputState } from '../input-group/public_api';
 import { IgxInputGroupComponent } from '../input-group/input-group.component';
 import { IgxInputGroupBase } from '../input-group/input-group.common';
+import { DatePickerUtil } from '../date-picker/date-picker.utils';
 import { IgxDateTimeEditorDirective } from '../directives/date-time-editor/public_api';
 
 /**
@@ -17,14 +17,17 @@ export interface DateRange {
 /** @hidden @internal */
 @Pipe({ name: 'dateRange' })
 export class DateRangePickerFormatPipe implements PipeTransform {
-    public transform(values: DateRange, inputFormat?: string, locale?: string): string {
-        if (!values) {
+    public transform(values: DateRange, appliedFormat?: string,
+        locale?: string, formatter?: (_: DateRange) => string): string {
+        if (!values || !values.start && !values.end) {
             return '';
         }
+        if (formatter) {
+            return formatter(values);
+        }
         const { start, end } = values;
-        // TODO: move default locale from IgxDateTimeEditorDirective to its commons file/use displayFormat
-        const startDate = inputFormat ? formatDate(start, inputFormat, locale || 'en') : start?.toLocaleDateString();
-        const endDate = inputFormat ? formatDate(end, inputFormat, locale || 'en') : end?.toLocaleDateString();
+        const startDate = appliedFormat ? DatePickerUtil.formatDate(start, appliedFormat, locale || 'en') : start?.toLocaleDateString();
+        const endDate = appliedFormat ? DatePickerUtil.formatDate(end, appliedFormat, locale || 'en') : end?.toLocaleDateString();
         let formatted;
         if (start) {
             formatted = `${startDate} - `;
@@ -33,7 +36,6 @@ export class DateRangePickerFormatPipe implements PipeTransform {
             }
         }
 
-        // TODO: no need to set format twice
         return formatted ? formatted : '';
     }
 }

projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.html

@@ -43,12 +43,12 @@
 <ng-template #defTemplate>
     <igx-input-group (click)="open()">
         <input #singleInput igxInput type="text" readonly
-            [placeholder]="this.value ? '' : appliedFormat"
+            [placeholder]="this.value ? '' : singleInputFormat"
             role="combobox"
             aria-haspopup="grid"
             [attr.aria-expanded]="!toggle.collapsed"
             [attr.aria-labelledby]="this.label?.id"
-            [value]="this.value | dateRange: this.inputFormat : this.locale"
+            [value]="this.value | dateRange: this.appliedFormat : this.locale : this.formatter"
         />
 
         <igx-prefix *ngIf="!this.toggleComponents.length">