Skip to content

Commit ff03182

Browse files
ddinchevaddincheva
authored
Merge branch '10.1.x' into ddincheva/monthPickerAnimation-10.1
2 parents 6be1b56 + c871085 commit ff03182

20 files changed

+2159
-2250
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ All notable changes for each version of this project will be documented in this
2929
- Added a disabled style for time parts outside of the minimum and maximum range.
3030
- `igxDatePicker`
3131
- Added new property - `editorTabIndex`, that allows setting tabindex for the default editor.
32+
- `IgxSelect`
33+
- Added `aria-labelledby` property for the items list container(marked as `role="listbox"`). This will ensure the users of assistive technologies will also know what the list items container is used for, upon opening.
3234

3335
### New Theme
3436
Ignite UI for Angular now has a new theme based on our own design system.

‎projects/igniteui-angular/src/lib/avatar/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
55

66
# Usage
77
```html
8-
<igx-avatar roundShape="true" icon="person" bgColor="#0375be" data-init="SS">
8+
<igx-avatar [roundShape]="true" icon="person" bgColor="#0375be" data-init="SS">
99
</igx-avatar>
1010
```
1111

@@ -27,7 +27,7 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
2727

2828
Using `igx-avatar` tag to include it into your app.
2929
```html
30-
<igx-avatar roundShape="true" icon="person" bgColor="#0375be" data-init="SS">
30+
<igx-avatar [roundShape]="true" icon="person" bgColor="#0375be" data-init="SS">
3131
</igx-avatar>
3232
```
3333

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export type IgxAvatarType = (typeof IgxAvatarType)[keyof typeof IgxAvatarType];
4747
*
4848
* @example
4949
* ```html
50-
* <igx-avatar initials="MS" roundShape="true" size="large">
50+
* <igx-avatar initials="MS" [roundShape]="true" size="large">
5151
* </igx-avatar>
5252
* ```
5353
*/
@@ -145,12 +145,12 @@ export class IgxAvatarComponent implements OnInit {
145145
public id = `igx-avatar-${NEXT_ID++}`;
146146

147147
/**
148-
* Sets a round shape to the avatar, if `roundShape` is set to `true`.
148+
* Sets a round shape to the avatar, if `[roundShape]` is set to `true`.
149149
* By default the shape of the avatar is a square.
150150
*
151151
* @example
152152
* ```html
153-
* <igx-avatar roundShape="true" ></igx-avatar>
153+
* <igx-avatar [roundShape]="true" ></igx-avatar>
154154
* ```
155155
*/
156156

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

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -703,7 +703,7 @@
703703
grid-template-columns: 1fr;
704704
overflow: hidden;
705705
box-shadow: $grid-shadow;
706-
706+
707707
@if $variant == 'fluent' {
708708
box-shadow: 0 0 0 1px --var($theme, 'grid-border-color');
709709
}
@@ -1139,16 +1139,19 @@
11391139
%igx-grid__td--bool {
11401140
justify-content: center;
11411141

1142-
igx-icon {
1142+
%igx-icon-display {
11431143
height: rem(18px);
11441144
width: rem(18px);
11451145
font-size: rem(18px);
1146+
}
1147+
1148+
%igx-icon--error {
11461149
color: igx-color($palette, 'grays', 500);
11471150
}
11481151
}
11491152

11501153
%igx-grid__td--bool-true {
1151-
igx-icon {
1154+
%igx-icon--success {
11521155
color: igx-color($palette, 'grays', 700);
11531156
}
11541157
}

‎projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-component.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,16 @@
1515
@extend %igx-icon-display !optional;
1616
@extend %igx-icon--inactive !optional;
1717
}
18+
19+
@include m(success) {
20+
@extend %igx-icon-display !optional;
21+
@extend %igx-icon--success !optional;
22+
}
23+
24+
@include m(error) {
25+
@extend %igx-icon-display !optional;
26+
@extend %igx-icon--error !optional;
27+
}
1828
}
1929

2030
@include b(igx-svg-container) {

‎projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,14 @@
7474
}
7575
}
7676

