Skip to content

Commit c732b4c

Browse files
kdinevkdinev
committed
Merge branch 'utils-i18n-refactor' of https://github.com/IgniteUI/igniteui-angular into animations-refactor
2 parents f65f989 + 71efb44 commit c732b4c

File tree

67 files changed

+716
-337
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

67 files changed

+716
-337
lines changed

‎CHANGELOG.md

+2
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ All notable changes for each version of this project will be documented in this
3939
When the combo components are configured with it, filtering for **"resume"** will match both **"resume"** and **"résumé"**.
4040
- `IgxButtonGroup`:
4141
- Added `owner` to the `IButtonGroupEventArgs` to identify the emitting button group instance.
42+
- **Breaking Change** Added the `selectionMode` property that sets the selection mode of the buttons in the `IgxButtonGroup`. Selection modes are `single`, `singleRequired` and `multi` as default is `single`.
43+
- **Breaking Change** Deprecated the `multiSelection` property and all references have been migrated to `selectionMode="multi"`.
4244
- `Themes`:
4345
- Include a standalone theme for the `igxLabel` directive to allow usage with components outside the Input Group.
4446

‎package-lock.json

+4-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@
6767
"@types/source-map": "0.5.2",
6868
"fflate": "^0.7.3",
6969
"hammerjs": "^2.0.8",
70-
"igniteui-theming": "^3.0.5",
70+
"igniteui-theming": "^3.1.1",
7171
"igniteui-trial-watermark": "^2.0.0",
7272
"lodash-es": "^4.17.21",
7373
"rxjs": "^6.6.7",

‎projects/igniteui-angular-i18n/package.json

+1-9
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,5 @@
2121
"bugs": {
2222
"url": "https://github.com/IgniteUI/igniteui-angular/issues"
2323
},
24-
"homepage": "https://github.com/IgniteUI/igniteui-angular/projects/igniteui-angular-i18n#readme",
25-
"ng-update": {
26-
"packageGroup": [
27-
"igniteui-angular-i18n",
28-
"igniteui-angular",
29-
"@infragistics/igniteui-angular",
30-
"@igniteui/angular-schematics"
31-
]
32-
}
24+
"homepage": "https://github.com/IgniteUI/igniteui-angular/projects/igniteui-angular-i18n#readme"
3325
}

‎projects/igniteui-angular/migrations/update-16_1_0/index.spec.ts

