Skip to content

Commit 7738ba4

Browse files
committed
Merge branch 'igxDragDrop-directive' of https://github.com/IgniteUI/igniteui-angular into igxDragDrop-directive
2 parents 76c7dbb + 604067d commit 7738ba4

File tree

8 files changed

+235
-42
lines changed

8 files changed

+235
-42
lines changed

README.md

Lines changed: 30 additions & 26 deletions
Large diffs are not rendered by default.

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

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
4040

4141

4242
/**
43-
* This is a reference to the avatar image element in the DOM.
43+
* This is a reference to the avatar `image` element in the DOM.
4444
*
4545
* ```typescript
4646
* let image = this.avatar.image;
@@ -68,7 +68,7 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
6868
@ViewChild('iconTemplate', { read: TemplateRef })
6969
protected iconTemplate: TemplateRef<any>;
7070
/**
71-
* Returns the aria-label of the avatar.
71+
* Returns the `aria-label` of the avatar.
7272
*
7373
* ```typescript
7474
* let ariaLabel = this.avatar.ariaLabel;
@@ -78,7 +78,7 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
7878
@HostBinding('attr.aria-label')
7979
public ariaLabel = 'avatar';
8080
/**
81-
* Returns the role attribute of the avatar.
81+
* Returns the `role` attribute of the avatar.
8282
*
8383
* ```typescript
8484
* let avatarRole = this.avatar.role;
@@ -101,7 +101,7 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
101101
public cssClass = 'igx-avatar';
102102
/**
103103
* Returns the type of the avatar.
104-
* The avatar can be: "initials type avatar", "icon type avatar" or "image type avatar".
104+
* The avatar can be: `"initials type avatar"`, `"icon type avatar"` or `"image type avatar"`.
105105
*
106106
* ```typescript
107107
* let avatarDescription = this.avatar.roleDescription;
@@ -117,7 +117,7 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
117117
private _size: string | Size = 'small';
118118

119119
/**
120-
* Sets the id of the avatar. If not set, the first avatar component will have id = "igx-avatar-0".
120+
* Sets the `id` of the avatar. If not set, the first avatar component will have `id` = `"igx-avatar-0"`.
121121
*
122122
* ```html
123123
* <igx-avatar id="my-first-avatar"></igx-avatar>
@@ -129,7 +129,7 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
129129
@Input()
130130
public id = `igx-avatar-${NEXT_ID++}`;
131131
/**
132-
* Sets a round shape to the avatar if "roundShape" is true.
132+
* Sets a round shape to the avatar if `roundShape` is `"true"`.
133133
* By default the shape of the avatar is a square.
134134
*
135135
* ```html
@@ -143,7 +143,7 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
143143
public roundShape = false;
144144

145145
/**
146-
* Sets the avatar's initials/icon color.
146+
* Sets the avatar's `initials`/`icon` color.
147147
*
148148
*```html
149149
*<igx-avatar color="blue"></igx-avatar>
@@ -167,7 +167,7 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
167167
public bgColor: string;
168168

169169
/**
170-
* Sets initials to the avatar.
170+
* Sets `initials` to the avatar.
171171
*
172172
* ```html
173173
* <igx-avatar initials="MN"></igx-avatar>
@@ -179,7 +179,7 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
179179
public initials: string;
180180

181181
/**
182-
* Sets an icon to the avatar. All icons from the material icon set are supported.
182+
* Sets an `icon` to the avatar. All icons from the material icon set are supported.
183183
*
184184
* ```html
185185
* <igx-avatar icon="phone"></igx-avatar>
@@ -191,7 +191,7 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
191191
public icon: string;
192192

193193
/**
194-
* Sets the image source of the avatar.
194+
* Sets the `image` source of the avatar.
195195
*
196196
* ```html
197197
* <igx-avatar src="images/picture.jpg"></igx-avatar>
@@ -203,7 +203,7 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
203203
public src: string;
204204

205205
/**
206-
* Returns the size of the avatar.
206+
* Returns the `size` of the avatar.
207207
*
208208
* ```typescript
209209
*let avatarSize = this.avatar.size;
@@ -217,8 +217,8 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
217217
}
218218

219219
/**
220-
* Sets the size of the avatar.
221-
* By default the size is "small". It can be set to "medium" or "large".
220+
* Sets the `size` of the avatar.
221+
* By default the `size` is `"small"`. It can be set to `"medium"` or `"large"`.
222222
*
223223
* ```
224224
* <igx-avatar size="large"></igx-avatar>
@@ -288,7 +288,7 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
288288
}
289289

290290
/**
291-
* Returns the url of the image.
291+
* Returns the url of the `image`.
292292
*
293293
* ```typescript
294294
* let imageSourceUrl = this.avatar.getSrcUrl();
@@ -300,7 +300,9 @@ export class IgxAvatarComponent implements OnInit, AfterViewInit {
300300
return `url(${this.src})`;
301301
}
302302
}
303-
303+
/**
304+
* The `IgxAvatarModule` provides the {@link IgxAvatarComponent} inside your application.
305+
*/
304306
@NgModule({
305307
declarations: [IgxAvatarComponent],
306308
exports: [IgxAvatarComponent],
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# IgxTextHighlightDirective
2+
3+
#### Category
4+
_Directives_
5+
6+
## Description
7+
8+
Provides a way to highlight text elements.
9+
10+
## Usage
11+
12+
```html
13+
<div igxTextHighlight id="content" [cssClass]="highlightClass" [activeCssClass]="activeHighlightClass" [groupName]="groupName" [value]="html" [column]="0" [row]="0" [page]="0">
14+
{{html}}
15+
</div>
16+
```
17+
18+
## API
19+
20+
### Inputs
21+
| Name | Type | Description |
22+
| :--- |:--- | :--- |
23+
| cssClass| string | Determines the CSS class of the highlight elements, allowing the developer to provide custom CSS to customize the highlight. |
24+
| activeCssClass | string | Determines the CSS class of the active highlight element, allowing the developer to provide custom CSS to customize the active highlight.
25+
| groupName | string | Identifies the highlight within a unique group, allowing to have several different highlight groups each having their own active highlight.
26+
| value | any | The underlying value of the element that will be highlighted |
27+
| row | number | The index of the row on which the directive is currently on |
28+
| column | number | The index of the column on which the directive is currently on |
29+
| page | number | The index of the page on which the directive is currently on (used when the component containing the directive supports paging) |
30+
31+
### Methods
32+
| Name | Type | Arguments | Description |
33+
| :--- |:--- | :--- | :--- |
34+
| highlight | number | The text that should be highlighted and, optionally, if the search should be case sensitive or not (it defaults to false if it isn't specified). | Clears the existing highlight and highlight the searched text. Returns how many times the element contains the searched text. |
35+
| clearHighlight | void | N/A | Clears any existing highlight |
36+
| activateIfNecessary | void | N/A | Activates the highlight if it is on the currently active row, column and page |
37+
| setActiveHighlight (static)| void| The highlight group, the column, row and page of the directive and the index of the highlight | Activates the highlight at a given index (if such highlight exists) |
Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# IgxTextSelection
2+
3+
#### Category
4+
5+
_Directives_
6+
7+
## Description
8+
9+
Provides a way to trigger selection of text inside input elements.
10+
11+
## Usage
12+
```html
13+
<input type="text" [IgxTextSelection]="true" />
14+
```
15+
16+
## API
17+
18+
### Inputs
19+
| Name | Type | Description |
20+
| :--- |:--- | :--- |
21+
| IgxTextSelection| boolean | Determines whether the input element should be selectable through the directive.
22+
23+
### Accessors
24+
| Name | Type | Description |
25+
| :--- |:--- | :--- |
26+
| selected | boolean | Returns whether the element is selected or not.
27+
| nativeElement | ElementRef | Returns the nativeElement of the element where the directive was applied.
28+
29+
### Methods
30+
| Name | Type | Description |
31+
| :--- |:--- | :--- |
32+
| trigger | void | Triggers the selection of the element.

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1190,6 +1190,41 @@ describe('IgxGrid - Filtering actions', () => {
11901190

11911191
expect(grid.onFilteringDone.emit).toHaveBeenCalledWith(args);
11921192
});
1193+
1194+
it('When filter column with value 0 and dataType number, filtering icon class indicator should be applied', ((done) => {
1195+
const fix = TestBed.createComponent(IgxGridFilteringComponent);
1196+
fix.detectChanges();
1197+
1198+
const grid = fix.componentInstance.grid;
1199+
const gridheaders = fix.debugElement.queryAll(By.css('igx-grid-header'));
1200+
const headerOfTypeNumber = gridheaders.find(gh => gh.nativeElement.classList.contains('igx-grid__th--number'));
1201+
const filterUiContainer = headerOfTypeNumber.query(By.css(FILTER_UI_CONTAINER));
1202+
const filterIcon = filterUiContainer.query(By.css('igx-icon'));
1203+
const gridFilteringToggle = filterUiContainer.query(By.css('.igx-filtering__toggle'));
1204+
const input = filterUiContainer.query(By.directive(IgxInputDirective));
1205+
1206+
fix.whenStable().then(() => {
1207+
filterIcon.nativeElement.click();
1208+
return fix.whenStable();
1209+
}).then(() => {
1210+
fix.detectChanges();
1211+
sendInput(input, 0, fix);
1212+
return fix.whenStable();
1213+
}).then(() => {
1214+
expect(gridFilteringToggle.nativeElement.classList.contains('igx-filtering__toggle--active')).toBeTruthy();
1215+
return fix.whenStable();
1216+
}).then(() => {
1217+
fix.detectChanges();
1218+
grid.nativeElement.click();
1219+
return fix.whenStable();
1220+
}).then(() => {
1221+
fix.detectChanges();
1222+
setTimeout(() => {
1223+
expect(gridFilteringToggle.nativeElement.classList.contains('igx-filtering__toggle--filtered')).toBeTruthy();
1224+
done();
1225+
}, 500);
1226+
});
1227+
}));
11931228
});
11941229

11951230
export class CustomFilter extends IgxFilteringOperand {

projects/igniteui-angular/src/lib/grid/grid-filtering.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -287,7 +287,7 @@ export class IgxGridFilterComponent implements IGridBus, OnInit, OnDestroy, DoCh
287287
this._value = expr.searchVal;
288288
this._filterCondition = expr.condition.name;
289289

290-
if (!this.unaryCondition && !this._value) {
290+
if (!this.unaryCondition && !this._value && this._value !== 0) {
291291
return false;
292292
}
293293
return true;

projects/igniteui-angular/src/lib/grid/grid-selection.spec.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -917,6 +917,28 @@ describe('IgxGrid - Row Selection', () => {
917917
});
918918
}));
919919

