@microsoft/mgt
Version:
The Microsoft Graph Toolkit
145 lines (144 loc) • 4.9 kB
TypeScript
/**
* -------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All Rights Reserved. Licensed under the MIT License.
* See License in the project root for license information.
* -------------------------------------------------------------------------------------------
*/
import * as MicrosoftGraph from '@microsoft/microsoft-graph-types';
import { TemplateResult } from 'lit-element';
import '../../styles/fabric-icon-font';
import '../mgt-person/mgt-person';
import { MgtTemplatedComponent } from '../templatedComponent';
/**
* Web component used to search for people from the Microsoft Graph
*
* @export
* @class MgtPicker
* @extends {MgtTemplatedComponent}
*/
export declare class MgtPeoplePicker extends MgtTemplatedComponent {
/**
* Array of styles to apply to the element. The styles should be defined
* user the `css` tag function.
*/
static get styles(): import("lit-element").CSSResult[];
/**
* containing object of MgtPersonDetails.
* @type {MgtPersonDetails}
*/
people: Array<MicrosoftGraph.User | MicrosoftGraph.Person | MicrosoftGraph.Contact>;
/**
* determining how many people to show in list.
* @type {number}
*/
showMax: number;
/**
* value determining if search is filtered to a group.
* @type {string}
*/
groupId: string;
/**
* array of user picked people.
* @type {Array<any>}
*/
selectedPeople: Array<MicrosoftGraph.User | MicrosoftGraph.Person | MicrosoftGraph.Contact>;
private _userInput;
private showLoading;
private isLoading;
private arrowSelectionCount;
private groupPeople;
private debouncedSearch;
constructor();
/**
* Synchronizes property values when attributes change.
*
* @param {*} name
* @param {*} oldValue
* @param {*} newValue
* @memberof MgtPersonCard
*/
attributeChangedCallback(att: any, oldval: any, newval: any): void;
/**
* Invoked when the element is first updated. Implement to perform one time work on the element after update.
* Checks if group-id is present
* @memberof MgtPeoplePicker
*/
firstUpdated(): void;
/**
* Invoked on each update to perform rendering tasks. This method must return a lit-html TemplateResult.
* Setting properties inside this method will not trigger the element to update.
* @returns
* @memberof MgtPeoplePicker
*/
render(): TemplateResult;
/**
* Focuses the input element when focus is called
*
* @param {FocusOptions} [options]
* @memberof MgtPeoplePicker
*/
focus(options?: FocusOptions): void;
/**
* Queries the microsoft graph for a user based on the user id and adds them to the selectedPeople array
*
* @param {[string]} an array of user ids to add to selectedPeople
* @returns {Promise<void>}
* @memberof MgtPeoplePicker
*/
selectUsersById(userIds: [string]): Promise<void>;
/**
* Adds debounce method for set delay on user input
*/
private onUserKeyUp;
/**
* Async query to Graph for members of group if determined by developer.
* set's `this.groupPeople` to those members.
*/
private findGroup;
/**
* Tracks event on user input in search
* @param input - input text
*/
private handleUserSearch;
/**
* Tracks event on user search (keydown)
* @param event - event tracked on user input (keydown)
*/
private onUserKeyDown;
/**
* Tracks user key selection for arrow key selection of people
* @param event - tracks user key selection
*/
private handleArrowSelection;
/**
* Tracks when user selects person from picker
* @param person - contains details pertaining to selected user
* @param event - tracks user event
*/
private addPerson;
/**
* Async method which query's the Graph with user input
* @param name - user input or name of person searched
*/
private loadPersonSearch;
/**
* Filters people searched from already selected people
* @param people - array of people returned from query to Graph
*/
private filterPeople;
/**
* Removes person from selected people
* @param person - person and details pertaining to user selected
*/
private removePerson;
private renderErrorMessage;
private renderLoadingMessage;
private renderSelectedPeople;
private gainedFocus;
private lostFocus;
private renderHighlightText;
private renderPeopleList;
private renderPeople;
private renderPerson;
private renderSelectedPerson;
}