@microsoft/mgt-components - npm Package Compare versions

Comparing version 2.1.0-preview.234adee to 2.1.0-preview.30e4008

dist/es6/components/mgt-people-picker/mgt-people-picker.d.ts

@@ -127,2 +127,9 @@ /**
     /**
+     * Determines whether component should be disabled or not
+     *
+     * @type {boolean}
+     * @memberof MgtPeoplePicker
+     */
+    disabled: boolean;
+    /**
      * Determines whether component allows multiple or single selection of people
@@ -129,0 +136,0 @@ *

dist/es6/components/mgt-people-picker/mgt-people-picker.js

@@ -83,2 +83,3 @@ /**
         this.selectedPeople = [];
+        this.disabled = false;
     }
@@ -270,2 +271,3 @@ /**
           @click=${this.handleFlyout}
+          ?disabled=${this.disabled}
         />
@@ -915,2 +917,9 @@ </div>
     property({
+        attribute: 'disabled',
+        type: Boolean
+    }),
+    __metadata("design:type", Boolean)
+], MgtPeoplePicker.prototype, "disabled", void 0);
+__decorate([
+    property({
         attribute: 'selection-mode',
@@ -917,0 +926,0 @@ type: String

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

@@ -84,3 +84,4 @@ /**
      */
-    userId: string;
+    get userId(): string;
+    set userId(value: string);
     /**
@@ -145,2 +146,3 @@ * Set the image of the person
     private _me;
+    private _userId;
     private get internalPersonDetails();
@@ -147,0 +149,0 @@ constructor();

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

@@ -153,2 +153,18 @@ /**
     }
+    /**
+     * user-id property allows developer to use id value for component
+     * @type {string}
+     */
+    get userId() {
+        return this._userId;
+    }
+    set userId(value) {
+        if (value === this._userId) {
+            return;
+        }
+        this._userId = value;
+        this.personDetails = null;
+        this.state = null;
+        this.requestStateUpdate();
+    }
     get internalPersonDetails() {
@@ -172,4 +188,4 @@ return (this.state && this.state.person) || this.personDetails;
             case 'person-query':
-            case 'user-id':
                 this.personDetails = null;
+                this.state = null;
                 this.requestStateUpdate();
@@ -811,4 +827,5 @@ break;
     }),
