updated to lit-element 2.3.1 and fixed minor bugs found during validation (#341)

Co-authored-by: Shane Weaver <[email protected]>

Author: nmetulev

package.json

@@ -61,33 +61,33 @@
     "@microsoft/microsoft-graph-client": "^2.0.0",
     "@microsoft/microsoft-graph-types": "^1.12.0",
     "@microsoft/microsoft-graph-types-beta": "github:microsoftgraph/msgraph-typescript-typings#beta",
-    "lit-element": "^2.2.1",
+    "lit-element": "^2.3.1",
     "msal": "1.1.3",
     "office-ui-fabric-core": "11.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.8.3",
+    "@babel/core": "^7.9.0",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-proposal-decorators": "^7.8.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
-    "@babel/preset-env": "^7.8.3",
-    "@babel/preset-react": "^7.7.4",
-    "@babel/preset-typescript": "^7.8.3",
-    "@storybook/addon-a11y": "^5.3.8",
-    "@storybook/addon-actions": "^5.3.8",
-    "@storybook/addon-docs": "^5.3.8",
-    "@storybook/addon-knobs": "^5.3.8",
-    "@storybook/addon-links": "^5.3.8",
-    "@storybook/addon-storysource": "^5.3.8",
+    "@babel/plugin-proposal-object-rest-spread": "^7.9.0",
+    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-typescript": "^7.9.0",
+    "@storybook/addon-a11y": "^5.3.17",
+    "@storybook/addon-actions": "^5.3.17",
+    "@storybook/addon-docs": "^5.3.17",
+    "@storybook/addon-knobs": "^5.3.17",
+    "@storybook/addon-links": "^5.3.17",
+    "@storybook/addon-storysource": "^5.3.17",
     "@storybook/storybook-deployer": "^2.8.1",
-    "@storybook/web-components": "^5.3.8",
+    "@storybook/web-components": "^5.3.17",
     "@types/jest": "^24.9.1",
     "@types/node": "12.12.22",
-    "@webcomponents/webcomponentsjs": "^2.4.1",
-    "babel-loader": "^8.0.6",
+    "@webcomponents/webcomponentsjs": "^2.4.3",
+    "babel-loader": "^8.1.0",
     "core-js": "^3.6.4",
     "cpx": "^1.5.0",
-    "es-dev-server": "^1.36.2",
+    "es-dev-server": "^1.45.3",
     "gulp": "^4.0.2",
     "gulp-append-prepend": "^1.0.8",
     "gulp-header-license": "^1.0.9",
@@ -101,17 +101,17 @@
     "monaco-editor-webpack-plugin": "^1.8.2",
     "npm-run-all": "^4.1.5",
     "prettier": "1.17.0",
-    "regenerator-runtime": "^0.13.3",
+    "regenerator-runtime": "^0.13.5",
     "rollup": "^1.29.1",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-babel-minify": "^9.1.1",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-postcss": "^2.0.4",
+    "rollup-plugin-postcss": "^2.5.0",
     "rollup-plugin-terser": "^5.2.0",
     "rollup-plugin-typescript": "^1.0.1",
-    "sass": "^1.25.0",
+    "sass": "^1.26.3",
     "shx": "^0.3.2",
     "storybook-addon-web-components-knobs": "^0.2.7",
     "ts-jest": "^24.3.0",

src/components/baseComponent.ts

@@ -105,7 +105,6 @@ export abstract class MgtBaseComponent extends LitElement {
    * determines if login component is in loading state
    * @type {boolean}
    */
-  @property({ attribute: false })
   private _isLoadingState: boolean = false;
 
   private _isFirstUpdated = false;
@@ -213,22 +212,22 @@ export abstract class MgtBaseComponent extends LitElement {
     }
 
     // Wait for the current load promise to complete (unless forced).
-    if (this._isLoadingState && !force) {
+    if (this.isLoadingState && !force) {
       await this._currentLoadStatePromise;
     }
 
     const loadStatePromise = new Promise(async (resolve, reject) => {
       try {
-        this._isLoadingState = true;
+        this.setLoadingState(true);
         this.fireCustomEvent('loadingInitiated');
 
         await this.loadState();
 
-        this._isLoadingState = false;
+        this.setLoadingState(false);
         this.fireCustomEvent('loadingCompleted');
         resolve();
       } catch (e) {
-        this._isLoadingState = false;
+        this.setLoadingState(false);
         this.fireCustomEvent('loadingFailed');
         reject(e);
       }
@@ -237,8 +236,17 @@ export abstract class MgtBaseComponent extends LitElement {
     // Return the load state promise.
     // If loading + forced, chain the promises.
     return (this._currentLoadStatePromise =
-      this._isLoadingState && !!this._currentLoadStatePromise && force
+      this.isLoadingState && !!this._currentLoadStatePromise && force
         ? this._currentLoadStatePromise.then(() => loadStatePromise)
         : loadStatePromise);
   }
+
+  private setLoadingState(value: boolean) {
+    if (this._isLoadingState === value) {
+      return;
+    }
+
+    this._isLoadingState = value;
+    this.requestUpdate('isLoadingState');
+  }
 }

src/components/mgt-people-picker/mgt-people-picker.scss

@@ -21,6 +21,9 @@ $people-list-background-color: var(--people-list-background-color, white);
 
 :host {
   border-radius: 2px;
+  font-family: var(--default-font-family);
+  font-style: normal;
+  font-weight: normal;
 }
 :host .root,
 mgt-people-picker .root {
@@ -46,9 +49,6 @@ mgt-people-picker .flyout-root {
   overflow-y: auto;
   text-align: left;
   list-style-type: none;
-  font-family: var(--default-font-family, 'Segoe UI');
-  font-style: normal;
-  font-weight: normal;
 
   li {
     cursor: pointer;

src/components/mgt-people/mgt-people.ts

@@ -257,7 +257,7 @@ export class MgtPeople extends MgtTemplatedComponent {
     }
 
     const newIdsSet = new Set(newIds);
-    this.people = this.people.filter(p => newIdsSet.has(p.id));
+    this.people = this.people ? this.people.filter(p => newIdsSet.has(p.id)) : [];
     const oldIdsSet = new Set(this.people ? this.people.map(p => p.id) : []);
 
     const newToLoad = [];