[all] updating components with tsdocs comments to properties, additio… (#125)

* [all] updating components with tsdocs comments to properties, additionally only people picker has function comments

* [mgt-agenda] updating tsdocs

* [mgt-login] updating tsdocs

* [people] updating ts docs

* [people-picker] updating tsdocs

* [mgt-person] updating tsdocs

* [mgt-tasks] updating tsdocs

* [mgt-login] additional ts documentation

Author: vogtn

src/components/mgt-agenda/mgt-agenda.ts

@@ -17,51 +17,93 @@ import '../../styles/fabric-icon-font';
 import { MgtTemplatedComponent } from '../templatedComponent';
 import { prepScopes } from '../../Graph';
 import { MgtPersonDetails } from '../mgt-person/mgt-person';
-
+/**
+ * Web Component which represents events in a user or group calendar.
+ *
+ * @export
+ * @class MgtAgenda
+ * @extends {MgtTemplatedComponent}
+ */
 @customElement('mgt-agenda')
 export class MgtAgenda extends MgtTemplatedComponent {
   private _firstUpdated = false;
+  /**
+   * determines width available for agenda component.
+   * @type {boolean}
+   */
   @property({ attribute: false }) private _isNarrow: boolean;
+
+  /**
+   * determines if agenda component is still loading details.
+   * @type {boolean}
+   */
   @property({ attribute: false }) private _loading: boolean = true;
 
+  /**
+   * array containg events from user agenda.
+   * @type {Array<MicrosoftGraph.Event>}
+   */
   @property({
     attribute: 'events'
   })
   events: Array<MicrosoftGraph.Event>;
 
+  /**
+   * allows developer to define agenda to group events by day.
+   * @type {Boolean}
+   */
   @property({
     attribute: 'group-by-day',
     type: Boolean,
     reflect: true
   })
   groupByDay = false;
 
+  /**
+   * stores current date for intial calender selection in events.
+   * @type {string}
+   */
   @property({
     attribute: 'date',
     type: String,
     reflect: true
   })
   date: string;
 
+  /**
+   * sets number of days until endate, 3 is the default
+   * @type {number}
+   */
   @property({
     attribute: 'days',
     type: Number,
     reflect: true
   })
   days: number = 3;
 
+  /**
+   * allows developer to specify a different graph query that retrieves events
+   * @type {string}
+   */
   @property({
     attribute: 'event-query',
     type: String
   })
   eventQuery: string;
 
+  /**
+   * allows developer to define max number of events shown
+   * @type {number}
+   */
   @property({
     attribute: 'show-max',
     type: Number
   })
   showMax: number;
-
+  /**
+   * determines if agenda events come from specific group
+   * @type {string}
+   */
   @property({
     attribute: 'group-id',
     type: String
@@ -77,7 +119,17 @@ export class MgtAgenda extends MgtTemplatedComponent {
     this.onResize = this.onResize.bind(this);
   }
 
-  firstUpdated() {
+  /**
+   * Invoked when the element is first updated. Implement to perform one time
+   * work on the element after update.
+   *
+   * Setting properties inside this method will trigger the element to update
+   * again after this update cycle completes.
+   *
+   * * @param _changedProperties Map of changed properties with old values
+   */
+
+  public firstUpdated() {
     this._firstUpdated = true;
     Providers.onProviderUpdated(() => this.loadData());
     this.loadData();
@@ -94,7 +146,16 @@ export class MgtAgenda extends MgtTemplatedComponent {
     super.disconnectedCallback();
   }
 
-  attributeChangedCallback(name, oldValue, newValue) {
+  /**
+   * Synchronizes property values when attributes change.
+   *
+   * @param {*} name
+   * @param {*} oldValue
+   * @param {*} newValue
+   * @memberof MgtAgenda
+   */
+
+  public attributeChangedCallback(name, oldValue, newValue) {
     if (oldValue !== newValue && (name === 'date' || name === 'days' || name === 'group-id')) {
       this.events = null;
       this.loadData();

src/components/mgt-login/mgt-login.ts

@@ -16,26 +16,49 @@ import { styles } from './mgt-login-css';
 import { MgtPersonDetails } from '../mgt-person/mgt-person';
 import '../mgt-person/mgt-person';
 import '../../styles/fabric-icon-font';
-
+/**
+ * Web component button and flyout control to facilitate Microsoft identity platform authentication
+ *
+ * @export
+ * @class MgtLogin
+ * @extends {MgtBaseComponent}
+ */
 @customElement('mgt-login')
 export class MgtLogin extends MgtBaseComponent {
+  /**
+   * Array of styles to apply to the element. The styles should be defined
+   * using the `css` tag function.
+   */
+  static get styles() {
+    return styles;
+  }
+
   private _loginButtonRect: ClientRect;
   private _popupRect: ClientRect;
   private _openLeft: boolean = false;
 
+  /**
+   * determines if login menu popup should be showing
+   * @type {boolean}
+   */
   @property({ attribute: false }) private _showMenu: boolean = false;
+
+  /**
+   * determines if login component is in loading state
+   * @type {boolean}
+   */
   @property({ attribute: false }) private _loading: boolean = true;
 
+  /**
+   * allows developer to use specific user details for login
+   * @type {MgtPersonDetails}
+   */
   @property({
     attribute: 'user-details',
     type: Object
   })
   userDetails: MgtPersonDetails;
 
-  static get styles() {
-    return styles;
-  }
-
   constructor() {
     super();
     Providers.onProviderUpdated(() => this.loadState());
@@ -82,6 +105,16 @@ export class MgtLogin extends MgtBaseComponent {
     }
   }
 
+  /**
+   * Invoked when the element is first updated. Implement to perform one time
+   * work on the element after update.
+   *
+   * Setting properties inside this method will trigger the element to update
+   * again after this update cycle completes.
+   *
+   * * @param _changedProperties Map of changed properties with old values
+   */
+
   firstUpdated() {
     window.addEventListener('click', (event: MouseEvent) => {
       // get popup bounds
@@ -183,6 +216,11 @@ export class MgtLogin extends MgtBaseComponent {
     this._showMenu = false;
   }
 
+  /**
+   * 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.
+   */
   render() {
     const content = this.userDetails ? this.renderLoggedIn() : this.renderLogIn();