Merge pull request #5976 from IgniteUI/8.2.x

Merging 8.2.x into master

Author: zdrawku

CHANGELOG.md

@@ -1,6 +1,43 @@
 # Ignite UI for Angular Change Log
 
 All notable changes for each version of this project will be documented in this file.
+## 8.2.4
+
+### RTL Support
+Most of the components in the framework now have full right-to-left (RTL) support via the newly included RTL themes. 
+
+For CSS-based projects add `node_modules/igniteui-angular/styles/igniteui-angular-rtl.css` to your angular.json styles collection. 
+
+For Sass-based projects pass `$direction` to the `igx-core` mixin in your root stylesheet.
+
+Example:
+```scss
+// $direction defaults to ltr if it's omitted.
+@include igx-core($direction: rtl);
+```
+Currently the following components have only partial RTL support:
+ - Grid (igx-grid)
+ - Slider (igx-slider)
+ - Tabs (igx-tabs)
+ - Circular Progress Indicator (igx-circular-bar)
+
+ We plan on adding support for the aforementioned components in the upcoming releases.
+ 
+### New Features
+
+- Columns now expose the `cellStyles` property which allows conditional styling of the column cells. Similar to `cellClasses` it accepts an object literal where the keys are style properties and the values are expressions for evaluation.
+```typescript
+styles = {
+    color: '#123456',
+    'font-family': 'monospace'
+    'font-weight': (_, __, value) => value.startsWith('!') : 'red' : 'inherit'
+};
+```
+The callback signature for both `cellStyles` and `cellClasses` is now changed to
+
+```typescript
+(rowData: any, columnKey: string, cellValue: any, rowIndex: number) => boolean
+```
 
 ## 8.2.3
 - `IgxTextHighlightDirective` - The default highlight directive styles have been moved to a Sass theme - `igx-highlight-theme`; You can modify the resting and active background and text color styles of the directive by passing the respective properties to the Sass theme. You can still pass your own CSS classes to the highlight directive via the cssClass and activeCssClass inputs.
@@ -10,10 +47,10 @@ All notable changes for each version of this project will be documented in this
 
 ## 8.2.0
 ### New theme
