Merge branch '9.1.x' into nalipiev/drop-down-shadow-9.1

Author: kdinev

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/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.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">