Merge branch 'master' into mkirova/fix-7788

Author: ChronosSF

.sassdocrc

@@ -9,14 +9,16 @@
     "theme": "./node_modules/igniteui-sassdoc-theme/sassdoc/",
     "autofill": ["throws", "content"],
     "groups": {
+        "global-themes": "Global Themes",
+        "component-themes": "Component Themes",
         "undefined": "general"
     },
     "no-update-notifier": false,
     "verbose": false,
     "strict": false,
     "display": {
         "alias": true,
-        "access": ["public", "private"]
+        "access": ["public"]
     },
     "privatePrefix": true,
     "resolvedValue": true

CHANGELOG.md

@@ -7,10 +7,12 @@ All notable changes for each version of this project will be documented in this
 ### General
 - `igxCombo`
     - **Behavioral Change** - Change default positioning strategy from `ConnectedPositioningStrategy` to `AutoPositionStrategy`. The [`Auto`](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay_position.html#auto) strategy will initially try to show the element like the Connected strategy does. If the element goes out of the viewport Auto will flip the starting point and the direction, i.e. if the direction is 'bottom', it will switch it to 'top' and so on. If after flipping direction the content goes out of the view, auto strategy will revert to initial start point and direction and will push the content into the view. Note after pushing the content it may hide the combo's input.
+    - Make `onSearchInput` event cancellable. The event args type has been changed to `IComboSearchInputEventArgs`, which have the following properties: `searchText` - holds the text typed into the search input, `owner` - holds a reference to the combo component and `cancel` - indicates whether the event should be canceled.
 - `IgxOverlay`
-    - Added new property - `closeOnEsc` - in `OverlaySettings`. The overlay can now be prevented from closing, on escape keypress, by setting the property to `false`, by default it's `true`.
+    - Added new property `closeOnEscape` in `OverlaySettings` that controls whether the overlay should close on escape keypress. By default `closeOnEsc` is set to `false`.
+    - **Behavioral Change** - `modal` overlays shown directly through the Overlay Service no longer close on Escape by default. That behavior can now be specified using the `closeOnEscape` property.
 - `igxDialog`
-    - Added `closeOnEscapeKey` - with it, the dialog can be allowed or prevented from closing when `Esc` is pressed.
+    - Added `closeOnEscape` - with it, the dialog can be allowed or prevented from closing when `Esc` is pressed.
 - `IgxNavbar`:
     - **Breaking Changes** - The `igx-action-icon` has been renamed to `igx-navbar-action`. It should get renamed in your components via `ng update`;
 - `igxGrid`
@@ -19,6 +21,29 @@ All notable changes for each version of this project will be documented in this
     - Removed `onDataPreLoad` event as it is specific for remote virtualization implementation, which is not supported for the `igxTreeGrid`. A more generic `onScroll` event is exposed and can be used instead.
 - `IgxTimePicker`
     - Added a disabled style for time parts outside of the minimum and maximum range.
+- `igxDatePicker`
+    -  Added new property - `editorTabIndex`, that allows setting tabindex for the default editor.
+
+### New Theme
+Ignite UI for Angular now has a new theme based on our own design system.
+You can use one of the following mixins to include a dark or light indigo theme:
+`igx-indigo-light-theme` and `igx-indigo-dark-theme`
+
+We also added two new palettes that go with the new theme, `$light-indigo-palette` and `$dark-indigo-palette`.
+
+The following example shows how you can use the Indigo theme:
+
+```scss
+// Light version
+.indigo-theme {
+    @include igx-indigo-light-theme($light-indigo-palette);
+}
+
+// Dark version
+.indigo-dark-theme {
+    @include igx-indigo-dark-theme($dark-indigo-palette);
+}
+```
 
 ### New Features
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
@@ -496,7 +521,7 @@ Ignite UI for angular now have a new theme that mimics Microsoft "Fluent" design
 Depending on your use case you can use one of the following mixins:
 `igx-fluent-theme` and `igx-fluent-dark-theme`
 
-We also added two new pallets that go with the new theme, `$fluent-word-palette` and `$fluent-excel-palette`.
+We also added two new palettes that go with the new theme, `$fluent-word-palette` and `$fluent-excel-palette`.
 
 Next example shows how you can use the Fluent theme.
 

angularDocsPostDeploy.ps1

@@ -64,7 +64,7 @@ if([System.IO.File]::Exists($filePath) -and [System.IO.Directory]::Exists($angul
     $folders = Get-ChildItem -Path $angularDocsRootFolder -Directory -Exclude $tagFolder,"sass","typescript" -Name | Sort-Object @{Expression = {[double]($_.Substring(0, $_.LastIndexOf('.'))) }};
     $textToUpdate = "";
     foreach($item in $folders) {
-        $textToUpdate += '"' + $item.Name + '"'; 
+        $textToUpdate += '"' + $item + '"'; 
     }
     $textToUpdate = "[" +  $textToUpdate.Replace("`"`"","`"`,`"") + "]" ;
     Write-Host $textToUpdate;

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

@@ -18,6 +18,7 @@ import { configureTestSuite } from '../test-utils/configure-suite';
 import { DisplayDensity } from '../core/density';
 import { AbsoluteScrollStrategy, ConnectedPositioningStrategy } from '../services/public_api';
 import { IgxSelectionAPIService } from '../core/selection';
+import { CancelableEventArgs } from '../core/utils';
 
 const CSS_CLASS_COMBO = 'igx-combo';
 const CSS_CLASS_COMBO_DROPDOWN = 'igx-combo__drop-down';
@@ -530,21 +531,42 @@ describe('igxCombo', () => {
             expect(matchSpy).toHaveBeenCalledTimes(1);
             expect(combo.onSearchInput.emit).toHaveBeenCalledTimes(0);
 
+            const args = {
+                searchText: 'Fake',
+                owner: combo,
+                cancel: false
+            };
             combo.handleInputChange('Fake');
             expect(matchSpy).toHaveBeenCalledTimes(2);
             expect(combo.onSearchInput.emit).toHaveBeenCalledTimes(1);
-            expect(combo.onSearchInput.emit).toHaveBeenCalledWith('Fake');
+            expect(combo.onSearchInput.emit).toHaveBeenCalledWith(args);
 
+            args.searchText = '';
             combo.handleInputChange('');
             expect(matchSpy).toHaveBeenCalledTimes(3);
             expect(combo.onSearchInput.emit).toHaveBeenCalledTimes(2);
-            expect(combo.onSearchInput.emit).toHaveBeenCalledWith('');
+            expect(combo.onSearchInput.emit).toHaveBeenCalledWith(args);
 
             combo.filterable = false;
             combo.handleInputChange();
             expect(matchSpy).toHaveBeenCalledTimes(4);
             expect(combo.onSearchInput.emit).toHaveBeenCalledTimes(2);
         });
+        it('should be able to cancel onSearchInput', () => {
+            combo = new IgxComboComponent({ nativeElement: null }, mockCdr, mockSelection as any, mockComboService, null, mockInjector);
+            combo.ngOnInit();
+            combo.data = data;
+            combo.filterable = true;
+            combo.onSearchInput.subscribe((e) => {
+                e.cancel = true;
+            });
+            const matchSpy = spyOn<any>(combo, 'checkMatch').and.callThrough();
+            spyOn(combo.onSearchInput, 'emit').and.callThrough();
+
+            combo.handleInputChange('Item1');
+            expect(combo.onSearchInput.emit).toHaveBeenCalledTimes(1);
+            expect(matchSpy).toHaveBeenCalledTimes(0);
+        });
     });
     describe('Initialization and rendering tests: ', () => {
         configureTestSuite();

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

@@ -96,6 +96,12 @@ export interface IComboSelectionChangeEventArgs extends CancelableEventArgs, IBa
     event?: Event;
 }
 
+/** Event emitted when the igx-combo's search input changes */
+export interface IComboSearchInputEventArgs extends CancelableEventArgs, IBaseEventArgs {
+    /** The text that has been typed into the search input */
+    searchText: string;
+}
+
 export interface IComboItemAdditionEvent extends IBaseEventArgs {
     oldCollection: any[];
     addedItem: any;
@@ -483,7 +489,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      * ```
      */
     @Output()
-    public onSearchInput = new EventEmitter();
+    public onSearchInput = new EventEmitter<IComboSearchInputEventArgs>();
 
     /**
      * Emitted when new chunk of data is loaded from the virtualization
@@ -981,7 +987,16 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      */
     public handleInputChange(event?: string) {
         if (event !== undefined) {
-            this.onSearchInput.emit(event);
+            const args: IComboSearchInputEventArgs = {
+                searchText: event,
+                owner: this,
+                cancel: false
+            };
+            this.onSearchInput.emit(args);
+            if (args.cancel) {
+                this.searchValue = null;
+                return;
+            }
         }
         this.checkMatch();
     }
@@ -1436,8 +1451,8 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
     /** Returns a string that should be populated in the combo's text box */
     private concatDisplayText(selection: any[]): string {
         const value = this.displayKey !== null && this.displayKey !== undefined ?
-        this.convertKeysToItems(selection).map(entry => entry[this.displayKey]).join(', ') :
-        selection.join(', ');
+            this.convertKeysToItems(selection).map(entry => entry[this.displayKey]).join(', ') :
+            selection.join(', ');
         return value;
     }
 

projects/igniteui-angular/src/lib/core/styles/base/elevations/_index.scss

@@ -150,3 +150,16 @@
 
     @return $result;
 }
+
+/// Default elevations.
+/// @type Map
+/// @prop {Color} $color-1 [rgba(0, 0, 0, .26)] - The color used for the umbra shadow.
+/// @prop {Color} $color-2 [rgba(0, 0, 0, .12)] - The color used for the penumbra shadow.
+/// @prop {Color} $color-3 [rgba(0, 0, 0, .08)] - The color used for the ambient shadow.
+/// @requires igx-elevations
+$elevations: igx-elevations(
+    rgba(0, 0, 0, .26),
+    rgba(0, 0, 0, .12),
+    rgba(0, 0, 0, .08)
+) !default;
+

projects/igniteui-angular/src/lib/core/styles/base/utilities/_bem.scss

@@ -314,62 +314,71 @@ $bem--sep-mod-val: if(variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-')
 }
 
 /// @alias bem-selector
+/// @see bem-selector
 @mixin bem($block, $e: null, $elem: null, $m: null, $mod: null, $mods: null) {
     #{bem-selector($block, $e: $e, $elem: $elem, $m: $m, $mod: $mod, $mods: $mods)} {
         @content;
     }
 }
 
 /// @alias bem-block
+/// @see bem-block
 @mixin block($block) {
     @include bem-block($block) {
         @content;
     }
 }
 
 /// @alias bem-elem
+/// @see bem-elem
 @mixin elem($elem, $m: null, $mod: null, $mods: null) {
     @include bem-elem($elem, $m: $m, $mod: $mod, $mods: $mods) {
         @content;
     }
 }
 
 /// @alias bem-mod
+/// @see bem-mod
 @mixin mod($mod) {
     @include bem-mod($mod) {
         @content;
     }
 }
 
 /// @alias bem-mods
+/// @see bem-mods
 @mixin mods($mods...) {
     @include bem-mods($mods...) {
         @content;
     }
 }
 
 /// @alias bem-block
+/// @see bem-block
 @mixin b($block) {
     @include bem-block($block) {
         @content;
     }
 }
 
 /// @alias bem-elem
+/// @see bem-elem
 @mixin e($elem, $m: null, $mod: null, $mods: null) {
     @include bem-elem($elem, $m: $m, $mod: $mod, $mods: $mods) {
         @content;
     }
 }
 
 /// @alias bem-mod
+/// @see bem-mod
 @mixin m($mod) {
     @include bem-mod($mod) {
         @content;
     }
 }
 
 /// @alias bem-mods
+/// @see bem-mods
 @mixin mx($mods...) {
     @include bem-mods($mods...) {
         @content;

projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss

@@ -143,23 +143,51 @@
     @return $rgba;
 }
 
+/// Converts a rgba color to a hexidecimal color.
+///
+/// An alias of hexrgba.
+/// @access public
+/// @alias hexrgba
+/// @see hexrgba
+@function to-opaque($rgba, $background: #fff) {
+    @return hexrgba($rgba, $background);
+}
+
 /// Returns a contrast color for a passed color.
 /// @access public
 /// @group Palettes
-/// @param {Color} $color - The color used to return a contrast color for.
+/// @param {Color} $background - The background color used to return a contrast/forground color for.
+/// @param {Color} $foreground - The foreground color used in case it has enough contrast against the provided background.
+/// @param {String} $contrast - The contrast level according to WCAG 2.0 standards.
 /// @returns {Color} - Returns either white or black depending on the luminance of the input color.
-@function text-contrast($color) {
-    @if type-of($color) == 'color' {
-        $lightContrast: contrast($color, white);
-        $darkContrast: contrast($color, black);
+/// @link https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html
+@function text-contrast($background, $foreground: white, $contrast: 'AAA') {
+    @if type-of($foreground) == 'color' and type-of($background) == 'color' {
+        $level: map-get((
+            'A': 3,
+            'AA': 4.5,
+            'AAA': 7
+        ), $contrast);
+
+        @if $level == null {
+            @error "$contrast must be 'A', 'AA', or 'AAA'";
+        }
 
-        @if ($lightContrast > $darkContrast) {
-            @return white;
+        @if contrast($background, $foreground) >= $level {
+            @return $foreground;
         } @else {
-            @return black;
+            $lightContrast: contrast($background, white);
+            $darkContrast: contrast($background, black);
+
+            @if ($lightContrast > $darkContrast) {
+                @return white;
+            } @else {
+                @return black;
+            }
         }
+    } @else {
+        @error 'Expected color for $background/$foreground but got #{$background}/#{$foreground}';
     }
-    @return $color;
 }
 
 /// Retrieves a contrast text color for a given color from a color palette.
@@ -171,7 +199,7 @@
 /// @requires igx-color
 /// @requires text-contrast
 /// @requires hexrgba
-/// @returns {Color} [#fff] - Returns white if now palette, color and/or variant matches found.
+/// @returns {Color} [#fff] - Returns white if no palette, color and/or variant matches found.
 @function igx-contrast-color($palette, $color, $variant: 500) {
     $_color: igx-color($palette, $color, $variant);
     @if $_color {
@@ -249,7 +277,7 @@
 }
 
 /// Extends a Map object with the properties of another Map object.
-/// @access private
+/// @access public
 /// @param {Map...} $maps - The source map to get extended.
 /// @returns {Map} - Returns the merged maps.
 @function extend($maps...) {
@@ -311,6 +339,7 @@
 /// @param {Color} $error [#ff134a] - The error color used throughout the application.
 /// @param {Color} $grays [#000 | $igx-foreground-color] - The color used for generating the grays palette.
 /// @param {Color} $surface [#fff] - The color used as a background in components, such as cards, sheets, and menus.
+/// @param {String} $variant ['material'] - The palette variant that gets generated. Possible values are: 'material', 'fluent', 'bootstrap', and 'indigo-design'.
 /// @returns {Map} - A map consisting of 74 color variations, including the `primary`, `secondary`, `grays`,
 /// `info`, `success`, `warn`, and `error` colors.
 @function igx-palette(
@@ -321,10 +350,17 @@
     $warn: #fbb13c,
     $error: #ff134a,
     $grays: #000,
-    $surface: #fff
+    $surface: #fff,
+    $variant: 'material'
 ) {
     $saturations: (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 'A100', 'A200', 'A400', 'A700');
-    $shades: (50: .02, 100: .04, 200: .08, 300: .12, 400: .26, 500: .38, 600: .54, 700: .62, 800: .74, 900: .87);
+
+    $shades: map-get((
+        'material': (50: .02, 100: .04, 200: .08, 300: .12, 400: .26, 500: .38, 600: .54, 700: .62, 800: .74, 900: .87),
+        'fluent': (50: .02, 100: .04, 200: .08, 300: .12, 400: .26, 500: .38, 600: .54, 700: .62, 800: .74, 900: .87),
+        'bootstrap': (50: .02, 100: .04, 200: .08, 300: .12, 400: .26, 500: .38, 600: .54, 700: .62, 800: .74, 900: .87),
+        'indigo-design': (50: .02, 100: .03, 200: .06, 300: .15, 400: .21, 500: .4, 600: .52, 700: .64, 800: .77, 900: .9),
+    ), $variant);
 
     $primary-palette: generate-palette($primary, $saturations);
     $secondary-palette: generate-palette($secondary, $saturations);
@@ -420,6 +456,8 @@
         @if function-exists($fn) {
             @if $result == null and ($fn == 'igx-color' or $fn == 'igx-contrast-color') {
                 $result: call(get-function($fn), $extra, $args...);
+            } @else if ($fn == 'hexrgba' or $fn == 'to-opaque') and type-of($args) == 'map' {
+                $result: call(get-function($fn), $result, resolve-value($ctx: $args, $extra: $extra));
             } @else if $result != null {
                 $result: call(get-function($fn), $result, $args...);
             } @else {