Skip to content

Commit 8fbaa7f

Browse files
LipataLipata
authored
Merge branch 'master' into iganchev/date-time-readme-changelog
2 parents 2a2115a + ae3ad37 commit 8fbaa7f

Some content is hidden

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

43 files changed

+1784
-21
lines changed

‎CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,16 @@ All notable changes for each version of this project will be documented in this
1919

2020
### New Features
2121

22+
- `IgxActionStrip` component added.
23+
- Provides a template area for one or more actions. In its simplest form the Action Strip
24+
is an overlay of any container and shows additional content over that container.
25+
26+
```html
27+
<igx-action-strip #actionstrip>
28+
<igx-icon (click)="doSomeAction()"></igx-icon>
29+
</igx-action-strip>
30+
```
31+
2232
- `igxSplitter` component added.
2333
- Allows rendering a vertical or horizontal splitter with multiple splitter panes with templatable content.
2434
Panes can be resized or collapsed/expanded via the UI. Splitter orientation is defined via the `type` input.

‎projects/igniteui-angular/migrations/update-9_1_0/changes/inputs.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,14 @@
88
"selector": "igx-input-group",
99
"type": "component"
1010
}
11+
},
12+
{
13+
"name": "message",
14+
"moveBetweenElementTags": true,
15+
"owner": {
16+
"selector": "igx-toast",
17+
"type": "component"
18+
}
1119
}
1220
]
1321
}

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,18 @@ describe('Update 9.1.0', () => {
4141

4242
done();
4343
});
44+
45+
it('should move igx-toast message property between element tags', done => {
46+
appTree.create(
47+
`/testSrc/appPrefix/component/input.component.html`,
48+
'<igx-toast message="test message"></igx-toast>'
49+
);
50+
51+
const tree = schematicRunner.runSchematic('migration-15', {}, appTree);
52+
53+
expect(tree.readContent('/testSrc/appPrefix/component/input.component.html'))
54+
.toEqual('<igx-toast>test message</igx-toast>');
55+
56+
done();
57+
});
4458
});

‎projects/igniteui-angular/src/lib/action-strip/README.md‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
# igx-action-strip
2+
3+
The **igx-action-strip** provides a template area for one or more actions.
4+
In its simplest form the Action Strip is an overlay of any container and shows additional content over that container.
5+
A walk-through of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/action_strip.html)
6+
7+
# Usage
8+
The Action Strip can be initialized in any HTML element that can contain elements. This parent element should be with a relative position as the action strip is trying to overlay it. Interactions with the parent and its content are available while the action strip is shown.
9+
```html
10+
<igx-action-strip #actionstrip>
11+
<igx-icon (click)="doSomeAction()"></igx-icon>
12+
</igx-action-strip>
13+
```
14+
15+
# Grid Action Components
16+
Action strip provides functionality and UI for IgxGrid. All that can be utilized with grid action components. These components inherit `IgxGridActionsBaseDirective` and when creating a custom grid action component, this component should also inherit `IgxGridActionsBaseDirective`.
17+
18+
```html
19+
<igx-action-strip #actionstrip>
20+
<igx-grid-editing-actions [grid]="grid1"></igx-grid-editing-actions>
21+
<igx-grid-pinning-actions [grid]="grid1"></igx-grid-pinning-actions>
22+
</igx-action-strip>
23+
```
24+
25+
# IgxActionStripMenuItem
26+
27+
The Action Strip can show items as menu. This is achieved with `igxActionStripMenuItem` directive applied to its content. Action strip will render three-dot button that toggles a drop down. And the content will be those items that are marked with `igxActionStripMenuItem` directive.
28+
29+
```html
30+
<igx-action-strip #actionStrip1>
31+
<span *IgxActionStripMenuItem>Copy</span>
32+
<span *IgxActionStripMenuItem>Paste</span>
33+
<span *IgxActionStripMenuItem>Edit</span>
34+
</igx-action-strip>
35+
```
36+
# API Summary
37+
38+
## Inputs
39+
`IgxActionStripComponent`
40+
41+
| Name | Description | Type | Default value |
42+
|-----------------|---------------------------------------------------|-----------------------------|---------------|
43+
| hidden | An @Input property that sets the visibility of the Action Strip. | boolean | `false` |
44+
| context | Sets the context of an action strip. The context should be an instance of a @Component, that has element property. This element will be the placeholder of the action strip. | any | |
45+
46+
`IgxGridActionsBaseDirective` ( `IgxGridPinningActionsComponent`, `IgxGridEditingActionsComponent`)
47+
48+
| Name | Description | Type | Default value |
49+
|-----------------|---------------------------------------------------|-----------------------------|---------------|
50+
| grid | Set an instance of the grid for which to display the actions. | any | |
51+
| context | Sets the context of an action strip. The context is expected to be grid cell or grid row | any | |
52+
53+
## Outputs
54+
|Name|Description|Cancelable|Parameters|
55+
|--|--|--|--|
56+
| onMenuOpening | Emitted before the menu is opened | true | |
57+
| onMenuOpened | Emitted after the menu is opened | false | |
58+
59+
## Methods
60+
61+
`IgxActionStripComponent`
62+
63+
| Name | Description | Return type | Parameters |
64+
|----------|----------------------------|---------------------------------------------------|----------------------|
65+
| show | Showing the Action Strip and appending it the specified context element. | void | context |
66+
| hide | Hiding the Action Strip and removing it from its current context element. | void | |
67+
68+
`IgxGridPinningActionsComponent`
69+
| Name | Description | Return type | Parameters |
70+
|----------|----------------------------|---------------------------------------------------|----------------------|
71+
| pin | Pin the row according to the context. | void | |
72+
| unpin | Unpin the row according to the context. | void | |
73+
74+
`IgxGridPinningActionsComponent`
75+
| Name | Description | Return type | Parameters |
76+
|----------|----------------------------|---------------------------------------------------|----------------------|
77+
| startEdit | Enter row or cell edit mode depending the grid `rowEdibable` option | void | |
78+
| deleteRow | Delete a row according to the context | void | |

‎projects/igniteui-angular/src/lib/action-strip/action-strip.component.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div class="igx-action-strip__actions">
2+
<ng-content #content></ng-content>
3+
<ng-container *ngIf="menuItems.length > 0">
4+
<button igxButton="icon" igxRipple [igxToggleAction]="dropdown"
5+
[overlaySettings]="menuOverlaySettings" (click)="$event.stopPropagation()"
6+
[igxDropDownItemNavigation]="dropdown">
7+
<igx-icon>more_vert</igx-icon>
8+
</button>
9+
<igx-drop-down #dropdown>
10+
<igx-drop-down-item *ngFor="let item of menuItems">
11+
<div class="igx-drop-down__item-template">
12+
<ng-container *ngTemplateOutlet="item.templateRef; context: {$implicit: item}"></ng-container>
13+
</div>
14+
</igx-drop-down-item>
15+
</igx-drop-down>
16+
</ng-container>
17+
</div>

0 commit comments

Comments
 (0)