920+
it('Should be able to correctly select all rows programatically', async(() => {
921+
const fixture = TestBed.createComponent(GridWithSelectionComponent);
922+
fixture.detectChanges();
923+
const grid = fixture.componentInstance.gridSelection3;
924+
const gridElement: HTMLElement = fixture.nativeElement.querySelector('.igx-grid');
925+
const firstRow = grid.getRowByIndex(0);
926+
const secondRow = grid.getRowByIndex(1);
927+
const firstRowCheckbox: HTMLElement = firstRow.nativeElement.querySelector('.igx-checkbox__input');
928+
expect(firstRow.isSelected).toBeFalsy();
929+
grid.selectAllRows();
930+
fixture.whenStable().then(() => {
931+
fixture.detectChanges();
932+
expect(firstRow.isSelected).toBeTruthy();
933+
expect(secondRow.isSelected).toBeTruthy();
934+
firstRowCheckbox.dispatchEvent(new Event('click', {}));
935+
return fixture.whenStable();
936+
}).then(() => {
937+
fixture.detectChanges();
938+
expect(firstRow.isSelected).toBeFalsy();
939+
});
940+
}));
941+
920942
it('Should be able to programatically select all rows with a correct reference, #1297', async(() => {
921943
const fix = TestBed.createComponent(GridWithPrimaryKeyComponent);
922944
fix.detectChanges();
Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
# igx-input-group
2+
3+
#### Category
4+
_Components_
5+
6+
## Description
7+
_igx-input-group represents a input field._
8+
A walkthrough of how to get started can be found [here](https://staging.infragistics.local/products/ignite-ui-angular/angular/components/input_group.html)
9+
10+
## Usage
11+
```html
12+
<igx-input-group>
13+
<igx-prefix>+359</igx-prefix>
14+
<label igxLabel for="phone">Phone</label>
15+
<input igxInput name="phone" type="text" [(ngModel)]="user.phone" />
16+
<igx-suffix>
17+
<igx-icon name="phone"></igx-icon>
18+
</igx-suffix>
19+
</igx-input-group>
20+
```
21+
22+
### Elements
23+
The following directives could be wrapped in an <igx-input-group> container - igxInput, igxLabel, igxPrefix, igxSuffix or igxHint.
24+
25+
#### Prefix & Suffix
26+
Both directives can contain html elements, strings, icons or even other components. Let's add a new input field with string prefix (+359) and igxIcon suffix (<igx-icon name="phone"></igx-icon>)
27+
28+
#### Hints
29+
Ignite UI for Angular Hint provides a helper text placed below the input. The hint can be placed at the start or at the end of the input. The position of the igxHint can be set using the position property. Let's add a hint to our phone input:
30+
31+
```html
32+
<igx-input-group>
33+
<igx-prefix>+359</igx-prefix>
34+
<label igxLabel for="phone">Phone</label>
35+
<input igxInput name="phone" type="text" [(ngModel)]="user.phone" />
36+
<igx-suffix>
37+
<igx-icon name="phone"></igx-icon>
38+
</igx-suffix>
39+
<igx-hint position="start">Ex.: +359 888 123 456</igx-hint>
40+
</igx-input-group>
41+
```
42+
43+
44+
## API
45+
46+
### Inputs
47+
48+
| Name | Description |
49+
| :--- | :--- |
50+
| type | How the input will be styled. The allowed values are line, box, border and search. The default is line.|
51+
| position | **`Hint` API**. Where the hint will be placed. The allowed values are start and end. The default value is start. |
52+
53+
54+
### Methods
55+
56+
| Name | Description |
57+
| :--- | :--- |
58+
| isTypeLine() | Whether the `igxInputGroup` type is line |
59+
| isTypeBox() | Whether the igxInputGroup type is box |
60+
| isTypeBorder() | Whether the igxInputGroup type is border |
61+
| isTypeSearch() | Whether the igxInputGroup type is search. |

0 commit comments

Comments
 (0)