@microsoft/mgt-components - npm Package Compare versions

Comparing version 2.1.0-preview.f66db69 to 2.2.0-preview.3bf867f

dist/es6/components/mgt-person-card/sections/BasePersonCardSection.js

@@ -87,4 +87,6 @@ /**
      */
-    // tslint:disable-next-line:no-empty
-    clearState() { }
+    clearState() {
+        this._isCompact = false;
+        this._personDetails = null;
+    }
     /**
@@ -91,0 +93,0 @@ * Invoked on each update to perform rendering tasks. This method must return

dist/es6/components/mgt-person-card/sections/mgt-person-card-contact/mgt-person-card-contact.js

@@ -140,2 +140,3 @@ /**
     clearState() {
+        super.clearState();
         for (const key of Object.keys(this._contactParts)) {
@@ -142,0 +143,0 @@ this._contactParts[key].value = null;

dist/es6/components/mgt-person-card/sections/mgt-person-card-files/mgt-person-card-files.js

@@ -61,3 +61,6 @@ /**
      */
-    clearState() { }
+    clearState() {
+        super.clearState();
+        this._files = null;
+    }
     /**
@@ -64,0 +67,0 @@ * Render the icon for display in the navigation ribbon.

dist/es6/components/mgt-person-card/sections/mgt-person-card-messages/mgt-person-card-messages.js

@@ -61,2 +61,3 @@ /**
     clearState() {
+        super.clearState();
         this._messages = [];
@@ -63,0 +64,0 @@ }

dist/es6/components/mgt-person-card/sections/mgt-person-card-organization/mgt-person-card-organization.d.ts

@@ -42,2 +42,9 @@ /**
     /**
+     * Reset any state in the section
+     *
+     * @protected
+     * @memberof MgtPersonCardMessages
+     */
+    clearState(): void;
+    /**
      * The name for display in the overview section.
@@ -44,0 +51,0 @@ *

dist/es6/components/mgt-person-card/sections/mgt-person-card-organization/mgt-person-card-organization.js

@@ -53,2 +53,13 @@ /**
     /**
+     * Reset any state in the section
+     *
+     * @protected
+     * @memberof MgtPersonCardMessages
+     */
+    clearState() {
+        super.clearState();
+        this._state = null;
+        this._me = null;
+    }
+    /**
      * The name for display in the overview section.
@@ -55,0 +66,0 @@ *

dist/es6/components/mgt-person-card/sections/mgt-person-card-profile/mgt-person-card-profile.js

@@ -112,2 +112,3 @@ /**
     clearState() {
+        super.clearState();
         this.profile = null;
@@ -114,0 +115,0 @@ }

dist/es6/components/mgt-person/mgt-person.d.ts

@@ -40,2 +40,12 @@ /**
 }
+export declare enum avatarType {
+    /**
+     * Renders avatar photo if available, falls back to initials
+     */
+    photo = "photo",
+    /**
+     * Forces render avatar initials
+     */
+    initials = "initials"
+}
 /**
@@ -111,2 +121,8 @@ * Configuration object for the Person component
     /**
+     * Fallback when no user is found
+     * @type {IDynamicPerson}
+     */
+    get fallbackDetails(): IDynamicPerson;
+    set fallbackDetails(value: IDynamicPerson);
+    /**
      * user-id property allows developer to use id value to determine person
@@ -151,2 +167,11 @@ * @type {string}
     /**
+     * Determines and sets person avatar
+     *
+     *
+     * @type {string}
+     * @memberof MgtPerson
+     */
+    get avatarType(): string;
+    set avatarType(value: string);
+    /**
      * Gets or sets presence of person
@@ -212,2 +237,3 @@ *
     private _personDetails;
+    private _fallbackDetails;
     private _personAvatarBg;
@@ -218,2 +244,3 @@ private _personImage;
     private _userId;
+    private _avatarType;
     private _mouseLeaveTimeout;
@@ -220,0 +247,0 @@ private _mouseEnterTimeout;

dist/es6/components/mgt-person/mgt-person.js

@@ -32,3 +32,3 @@ /**
 import { getUserWithPhoto } from '../../graph/graph.userWithPhoto';
-import { findUsers } from '../../graph/graph.user';
+import { findUsers, getMe, getUser } from '../../graph/graph.user';
 import { Providers, ProviderState, MgtTemplatedComponent } from '@microsoft/mgt-element';
@@ -66,2 +66,13 @@ import '../../styles/style-helper';
 })(PersonViewType || (PersonViewType = {}));
+export var avatarType;
+(function (avatarType) {
+    /**
+     * Renders avatar photo if available, falls back to initials
+     */
+    avatarType["photo"] = "photo";
+    /**
+     * Forces render avatar initials
+     */
+    avatarType["initials"] = "initials";
+})(avatarType || (avatarType = {}));
 /**
@@ -111,2 +122,3 @@ * The person component is used to display a person or contact by using their photo, name, and/or email address.
         this._isInvalidImageSrc = false;
+        this._avatarType = 'photo';
     }
@@ -136,2 +148,25 @@ /**
     /**
+     * Fallback when no user is found
+     * @type {IDynamicPerson}
+     */
+    get fallbackDetails() {
+        return this._fallbackDetails;
+    }
+    set fallbackDetails(value) {
+        if (value === this._fallbackDetails) {
+            return;
+        }
+        this._fallbackDetails = value;
+        if (this.personDetails) {
+            return;
+        }
+        if (value && value.displayName) {
+            this._personAvatarBg = this.getColorFromName(value.displayName);
+        }
+        else {
+            this._personAvatarBg = 'gray20';
+        }
+        this.requestStateUpdate();
+    }
+    /**
      * user-id property allows developer to use id value to determine person
@@ -193,2 +228,19 @@ * @type {string}
     /**
+     * Determines and sets person avatar
+     *
+     *
+     * @type {string}
+     * @memberof MgtPerson
+     */
+    get avatarType() {
+        return this._avatarType;
+    }
+    set avatarType(value) {
+        if (value === this._avatarType) {
+            return;
+        }
+        this._avatarType = value;
+        this.requestStateUpdate();
+    }
+    /**
      * Gets or sets presence of person
@@ -227,7 +279,7 @@ *
         // Loading
-        if (this.isLoadingState && !this.personDetails) {
+        if (this.isLoadingState && !this.personDetails && !this.fallbackDetails) {
             return this.renderLoading();
         }
         // Prep data
-        const person = this.personDetails;
+        const person = this.personDetails || this.fallbackDetails;
         const image = this.getImage();
@@ -310,3 +362,3 @@ const presence = this.personPresence || this._fetchedPresence;
             : '';
-        if (imageSrc && !this._isInvalidImageSrc) {
+        if (imageSrc && !this._isInvalidImageSrc && this._avatarType === 'photo') {
             return html `
@@ -440,11 +492,11 @@ <div class="img-wrapper">
     renderAvatar(personDetails, image, presence) {
-        const title = this.personDetails && this.personCardInteraction === PersonCardInteraction.none
-            ? this.personDetails.displayName || getEmailFromGraphEntity(this.personDetails) || ''
+        const title = personDetails && this.personCardInteraction === PersonCardInteraction.none
+            ? personDetails.displayName || getEmailFromGraphEntity(personDetails) || ''
             : '';
         const imageClasses = {
-            initials: !image || this._isInvalidImageSrc,
+            initials: !image || this._isInvalidImageSrc || this._avatarType === 'initials',
             small: !this.isLargeAvatar(),
             'user-avatar': true
         };
-        if ((!image || this._isInvalidImageSrc) && this.personDetails) {
+        if ((!image || this._isInvalidImageSrc || this._avatarType === 'initials') && personDetails) {
             // add avatar background color
@@ -485,24 +537,54 @@ imageClasses[this._personAvatarBg] = true;
         if (this.view > PersonViewType.avatar) {
-            const text = this.getTextFromProperty(person, this.line1Property);
-            if (text) {
+            if (this.hasTemplate('line1')) {
+                // Render the line1 template
+                const template = this.renderTemplate('line1', { person });
                 details.push(html `
-          <div class="line1" aria-label="${text}" @click=${() => this.handleLine1Clicked()}>${text}</div>
+          <div class="line1" @click=${() => this.handleLine1Clicked()}>${template}</div>
         `);
             }
+            else {
+                // Render the line1 property value
+                const text = this.getTextFromProperty(person, this.line1Property);
+                if (text) {
+                    details.push(html `
+            <div class="line1" @click=${() => this.handleLine1Clicked()} aria-label="${text}">${text}</div>
+          `);
+                }
+            }
         }
         if (this.view > PersonViewType.oneline) {
-            const text = this.getTextFromProperty(person, this.line2Property);
-            if (text) {
+            if (this.hasTemplate('line2')) {
+                // Render the line2 template
+                const template = this.renderTemplate('line2', { person });
                 details.push(html `
-          <div class="line2" aria-label="${text}" @click=${() => this.handleLine2Clicked()}>${text}</div>
+          <div class="line2" @click=${() => this.handleLine2Clicked()}>${template}</div>
         `);
             }
+            else {
+                // Render the line2 property value
+                const text = this.getTextFromProperty(person, this.line2Property);
+                if (text) {
+                    details.push(html `
+            <div class="line2" @click=${() => this.handleLine2Clicked()} aria-label="${text}">${text}</div>
+          `);
+                }
+            }
         }
         if (this.view > PersonViewType.twolines) {
-            const text = this.getTextFromProperty(person, this.line3Property);
-            if (text) {
+            if (this.hasTemplate('line3')) {
+                // Render the line3 template
+                const template = this.renderTemplate('line3', { person });
                 details.push(html `
-          <div class="line3" aria-label="${text}" @click=${() => this.handleLine3Clicked()}>${text}</div>
+          <div class="line3" @click=${() => this.handleLine3Clicked()}>${template}</div>
         `);
             }
+            else {
+                // Render the line3 property value
+                const text = this.getTextFromProperty(person, this.line3Property);
+                if (text) {
+                    details.push(html `
+            <div class="line3" @click=${() => this.handleLine3Clicked()} aria-label="${text}">${text}</div>
+          `);
+                }
+            }
         }
@@ -577,3 +659,4 @@ const detailsClasses = classMap({
             if (this.personDetails) {
-                if (!this.personDetails.personImage && (this.fetchImage && !this.personImage && !this._fetchedImage)) {
+                if (!this.personDetails.personImage &&
+                    (this.fetchImage && this._avatarType === 'photo' && !this.personImage && !this._fetchedImage)) {
                     const image = yield getPersonImage(graph, this.personDetails, MgtPerson_1.config.useContactApis);
@@ -588,3 +671,14 @@ if (image) {
                 // Use userId or 'me' query to get the person and image
-                const person = yield getUserWithPhoto(graph, this.userId);
+                let person;
+                if (this._avatarType === 'photo') {
+                    person = yield getUserWithPhoto(graph, this.userId);
+                }
+                else {
+                    if (this.personQuery === 'me') {
+                        person = yield getMe(graph);
+                    }
+                    else {
+                        person = yield getUser(graph, this.userId);
+                    }
+                }
                 this.personDetails = person;
@@ -803,2 +897,10 @@ this._fetchedImage = this.getImage();
     property({
+        attribute: 'fallback-details',
+        type: Object
+    }),
+    __metadata("design:type", Object),
+    __metadata("design:paramtypes", [Object])
+], MgtPerson.prototype, "fallbackDetails", null);
+__decorate([
+    property({
         attribute: 'user-id'
@@ -848,2 +950,18 @@ }),
     property({
+        attribute: 'avatar-type',
+        converter: value => {
+            value = value.toLowerCase();
+            if (value === 'initials') {
+                return avatarType.initials;
+            }
+            else {
+                return avatarType.photo;
+            }
+        }
+    }),
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], MgtPerson.prototype, "avatarType", null);
+__decorate([
+    property({
         attribute: 'person-presence',
@@ -850,0 +968,0 @@ type: Object

dist/es6/components/mgt-tasks/mgt-tasks.d.ts

@@ -272,2 +272,3 @@ /**
     attributeChangedCallback(name: string, oldVal: string, newVal: string): void;
+    protected clearState(): void;
     /**
@@ -274,0 +275,0 @@ * Invoked when the element is first updated. Implement to perform one time

dist/es6/components/mgt-tasks/mgt-tasks.js

@@ -148,11 +148,3 @@ /**
         this._me = null;
-        this._newTaskName = '';
-        this._newTaskDueDate = null;
-        this._newTaskGroupId = '';
-        this._newTaskFolderId = '';
-        this._groups = [];
-        this._folders = [];
-        this._tasks = [];
-        this._hiddenTasks = [];
-        this._loadingTasks = [];
+        this.clearState();
         this.previousMediaQuery = this.mediaQuery;
@@ -245,16 +237,21 @@ this.onResize = this.onResize.bind(this);
             }
-            this._newTaskFolderId = '';
-            this._newTaskGroupId = '';
-            this._newTaskDueDate = null;
-            this._newTaskName = '';
-            this._newTaskBeingAdded = false;
-            this._tasks = [];
-            this._folders = [];
-            this._groups = [];
-            this._hasDoneInitialLoad = false;
-            this._inTaskLoad = false;
-            this._todoDefaultSet = false;
+            this.clearState();
             this.requestStateUpdate();
         }
     }
+    clearState() {
+        this._newTaskFolderId = '';
+        this._newTaskGroupId = '';
+        this._newTaskDueDate = null;
+        this._newTaskName = '';
+        this._newTaskBeingAdded = false;
+        this._tasks = [];
+        this._folders = [];
+        this._groups = [];
+        this._hiddenTasks = [];
+        this._loadingTasks = [];
+        this._hasDoneInitialLoad = false;
+        this._inTaskLoad = false;
+        this._todoDefaultSet = false;
+    }
     /**
@@ -261,0 +258,0 @@ * Invoked when the element is first updated. Implement to perform one time

dist/es6/components/mgt-todo/mgt-todo.js

@@ -373,3 +373,3 @@ /**
                 taskData['dueDateTime'] = {
-                    dateTime: this._newTaskDueDate.toISOString(),
+                    dateTime: this._newTaskDueDate.toLocaleDateString(),
                     timeZone: 'UTC'
@@ -376,0 +376,0 @@ };

package.json

 {
   "name": "@microsoft/mgt-components",
-  "version": "2.1.0-preview.f66db69",
+  "version": "2.2.0-preview.3bf867f",
   "description": "The Microsoft Graph Toolkit Components",
@@ -39,3 +39,3 @@ "keywords": [
   "dependencies": {
-    "@microsoft/mgt-element": "2.1.0-preview.f66db69",
+    "@microsoft/mgt-element": "2.2.0-preview.3bf867f",
     "@microsoft/microsoft-graph-client": "^2.2.1",
@@ -42,0 +42,0 @@ "@microsoft/microsoft-graph-types": "^1.27.0",

src/components/mgt-person-card/sections/BasePersonCardSection.ts

@@ -116,4 +116,6 @@ /**
    */
