Skip to content

Commit c397f18

Browse files
PlamenaMitevaPlamenaMiteva
committed
Merge branch 'PMiteva/time-picker-refactoring' of https://github.com/IgniteUI/igniteui-angular into PMiteva/time-picker-refactoring
2 parents 77d7e28 + d233a17 commit c397f18

File tree

206 files changed

+2128
-1576
lines changed

Some content is hidden

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

206 files changed

+2128
-1576
lines changed

‎CHANGELOG.md

+33-7
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,21 @@ All notable changes for each version of this project will be documented in this
99
- **Breaking Change** - The `locale` and `pipeArgs` parameters are removed from the `operate` method exposed by the `IgxNumberSummaryOperand`, `IgxDateSummaryOperand`, `IgxCurrencySummaryOperand` and `IgxPercentSummaryOperand`. They are now set in the `igx-grid-summary-cell` template. To change the locale and format setting of the `igx-grid-summary-cell` the user can use the new `summaryFormatter` property of the `IgxColumnComponent`.
1010
- `IgxTabs`, `IgxBottomNav`
1111
- **Breaking Change** - `IgxTabs` and `IgxBottomNav` components were completely refactored in order to provide more flexible and descriptive way to define tab headers and contents. Please make sure to update via `ng update` in order to migrate the existing `igx-tabs` and `igx-bottom-nav` definitions to the new ones.
12+
- `IgxForOfDirective`
13+
- **Breaking Change** - `IgxForOfDirective` events are renamed as follows:
14+
- `onChunkLoad` -> `chunkLoad`
15+
- `onScrollbarVisibilityChanged` -> `scrollbarVisibilityChanged`
16+
- `onContentSizeChange` -> `contentSizeChange`
17+
- `onDataChanged` -> `dataChanged`
18+
- `onBeforeViewDestroyed` -> `beforeViewDestroyed`
19+
- `onChunkPreload` -> `chunkPreload`
20+
- `onDataChanging` -> `dataChanging`
21+
- `IgxColumnComponent`
22+
- **Breaking Change** - The `onColumnChange` output is renamed to `columnChange`.
23+
- **Breaking Change** - `IgxHierarchicalGrid` and `igxRowIsland` events are renamed as follows:
24+
- `onGridCreated` -> `gridCreated`
25+
- `onGridInitialized` -> `gridInitialized`
26+
- `onDataPreLoad` -> `dataPreLoad`
1227

1328
### New Features
1429
- `IgxDateTimeEditor`
@@ -50,6 +65,24 @@ All notable changes for each version of this project will be documented in this
5065
- The `igx-tab-header` supports `igx-prefix` and `igx-suffix` directives in its `ng-content`.
5166
- `IgxBottomNav`
5267
- The `IgxBottomNav` component exposes `disableAnimations` property which determines whether the contents should animate when switching the selected item. The property is set to `true` by default which means that the animations are disabled.
68+
- `IgxOverlayService`
69+
- `detach` and `detachAll` methods are added to `IgxOverlayService`. Calling `detach` will remove all the elements generated for the related overlay, as well as clean up all related resources. Calling `detachAll` will remove all elements generated by any call to `IgxOverlay` `attach`, and will clean up all related resources. _Note: calling `hide` or `hideAll` will not clean generated by the service elements and will not clean up related resources._
70+
- `IgxCombo`
71+
- Any changes to `IComboItemAdditionEvent.addedItem` will be reflected in the item added to the data.
72+
- `IgxComboComponent.onAddition` is now cancelable. You can prevent the item from being added by setting the event args `cancel` property to `true`.
73+
```typescript
74+
public handleComboItemAddition(event: IComboItemAdditionEvent): void {
75+
if (event.addedItem[this.combo.valueKey] === 'ForbiddenValue') {
76+
event.cancel = true;
77+
} else if (event.addedItem[this.combo.valueKey] === 'Change Me') {
78+
const index = this.iter++;
79+
event.addedItem = {
80+
[this.combo.valueKey]: `customId${index}`,
81+
[this.combo.displayKey]: `New item ${index}`;
82+
}
83+
}
84+
}
85+
```
5386

