Skip to content

Commit da73737

Browse files
DiyanDimitrovDiyanDimitrov
authored
Merge branch '10.0.x' into ibarakov/fix-7379-10.0.x
2 parents 506a67c + f6d73b4 commit da73737

19 files changed

+108
-45
lines changed

‎CHANGELOG.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ All notable changes for each version of this project will be documented in this
2828
- `igxGrid`
2929
- **Behavioral Change** - Group rows now display the group column's header name instead of field when one is available.
3030
- `igx-select`, `igx-combo`, `igx-drop-down`
31-
- **Behavioral Change** - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default.
31+
- **Behavioral Change** - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default. This requires styling to be handled on the application-level if there is something more than a simple text in the item.
3232
- `IgxTransaction` - The `onStateUpdate` now emits with information of its origin. The emitted value is of type `StateUpdateEvent`, which has two properties:
3333
- `origin` - it can vary within the values of the `TransactionEventOrigin` interface;
3434
- `actions` - contains information about the transactions, that caused the emission of the event.

‎package-lock.json

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

‎package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -53,14 +53,13 @@
5353
"@angular/platform-browser-dynamic": "^10.0.0",
5454
"@angular/router": "^10.0.0",
5555
"@types/hammerjs": "^2.0.36",
56-
"@types/jszip": "^3.4.1",
5756
"@types/source-map": "0.5.2",
5857
"classlist.js": "^1.1.20150312",
5958
"core-js": "^2.6.11",
6059
"core-js-pure": "^3.6.5",
6160
"hammerjs": "^2.0.8",
6261
"igniteui-trial-watermark": "^1.0.3",
63-
"jszip": "^3.4.0",
62+
"jszip": "^3.5.0",
6463
"resize-observer-polyfill": "^1.5.1",
6564
"rxjs": "^6.5.4",
6665
"tslib": "^2.0.0",

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