-    __metadata("design:type", String)
-], MgtPersonCard.prototype, "userId", void 0);
+    __metadata("design:type", String),
+    __metadata("design:paramtypes", [String])
+], MgtPersonCard.prototype, "userId", null);
 __decorate([
@@ -815,0 +832,0 @@ property({

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"
+}
 /**
@@ -63,2 +73,6 @@ * Configuration object for the Person component
  *
+ * @fires line1clicked - Fired when line1 is clicked
+ * @fires line2clicked - Fired when line2 is clicked
+ * @fires line3clicked - Fired when line3 is clicked
+ *
  * @cssprop --avatar-size - {Length} Avatar size
@@ -108,2 +122,8 @@ * @cssprop --avatar-border - {String} Avatar border
     /**
+     * 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
@@ -148,2 +168,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
@@ -209,2 +238,3 @@ *
     private _personDetails;
+    private _fallbackDetails;
     private _personAvatarBg;
@@ -215,2 +245,3 @@ private _personImage;
     private _userId;
+    private _avatarType;
     private _mouseLeaveTimeout;
@@ -268,2 +299,5 @@ private _mouseEnterTimeout;
     protected renderAvatar(personDetails: IDynamicPerson, image: string, presence: Presence): TemplateResult;
+    private handleLine1Clicked;
+    private handleLine2Clicked;
+    private handleLine3Clicked;
     /**
@@ -270,0 +304,0 @@ * Render the details part of the person template.

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 = {}));
 /**
@@ -74,2 +85,6 @@ * The person component is used to display a person or contact by using their photo, name, and/or email address.
  *
+ * @fires line1clicked - Fired when line1 is clicked
+ * @fires line2clicked - Fired when line2 is clicked
+ * @fires line3clicked - Fired when line3 is clicked
+ *
  * @cssprop --avatar-size - {Length} Avatar size
@@ -108,2 +123,3 @@ * @cssprop --avatar-border - {String} Avatar border
         this._isInvalidImageSrc = false;
+        this._avatarType = 'photo';
     }
@@ -133,2 +149,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
@@ -190,2 +229,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
@@ -224,7 +280,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();
@@ -307,3 +363,3 @@ const presence = this.personPresence || this._fetchedPresence;
             : '';
-        if (imageSrc && !this._isInvalidImageSrc) {
+        if (imageSrc && !this._isInvalidImageSrc && this._avatarType === 'photo') {
             return html `
@@ -437,11 +493,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
@@ -458,2 +514,11 @@ imageClasses[this._personAvatarBg] = true;
     }
+    handleLine1Clicked() {
+        this.fireCustomEvent('line1clicked', this.personDetails);
+    }
+    handleLine2Clicked() {
+        this.fireCustomEvent('line2clicked', this.personDetails);
+    }
+    handleLine3Clicked() {
+        this.fireCustomEvent('line3clicked', this.personDetails);
+    }
     /**
@@ -477,3 +542,3 @@ * Render the details part of the person template.
                 details.push(html `
-          <div class="line1" aria-label="${text}">${text}</div>
+          <div class="line1" @click=${() => this.handleLine1Clicked()} aria-label="${text}">${text}</div>
         `);
@@ -486,3 +551,3 @@ }
                 details.push(html `
-          <div class="line2" aria-label="${text}">${text}</div>
+          <div class="line2" @click=${() => this.handleLine2Clicked()} aria-label="${text}">${text}</div>
         `);
@@ -495,3 +560,3 @@ }
                 details.push(html `
-          <div class="line3" aria-label="${text}">${text}</div>
+          <div class="line3" @click=${() => this.handleLine3Clicked()} aria-label="${text}">${text}</div>
         `);
@@ -568,3 +633,4 @@ }
             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);
@@ -579,3 +645,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;
@@ -794,2 +871,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'
@@ -839,2 +924,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',
@@ -841,0 +942,0 @@ type: Object

package.json

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

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

@@ -264,2 +264,14 @@ /**
   /**
+   * Determines whether component should be disabled or not
+   *
+   * @type {boolean}
+   * @memberof MgtPeoplePicker
+   */
+  @property({
+    attribute: 'disabled',
+    type: Boolean
+  })
+  public disabled: boolean;
+
+  /**
    * Determines whether component allows multiple or single selection of people
@@ -299,3 +311,2 @@ *
   private _debouncedSearch: { (): void; (): void };
-
   private defaultSelectedUsers: IDynamicPerson[];
@@ -315,2 +326,3 @@
     this.selectedPeople = [];
+    this.disabled = false;
   }
@@ -440,2 +452,3 @@
           @click=${this.handleFlyout}
+          ?disabled=${this.disabled}
         />
@@ -442,0 +455,0 @@ </div>

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

@@ -192,3 +192,14 @@ /**
   })
-  public userId: string;
+  public get userId(): string {
+    return this._userId;
+  }
+  public set userId(value: string) {
+    if (value === this._userId) {
+      return;
+    }
+    this._userId = value;
+    this.personDetails = null;
+    this.state = null;
+    this.requestStateUpdate();
+  }
 
@@ -287,2 +298,4 @@ /**
 
+  private _userId: string;
+
   private get internalPersonDetails(): IDynamicPerson {
@@ -317,4 +330,4 @@ return (this.state && this.state.person) || this.personDetails;
       case 'person-query':
-      case 'user-id':
         this.personDetails = null;
+        this.state = null;
         this.requestStateUpdate();
@@ -321,0 +334,0 @@ break;

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'
+}
+
 /**
@@ -82,2 +94,6 @@ * Configuration object for the Person component
  *
+ * @fires line1clicked - Fired when line1 is clicked
+ * @fires line2clicked - Fired when line2 is clicked
+ * @fires line3clicked - Fired when line3 is clicked
+ *
  * @cssprop --avatar-size - {Length} Avatar size
@@ -148,2 +164,32 @@ * @cssprop --avatar-border - {String} Avatar border
   /**
+   * 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
@@ -258,2 +304,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
@@ -369,2 +446,3 @@ *
   private _personDetails: IDynamicPerson;
+  private _fallbackDetails: IDynamicPerson;
   private _personAvatarBg: string;
@@ -375,2 +453,3 @@ private _personImage: string;
   private _userId: string;
+  private _avatarType: string;
 
@@ -391,2 +470,3 @@ private _mouseLeaveTimeout;
     this._isInvalidImageSrc = false;
+    this._avatarType = 'photo';
   }
@@ -401,3 +481,3 @@
     // Loading
-    if (this.isLoadingState && !this.personDetails) {
+    if (this.isLoadingState && !this.personDetails && !this.fallbackDetails) {
       return this.renderLoading();
@@ -407,3 +487,3 @@ }
     // Prep data
-    const person = this.personDetails;
+    const person = this.personDetails || this.fallbackDetails;
     const image = this.getImage();
@@ -498,4 +578,3 @@ const presence = this.personPresence || this._fetchedPresence;
         : '';
-
-    if (imageSrc && !this._isInvalidImageSrc) {
+    if (imageSrc && !this._isInvalidImageSrc && this._avatarType === 'photo') {
       return html`
@@ -635,8 +714,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(),
@@ -646,3 +725,3 @@ 'user-avatar': true
 
-    if ((!image || this._isInvalidImageSrc) && this.personDetails) {
+    if ((!image || this._isInvalidImageSrc || this._avatarType === 'initials') && personDetails) {
       // add avatar background color
@@ -662,2 +741,14 @@ imageClasses[this._personAvatarBg] = true;
 
+  private handleLine1Clicked() {
+    this.fireCustomEvent('line1clicked', this.personDetails);
+  }
+
+  private handleLine2Clicked() {
+    this.fireCustomEvent('line2clicked', this.personDetails);
+  }
+
+  private handleLine3Clicked() {
+    this.fireCustomEvent('line3clicked', this.personDetails);
+  }
+
   /**
@@ -683,3 +774,3 @@ * Render the details part of the person template.
         details.push(html`
-          <div class="line1" aria-label="${text}">${text}</div>
+          <div class="line1" @click=${() => this.handleLine1Clicked()} aria-label="${text}">${text}</div>
         `);
@@ -693,3 +784,3 @@ }
         details.push(html`
-          <div class="line2" aria-label="${text}">${text}</div>
+          <div class="line2" @click=${() => this.handleLine2Clicked()} aria-label="${text}">${text}</div>
         `);
@@ -703,3 +794,3 @@ }
         details.push(html`
-          <div class="line3" aria-label="${text}">${text}</div>
+          <div class="line3" @click=${() => this.handleLine3Clicked()} aria-label="${text}">${text}</div>
         `);
@@ -791,3 +882,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);
@@ -801,4 +895,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;
@@ -805,0 +907,0 @@ this._fetchedImage = this.getImage();

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

3023908

increased by0.83%

Lines of code

33627

increased by0.86%

Dependency changes

• + Added@microsoft/mgt-element@2.1.0-preview.30e4008(transitive)

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

• Updated@microsoft/mgt-element@2.1.0-preview.30e4008