Merge branch 'joaojmendes-master' into dev

Author: AJIXuMuK

docs/documentation/docs/assets/SelectTeamChannelPicker.png

@@ -0,0 +1,66 @@
+# TeamChannelPicker control
+
+This control allows you to select one or multiple Team Channel user has permissions.
+
+!!! Note
+    You can also check out [Microsoft Teams Channel Picker](https://docs.microsoft.com/en-us/graph/toolkit/components/teams-channel-picker) component in the [Microsoft Graph Toolkit](https://github.com/microsoftgraph/microsoft-graph-toolkit).
+
+Here is an example of the control:
+
+![TeamChannelPicker](../assets/SelectTeamPicker.gif)
+
+`SelectTeamChannelPicker` single selection mode:
+
+![Teamselection](../assets/SelectTeamChannelPicker.png)
+
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
+- Import the control into your component:
+
+```TypeScript
+import { TeamChannelPicker } from "@pnp/spfx-controls-react/lib/TeamChannelPicker";
+```
+
+- Use the `TeamChannelPicker` control in your code as follows:
+
+```TypeScript
+<TeamChannelPicker    label="Select Team channel"
+                            teamId={teamId}
+                            selectedChannels={selectedTeamChannels}
+                            appcontext={webpartContext}
+                            itemLimit={1}
+                            onSelectedChannels={_onSelectedTeamChannels}/>
+```
+
+- The `_onSelectedTeamChannels` change event returns the team channel(s) and can be implemented as follows:
+
+```TypeScript
+const _onSelectedTeamChannels ((tagList: ITag[]) => {
+              console.log(tagList);
+      }
+```
+
+## Implementation
+
+
+The `SelectTeamChannelPicker` control can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| teamId | string | yes | Id of Team to get channels  |
+| appcontext | WebPartContext \| ExtensionContext | yes | The context object of the SPFx loaded webpart or customizer. |
+| selectedChannels | ITag[] | yes | Array with selected channels  |
+| itemLimit | number | no | number of allowed selected channels |
+| label | string | no | Label of Picker |
+| styles | IBasePickerStyles | no | Customer Styles of Picker |
+| onSelectedChannels: | (tagsList:ITag[]) => void; | yes | callBack with channels Selected |
+
+
+## MSGraph Permissions required
+
+This control required the flowing scopes :
+
+at least : Team.ReadBasic.All, Channel.ReadBasic.All,
+ 

docs/documentation/docs/assets/SelectTeamPicker.gif

@@ -0,0 +1,60 @@
+# TeamPicker control
+
+This control allows you to select one or multiple Team user has permissions.
+
+Here is an example of the control:
+
+![TeamPicker](../assets/SelectTeamPicker.gif)
+
+`SelectTeamPicker` single selection mode:
+
+![Teamselection](../assets/SelectTeamPicker_select.png)
+
+
+## How to use this control in your solutions
+
+- Check that you installed the `@pnp/spfx-controls-react` dependency. Check out the [getting started](../../#getting-started) page for more information about installing the dependency.
+- Import the control into your component:
+
+```TypeScript
+import { SelectTeamPicker } from "@pnp/spfx-controls-react/lib/TeamPicker";
+```
+
+- Use the `SelectTeamPicker` control in your code as follows:
+
+```TypeScript
+<TeamPicker   label="Select Team"
+                    selectedTeams={selectedTeams}
+                    appcontext={webpartContext}
+                    itemLimit={1}
+                    onSelectedTeams={_onSelectedTeams}/>
+```
+
+- The `_onSelectedTeams` change event returns the team(s) and can be implemented as follows:
+
+```TypeScript
+const _onSelectedTeams ((tagList: ITag[]) => {
+              console.log(tagList);
+      }
+```
+
+## Implementation
+
+
+The `TeamPicker` control can be configured with the following properties:
+
+| Property | Type | Required | Description |
+| ---- | ---- | ---- | ---- |
+| appcontext | WebPartContext \| ExtensionContext | yes | The context object of the SPFx loaded webpart or customizer. |
+| selectedTeams | ITag[] | yes | Array with Selected Teams  |
+| itemLimit | number | no | number of allowed selected items |
+| label | string | no | Label of Picker |
+| styles | IBasePickerStyles | no | Customer Styles of Picker |
+| onSelectedTeams: | (tagsList:ITag[]) => void; | yes | callBack with teams Selected |
+
+
+ ## MSGraph Permissions required
+
+This control required the flowing scopes :
+
+at least : Team.ReadBasic.All, Channel.ReadBasic.All,

docs/documentation/docs/assets/SelectTeamPicker.png

@@ -85,6 +85,8 @@ The following controls are currently available:
 - [SiteBreadcrumb](./controls/SiteBreadcrumb) (Breadcrumb control)
 - [SecurityTrimmedControl](./controls/SecurityTrimmedControl) (intended to be used when you want to show or hide components based on the user permissions)
 - [TaxonomyPicker](./controls/TaxonomyPicker) (Taxonomy Picker)
+- [TeamChannelPicker](./controls/TeamChannelPicker) (Team Channel Picker)
+- [TeamPicker](./controls/TeamPicker) (Team Picker)
 - [Toolbar](./controls/Toolbar) (Control to render Toolbar in Microsoft Teams)
 - [TreeView](./controls/TreeView) (Tree View)
 - [WebPartTitle](./controls/WebPartTitle) (Customizable web part title control)

docs/documentation/docs/assets/SelectTeamPicker_select.png

@@ -49,6 +49,8 @@ nav:
     - SiteBreadcrumb: 'controls/SiteBreadcrumb.md'
     - SecurityTrimmedControl: 'controls/SecurityTrimmedControl.md'
     - TaxonomyPicker: 'controls/TaxonomyPicker.md'
+    - TeamChannelPicker: 'controls/TeamChannelPicker.md'
+    - TeamPicker: 'controls/TeamPicker.md'
     - Toolbar: 'controls/Toolbar.md'
     - TreeView: 'controls/TreeView.md'
     - WebPartTitle: 'controls/WebPartTitle.md'