5487
### Themes:
5588
- Breaking Changes:
@@ -63,13 +96,6 @@ All notable changes for each version of this project will be documented in this
6396
```
6497

6598

66-
67-
68-
### New Features
69-
- `IgxOverlayService`
70-
- `detach` and `detachAll` methods are added to `IgxOverlayService`. Calling `detach` will remove all the elements generated for the related overlay, as well as clean up all related resources. Calling `detachAll` will remove all elements generated by any call to `IgxOverlay` `attach`, and will clean up all related resources. _Note: calling `hide` or `hideAll` will not clean generated by the service elements and will not clean up related resources._
71-
72-
7399
## 11.1.1
74100

75101
### New Features

‎projects/igniteui-angular/migrations/update-12_0_0/changes/inputs.json

+16
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,22 @@
7272
"selector": "igx-tab-item",
7373
"type": "component"
7474
}
75+
},
76+
{
77+
"name": "class",
78+
"remove": true,
79+
"owner": {
80+
"selector": "igx-tab-item",
81+
"type": "component"
82+
}
83+
},
84+
{
85+
"name": "class",
86+
"remove": true,
87+
"owner": {
88+
"selector": "igx-bottom-nav-item",
89+
"type": "component"
90+
}
7591
}
7692
]
7793
}

‎projects/igniteui-angular/migrations/update-12_0_0/changes/members.json

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"$schema": "../../common/schema/members-changes.schema.json",
3+
"changes": [
4+
{
5+
"member": "onColumnChange",
6+
"replaceWith": "columnChange",
7+
"definedIn": [
8+
"IgxColumnComponent"
9+
]
10+
}
11+
]
12+
}

‎projects/igniteui-angular/migrations/update-12_0_0/changes/outputs.json

+96
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,102 @@
88
"selector": "igx-column",
99
"type": "component"
1010
}
11+
},
12+
{
13+
"name": "onChunkLoad",
14+
"replaceWith": "chunkLoad",
15+
"owner": {
16+
"selector": "[igxFor][igxForOf]",
17+
"type": "directive"
18+
}
19+
},
20+
{
21+
"name": "onScrollbarVisibilityChanged",
22+
"replaceWith": "scrollbarVisibilityChanged",
23+
"owner": {
24+
"selector": "[igxFor][igxForOf]",
25+
"type": "directive"
26+
}
27+
},
28+
{
29+
"name": "onContentSizeChange",
30+
"replaceWith": "contentSizeChange",
31+
"owner": {
32+
"selector": "[igxFor][igxForOf]",
33+
"type": "directive"
34+
}
35+
},
36+
{
37+
"name": "onDataChanged",
38+
"replaceWith": "dataChanged",
39+
"owner": {
40+
"selector": "[igxFor][igxForOf]",
41+
"type": "directive"
42+
}
43+
},
44+
{
45+
"name": "onBeforeViewDestroyed",
46+
"replaceWith": "beforeViewDestroyed",
47+
"owner": {
48+
"selector": "[igxFor][igxForOf]",
49+
"type": "directive"
50+
}
51+
},
52+
{
53+
"name": "onChunkPreload",
54+
"replaceWith": "chunkPreload",
55+
"owner": {
56+
"selector": "[igxFor][igxForOf]",
57+
"type": "directive"
58+
}
59+
},
60+
{
61+
"name": "onDataChanging",
62+
"replaceWith": "dataChanging",
63+
"owner": {
64+
"selector": "[igxFor][igxForOf]",
65+
"type": "directive"
66+
}
67+
},
68+
{
69+
"name": "onGridCreated",
70+
"replaceWith": "gridCreated",
71+
"owner": {
72+
"selector": "igx-row-island",
73+
"type": "component"
74+
}
75+
},
76+
{
77+
"name": "onGridInitialized",
78+
"replaceWith": "gridInitialized",
79+
"owner": {
80+
"selector": "igx-row-island",
81+
"type": "component"
82+
}
83+
},
84+
{
85+
"name": "onDataPreLoad",
86+
"replaceWith": "dataPreLoad",
87+
"owner": {
88+
"selector": "igx-hierarchical-grid",
89+
"type": "component"
90+
}
91+
},
92+
{
93+
"name": "onDataPreLoad",
94+
"replaceWith": "dataPreLoad",
95+
"owner": {
96+
"selector": "igx-grid",
97+
"type": "component"
98+
}
99+
},
100+
{
101+
"name": "onColumnToggled",
102+
"replaceWith": "columnToggled",
103+
"owner": {
104+
"selector": "igx-column-actions",
105+
"type": "component"
106+
}
11107
}
12108
]
13109
}

‎projects/igniteui-angular/migrations/update-12_0_0/index.spec.ts

+98-8
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ $theme: igx-avatar-theme(
9494
appTree.create(
9595
'/testSrc/appPrefix/component/custom.component.html', `
9696
<igx-tabs type="contentFit" [selectedIndex]="0">
97-
<igx-tabs-group label="Tab1" icon="home">
97+
<igx-tabs-group label="Tab1" icon="home" class="tabgroup">
9898
<div>Some Content</div>
9999
</igx-tabs-group>
100100
</igx-tabs>`);
@@ -110,7 +110,7 @@ ${noteText}
110110
<igx-icon igxTabHeaderIcon>home</igx-icon>
111111
<span igxTabHeaderLabel>Tab1</span>
112112
</igx-tab-header>
113-
<igx-tab-content>
113+
<igx-tab-content class="tabgroup">
114114
<div>Some Content</div>
115115
</igx-tab-content>
116116
</igx-tab-item>
@@ -121,7 +121,7 @@ ${noteText}
121121
appTree.create(
122122
'/testSrc/appPrefix/component/custom.component.html', `
123123
<igx-tabs type="fixed">
124-
<igx-tab-item label="Tab1" icon="folder" routerLink="view1" [isSelected]="true">
124+
<igx-tab-item label="Tab1" icon="folder" routerLink="view1" [isSelected]="true" class="tabitem">
125125
</igx-tab-item>
126126
</igx-tabs>`);
127127
const tree = await schematicRunner.runSchematicAsync('migration-20', {}, appTree)
@@ -132,14 +132,70 @@ ${noteText}
132132
${noteText}
133133
<igx-tabs tabAlignment="justify">
134134
<igx-tab-item [selected]="true">
135-
<igx-tab-header routerLink="view1">
135+
<igx-tab-header routerLink="view1" class="tabitem">
136136
<igx-icon igxTabHeaderIcon>folder</igx-icon>
137137
<span igxTabHeaderLabel>Tab1</span>
138138
</igx-tab-header>
139139
</igx-tab-item>
140140
</igx-tabs>`);
141141
});
142142