+54
Original file line numberDiff line numberDiff line change
@@ -132,4 +132,58 @@ describe(`Update to ${version}`, () => {
132132
`
133133
);
134134
});
135+
136+
it('Should remove multiSelection property set to "true" and replace it with selectionMode property set to "multi"', async () => {
137+
appTree.create(
138+
`/testSrc/appPrefix/component/test.component.html`,
139+
`<igx-buttongroup [multiSelection]="true">
140+
<button igxButton>
141+
Button 1
142+
</button>
143+
<button igxButton>
144+
Button 2
145+
</button>
146+
</igx-buttongroup>`);
147+
148+
const tree = await schematicRunner.runSchematicAsync(migrationName, {}, appTree)
149+
.toPromise();
150+
151+
expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
152+
.toEqual(
153+
`<igx-buttongroup [selectionMode]="'multi'">
154+
<button igxButton>
155+
Button 1
156+
</button>
157+
<button igxButton>
158+
Button 2
159+
</button>
160+
</igx-buttongroup>`);
161+
});
162+
163+
it('Should remove multiSelection property set to "false"', async () => {
164+
appTree.create(
165+
'/testSrc/appPrefix/component/test.component.html',
166+
`<igx-buttongroup [multiSelection]="false">
167+
<button igxButton>
168+
Button 1
169+
</button>
170+
<button igxButton>
171+
Button 2
172+
</button>
173+
</igx-buttongroup>`);
174+
175+
const tree = await schematicRunner.runSchematicAsync(migrationName, {}, appTree)
176+
.toPromise();
177+
178+
expect(tree.readContent('/testSrc/appPrefix/component/test.component.html'))
179+
.toEqual(
180+
`<igx-buttongroup >
181+
<button igxButton>
182+
Button 1
183+
</button>
184+
<button igxButton>
185+
Button 2
186+
</button>
187+
</igx-buttongroup>`);
188+
});
135189
});

‎projects/igniteui-angular/migrations/update-16_1_0/index.ts

+49
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,60 @@ import {
44
Tree
55
} from '@angular-devkit/schematics';
66
import { UpdateChanges } from '../common/UpdateChanges';
7+
import { FileChange, findElementNodes, getAttribute, getSourceOffset, parseFile } from '../common/util';
8+
import { nativeImport } from '../common/import-helper.js';
9+
import { Element } from '@angular/compiler';
710

811
const version = '16.1.0';
912

1013
export default (): Rule => async (host: Tree, context: SchematicContext) => {
1114
context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
15+
const { HtmlParser } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler');
1216
const update = new UpdateChanges(__dirname, host, context);
1317
update.applyChanges();
18+
19+
const prop = ['[multiSelection]'];
20+
21+
const changes = new Map<string, FileChange[]>();
22+
23+
const applyChanges = () => {
24+
for (const [path, change] of changes.entries()) {
25+
let buffer = host.read(path).toString();
26+
27+
change.sort((c, c1) => c.position - c1.position)
28+
.reverse()
29+
.forEach(c => buffer = c.apply(buffer));
30+
31+
host.overwrite(path, buffer);
32+
}
33+
};
34+
35+
const addChange = (path: string, change: FileChange) => {
36+
if (changes.has(path)) {
37+
changes.get(path).push(change);
38+
} else {
39+
changes.set(path, [change]);
40+
}
41+
};
42+
43+
for (const path of update.templateFiles) {
44+
const buttonGroups = findElementNodes(parseFile(new HtmlParser(), host, path), 'igx-buttongroup');
45+
buttonGroups.map(node => getSourceOffset(node as Element))
46+
.forEach(offset => {
47+
const { startTag, file, node } = offset;
48+
const { name, value } = getAttribute(node, prop)[0];
49+
const repTxt = file.content.substring(startTag.start, startTag.end);
50+
const property = `${name}="${value}"`;
51+
if (value === 'true') {
52+
const removePropTxt = repTxt.replace(property, `[selectionMode]="'multi'"`);
53+
addChange(file.url, new FileChange(startTag.start, removePropTxt, repTxt, 'replace'));
54+
} else {
55+
const removePropTxt = repTxt.replace(property, '');
56+
addChange(file.url, new FileChange(startTag.start, removePropTxt, repTxt, 'replace'));
57+
}
58+
});
59+
60+
}
61+
62+
applyChanges();
1463
};

‎projects/igniteui-angular/package.json

+2-4
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
"igniteui-trial-watermark": "^1.0.3",
7777
"lodash-es": "^4.17.21",
7878
"uuid": "^9.0.0",
79-
"igniteui-theming": "^3.0.4",
79+
"igniteui-theming": "^3.1.1",
8080
"@igniteui/material-icons-extended": "^3.0.0"
8181
},
8282
"peerDependencies": {
@@ -92,9 +92,7 @@
9292
"migrations": "./migrations/migration-collection.json",
9393
"packageGroup": [
9494
"igniteui-angular",
95-
"@infragistics/igniteui-angular",
96-
"igniteui-angular-i18n",
97-
"@igniteui/angular-schematics"
95+
"igniteui-angular-i18n"
9896
]
9997
},
10098
"schematics": "./schematics/collection.json",

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

+21-19
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,12 @@ let NEXT_ID = 0;
4242
* **Ignite UI for Angular Button Group** -
4343
* [Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/buttongroup.html)
4444
*
45-
* The Ignite UI Button Group displays a group of buttons either vertically or horizontally. The group supports
46-
* single, multiple and toggle selection.
45+
* The Ignite UI Button Group displays a group of buttons either vertically or horizontally. The group supports
46+
* single, multi and singleRequired selection.
4747
*
4848
* Example:
4949
* ```html
50-
* <igx-buttongroup multiSelection="true" [values]="fontOptions">
50+
* <igx-buttongroup selectionMode="multi" [values]="fontOptions">
5151
* </igx-buttongroup>
5252
* ```
5353
* The `fontOptions` value shown above is defined as:
@@ -75,7 +75,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
7575
/**
7676
* An @Input property that sets the value of the `id` attribute. If not set it will be automatically generated.
7777
* ```html
78-
* <igx-buttongroup [id]="'igx-dialog-56'" [multiSelection]="!multi" [values]="alignOptions">
78+
* <igx-buttongroup [id]="'igx-dialog-56'" [selectionMode]="'multi'" [values]="alignOptions">
7979
* ```
8080
*/
8181
@HostBinding('attr.id')
@@ -96,7 +96,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
9696
* //..
9797
* ```
9898
* ```html
99-
* <igx-buttongroup [itemContentCssClass]="style1" [multiSelection]="!multi" [values]="alignOptions">
99+
* <igx-buttongroup [itemContentCssClass]="style1" [selectionMode]="'multi'" [values]="alignOptions">
100100
* ```
101101
*/
102102
@Input()
@@ -119,12 +119,12 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
119119
}
120120

121121
/**
122-
* An @Input property that enables selecting multiple buttons. By default, multi-selection is false.
122+
* An @Input property that sets the selection mode of the buttons. By default, the selection mode is single.
123123
* ```html
124-
* <igx-buttongroup [multiSelection]="false" [alignment]="alignment"></igx-buttongroup>
124+
* <igx-buttongroup [selectionMode]="'multi'" [alignment]="alignment"></igx-buttongroup>
125125
* ```
126126
*/
127-
@Input() public multiSelection = false;
127+
@Input() public selectionMode: 'single' | 'singleRequired' | 'multi' = 'single';
128128

129129
/**
130130
* An @Input property that allows setting the buttons in the button group.
@@ -149,15 +149,15 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
149149
* //..
150150
* ```
151151
* ```html
152-
* <igx-buttongroup [multiSelection]="false" [values]="cities"></igx-buttongroup>
152+
* <igx-buttongroup [selectionMode]="'single'" [values]="cities"></igx-buttongroup>
153153
* ```
154154
*/
155155
@Input() public values: any;
156156

157157
/**
158158
* An @Input property that allows you to disable the `igx-buttongroup` component. By default it's false.
159159
* ```html
160-
* <igx-buttongroup [disabled]="true" [multiSelection]="multi" [values]="fontOptions"></igx-buttongroup>
160+
* <igx-buttongroup [disabled]="true" [selectionMode]="'multi'" [values]="fontOptions"></igx-buttongroup>
161161
* ```
162162
*/
163163
@Input()
@@ -182,7 +182,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
182182
* //..
183183
* ```
184184
* ```html
185-
* <igx-buttongroup [multiSelection]="false" [values]="cities" [alignment]="alignment"></igx-buttongroup>
185+
* <igx-buttongroup [selectionMode]="'single'" [values]="cities" [alignment]="alignment"></igx-buttongroup>
186186
* ```
187187
*/
188188
@Input()
@@ -214,7 +214,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
214214
* //...
215215
* ```
216216
* ```html
217-
* <igx-buttongroup #MyChild [multiSelection]="!multi" (selected)="selectedHandler($event)"></igx-buttongroup>
217+
* <igx-buttongroup #MyChild [selectionMode]="'multi'" (selected)="selectedHandler($event)"></igx-buttongroup>
218218
* <igx-toast #toast>You have made a selection!</igx-toast>
219219
* ```
220220
*/
@@ -232,7 +232,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
232232
* //...
233233
* ```
234234
* ```html
235-
* <igx-buttongroup> #MyChild [multiSelection]="multi" (deselected)="deselectedHandler($event)"></igx-buttongroup>
235+
* <igx-buttongroup> #MyChild [selectionMode]="'multi'" (deselected)="deselectedHandler($event)"></igx-buttongroup>
236236
* <igx-toast #toast>You have deselected a button!</igx-toast>
237237
* ```
238238
*/
@@ -338,8 +338,8 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
338338
this.values[indexInViewButtons].selected = true;
339339
}
340340

341-
// deselect other buttons if multiSelection is not enabled
342-
if (!this.multiSelection && this.selectedIndexes.length > 1) {
341+
// deselect other buttons if selectionMode is not multi
342+
if (this.selectionMode !== 'multi' && this.selectedIndexes.length > 1) {
343343
this.buttons.forEach((_, i) => {
344344
if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {
345345
this.deselectButton(i);
@@ -448,7 +448,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
448448
const button = this.buttons[index];
449449
const args: IButtonGroupEventArgs = { cancel: false, owner: this, button, index };
450450

451-
if (!this.multiSelection) {
451+
if (this.selectionMode !== 'multi') {
452452
this.buttons.forEach((b, i) => {
453453
if (i !== index && this.selectedIndexes.indexOf(i) !== -1) {
454454
this.deselected.emit({ cancel: false, owner: this, button: b, index: i });
@@ -462,9 +462,11 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
462462
this.selectButton(index);
463463
}
464464
} else {
465-
this.deselected.emit(args);
466-
if(!args.cancel){
467-
this.deselectButton(index);
465+
if (this.selectionMode !== 'singleRequired') {
466+
this.deselected.emit(args);
467+
if(!args.cancel){
468+
this.deselectButton(index);
469+
}
468470
}
469471
}
470472
}

0 commit comments

Comments
 (0)