-Ignite UI for angular now have a new theme that mimics Microsoft "Fluent" design system.  
-Depending on your use case you can use one of the following mixins:  
-`igx-fluent-theme` and `igx-fluent-dark-theme`  
-  
+Ignite UI for angular now have a new theme that mimics Microsoft "Fluent" design system.
+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`.
 
 Next example shows how you can use the Fluent theme.
@@ -33,7 +70,7 @@ Next example shows how you can use the Fluent theme.
 ### Theme Changes
 `igx-badge-theme` - Removed the `$disable-shadow` property to mitigate confusion when specifying `$shadow` explicitly.
 
-For more information about the theming please read our [documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/index.html)  
+For more information about the theming please read our [documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/themes/index.html)
 
 ### New Features
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
@@ -127,7 +164,7 @@ For more information about the theming please read our [documentation](https://w
     - **Breaking Change** Interfaces `IgxDropEventArgs` is renamed to `IDropDroppedEventArgs`.
     - **Breaking Change** Outputs `enter`, `over`, `leave`(former `onEnter`, `onOver`, `onLeave`) now have arguments of type `IDropBaseEventArgs`
     - **Breaking Change** Output `dropped` (former `onDrop`) now have arguments of type `IDropDroppedEventArgs`
-    
+
 ## 8.1.4
 - `IgxDialog` new @Input `positionSettings` is now available. It provides the ability to get/set both position and animation settings of the Dialog component.
 

extras/template/strings/shell-strings.json

@@ -35,6 +35,20 @@
         "Requires": "必須",
         "Default value": "デフォルト値",
         "Optional": "オプション",
-        "Rest": "残りの引数"
+        "Rest": "残りの引数",
+        "All": "すべて",
+        "Public": "パブリック",
+        "Public/Protected": "パブリック/保護",
+        "Inherited": "継承",
+        "Externals": "外部",
+        "Only exported": "エクスポートされたのみ",
+        "Search API": "検索 API...",
+        "Classes": "クラス",
+        "Interfaces": "インターフェイス",
+        "Enumerations": "列挙体",
+        "Variables": "変数",
+        "Functions": "関数",
+        "Object literals": "オブジェクト リテラル",
+        "GLOBALS": "グローバル"
     }
 }

projects/igniteui-angular/migrations/migration-collection.json

@@ -50,6 +50,11 @@
             "version": "8.2.0",
             "description": "Updates Ignite UI for Angular from v8.1.x to v8.2.0",
             "factory": "./update-8_2_0"
+        },
+        "migration-11": {
+            "version": "8.2.3",
+            "description": "Updates Ignite UI for Angular from v8.2.0 to v8.2.3",
+            "factory": "./update-8_2_3"
         }
     }
 }

projects/igniteui-angular/migrations/update-8_2_0/changes/theme-props.json

@@ -1,8 +1,9 @@
 {
     "$schema": "../../common/schema/theme-props.schema.json",
     "changes": [{
-        "name": "$disable-shadow",
-        "remove": true,
-        "owner": "igx-badge-theme"
-    }]
+            "name": "$disable-shadow",
+            "remove": true,
+            "owner": "igx-badge-theme"
+        }
+    ]
 }

projects/igniteui-angular/migrations/update-8_2_3/changes/theme-props.json

@@ -0,0 +1,9 @@
+{
+    "$schema": "../../common/schema/theme-props.schema.json",
+    "changes": [{
+            "name": "$disable-button-shadow",
+            "replaceWith": "$button-shadow",
+            "owner": "igx-carousel-theme"
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-8_2_3/index.spec.ts

@@ -0,0 +1,50 @@
+import * as path from 'path';
+
+// tslint:disable:no-implicit-dependencies
+import { EmptyTree } from '@angular-devkit/schematics';
+// tslint:disable-next-line:no-submodule-imports
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+
+describe('Update 8.2.3', () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+    const configJson = {
+        defaultProject: 'testProj',
+        projects: {
+            testProj: {
+                sourceRoot: '/testSrc'
+            }
+        },
+        schematics: {
+            '@schematics/angular:component': {
+                prefix: 'appPrefix'
+            }
+        }
+      };
+
+    beforeEach(() => {
+        appTree = new UnitTestTree(new EmptyTree());
+        appTree.create('/angular.json', JSON.stringify(configJson));
+    });
+
+    it('should update igx-carousel-theme prop', done => {
+        appTree.create(
+            '/testSrc/appPrefix/component/test.component.scss',
+            `$my-carousel-theme: igx-carousel-theme(
+                $button-background: black,
+                $disable-button-shadow: black,
+                $button-hover-background: white
+              );`
+        );
+        const tree = schematicRunner.runSchematic('migration-11', {}, appTree);
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.scss'))
+        .toEqual(
+            `$my-carousel-theme: igx-carousel-theme(
+                $button-background: black,
+                $button-shadow: black,
+                $button-hover-background: white
+              );`
+        );
+        done();
+    });
+});

projects/igniteui-angular/migrations/update-8_2_3/index.ts

@@ -0,0 +1,17 @@
+import {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+
+const version = '8.2.3';
+
+export default function(): Rule {
+    return (host: Tree, context: SchematicContext) => {
+        context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+
+        const update = new UpdateChanges(__dirname, host, context);
+        update.applyChanges();
+    };
+}

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

@@ -298,10 +298,6 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
         const button = this.buttons[index];
         const buttonElement = button.nativeElement;
 
-        if (buttonElement.classList.contains('igx-button--disabled')) {
-            return;
-        }
-
         this.selectedIndexes.push(index);
         button.selected = true;
 
@@ -345,10 +341,6 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
         const button = this.buttons[index];
         const buttonElement = button.nativeElement;
 
-        if (buttonElement.classList.contains('igx-button--disabled')) {
-            return;
-        }
-
         this.selectedIndexes.splice(this.selectedIndexes.indexOf(index), 1);
         button.selected = false;
 
@@ -392,7 +384,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
                     button.disabled = true;
                 }
 
-                if (!button.disabled && button.selected) {
+                if (button.selected) {
                     this.selectButton(index);
                 }
 

projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts

@@ -7,6 +7,7 @@ import { ButtonGroupAlignment, IgxButtonGroupComponent, IgxButtonGroupModule } f
 import { IgxButtonModule } from '../directives/button/button.directive';
 import { configureTestSuite } from '../test-utils/configure-suite';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { UIInteractions } from '../test-utils/ui-interactions.spec';
 
 interface IButton {
     type?: string;
@@ -129,7 +130,27 @@ describe('IgxButtonGroup', () => {
         expect(buttongroup.selectedButtons.length).toBe(0);
         buttongroup.selectButton(0);
         buttongroup.selectButton(3);
-        // Button 3 is disabled, so it isn't selected
+        // Button 3 is disabled, but it can be selected
+        expect(buttongroup.selectedButtons.length).toBe(2);
+    });
+
+    it('Button Group multiple selection with mouse click', () => {
+        const fixture = TestBed.createComponent(InitButtonGroupWithValuesComponent);
+        fixture.detectChanges();
+
+        const buttongroup = fixture.componentInstance.buttonGroup;
+        expect(buttongroup.multiSelection).toBeTruthy();
+
+        UIInteractions.simulateClickEvent(buttongroup.buttons[0].nativeElement);
+        expect(buttongroup.selectedButtons.length).toBe(1);
+        UIInteractions.simulateClickEvent(buttongroup.buttons[1].nativeElement);
+        expect(buttongroup.selectedButtons.length).toBe(2);
+        UIInteractions.simulateClickEvent(buttongroup.buttons[0].nativeElement);
+        UIInteractions.simulateClickEvent(buttongroup.buttons[1].nativeElement);
+        expect(buttongroup.selectedButtons.length).toBe(0);
+        UIInteractions.simulateClickEvent(buttongroup.buttons[0].nativeElement);
+        UIInteractions.simulateClickEvent(buttongroup.buttons[3].nativeElement);
+        // Button 3 is disabled, and it should not be selected with mouse click
         expect(buttongroup.selectedButtons.length).toBe(1);
     });
 
@@ -150,7 +171,9 @@ describe('IgxButtonGroup', () => {
         expect(buttongroup.selectedButtons.length).toBe(0);
         buttongroup.selectButton(0);
         buttongroup.selectButton(3);
-        // Button 3 is disabled, so it isn't selected
+        // It should be possible to select disabled buttons
+        expect(buttongroup.selectedButtons.length).toBe(2);
+        buttongroup.deselectButton(3);
         expect(buttongroup.selectedButtons.length).toBe(1);
     });
 
@@ -178,8 +201,8 @@ describe('IgxButtonGroup', () => {
         buttongroup.selectButton(2);
         buttongroup.selectButton(3);
         expect(buttongroup.selectedButtons.length).toBe(1);
-        // Button 3 is disabled, so it isn't selected
-        expect(buttongroup.buttons.indexOf(buttongroup.selectedButtons[0])).toBe(2);
+        // Button 3 is disabled, but it can be selected
+        expect(buttongroup.buttons.indexOf(buttongroup.selectedButtons[0])).toBe(3);
     });
 
     it('Button Group - selection handles wrong indexes gracefully', () => {