143+
it('Should not create igx-[tab|botton-nav]-content if it\'s already present', async () => {
144+
appTree.create(
145+
'/testSrc/appPrefix/component/custom.component.html', `
146+
<igx-tabs #tabs1>
147+
<igx-tab-item>
148+
<igx-tab-header>
149+
<span igxTabHeaderLabel>Home</span>
150+
</igx-tab-header>
151+
<igx-tab-content>Home content.</igx-tab-content>
152+
</igx-tab-item>
153+
</igx-tabs>
154+
<!--BottomNav-->
155+
<igx-bottom-nav>
156+
<igx-bottom-nav-item>
157+
<igx-bottom-nav-header>
158+
<igx-icon igxBottomNavHeaderIcon>library_music</igx-icon>
159+
<span igxBottomNavHeaderLabel>Songs</span>
160+
</igx-bottom-nav-header>
161+
<igx-bottom-nav-content>
162+
<div class="item" *ngFor="let song of songsList">
163+
<span class="item-line1">{{song.title}}</span><br/>
164+
<span class="item-line2">{{song.artist}}</span>
165+
</div>
166+
</igx-bottom-nav-content>
167+
</igx-bottom-nav-item>
168+
</igx-bottom-nav>`);
169+
const tree = await schematicRunner.runSchematicAsync('migration-20', {}, appTree)
170+
.toPromise();
171+
172+
expect(tree.readContent('/testSrc/appPrefix/component/custom.component.html'))
173+
.toEqual(`
174+
<igx-tabs #tabs1>
175+
<igx-tab-item>
176+
<igx-tab-header>
177+
<span igxTabHeaderLabel>Home</span>
178+
</igx-tab-header>
179+
<igx-tab-content>Home content.</igx-tab-content>
180+
</igx-tab-item>
181+
</igx-tabs>
182+
<!--BottomNav-->
183+
<igx-bottom-nav>
184+
<igx-bottom-nav-item>
185+
<igx-bottom-nav-header>
186+
<igx-icon igxBottomNavHeaderIcon>library_music</igx-icon>
187+
<span igxBottomNavHeaderLabel>Songs</span>
188+
</igx-bottom-nav-header>
189+
<igx-bottom-nav-content>
190+
<div class="item" *ngFor="let song of songsList">
191+
<span class="item-line1">{{song.title}}</span><br/>
192+
<span class="item-line2">{{song.artist}}</span>
193+
</div>
194+
</igx-bottom-nav-content>
195+
</igx-bottom-nav-item>
196+
</igx-bottom-nav>`);
197+
});
198+
143199
it('Should insert ng-template content into igx-tab-header', async () => {
144200
appTree.create(
145201
'/testSrc/appPrefix/component/custom.component.html', `
@@ -174,7 +230,7 @@ ${noteText}
174230
appTree.create(
175231
'/testSrc/appPrefix/component/custom.component.html', `
176232
<igx-bottom-nav>
177-
<igx-tab-panel label="Tab1" icon="folder" [isSelected]="true">
233+
<igx-tab-panel label="Tab1" icon="folder" [isSelected]="true" class="tabpanel">
178234
Some Content
179235
</igx-tab-panel>
180236
</igx-bottom-nav>`);
@@ -190,7 +246,7 @@ ${noteText}
190246
<igx-icon igxBottomNavHeaderIcon>folder</igx-icon>
191247
<span igxBottomNavHeaderLabel>Tab1</span>
192248
</igx-bottom-nav-header>
193-
<igx-bottom-nav-content>
249+
<igx-bottom-nav-content class="tabpanel">
194250
Some Content
195251
</igx-bottom-nav-content>
196252
</igx-bottom-nav-item>
@@ -201,7 +257,7 @@ Some Content
201257
appTree.create(
202258
'/testSrc/appPrefix/component/custom.component.html', `
203259
<igx-bottom-nav>
204-
<igx-tab label="Tab1" icon="folder" routerLink="view1">
260+
<igx-tab label="Tab1" icon="folder" routerLink="view1" class="igxtab">
205261
</igx-tab>
206262
</igx-bottom-nav>`);
207263
const tree = await schematicRunner.runSchematicAsync('migration-20', {}, appTree)
@@ -212,7 +268,7 @@ Some Content
212268
${noteText}
213269
<igx-bottom-nav>
214270
<igx-bottom-nav-item>
215-
<igx-bottom-nav-header routerLink="view1">
271+
<igx-bottom-nav-header routerLink="view1" class="igxtab">
216272
<igx-icon igxBottomNavHeaderIcon>folder</igx-icon>
217273
<span igxBottomNavHeaderLabel>Tab1</span>
218274
</igx-bottom-nav-header>
@@ -248,4 +304,38 @@ ${noteText}
248304
</igx-bottom-nav-item>
249305
</igx-bottom-nav>`);
250306
});
307+
308+
it('Should update the css selectors', async () => {
309+
appTree.create('/testSrc/appPrefix/component/custom.component.scss', `
310+
igx-tabs-group {
311+
padding: 8px;
312+
}
313+
igx-tab-item {
314+
padding: 8px;
315+
}
316+
igx-tab-panel {
317+
padding: 8px;
318+
}
319+
igx-tab {
320+
padding: 8px;
321+
}`);
322+
323+
const tree = await schematicRunner.runSchematicAsync('migration-20', {}, appTree)
324+
.toPromise();
325+
326+
expect(tree.readContent('/testSrc/appPrefix/component/custom.component.scss'))
327+
.toEqual(`
328+
igx-tab-content {
329+
padding: 8px;
330+
}
331+
igx-tab-header {
332+
padding: 8px;
333+
}
334+
igx-bottom-nav-content {
335+
padding: 8px;
336+
}
337+
igx-bottom-nav-header {
338+
padding: 8px;
339+
}`);
340+
});
251341
});

0 commit comments

Comments
 (0)