-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
},
88
"whitelistedNonPeerDependencies": [
99
"@types/hammerjs",
10-
"@types/jszip",
1110
"core-js-pure",
1211
"hammerjs",
1312
"jszip",

‎projects/igniteui-angular/ng-package.prod.json

-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
},
1010
"whitelistedNonPeerDependencies": [
1111
"@types/hammerjs",
12-
"@types/jszip",
1312
"core-js-pure",
1413
"hammerjs",
1514
"jszip",

‎projects/igniteui-angular/package.json

+1-2
Original file line numberDiff line numberDiff line change
@@ -67,10 +67,9 @@
6767
],
6868
"dependencies": {
6969
"@types/hammerjs": "^2.0.36",
70-
"@types/jszip": "^3.1.7",
7170
"core-js-pure": "^3.6.5",
7271
"hammerjs": "^2.0.8",
73-
"jszip": "^3.3.0",
72+
"jszip": "^3.5.0",
7473
"tslib": "^2.0.0",
7574
"resize-observer-polyfill": "^1.5.1",
7675
"igniteui-trial-watermark": "^1.0.3"

‎projects/igniteui-angular/schematics/utils/dependency-handler.ts

-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ export const DEPENDENCIES_MAP: PackageEntry[] = [
2828
{ name: 'tslib', target: PackageTarget.NONE },
2929
{ name: 'resize-observer-polyfill', target: PackageTarget.REGULAR },
3030
{ name: '@types/hammerjs', target: PackageTarget.DEV },
31-
{ name: '@types/jszip', target: PackageTarget.DEV },
3231
{ name: 'igniteui-trial-watermark', target: PackageTarget.NONE },
3332
{ name: 'core-js-pure', target: PackageTarget.NONE },
3433
// peerDependencies

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

+7
Original file line numberDiff line numberDiff line change
@@ -2461,6 +2461,13 @@ describe('igxCombo', () => {
24612461
expect(combo.valid).toEqual(IgxComboState.INITIAL);
24622462
expect(combo.comboInput.valid).toEqual(IgxInputState.INITIAL);
24632463
});
2464+
it('should not open on click if combo is disabled', () => {
2465+
combo.disabled = true;
2466+
fixture.detectChanges();
2467+
UIInteractions.simulateClickEvent(combo.comboInput.nativeElement);
2468+
fixture.detectChanges();
2469+
expect(combo.dropdown.collapsed).toBeTruthy();
2470+
});
24642471
it('should be possible to be enabled/disabled when used as a form control', () => {
24652472
const form = fixture.componentInstance.reactiveForm;
24662473
const comboFormReference = form.controls.townCombo;

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -874,7 +874,9 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
874874
onInputClick(event: Event) {
875875
event.stopPropagation();
876876
event.preventDefault();
877-
this.toggle();
877+
if (!this.disabled) {
878+
this.toggle();
879+
}
878880
}
879881

880882
/**

‎projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -195,7 +195,7 @@
195195
background: --var($theme, 'item-background');
196196
min-width: $group-item-min-width;
197197
display: flex;
198-
flex: 1 0 0%;
198+
flex: 1 0 auto;
199199
justify-content: center;
200200
align-items: center;
201201
text-decoration: none;

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

+14-2
Original file line numberDiff line numberDiff line change
@@ -542,6 +542,14 @@
542542
@extend %igx-grid__filtering-cell-indicator--hidden !optional;
543543
}
544544

545+
@include e(filtering-dropdown-items) {
546+
@extend %igx-grid__filtering-dropdown-items !optional;
547+
}
548+
549+
@include e(filtering-dropdown-text) {
550+
@extend %igx-grid__filtering-dropdown-text !optional;
551+
}
552+
545553
@include e(filtering-row) {
546554
@extend %igx-grid__filtering-row !optional;
547555
}
@@ -554,8 +562,12 @@
554562
@extend %igx-grid__filtering-row--compact !optional;
555563
}
556564

557-
@include e(filtering-row-buttons) {
558-
@extend %igx-grid__filtering-row-buttons !optional;
565+
@include e(filtering-row-editing-buttons) {
566+
@extend %igx-grid__filtering-row-editing-buttons !optional;
567+
}
568+
569+
@include e(filtering-row-editing-buttons, $m: small) {
570+
@extend %igx-grid__filtering-row-editing-buttons--small !optional;
559571
}
560572

561573
@include e(filtering-row-main) {

‎projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

+37-1
Original file line numberDiff line numberDiff line change
@@ -2364,7 +2364,9 @@
23642364
}
23652365

23662366
igx-input-group {
2367-
flex: 0 0 200px;
2367+
width: 100%;
2368+
max-width: rem(200px);
2369+
min-width: rem(140px);
23682370
}
23692371

23702372
igx-prefix:focus {
@@ -2386,6 +2388,15 @@
23862388
}
23872389
}
23882390

2391+
%igx-grid__filtering-dropdown-items {
2392+
display: flex;
2393+
align-items: center;
2394+
}
2395+
2396+
%igx-grid__filtering-dropdown-text {
2397+
margin-left: rem(16px);
2398+
}
2399+
23892400
%igx-grid__filtering-row--cosy {
23902401
height: map-get($grid-header-height, 'cosy');
23912402
}
@@ -2399,6 +2410,7 @@
23992410
flex: 1;
24002411
overflow: hidden;
24012412
max-width: calc(100% - 176px);
2413+
min-width: rem(56px);
24022414

24032415
igx-chips-area {
24042416
transition: transform .25s $ease-out-back;
@@ -2630,4 +2642,28 @@
26302642

26312643
@include _excel-filtering($theme, $palette);
26322644
@include _advanced-filtering($theme, $palette);
2645+
2646+
%igx-grid__filtering-row-editing-buttons--small,
2647+
%igx-grid__filtering-row-editing-buttons {
2648+
display: flex;
2649+
align-items: center;
2650+
}
2651+
2652+
%igx-grid__filtering-row-editing-buttons {
2653+
button {
2654+
igx-icon {
2655+
margin-#{$right}: rem(8px);
2656+
}
2657+
}
2658+
}
2659+
2660+
%igx-grid__filtering-row-editing-buttons--small {
2661+
button {
2662+
&:not([disabled]) {
2663+
igx-icon {
2664+
color: --var($theme, 'sorted-header-icon-color');
2665+
}
2666+
}
2667+
}
2668+
}
26332669
}

‎projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

-1
Original file line numberDiff line numberDiff line change
@@ -1476,7 +1476,6 @@
14761476
border: 1px solid --var($theme, 'border-color');
14771477
font-size: map-get($bootstrap-font-size, 'comfortable');
14781478
padding: map-get($bootstrap-padding, 'comfortable');
1479-
transition: box-shadow $transition-timing, color $transition-timing;
14801479
}
14811480

14821481
%bootstrap-input--focus {

‎projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html

+6-4
Original file line numberDiff line numberDiff line change
@@ -160,10 +160,12 @@ <h6 class="igx-filter-empty__title">
160160
[name]="selectedColumn.filters.condition(conditionSelect.value).iconName">
161161
</igx-icon>
162162
<igx-select-item *ngFor="let condition of getConditionList()" [value]="condition">
163-
<igx-icon fontSet="filtering-icons"
164-
[name]="selectedColumn.filters.condition(condition).iconName">
165-
</igx-icon>
166-
<span>{{getConditionFriendlyName(condition)}}</span>
163+
<div class="igx-grid__filtering-dropdown-items">
164+
<igx-icon fontSet="filtering-icons"
165+
[name]="selectedColumn.filters.condition(condition).iconName">
166+
</igx-icon>
167+
<span class="igx-grid__filtering-dropdown-text">{{getConditionFriendlyName(condition)}}</span>
168+
</div>
167169
</igx-select-item>
168170
</igx-select>
169171

‎projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html

+13-5
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,10 @@
33
<igx-drop-down-item *ngFor="let condition of conditions"
44
[value]="condition"
55
[selected]="isConditionSelected(condition)">
6-
<igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
7-
<span style="margin-left: 16px">{{ translateCondition(condition) }}</span>
6+
<div class="igx-grid__filtering-dropdown-items">
7+
<igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
8+
<span class="igx-grid__filtering-dropdown-text">{{ translateCondition(condition) }}</span>
9+
</div>
810
</igx-drop-down-item>
911
</igx-drop-down>
1012

@@ -121,7 +123,13 @@
121123
<igx-icon>navigate_next</igx-icon>
122124
</button>
123125

124-
<div #buttonsContainer class="igx-grid__filtering-row-editing-buttons">
125-
<button igxButton igxRipple (click)="clearFiltering()" [disabled]="disabled" [tabindex]="disabled">{{filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}</button>
126-
<button #closeButton igxButton igxRipple (click)="close()">{{filteringService.grid.resourceStrings.igx_grid_filter_row_close}}</button>
126+
<div #buttonsContainer [ngClass]="isNarrowWidth ? 'igx-grid__filtering-row-editing-buttons--small' : 'igx-grid__filtering-row-editing-buttons'">
127+
<button [igxButton]="isNarrowWidth ? 'icon' : 'flat'" igxRipple (click)="clearFiltering()" [disabled]="disabled" [tabindex]="disabled">
128+
<igx-icon>refresh</igx-icon>
129+
{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_reset}}
130+
</button>
131+
<button #closeButton [igxButton]="isNarrowWidth ? 'icon' : 'flat'" igxRipple (click)="close()">
132+
<igx-icon>close</igx-icon>
133+
{{isNarrowWidth ? '' : filteringService.grid.resourceStrings.igx_grid_filter_row_close}}
134+
</button>
127135
</div>

‎projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts

+4
Original file line numberDiff line numberDiff line change
@@ -778,4 +778,8 @@ export class IgxGridFilteringRowComponent implements AfterViewInit {
778778
private get isColumnFiltered() {
779779
return this.column.filteringExpressionsTree && this.column.filteringExpressionsTree.filteringOperands.length > 0;
780780
}
781+
782+
public get isNarrowWidth(): boolean {
783+
return this.element.nativeElement.offsetWidth < 432;
784+
}
781785
}

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html

+4-2
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@
99
<igx-icon *ngIf="!expressionUI.expression.condition">filter_list</igx-icon>
1010
</igx-prefix>
1111
<igx-select-item *ngFor="let condition of conditions" [value]="condition" [selected]="isConditionSelected(condition)">
12-
<igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
13-
<span>{{translateCondition(condition)}}</span>
12+
<div class="igx-grid__filtering-dropdown-items">
13+
<igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
14+
<span class="igx-grid__filtering-dropdown-text">{{translateCondition(condition)}}</span>
15+
</div>
1416
</igx-select-item>
1517
</igx-select>
1618

‎projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.html

+8-4
Original file line numberDiff line numberDiff line change
@@ -166,12 +166,16 @@ <h4>{{ column.header || column.field }}</h4>
166166
<igx-drop-down-item
167167
*ngFor="let condition of conditions"
168168
[value]="condition">
169-
<igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
170-
<span style="margin-left: 16px">{{ translateCondition(condition) }}</span>
169+
<div class="igx-grid__filtering-dropdown-items">
170+
<igx-icon fontSet="filtering-icons" [name]="getCondition(condition).iconName"></igx-icon>
171+
<span class="igx-grid__filtering-dropdown-text">{{ translateCondition(condition) }}</span>
172+
</div>
171173
</igx-drop-down-item>
172174
<igx-drop-down-item *ngIf="showCustomFilterItem()">
173-
<igx-icon>filter_list</igx-icon>
174-
<span style="margin-left: 16px">{{ grid.resourceStrings.igx_grid_excel_custom_filter }}</span>
175+
<div class="igx-grid__filtering-dropdown-items">
176+
<igx-icon>filter_list</igx-icon>
177+
<span class="igx-grid__filtering-dropdown-text">{{ grid.resourceStrings.igx_grid_excel_custom_filter }}</span>
178+
</div>
175179
</igx-drop-down-item>
176180
</div>
177181
</igx-drop-down>

‎projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -1128,7 +1128,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
11281128
const reset = editingBtns.queryAll(By.css('button'))[0];
11291129
const close = editingBtns.queryAll(By.css('button'))[1];
11301130

1131-
expect(reset.nativeElement.innerText).toBe('Reset');
1131+
expect(reset.nativeElement.childNodes[1].textContent.trim()).toBe('Reset');
11321132
}));
11331133

11341134
it('Should correctly change resource strings for filter row using Changei18n.', fakeAsync(() => {
@@ -1151,8 +1151,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
11511151
const reset = editingBtns.queryAll(By.css('button'))[0];
11521152
const close = editingBtns.queryAll(By.css('button'))[1];
11531153

1154-
expect(close.nativeElement.innerText).toBe('My close');
1155-
expect(reset.nativeElement.innerText).toBe('Reset');
1154+
expect(close.nativeElement.childNodes[1].textContent.trim()).toBe('My close');
1155+
expect(reset.nativeElement.childNodes[1].textContent.trim()).toBe('Reset');
11561156

11571157
changei18n({
11581158
igx_grid_filter: 'Filter',
@@ -1181,8 +1181,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
11811181
const reset = editingBtns.queryAll(By.css('button'))[0];
11821182
const close = editingBtns.queryAll(By.css('button'))[1];
11831183

1184-
expect(close.nativeElement.innerText).toBe('My close');
1185-
expect(reset.nativeElement.innerText).toBe('Reset');
1184+
expect(close.nativeElement.childNodes[1].textContent.trim()).toBe('My close');
1185+
expect(reset.nativeElement.childNodes[1].textContent.trim()).toBe('Reset');
11861186
}));
11871187

11881188
it('should correctly apply locale to datePicker.', fakeAsync(() => {

0 commit comments

Comments
 (0)