-  // tslint:disable-next-line:no-empty
-  public clearState(): void {}
+  public clearState(): void {
+    this._isCompact = false;
+    this._personDetails = null;
+  }
 
@@ -120,0 +122,0 @@ /**

src/components/mgt-person-card/sections/mgt-person-card-contact/mgt-person-card-contact.ts

@@ -168,2 +168,3 @@ /**
   public clearState() {
+    super.clearState();
     for (const key of Object.keys(this._contactParts)) {
@@ -170,0 +171,0 @@ this._contactParts[key].value = null;

src/components/mgt-person-card/sections/mgt-person-card-files/mgt-person-card-files.ts

@@ -62,3 +62,6 @@ /**
    */
-  public clearState(): void {}
+  public clearState(): void {
+    super.clearState();
+    this._files = null;
+  }
 
@@ -65,0 +68,0 @@ /**

src/components/mgt-person-card/sections/mgt-person-card-messages/mgt-person-card-messages.ts

@@ -63,2 +63,3 @@ /**
   public clearState(): void {
+    super.clearState();
     this._messages = [];
@@ -65,0 +66,0 @@ }

src/components/mgt-person-card/sections/mgt-person-card-organization/mgt-person-card-organization.ts

@@ -56,2 +56,14 @@ /**
   /**
+   * Reset any state in the section
+   *
+   * @protected
+   * @memberof MgtPersonCardMessages
+   */
+  public clearState(): void {
+    super.clearState();
+    this._state = null;
+    this._me = null;
+  }
+
+  /**
    * The name for display in the overview section.
@@ -58,0 +70,0 @@ *

src/components/mgt-person-card/sections/mgt-person-card-profile/mgt-person-card-profile.ts

@@ -125,2 +125,3 @@ /**
   public clearState(): void {
+    super.clearState();
     this.profile = null;
@@ -127,0 +128,0 @@ }

src/components/mgt-person/mgt-person.ts

@@ -15,3 +15,3 @@ /**
 import { getUserWithPhoto } from '../../graph/graph.userWithPhoto';
-import { findUsers } from '../../graph/graph.user';
+import { findUsers, getMe, getUser } from '../../graph/graph.user';
 import { AvatarSize, IDynamicPerson } from '../../graph/types';
@@ -58,2 +58,14 @@ import { Providers, ProviderState, MgtTemplatedComponent } from '@microsoft/mgt-element';
 
+export enum avatarType {
+  /**
+   * Renders avatar photo if available, falls back to initials
+   */
+  photo = 'photo',
+
+  /**
+   * Forces render avatar initials
+   */
+  initials = 'initials'
+}
+
 /**
@@ -151,2 +163,32 @@ * Configuration object for the Person component
   /**
+   * Fallback when no user is found
+   * @type {IDynamicPerson}
+   */
+  @property({
+    attribute: 'fallback-details',
+    type: Object
+  })
+  public get fallbackDetails(): IDynamicPerson {
+    return this._fallbackDetails;
+  }
+  public set fallbackDetails(value: IDynamicPerson) {
+    if (value === this._fallbackDetails) {
+      return;
+    }
+
+    this._fallbackDetails = value;
+
+    if (this.personDetails) {
+      return;
+    }
+
+    if (value && value.displayName) {
+      this._personAvatarBg = this.getColorFromName(value.displayName);
+    } else {
+      this._personAvatarBg = 'gray20';
+    }
+    this.requestStateUpdate();
+  }
+
+  /**
    * user-id property allows developer to use id value to determine person
@@ -261,2 +303,33 @@ * @type {string}
   /**
+   * Determines and sets person avatar
+   *
+   *
+   * @type {string}
+   * @memberof MgtPerson
+   */
+  @property({
+    attribute: 'avatar-type',
+    converter: value => {
+      value = value.toLowerCase();
+
+      if (value === 'initials') {
+        return avatarType.initials;
+      } else {
+        return avatarType.photo;
+      }
+    }
+  })
+  public get avatarType(): string {
+    return this._avatarType;
+  }
+  public set avatarType(value: string) {
+    if (value === this._avatarType) {
+      return;
+    }
+
+    this._avatarType = value;
+    this.requestStateUpdate();
+  }
+
+  /**
    * Gets or sets presence of person
@@ -372,2 +445,3 @@ *
   private _personDetails: IDynamicPerson;
+  private _fallbackDetails: IDynamicPerson;
   private _personAvatarBg: string;
@@ -378,2 +452,3 @@ private _personImage: string;
   private _userId: string;
+  private _avatarType: string;
 
@@ -394,2 +469,3 @@ private _mouseLeaveTimeout;
     this._isInvalidImageSrc = false;
+    this._avatarType = 'photo';
   }
@@ -404,3 +480,3 @@
     // Loading
-    if (this.isLoadingState && !this.personDetails) {
+    if (this.isLoadingState && !this.personDetails && !this.fallbackDetails) {
       return this.renderLoading();
@@ -410,3 +486,3 @@ }
     // Prep data
-    const person = this.personDetails;
+    const person = this.personDetails || this.fallbackDetails;
     const image = this.getImage();
@@ -501,4 +577,3 @@ const presence = this.personPresence || this._fetchedPresence;
         : '';
-
-    if (imageSrc && !this._isInvalidImageSrc) {
+    if (imageSrc && !this._isInvalidImageSrc && this._avatarType === 'photo') {
       return html`
@@ -638,8 +713,8 @@ <div class="img-wrapper">
     const title =
-      this.personDetails && this.personCardInteraction === PersonCardInteraction.none
-        ? this.personDetails.displayName || getEmailFromGraphEntity(this.personDetails) || ''
+      personDetails && this.personCardInteraction === PersonCardInteraction.none
+        ? personDetails.displayName || getEmailFromGraphEntity(personDetails) || ''
         : '';
 
     const imageClasses = {
-      initials: !image || this._isInvalidImageSrc,
+      initials: !image || this._isInvalidImageSrc || this._avatarType === 'initials',
       small: !this.isLargeAvatar(),
@@ -649,3 +724,3 @@ 'user-avatar': true
 
-    if ((!image || this._isInvalidImageSrc) && this.personDetails) {
+    if ((!image || this._isInvalidImageSrc || this._avatarType === 'initials') && personDetails) {
       // add avatar background color
@@ -694,7 +769,16 @@ imageClasses[this._personAvatarBg] = true;
     if (this.view > PersonViewType.avatar) {
-      const text = this.getTextFromProperty(person, this.line1Property);
-      if (text) {
+      if (this.hasTemplate('line1')) {
+        // Render the line1 template
+        const template = this.renderTemplate('line1', { person });
         details.push(html`
-          <div class="line1" aria-label="${text}" @click=${() => this.handleLine1Clicked()}>${text}</div>
+          <div class="line1" @click=${() => this.handleLine1Clicked()}>${template}</div>
         `);
+      } else {
+        // Render the line1 property value
+        const text = this.getTextFromProperty(person, this.line1Property);
+        if (text) {
+          details.push(html`
+            <div class="line1" @click=${() => this.handleLine1Clicked()} aria-label="${text}">${text}</div>
+          `);
+        }
       }
@@ -704,7 +788,16 @@ }
     if (this.view > PersonViewType.oneline) {
-      const text = this.getTextFromProperty(person, this.line2Property);
-      if (text) {
+      if (this.hasTemplate('line2')) {
+        // Render the line2 template
+        const template = this.renderTemplate('line2', { person });
         details.push(html`
-          <div class="line2" aria-label="${text}" @click=${() => this.handleLine2Clicked()}>${text}</div>
+          <div class="line2" @click=${() => this.handleLine2Clicked()}>${template}</div>
         `);
+      } else {
+        // Render the line2 property value
+        const text = this.getTextFromProperty(person, this.line2Property);
+        if (text) {
+          details.push(html`
+            <div class="line2" @click=${() => this.handleLine2Clicked()} aria-label="${text}">${text}</div>
+          `);
+        }
       }
@@ -714,7 +807,16 @@ }
     if (this.view > PersonViewType.twolines) {
-      const text = this.getTextFromProperty(person, this.line3Property);
-      if (text) {
+      if (this.hasTemplate('line3')) {
+        // Render the line3 template
+        const template = this.renderTemplate('line3', { person });
         details.push(html`
-          <div class="line3" aria-label="${text}" @click=${() => this.handleLine3Clicked()}>${text}</div>
+          <div class="line3" @click=${() => this.handleLine3Clicked()}>${template}</div>
         `);
+      } else {
+        // Render the line3 property value
+        const text = this.getTextFromProperty(person, this.line3Property);
+        if (text) {
+          details.push(html`
+            <div class="line3" @click=${() => this.handleLine3Clicked()} aria-label="${text}">${text}</div>
+          `);
+        }
       }
@@ -805,3 +907,6 @@ }
     if (this.personDetails) {
-      if (!this.personDetails.personImage && (this.fetchImage && !this.personImage && !this._fetchedImage)) {
+      if (
+        !this.personDetails.personImage &&
+        (this.fetchImage && this._avatarType === 'photo' && !this.personImage && !this._fetchedImage)
+      ) {
         const image = await getPersonImage(graph, this.personDetails, MgtPerson.config.useContactApis);
@@ -815,4 +920,12 @@ if (image) {
       // Use userId or 'me' query to get the person and image
-      const person = await getUserWithPhoto(graph, this.userId);
-
+      let person;
+      if (this._avatarType === 'photo') {
+        person = await getUserWithPhoto(graph, this.userId);
+      } else {
+        if (this.personQuery === 'me') {
+          person = await getMe(graph);
+        } else {
+          person = await getUser(graph, this.userId);
+        }
+      }
       this.personDetails = person;
@@ -819,0 +932,0 @@ this._fetchedImage = this.getImage();

src/components/mgt-tasks/mgt-tasks.ts

@@ -345,11 +345,3 @@ /**
     super();
-    this._newTaskName = '';
-    this._newTaskDueDate = null;
-    this._newTaskGroupId = '';
-    this._newTaskFolderId = '';
-    this._groups = [];
-    this._folders = [];
-    this._tasks = [];
-    this._hiddenTasks = [];
-    this._loadingTasks = [];
+    this.clearState();
 
@@ -399,18 +391,23 @@ this.previousMediaQuery = this.mediaQuery;
 
-      this._newTaskFolderId = '';
-      this._newTaskGroupId = '';
-      this._newTaskDueDate = null;
-      this._newTaskName = '';
-      this._newTaskBeingAdded = false;
+      this.clearState();
+      this.requestStateUpdate();
+    }
+  }
 
-      this._tasks = [];
-      this._folders = [];
-      this._groups = [];
+  protected clearState(): void {
+    this._newTaskFolderId = '';
+    this._newTaskGroupId = '';
+    this._newTaskDueDate = null;
+    this._newTaskName = '';
+    this._newTaskBeingAdded = false;
 
-      this._hasDoneInitialLoad = false;
-      this._inTaskLoad = false;
-      this._todoDefaultSet = false;
+    this._tasks = [];
+    this._folders = [];
+    this._groups = [];
+    this._hiddenTasks = [];
+    this._loadingTasks = [];
 
-      this.requestStateUpdate();
-    }
+    this._hasDoneInitialLoad = false;
+    this._inTaskLoad = false;
+    this._todoDefaultSet = false;
   }
@@ -417,0 +414,0 @@

src/components/mgt-todo/mgt-todo.ts

@@ -424,3 +424,3 @@ /**
       taskData['dueDateTime'] = {
-        dateTime: this._newTaskDueDate.toISOString(),
+        dateTime: this._newTaskDueDate.toLocaleDateString(),
         timeZone: 'UTC'
@@ -427,0 +427,0 @@ };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3029262

increased by0.58%

Lines of code

33724

increased by0.87%

Dependency changes

• + Added@microsoft/mgt-element@2.2.0-preview.3bf867f(transitive)

• - Removed@microsoft/mgt-element@2.1.0-preview.f66db69(transitive)

• Updated@microsoft/mgt-element@2.2.0-preview.3bf867f