77+
%igx-icon--success {
78+
color: igx-color(map-get($theme, 'palette'), 'success');
79+
}
80+
81+
%igx-icon--error {
82+
color: igx-color(map-get($theme, 'palette'), 'error');
83+
}
84+
7785
%igx-icon--inactive {
7886
color: --var($theme, 'disabled-color') !important;
7987
opacity: .54;

‎projects/igniteui-angular/src/lib/directives/scroll-inertia/scroll_inertia.directive.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,10 @@ export class IgxScrollInertiaDirective implements OnInit, OnDestroy {
9797
if (!this.IgxScrollInertiaScrollContainer) {
9898
return;
9999
}
100+
// if ctrl key is pressed and the user want to zoom in/out the page
101+
if (evt.ctrlKey) {
102+
return;
103+
}
100104
let scrollDeltaX;
101105
let scrollDeltaY;
102106
const scrollStep = this.wheelStep;

‎projects/igniteui-angular/src/lib/grids/cell.component.html‎

Lines changed: 66 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,94 @@
11
<ng-template #defaultPinnedIndicator>
2-
<igx-chip *ngIf="displayPinnedChip" class="igx-grid__td--pinned-chip" [disabled]="true" [displayDensity]="'compact'">{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip>
2+
<igx-chip
3+
*ngIf="displayPinnedChip"
4+
class="igx-grid__td--pinned-chip"
5+
[disabled]="true"
6+
[displayDensity]="'compact'"
7+
>{{ grid.resourceStrings.igx_grid_pinned_row_indicator }}</igx-chip
8+
>
39
</ng-template>
410
<ng-template #defaultCell>
5-
<div igxTextHighlight class="igx-grid__td-text" style="pointer-events: none"
11+
<div
12+
igxTextHighlight
13+
class="igx-grid__td-text"
14+
style="pointer-events: none;"
615
[cssClass]="highlightClass"
716
[activeCssClass]="activeHighlightClass"
817
[groupName]="gridID"
9-
[value]="formatter ? (value | columnFormatter:formatter) : column.dataType === 'number' ? (value | igxdecimal: grid.locale) : column.dataType === 'date' ? (value | igxdate: grid.locale) : value"
18+
[value]="
19+
formatter
20+
? (value | columnFormatter: formatter)
21+
: column.dataType === 'number'
22+
? (value | igxdecimal: grid.locale)
23+
: column.dataType === 'date'
24+
? (value | igxdate: grid.locale)
25+
: value
26+
"
1027
[row]="rowData"
1128
[column]="this.column.field"
1229
[containerClass]="'igx-grid__td-text'"
13-
[metadata]="searchMetadata">{{ formatter ? (value | columnFormatter:formatter) :
14-
column.dataType === 'number' ?
15-
(value | igxdecimal:grid.locale) :
16-
column.dataType === 'date' ?
17-
(value | igxdate: grid.locale) :
18-
column.dataType === 'boolean' ? "" :
19-
value
30+
[metadata]="searchMetadata"
31+
>{{
32+
formatter
33+
? (value | columnFormatter: formatter)
34+
: column.dataType === "number"
35+
? (value | igxdecimal: grid.locale)
36+
: column.dataType === "date"
37+
? (value | igxdate: grid.locale)
38+
: column.dataType === "boolean"
39+
? ""
40+
: value
2041
}}</div>
21-
<igx-icon *ngIf="column.dataType === 'boolean'">{{value ? 'check' : 'close'}}</igx-icon>
42+
<igx-icon
43+
*ngIf="column.dataType === 'boolean'"
44+
[ngClass]="{ 'igx-icon--success': value, 'igx-icon--error': !value }"
45+
>{{ value ? "check" : "close" }}</igx-icon
46+
>
2247
</ng-template>
2348
<ng-template #inlineEditor let-cell="cell">
2449
<ng-container *ngIf="column.dataType === 'string'">
2550
<igx-input-group displayDensity="compact">
26-
<input igxInput [value]="editValue" (input)="editValue = $event.target.value" [igxFocus]="true" />
51+
<input
52+
igxInput
53+
[value]="editValue"
54+
(input)="editValue = $event.target.value"
55+
[igxFocus]="true"
56+
/>
2757
</igx-input-group>
2858
</ng-container>
2959
<ng-container *ngIf="column.dataType === 'number'">
3060
<igx-input-group displayDensity="compact">
31-
<input igxInput [value]="editValue" (input)="editValue = $event.target.value" [igxFocus]="true" type="number">
61+
<input
62+
igxInput
63+
[value]="editValue"
64+
(input)="editValue = $event.target.value"
65+
[igxFocus]="true"
66+
type="number"
67+
/>
3268
</igx-input-group>
3369
</ng-container>
3470
<ng-container *ngIf="column.dataType === 'boolean'">
35-
<igx-checkbox (change)="editValue = $event.checked" [value]="editValue" [checked]="editValue"
36-
[igxFocus]="true" [disableRipple]="true"></igx-checkbox>
71+
<igx-checkbox
72+
(change)="editValue = $event.checked"
73+
[value]="editValue"
74+
[checked]="editValue"
75+
[igxFocus]="true"
76+
[disableRipple]="true"
77+
></igx-checkbox>
3778
</ng-container>
3879
<ng-container *ngIf="column.dataType === 'date'">
39-
<igx-date-picker [style.width.%]="100" [outlet]="grid.outlet" mode="dropdown"
40-
[locale]="grid.locale" [(value)]="editValue" [igxFocus]="true" [labelVisibility]="false">
80+
<igx-date-picker
81+
[style.width.%]="100"
82+
[outlet]="grid.outlet"
83+
mode="dropdown"
84+
[locale]="grid.locale"
85+
[(value)]="editValue"
86+
[igxFocus]="true"
87+
[labelVisibility]="false"
88+
>
4189
</igx-date-picker>
4290
</ng-container>
4391
</ng-template>
4492
<ng-container *ngTemplateOutlet="pinnedIndicatorTemplate; context: context">
4593
</ng-container>
46-
<ng-container *ngTemplateOutlet="template; context: context">
47-
</ng-container>
94+
<ng-container *ngTemplateOutlet="template; context: context"></ng-container>

0 commit comments

Comments
 (0)